From d5348ea89906762777fb1f6fb17d46b676c242af Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 4 Feb 2018 19:31:02 +0100 Subject: [PATCH] Render the message form via VDOMView --- src/converse-chatview.js | 149 +++++++++++++----------- src/templates/chatbox.html | 1 - src/templates/chatbox_message_form.html | 2 + 3 files changed, 85 insertions(+), 67 deletions(-) diff --git a/src/converse-chatview.js b/src/converse-chatview.js index bef17965e..8db38ff83 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -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({ length: 200, className: 'chatbox hidden', @@ -277,7 +350,6 @@ 'click .toggle-smiley ul.emoji-picker li': 'insertEmoji', 'click .toggle-smiley': 'toggleEmojiMenu', 'click .toggle-spoiler-display': 'toggleSpoilerMessage', - 'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage', 'keypress .chat-textarea': 'keyPressed' }, @@ -313,24 +385,14 @@ }, renderMessageForm () { - const div = this.el.querySelector('.message-form-container'); - let placeholder; - if (this.model.get('sending_spoiler')) { - placeholder = __('Spoiler message'); - } else { - placeholder = __('Personal message'); - } - 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(); + this.message_form_view = new _converse.ChatBoxMessageForm({ + 'model': new Backbone.Model() + }); + this.message_form_view.render(); + this.content.insertAdjacentElement( + 'afterEnd', + this.message_form_view.el + ); }, insertHeading () { @@ -721,7 +783,7 @@ }).c('body').t(message.get('message')).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; if (has_hint) { const hint = document.querySelector('.chat-textarea-hint').value; @@ -796,7 +858,7 @@ * passed to Backbone.Message's constructor. */ const fullname = _converse.xmppstatus.get('fullname'), - is_spoiler = this.model.get('sending_spoiler'), + is_spoiler = this.message_form_view.model.get('sending_spoiler'), attrs = { 'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname, 'sender': 'me', @@ -980,31 +1042,6 @@ 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 () { var toggle = this.el.querySelector('.toggle-smiley'); 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 () { const textarea_el = this.el.querySelector('.chat-textarea'); if (!_.isNull(textarea_el)) { diff --git a/src/templates/chatbox.html b/src/templates/chatbox.html index 8708caba6..9d12b379c 100644 --- a/src/templates/chatbox.html +++ b/src/templates/chatbox.html @@ -1,6 +1,5 @@
-
diff --git a/src/templates/chatbox_message_form.html b/src/templates/chatbox_message_form.html index 2a60a0b6a..175f1be2b 100644 --- a/src/templates/chatbox_message_form.html +++ b/src/templates/chatbox_message_form.html @@ -1,3 +1,4 @@ +
{[ if (o.show_toolbar) { ]} @@ -17,3 +18,4 @@ {[ } ]}
+