More refactoring of spoilers code
This commit is contained in:
parent
fa06b528e1
commit
400bdf775d
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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 () {
|
||||
|
@ -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
|
||||
});
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
}));
|
||||
|
@ -1,20 +1,6 @@
|
||||
<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>
|
||||
|
19
src/templates/chatbox_message_form.html
Normal file
19
src/templates/chatbox_message_form.html
Normal file
@ -0,0 +1,19 @@
|
||||
<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>
|
@ -1,3 +1,6 @@
|
||||
<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>
|
||||
|
Loading…
Reference in New Issue
Block a user