Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

More refactoring of spoilers code

Browse Source
This commit is contained in:
JC Brand 2018-02-04 18:33:39 +01:00
parent fa06b528e1
commit 400bdf775d
9 changed files with 88 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/converse.css
View File

@ -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;

9
css/inverse.css
View File

@ -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;

7
sass/_chatbox.scss
View File

@ -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;

34
src/converse-chatview.js
View File

@ -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 () {

4
src/converse-headline.js
View File

@ -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
});

63
src/converse-spoilers.js
View File

@ -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);
}
});
}));

16
src/templates/chatbox.html
View File

@ -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
View 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>

5
src/templates/spoiler_button.html
View File

@ -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>