Render the message form via VDOMView
This commit is contained in:
parent
4e077aac08
commit
d5348ea899
@ -263,6 +263,79 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
_converse.ChatBoxMessageForm = Backbone.VDOMView.extend({
|
||||||
|
className: 'message-form-container',
|
||||||
|
events: {
|
||||||
|
'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage',
|
||||||
|
},
|
||||||
|
|
||||||
|
toHTML () {
|
||||||
|
let placeholder;
|
||||||
|
if (this.model.get('sending_spoiler')) {
|
||||||
|
placeholder = __('Spoiler message');
|
||||||
|
} else {
|
||||||
|
placeholder = __('Personal message');
|
||||||
|
}
|
||||||
|
return tpl_chatbox_message_form(
|
||||||
|
_.extend(this.model.toJSON(), {
|
||||||
|
'allow_spoiler_messages': _converse.allow_spoiler_messages,
|
||||||
|
'label_personal_message': placeholder,
|
||||||
|
'label_spoiler_hint': __('Optional spoiler hint'),
|
||||||
|
'label_send': __('Send'),
|
||||||
|
'show_send_button': _converse.show_send_button,
|
||||||
|
'show_textarea': true,
|
||||||
|
'show_toolbar': _converse.show_toolbar
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
renderToolbar (toolbar, options) {
|
||||||
|
if (!_converse.show_toolbar) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
toolbar = toolbar || tpl_toolbar;
|
||||||
|
options = _.assign(
|
||||||
|
this.model.toJSON(),
|
||||||
|
this.getToolbarOptions(options || {})
|
||||||
|
);
|
||||||
|
this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
afterRender () {
|
||||||
|
this.renderToolbar();
|
||||||
|
},
|
||||||
|
|
||||||
|
getToolbarOptions (options) {
|
||||||
|
return _.extend(options || {}, {
|
||||||
|
'allow_spoiler_messages': _converse.allow_spoiler_messages,
|
||||||
|
'label_clear': __('Clear all messages'),
|
||||||
|
'label_insert_smiley': __('Insert a smiley'),
|
||||||
|
'label_start_call': __('Start a call'),
|
||||||
|
'show_call_button': _converse.visible_toolbar_buttons.call,
|
||||||
|
'show_clear_button': _converse.visible_toolbar_buttons.clear,
|
||||||
|
'use_emoji': _converse.visible_toolbar_buttons.emoji,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleEditSpoilerMessage () {
|
||||||
|
const { __ } = _converse,
|
||||||
|
text_area = this.el.querySelector('.chat-textarea'),
|
||||||
|
spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
|
||||||
|
let spoiler_title;
|
||||||
|
if (this.model.get('sending_spoiler')) {
|
||||||
|
this.model.set('sending_spoiler', false);
|
||||||
|
spoiler_title = __('Click to write your message as a spoiler');
|
||||||
|
} else {
|
||||||
|
this.model.set('sending_spoiler', true);
|
||||||
|
spoiler_title = __('Click to write as a normal (non-spoiler) message');
|
||||||
|
}
|
||||||
|
spoiler_button.outerHTML = tpl_spoiler_button(_.extend(
|
||||||
|
this.model.toJSON(), {'title': spoiler_title})
|
||||||
|
)
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
_converse.ChatBoxView = Backbone.NativeView.extend({
|
_converse.ChatBoxView = Backbone.NativeView.extend({
|
||||||
length: 200,
|
length: 200,
|
||||||
className: 'chatbox hidden',
|
className: 'chatbox hidden',
|
||||||
@ -277,7 +350,6 @@
|
|||||||
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
|
||||||
'click .toggle-smiley': 'toggleEmojiMenu',
|
'click .toggle-smiley': 'toggleEmojiMenu',
|
||||||
'click .toggle-spoiler-display': 'toggleSpoilerMessage',
|
'click .toggle-spoiler-display': 'toggleSpoilerMessage',
|
||||||
'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage',
|
|
||||||
'keypress .chat-textarea': 'keyPressed'
|
'keypress .chat-textarea': 'keyPressed'
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -313,24 +385,14 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
renderMessageForm () {
|
renderMessageForm () {
|
||||||
const div = this.el.querySelector('.message-form-container');
|
this.message_form_view = new _converse.ChatBoxMessageForm({
|
||||||
let placeholder;
|
'model': new Backbone.Model()
|
||||||
if (this.model.get('sending_spoiler')) {
|
});
|
||||||
placeholder = __('Spoiler message');
|
this.message_form_view.render();
|
||||||
} else {
|
this.content.insertAdjacentElement(
|
||||||
placeholder = __('Personal message');
|
'afterEnd',
|
||||||
}
|
this.message_form_view.el
|
||||||
div.innerHTML = tpl_chatbox_message_form(
|
);
|
||||||
_.extend(this.model.toJSON(), {
|
|
||||||
'allow_spoiler_messages': _converse.allow_spoiler_messages,
|
|
||||||
'label_personal_message': placeholder,
|
|
||||||
'label_spoiler_hint': __('Optional spoiler hint'),
|
|
||||||
'label_send': __('Send'),
|
|
||||||
'show_send_button': _converse.show_send_button,
|
|
||||||
'show_textarea': true,
|
|
||||||
'show_toolbar': _converse.show_toolbar
|
|
||||||
}));
|
|
||||||
this.renderToolbar();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
insertHeading () {
|
insertHeading () {
|
||||||
@ -721,7 +783,7 @@
|
|||||||
}).c('body').t(message.get('message')).up()
|
}).c('body').t(message.get('message')).up()
|
||||||
.c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up();
|
.c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up();
|
||||||
|
|
||||||
if (this.model.get('sending_spoiler')) {
|
if (this.message_form_view.model.get('sending_spoiler')) {
|
||||||
const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
|
const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
|
||||||
if (has_hint) {
|
if (has_hint) {
|
||||||
const hint = document.querySelector('.chat-textarea-hint').value;
|
const hint = document.querySelector('.chat-textarea-hint').value;
|
||||||
@ -796,7 +858,7 @@
|
|||||||
* passed to Backbone.Message's constructor.
|
* passed to Backbone.Message's constructor.
|
||||||
*/
|
*/
|
||||||
const fullname = _converse.xmppstatus.get('fullname'),
|
const fullname = _converse.xmppstatus.get('fullname'),
|
||||||
is_spoiler = this.model.get('sending_spoiler'),
|
is_spoiler = this.message_form_view.model.get('sending_spoiler'),
|
||||||
attrs = {
|
attrs = {
|
||||||
'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
|
'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
|
||||||
'sender': 'me',
|
'sender': 'me',
|
||||||
@ -980,31 +1042,6 @@
|
|||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
getToolbarOptions (options) {
|
|
||||||
return _.extend(options || {}, {
|
|
||||||
'allow_spoiler_messages': _converse.allow_spoiler_messages,
|
|
||||||
'label_clear': __('Clear all messages'),
|
|
||||||
'label_insert_smiley': __('Insert a smiley'),
|
|
||||||
'label_start_call': __('Start a call'),
|
|
||||||
'show_call_button': _converse.visible_toolbar_buttons.call,
|
|
||||||
'show_clear_button': _converse.visible_toolbar_buttons.clear,
|
|
||||||
'use_emoji': _converse.visible_toolbar_buttons.emoji,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
renderToolbar (toolbar, options) {
|
|
||||||
if (!_converse.show_toolbar) {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
toolbar = toolbar || tpl_toolbar;
|
|
||||||
options = _.assign(
|
|
||||||
this.model.toJSON(),
|
|
||||||
this.getToolbarOptions(options || {})
|
|
||||||
);
|
|
||||||
this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
renderEmojiPicker () {
|
renderEmojiPicker () {
|
||||||
var toggle = this.el.querySelector('.toggle-smiley');
|
var toggle = this.el.querySelector('.toggle-smiley');
|
||||||
if (!_.isNull(toggle)) {
|
if (!_.isNull(toggle)) {
|
||||||
@ -1013,26 +1050,6 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleEditSpoilerMessage () {
|
|
||||||
const { _converse } = this.__super__,
|
|
||||||
{ __ } = _converse,
|
|
||||||
text_area = this.el.querySelector('.chat-textarea'),
|
|
||||||
spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
|
|
||||||
let spoiler_title;
|
|
||||||
if (this.model.get('sending_spoiler')) {
|
|
||||||
this.model.set('sending_spoiler', false);
|
|
||||||
spoiler_title = __('Click to write your message as a spoiler');
|
|
||||||
} else {
|
|
||||||
this.model.set('sending_spoiler', true);
|
|
||||||
spoiler_title = __('Click to write as a normal (non-spoiler) message');
|
|
||||||
}
|
|
||||||
spoiler_button.outerHTML = tpl_spoiler_button(_.extend(
|
|
||||||
this.model.toJSON(), {'title': spoiler_title})
|
|
||||||
)
|
|
||||||
this.renderMessageForm();
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
focus () {
|
focus () {
|
||||||
const textarea_el = this.el.querySelector('.chat-textarea');
|
const textarea_el = this.el.querySelector('.chat-textarea');
|
||||||
if (!_.isNull(textarea_el)) {
|
if (!_.isNull(textarea_el)) {
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="chat-body">
|
<div class="chat-body">
|
||||||
<div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
|
<div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
|
||||||
<div class="message-form-container"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
<div class="message-form-container">
|
||||||
<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
|
<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
|
||||||
<form class="sendXMPPMessage">
|
<form class="sendXMPPMessage">
|
||||||
{[ if (o.show_toolbar) { ]}
|
{[ if (o.show_toolbar) { ]}
|
||||||
@ -17,3 +18,4 @@
|
|||||||
<button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
|
<button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
|
||||||
{[ } ]}
|
{[ } ]}
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user