Start moving code from the plugin to converse-chatview

src/converse-chatboxes.js

@@ -128,6 +128,9 @@
                      *      that contains the message stanza, if it was
                      *      contained, otherwise it's the message stanza itself.
                      */
+                    const { _converse } = this.__super__,
+                          { __ } = _converse;
+
                     delay = delay || message.querySelector('delay');
                     const type = message.getAttribute('type'),
                         body = this.getMessageBody(message);
@@ -155,7 +158,8 @@
                         sender = 'them';
                         fullname = this.get('fullname') || from;
                     }
-                    return {
+                    const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`);
+                    const attrs = {
                         'type': type,
                         'chat_state': chat_state,
                         'delayed': delayed,
@@ -163,8 +167,13 @@
                         'message': body || undefined,
                         'msgid': message.getAttribute('id'),
                         'sender': sender,
-                        'time': time
+                        'time': time,
+                        'is_spoiler': !_.isNull(spoiler)
                     };
+                    if (spoiler) {
+                        attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
+                    }
+                    return attrs;
                 },
 
                 createMessage (message, delay, original_stanza) {

src/converse-chatview.js

@@ -22,6 +22,7 @@
             "tpl!message",
             "tpl!new_day",
             "tpl!spinner",
+            "tpl!spoiler_button",
             "tpl!toolbar"
     ], factory);
 }(this, function (
@@ -39,6 +40,7 @@
             tpl_message,
             tpl_new_day,
             tpl_spinner,
+            tpl_spoiler_button,
             tpl_toolbar
     ) {
     "use strict";
@@ -268,13 +270,15 @@
 
                 events: {
                     'click .close-chatbox-button': 'close',
-                    'keypress .chat-textarea': 'keyPressed',
+                    'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .send-button': 'onFormSubmitted',
-                    'click .toggle-smiley': 'toggleEmojiMenu',
-                    'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
-                    'click .toggle-clear': 'clearMessages',
                     'click .toggle-call': 'toggleCall',
-                    'click .new-msgs-indicator': 'viewUnreadMessages'
+                    'click .toggle-clear': 'clearMessages',
+                    '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'
                 },
 
                 initialize () {
@@ -709,13 +713,24 @@
                 },
 
                 createMessageStanza (message) {
-                    return $msg({
-                                from: _converse.connection.jid,
-                                to: this.model.get('jid'),
-                                type: 'chat',
-                                id: message.get('msgid')
+                    const stanza = $msg({
+                            'from': _converse.connection.jid,
+                            'to': this.model.get('jid'),
+                            'type': 'chat',
+                            'id': message.get('msgid')
                         }).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')) {
+                        const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
+                        if (has_hint) {
+                            const hint = document.querySelector('.chat-textarea-hint').value;
+                            stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
+                        } else {
+                            stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
+                        }
+                    }
+                    return stanza;
                 },
 
                 sendMessage (message) {
@@ -780,13 +795,20 @@
                     /* Overridable method which returns the attributes to be
                      * passed to Backbone.Message's constructor.
                      */
-                    const fullname = _converse.xmppstatus.get('fullname');
-                    return {
-                        'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
-                        'sender': 'me',
-                        'time': moment().format(),
-                        'message': emojione.shortnameToUnicode(text)
+                    const fullname = _converse.xmppstatus.get('fullname'),
+                        is_spoiler = this.model.get('sending_spoiler'),
+                        attrs = {
+                            'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
+                            'sender': 'me',
+                            'time': moment().format(),
+                            'message': emojione.shortnameToUnicode(text),
+                            'is_spoiler': is_spoiler
+                        };
+                    if (is_spoiler) {
+                        const spoiler = this.el.querySelector('.chat-textarea-hint')
+                        attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
                     }
+                    return attrs;
                 },
 
                 sendChatState () {
@@ -960,6 +982,7 @@
 
                 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'),
@@ -979,7 +1002,6 @@
                         this.getToolbarOptions(options || {})
                     );
                     this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
-
                     return this;
                 },
 
@@ -991,6 +1013,26 @@
                     }
                 },
 
+                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)) {

src/converse-spoilers.js

@@ -1,10 +1,9 @@
 (function (root, factory) {
     define([
         "converse-core",
-        "tpl!spoiler_button",
         "converse-chatview"
     ], factory);
-}(this, function (converse, tpl_spoiler_button) {
+}(this, function (converse) {
 
     const { _, Strophe } = converse.env;
     const u = converse.env.utils;
@@ -38,42 +37,6 @@
 
             'ChatBoxView': {
 
-                'events': {
-                    'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage',
-                    'click .toggle-spoiler-display': 'toggleSpoilerMessage'
-                },
-
-                addSpoilerToolbarButton () {
-                    const toolbar_el = this.el.querySelector('.chat-toolbar');
-                    if (!_.isNull(toolbar_el)) {
-                        toolbar_el.insertAdjacentHTML(
-                            'beforeend',
-                            tpl_spoiler_button(_.extend(
-                                this.model.toJSON(), {
-                                'title': this.__super__._converse.__('Click here to write a message as a spoiler')
-                            }))
-                        );
-                    }
-                },
-
-                renderToolbar (toolbar, options) {
-                    const result = this.__super__.renderToolbar.apply(this, arguments);
-                    this.addSpoilerToolbarButton();
-                    return result;
-                },
-
-                getOutgoingMessageAttributes (text) {
-                    const { __ } = this.__super__._converse,
-                          attrs = this.__super__.getOutgoingMessageAttributes.apply(this, arguments);
-
-                    if (this.model.get('sending_spoiler')) {
-                        const spoiler = this.el.querySelector('.chat-textarea-hint')
-                        attrs.is_spoiler = true;
-                        attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
-                    }
-                    return attrs;
-                },
-
                 toggleSpoilerMessage (event) {
                     const { _converse } = this.__super__,
                           { __ } = _converse;
@@ -106,44 +69,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();
-                },
-
-                addSpoilerElement (stanza) {
-                    if (this.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;
-                            stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
-                        } else {
-                            stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
-                        }
-                    }
-                },
-
-                createMessageStanza () {
-                    const stanza = this.__super__.createMessageStanza.apply(this, arguments);
-                    this.addSpoilerElement(stanza);
-                    return stanza;
-                },
-
                 'renderMessage': function (attrs) {
                     /* Renders a chat message based on the passed in attributes.
                      *
@@ -154,12 +79,8 @@
                      *      The DOM element representing the message.
                      */
                     const { _converse } = this.__super__,
-                          { __ } = _converse;
-
-                    console.log('These are the attrs and the msg object\n');
-                    console.log(attrs);
-                    const msg = this.__super__.renderMessage.apply(this, arguments);
-                    console.log(msg);
+                          { __ } = _converse,
+                          msg = this.__super__.renderMessage.apply(this, arguments);
 
                     // Spoiler logic
                     // The value of the "spoiler" attribute, corresponds to the spoiler's hint.
@@ -208,20 +129,6 @@
                     }
                     return msg;
                 }
-            },
-
-            'ChatBox': {
-
-                getMessageAttributes (message, delay, original_stanza) {
-                    const attrs = this.__super__.getMessageAttributes.apply(this, arguments);
-                    const spoiler = message.querySelector(`spoiler[xmlns="${Strophe.NS.SPOILER}"]`)
-                    if (spoiler) {
-                        const { __ } = this.__super__._converse;
-                        attrs.is_spoiler = true;
-                        attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
-                    }
-                    return attrs;
-                }
             }
         }
     });

src/templates/toolbar.html

@@ -1,7 +1,15 @@
 {[ if (o.use_emoji)  { ]}
-    <li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}">
-        <ul class="emoji-picker"></ul>
-    </li>
+<li class="toggle-toolbar-menu toggle-smiley icon-happy" title="{{{o.label_insert_smiley}}}">
+    <ul class="emoji-picker"></ul>
+</li>
+{[ } ]}
+{[ if (o.allow_spoiler_messages) { ]}
+<li class="toggle-spoiler-edit">
+    <a class="
+        {[ if (o.sending_spoiler)  { ]} icon-eye-blocked {[ } ]}
+        {[ if (!o.sending_spoiler)  { ]} icon-eye {[ } ]}"
+        title="{{ o.title }}"></a>
+</li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}
 <li class="toggle-call"><a class="icon-phone" title="{{{o.label_start_call}}}"></a></li>