More refactoring of spoilers code

css/converse.css

@@ -1002,7 +1002,7 @@
     /* rgba supported */
     border: 1px solid #999;
     /*IE 6/7/8*/
-    border: none rgba(0, 0, 0, 0);
+    border: none transparent;
     /*IE9 + everything else*/
     background-color: #E6E6E6;
     text-decoration: none;
@@ -1713,6 +1713,9 @@
       #converse-embedded-chat .chatbox form.sendXMPPMessage,
       #conversejs .chatbox form.sendXMPPMessage {
         width: 100%; } }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea-hint,
+    #conversejs .chatbox form.sendXMPPMessage .chat-textarea-hint {
+      width: 100%; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
     #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
       border-bottom-left-radius: 4px;
@@ -1722,6 +1725,10 @@
       padding: 0.5em;
       width: 100%;
       resize: none; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea.spoiler,
+      #conversejs .chatbox form.sendXMPPMessage .chat-textarea.spoiler {
+        background-color: #e7f7ee;
+        height: 42px; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
     #conversejs .chatbox form.sendXMPPMessage .send-button {
       position: absolute;

css/inverse.css

@@ -1002,7 +1002,7 @@
     /* rgba supported */
     border: 1px solid #999;
     /*IE 6/7/8*/
-    border: none rgba(0, 0, 0, 0);
+    border: none transparent;
     /*IE9 + everything else*/
     background-color: #E6E6E6;
     text-decoration: none;
@@ -1778,6 +1778,9 @@ body {
       #converse-embedded-chat .chatbox form.sendXMPPMessage,
       #conversejs .chatbox form.sendXMPPMessage {
         width: 100%; } }
+    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea-hint,
+    #conversejs .chatbox form.sendXMPPMessage .chat-textarea-hint {
+      width: 100%; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
     #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
       border-bottom-left-radius: 0;
@@ -1787,6 +1790,10 @@ body {
       padding: 0.5em;
       width: 100%;
       resize: none; }
+      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea.spoiler,
+      #conversejs .chatbox form.sendXMPPMessage .chat-textarea.spoiler {
+        background-color: #e7f7ee;
+        height: 42px; }
     #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
     #conversejs .chatbox form.sendXMPPMessage .send-button {
       position: absolute;

sass/_chatbox.scss

@@ -248,6 +248,9 @@
             @media screen and (max-width: $mobile-portrait-length) {
                 width: 100%;
             }
+            .chat-textarea-hint {
+                width: 100%;
+            }
             .chat-textarea {
                 @include border-bottom-radius($chatbox-border-radius);
                 border: 0;
@@ -255,6 +258,10 @@
                 padding: 0.5em;
                 width: 100%;
                 resize: none;
+                &.spoiler {
+                    background-color: lighten($chat-head-color, 50%);
+                    height: 42px;
+                }
             }
             .send-button {
                 position: absolute;

src/converse-chatview.js

@@ -15,6 +15,7 @@
             "tpl!action",
             "tpl!chatbox",
             "tpl!chatbox_head",
+            "tpl!chatbox_message_form",
             "tpl!emojis",
             "tpl!help_message",
             "tpl!info",
@@ -31,6 +32,7 @@
             tpl_action,
             tpl_chatbox,
             tpl_chatbox_head,
+            tpl_chatbox_message_form,
             tpl_emojis,
             tpl_help_message,
             tpl_info,
@@ -105,6 +107,7 @@
                 { __ } = _converse;
 
             _converse.api.settings.update({
+                'allow_spoiler_messages': true,
                 'use_emojione': true,
                 'emojione_image_path': emojione.imagePathPNG,
                 'chatview_avatar_height': 32,
@@ -286,8 +289,10 @@
                     this.model.on('change:chat_status', this.onChatStatusChanged, this);
                     this.model.on('showHelpMessages', this.showHelpMessages, this);
                     this.model.on('sendMessage', this.sendMessage, this);
-
-                    this.render().renderToolbar().insertHeading().fetchMessages();
+                    this.render();
+                    this.renderMessageForm();
+                    this.insertHeading();
+                    this.fetchMessages();
                     _converse.emit('chatBoxOpened', this);
                     _converse.emit('chatBoxInitialized', this);
                 },
@@ -296,11 +301,6 @@
                     this.el.setAttribute('id', this.model.get('box_id'));
                     this.el.innerHTML = tpl_chatbox(
                         _.extend(this.model.toJSON(), {
-                                label_personal_message: __('Personal message'),
-                                label_send: __('Send'),
-                                show_send_button: _converse.show_send_button,
-                                show_textarea: true,
-                                show_toolbar: _converse.show_toolbar,
                                 unread_msgs: __('You have unread messages')
                             }
                         ));
@@ -308,7 +308,25 @@
                     return this;
                 },
 
-                renderTextArea () {
+                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();
                 },
 
                 insertHeading () {

src/converse-headline.js

@@ -113,7 +113,6 @@
                                 info_close: '',
                                 label_personal_message: '',
                                 show_send_button: false,
-                                show_textarea: false,
                                 show_toolbar: false,
                                 unread_msgs: ''
                             }
@@ -122,7 +121,8 @@
                     return this;
                 },
 
-                // Override to avoid the method in converse-chatview.js
+                // Override to avoid the methods in converse-chatview.js
+                'renderMessageForm': _.noop,
                 'afterShown': _.noop
             });
 

src/converse-spoilers.js

@@ -48,9 +48,10 @@
                     if (!_.isNull(toolbar_el)) {
                         toolbar_el.insertAdjacentHTML(
                             'beforeend',
-                            tpl_spoiler_button({
+                            tpl_spoiler_button(_.extend(
+                                this.model.toJSON(), {
                                 'title': this.__super__._converse.__('Click here to write a message as a spoiler')
-                            })
+                            }))
                         );
                     }
                 },
@@ -62,7 +63,6 @@
                 },
 
                 getOutgoingMessageAttributes (text) {
-                    debugger;
                     const { __ } = this.__super__._converse,
                           attrs = this.__super__.getOutgoingMessageAttributes.apply(this, arguments);
 
@@ -106,45 +106,24 @@
                     }
                 },
 
-                'createHintTextArea': function () {
-                    const { _converse } = this.__super__,
-                          { __ } = _converse;
-
-                    const hintTextArea = document.createElement('input');
-                    hintTextArea.setAttribute('type', 'text');
-                    hintTextArea.setAttribute('placeholder', __('Hint (optional)'));
-                    hintTextArea.classList.add('chat-textarea-hint');
-                    hintTextArea.style.height = '30px';
-                    return hintTextArea;
-                },
-
                 toggleEditSpoilerMessage () {
                     const { _converse } = this.__super__,
-                          { __ } = _converse;
-
-                    const form = this.el.querySelector('.sendXMPPMessage');
-                    const textArea = this.el.querySelector('.chat-textarea');
-                    const spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
+                          { __ } = _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')) {
-                        textArea.style['background-color'] = '';
-                        textArea.setAttribute('placeholder', __('Personal message'));
                         this.model.set('sending_spoiler', false);
-                        spoiler_button.innerHTML = '<a class="icon-eye" title="' + __('Click here to write a message as a spoiler') + '"></a>'; // better get the element <a></a> and change the class?
-                        const hintTextArea = document.querySelector('.chat-textarea-hint');
-                        if ( hintTextArea ) {
-                            hintTextArea.remove();
-                        }
+                        spoiler_title = __('Click to write your message as a spoiler');
                     } else {
-                        textArea.style['background-color'] = '#D5FFD2';
-                        textArea.setAttribute('placeholder', __('Write your spoiler\'s content here'));
                         this.model.set('sending_spoiler', true);
-                        // TODO template
-                        spoiler_button.innerHTML = '<a class="icon-eye-blocked" title="' + __('Cancel writing spoiler message') + '"></a>';
-                        // better get the element <a></a> and change the class?
-                        form.insertBefore(this.createHintTextArea(), textArea);
-                        // <textarea type="text" class="chat-textarea-hint " placeholder="Hint (optional)" style="background-color: rgb(188, 203, 209); height:30px;"></textarea>
+                        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) {
@@ -244,22 +223,6 @@
                     return attrs;
                 }
             }
-        },
-
-        /* Converse.js's plugin mechanism will call the initialize
-         * method on any plugin (if it exists) as soon as the plugin has
-         * been loaded.
-         */
-        initialize () {
-            /* Inside this method, you have access to the private
-             * `_converse` object.
-             */
-            const { _converse } = this;
-
-            function initSpoilers (chatbox) {
-                chatbox.renderToolbar();
-            }
-            _converse.on('chatBoxFocused', initSpoilers);
         }
     });
 }));

src/templates/chatbox.html

 <div class="flyout box-flyout">
     <div class="chat-body">
         <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
-        <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
-        {[ if (o.show_textarea) { ]}
-        <form class="sendXMPPMessage">
-            {[ if (o.show_toolbar) { ]}
-                <ul class="chat-toolbar no-text-select"></ul>
-            {[ } ]}
-            <textarea
-                type="text"
-                class="chat-textarea {[ if (o.show_send_button) { ]}chat-textarea-send-button{[ } ]}"
-                placeholder="{{{o.label_personal_message}}}"></textarea>
-            {[ if (o.show_send_button) { ]}
-                <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
-            {[ } ]}
-        </form>
-        {[ } ]}
+        <div class="message-form-container"></div>
     </div>
 </div>

src/templates/chatbox_message_form.html

+<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
+<form class="sendXMPPMessage">
+    {[ if (o.show_toolbar) { ]}
+        <ul class="chat-toolbar no-text-select"></ul>
+    {[ } ]}
+    {[ if (o.allow_spoiler_messages) { ]}
+        <input type="text" placeholder="{{o.label_spoiler_hint}}"
+            class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} chat-textarea-hint"/>
+    {[ } ]}
+    <textarea
+        type="text"
+        class="chat-textarea
+            {[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
+            {[ if (o.sending_spoiler) { ]} spoiler {[ } ]}"
+        placeholder="{{{o.label_personal_message}}}"></textarea>
+    {[ if (o.show_send_button) { ]}
+        <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
+    {[ } ]}
+</form>

src/templates/spoiler_button.html

 <li class="toggle-spoiler-edit">
-    <a class="icon-eye" title="{{ o.title }}"></a>
+<a class="
+    {[ if (o.sending_spoiler)  { ]} icon-eye-blocked {[ } ]}
+    {[ if (!o.sending_spoiler)  { ]} icon-eye {[ } ]}"
+    title="{{ o.title }}"></a>
 </li>