From 400bdf775d98c0ddd082fac580d7b01daa502ca1 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 4 Feb 2018 18:33:39 +0100 Subject: [PATCH] More refactoring of spoilers code --- css/converse.css | 9 +++- css/inverse.css | 9 +++- sass/_chatbox.scss | 7 +++ src/converse-chatview.js | 34 +++++++++---- src/converse-headline.js | 4 +- src/converse-spoilers.js | 63 +++++-------------------- src/templates/chatbox.html | 16 +------ src/templates/chatbox_message_form.html | 19 ++++++++ src/templates/spoiler_button.html | 5 +- 9 files changed, 88 insertions(+), 78 deletions(-) create mode 100644 src/templates/chatbox_message_form.html diff --git a/css/converse.css b/css/converse.css index c77fe167a..11abafab2 100644 --- a/css/converse.css +++ b/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; diff --git a/css/inverse.css b/css/inverse.css index 626de15e4..5c8c6c8ae 100644 --- a/css/inverse.css +++ b/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; diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 6f51fc74f..387375fba 100644 --- a/sass/_chatbox.scss +++ b/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; diff --git a/src/converse-chatview.js b/src/converse-chatview.js index ccfa559c2..f0548554e 100644 --- a/src/converse-chatview.js +++ b/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 () { diff --git a/src/converse-headline.js b/src/converse-headline.js index aff61d1cb..78169ef95 100644 --- a/src/converse-headline.js +++ b/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 }); diff --git a/src/converse-spoilers.js b/src/converse-spoilers.js index e20e9feea..1d18f9b9c 100644 --- a/src/converse-spoilers.js +++ b/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 = ''; // better get the element 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 = ''; - // better get the element and change the class? - form.insertBefore(this.createHintTextArea(), 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); } }); })); diff --git a/src/templates/chatbox.html b/src/templates/chatbox.html index 2bf305107..8708caba6 100644 --- a/src/templates/chatbox.html +++ b/src/templates/chatbox.html @@ -1,20 +1,6 @@
- - {[ if (o.show_textarea) { ]} -
- {[ if (o.show_toolbar) { ]} -
    - {[ } ]} - - {[ if (o.show_send_button) { ]} - - {[ } ]} -
    - {[ } ]} +
    diff --git a/src/templates/chatbox_message_form.html b/src/templates/chatbox_message_form.html new file mode 100644 index 000000000..2a60a0b6a --- /dev/null +++ b/src/templates/chatbox_message_form.html @@ -0,0 +1,19 @@ + +
    + {[ if (o.show_toolbar) { ]} + + {[ } ]} + {[ if (o.allow_spoiler_messages) { ]} + + {[ } ]} + + {[ if (o.show_send_button) { ]} + + {[ } ]} +
    diff --git a/src/templates/spoiler_button.html b/src/templates/spoiler_button.html index d59c0d4e4..a67cdf340 100644 --- a/src/templates/spoiler_button.html +++ b/src/templates/spoiler_button.html @@ -1,3 +1,6 @@
  • - +