More refactoring of spoilers code
This commit is contained in:
parent
fa06b528e1
commit
400bdf775d
|
@ -1002,7 +1002,7 @@
|
||||||
/* rgba supported */
|
/* rgba supported */
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
/*IE 6/7/8*/
|
/*IE 6/7/8*/
|
||||||
border: none rgba(0, 0, 0, 0);
|
border: none transparent;
|
||||||
/*IE9 + everything else*/
|
/*IE9 + everything else*/
|
||||||
background-color: #E6E6E6;
|
background-color: #E6E6E6;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -1713,6 +1713,9 @@
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||||
#conversejs .chatbox form.sendXMPPMessage {
|
#conversejs .chatbox form.sendXMPPMessage {
|
||||||
width: 100%; } }
|
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,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
|
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
|
@ -1722,6 +1725,10 @@
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
resize: none; }
|
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,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .send-button {
|
#conversejs .chatbox form.sendXMPPMessage .send-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -1002,7 +1002,7 @@
|
||||||
/* rgba supported */
|
/* rgba supported */
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
/*IE 6/7/8*/
|
/*IE 6/7/8*/
|
||||||
border: none rgba(0, 0, 0, 0);
|
border: none transparent;
|
||||||
/*IE9 + everything else*/
|
/*IE9 + everything else*/
|
||||||
background-color: #E6E6E6;
|
background-color: #E6E6E6;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -1778,6 +1778,9 @@ body {
|
||||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||||
#conversejs .chatbox form.sendXMPPMessage {
|
#conversejs .chatbox form.sendXMPPMessage {
|
||||||
width: 100%; } }
|
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,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
|
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
|
@ -1787,6 +1790,10 @@ body {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
resize: none; }
|
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,
|
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
|
||||||
#conversejs .chatbox form.sendXMPPMessage .send-button {
|
#conversejs .chatbox form.sendXMPPMessage .send-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -248,6 +248,9 @@
|
||||||
@media screen and (max-width: $mobile-portrait-length) {
|
@media screen and (max-width: $mobile-portrait-length) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.chat-textarea-hint {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.chat-textarea {
|
.chat-textarea {
|
||||||
@include border-bottom-radius($chatbox-border-radius);
|
@include border-bottom-radius($chatbox-border-radius);
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -255,6 +258,10 @@
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
resize: none;
|
resize: none;
|
||||||
|
&.spoiler {
|
||||||
|
background-color: lighten($chat-head-color, 50%);
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.send-button {
|
.send-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
"tpl!action",
|
"tpl!action",
|
||||||
"tpl!chatbox",
|
"tpl!chatbox",
|
||||||
"tpl!chatbox_head",
|
"tpl!chatbox_head",
|
||||||
|
"tpl!chatbox_message_form",
|
||||||
"tpl!emojis",
|
"tpl!emojis",
|
||||||
"tpl!help_message",
|
"tpl!help_message",
|
||||||
"tpl!info",
|
"tpl!info",
|
||||||
|
@ -31,6 +32,7 @@
|
||||||
tpl_action,
|
tpl_action,
|
||||||
tpl_chatbox,
|
tpl_chatbox,
|
||||||
tpl_chatbox_head,
|
tpl_chatbox_head,
|
||||||
|
tpl_chatbox_message_form,
|
||||||
tpl_emojis,
|
tpl_emojis,
|
||||||
tpl_help_message,
|
tpl_help_message,
|
||||||
tpl_info,
|
tpl_info,
|
||||||
|
@ -105,6 +107,7 @@
|
||||||
{ __ } = _converse;
|
{ __ } = _converse;
|
||||||
|
|
||||||
_converse.api.settings.update({
|
_converse.api.settings.update({
|
||||||
|
'allow_spoiler_messages': true,
|
||||||
'use_emojione': true,
|
'use_emojione': true,
|
||||||
'emojione_image_path': emojione.imagePathPNG,
|
'emojione_image_path': emojione.imagePathPNG,
|
||||||
'chatview_avatar_height': 32,
|
'chatview_avatar_height': 32,
|
||||||
|
@ -286,8 +289,10 @@
|
||||||
this.model.on('change:chat_status', this.onChatStatusChanged, this);
|
this.model.on('change:chat_status', this.onChatStatusChanged, this);
|
||||||
this.model.on('showHelpMessages', this.showHelpMessages, this);
|
this.model.on('showHelpMessages', this.showHelpMessages, this);
|
||||||
this.model.on('sendMessage', this.sendMessage, this);
|
this.model.on('sendMessage', this.sendMessage, this);
|
||||||
|
this.render();
|
||||||
this.render().renderToolbar().insertHeading().fetchMessages();
|
this.renderMessageForm();
|
||||||
|
this.insertHeading();
|
||||||
|
this.fetchMessages();
|
||||||
_converse.emit('chatBoxOpened', this);
|
_converse.emit('chatBoxOpened', this);
|
||||||
_converse.emit('chatBoxInitialized', this);
|
_converse.emit('chatBoxInitialized', this);
|
||||||
},
|
},
|
||||||
|
@ -296,11 +301,6 @@
|
||||||
this.el.setAttribute('id', this.model.get('box_id'));
|
this.el.setAttribute('id', this.model.get('box_id'));
|
||||||
this.el.innerHTML = tpl_chatbox(
|
this.el.innerHTML = tpl_chatbox(
|
||||||
_.extend(this.model.toJSON(), {
|
_.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')
|
unread_msgs: __('You have unread messages')
|
||||||
}
|
}
|
||||||
));
|
));
|
||||||
|
@ -308,7 +308,25 @@
|
||||||
return this;
|
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 () {
|
insertHeading () {
|
||||||
|
|
|
@ -113,7 +113,6 @@
|
||||||
info_close: '',
|
info_close: '',
|
||||||
label_personal_message: '',
|
label_personal_message: '',
|
||||||
show_send_button: false,
|
show_send_button: false,
|
||||||
show_textarea: false,
|
|
||||||
show_toolbar: false,
|
show_toolbar: false,
|
||||||
unread_msgs: ''
|
unread_msgs: ''
|
||||||
}
|
}
|
||||||
|
@ -122,7 +121,8 @@
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Override to avoid the method in converse-chatview.js
|
// Override to avoid the methods in converse-chatview.js
|
||||||
|
'renderMessageForm': _.noop,
|
||||||
'afterShown': _.noop
|
'afterShown': _.noop
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -48,9 +48,10 @@
|
||||||
if (!_.isNull(toolbar_el)) {
|
if (!_.isNull(toolbar_el)) {
|
||||||
toolbar_el.insertAdjacentHTML(
|
toolbar_el.insertAdjacentHTML(
|
||||||
'beforeend',
|
'beforeend',
|
||||||
tpl_spoiler_button({
|
tpl_spoiler_button(_.extend(
|
||||||
|
this.model.toJSON(), {
|
||||||
'title': this.__super__._converse.__('Click here to write a message as a spoiler')
|
'title': this.__super__._converse.__('Click here to write a message as a spoiler')
|
||||||
})
|
}))
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -62,7 +63,6 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
getOutgoingMessageAttributes (text) {
|
getOutgoingMessageAttributes (text) {
|
||||||
debugger;
|
|
||||||
const { __ } = this.__super__._converse,
|
const { __ } = this.__super__._converse,
|
||||||
attrs = this.__super__.getOutgoingMessageAttributes.apply(this, arguments);
|
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 () {
|
toggleEditSpoilerMessage () {
|
||||||
const { _converse } = this.__super__,
|
const { _converse } = this.__super__,
|
||||||
{ __ } = _converse;
|
{ __ } = _converse,
|
||||||
|
text_area = this.el.querySelector('.chat-textarea'),
|
||||||
const form = this.el.querySelector('.sendXMPPMessage');
|
spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
|
||||||
const textArea = this.el.querySelector('.chat-textarea');
|
let spoiler_title;
|
||||||
const spoiler_button = this.el.querySelector('.toggle-spoiler-edit');
|
|
||||||
|
|
||||||
if (this.model.get('sending_spoiler')) {
|
if (this.model.get('sending_spoiler')) {
|
||||||
textArea.style['background-color'] = '';
|
|
||||||
textArea.setAttribute('placeholder', __('Personal message'));
|
|
||||||
this.model.set('sending_spoiler', false);
|
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?
|
spoiler_title = __('Click to write your message as a spoiler');
|
||||||
const hintTextArea = document.querySelector('.chat-textarea-hint');
|
|
||||||
if ( hintTextArea ) {
|
|
||||||
hintTextArea.remove();
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
textArea.style['background-color'] = '#D5FFD2';
|
|
||||||
textArea.setAttribute('placeholder', __('Write your spoiler\'s content here'));
|
|
||||||
this.model.set('sending_spoiler', true);
|
this.model.set('sending_spoiler', true);
|
||||||
// TODO template
|
spoiler_title = __('Click to write as a normal (non-spoiler) message');
|
||||||
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_button.outerHTML = tpl_spoiler_button(_.extend(
|
||||||
|
this.model.toJSON(), {'title': spoiler_title})
|
||||||
|
)
|
||||||
|
this.renderMessageForm();
|
||||||
},
|
},
|
||||||
|
|
||||||
addSpoilerElement (stanza) {
|
addSpoilerElement (stanza) {
|
||||||
|
@ -244,22 +223,6 @@
|
||||||
return attrs;
|
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="flyout box-flyout">
|
||||||
<div class="chat-body">
|
<div class="chat-body">
|
||||||
<div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
|
<div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
|
||||||
<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
|
<div class="message-form-container"></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>
|
</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">
|
<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>
|
</li>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user