Skip to content

C
converse.js
Commit 86a962be authored by JC Brand's avatar JC Brand
Browse files
Options

Don't render message form via separate Backbone.View 

Appeared to only complicate things...
parent cc4d4a6f
Show whitespace changes
Inline Side-by-side
Showing with 106 additions and 124 deletions
src/converse-chatview.js
View file @ 86a962be
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
"tpl!message", "tpl!message",
"tpl!new_day", "tpl!new_day",
"tpl!spinner", "tpl!spinner",
"tpl!spoiler_button",
"tpl!spoiler_message", "tpl!spoiler_message",
"tpl!toolbar" "tpl!toolbar"
], factory); ], factory);
...@@ -41,7 +40,6 @@ ...@@ -41,7 +40,6 @@
tpl_message, tpl_message,
tpl_new_day, tpl_new_day,
tpl_spinner, tpl_spinner,
tpl_spoiler_button,
tpl_spoiler_message, tpl_spoiler_message,
tpl_toolbar tpl_toolbar
) { ) {
...@@ -111,7 +109,6 @@ ...@@ -111,7 +109,6 @@
{ __ } = _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,
...@@ -120,9 +117,10 @@ ...@@ -120,9 +117,10 @@
'show_message_load_animation': false, 'show_message_load_animation': false,
'time_format': 'HH:mm', 'time_format': 'HH:mm',
'visible_toolbar_buttons': { 'visible_toolbar_buttons': {
'emoji': true,
'call': false, 'call': false,
'clear': true 'clear': true,
'emoji': true,
'spoiler': true
}, },
}); });
emojione.imagePathPNG = _converse.emojione_image_path; emojione.imagePathPNG = _converse.emojione_image_path;
...@@ -265,90 +263,6 @@ ...@@ -265,90 +263,6 @@
} }
}); });
_converse.ChatBoxMessageForm = Backbone.VDOMView.extend({
className: 'message-form-container',
events: {
'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage',
},
toHTML () {
let placeholder;
if (this.model.get('sending_spoiler')) {
placeholder = __('Spoiler message');
} else {
placeholder = __('Personal message');
}
return tpl_chatbox_message_form(
_.extend(this.model.toJSON(), {
'allow_spoiler_messages': _converse.allow_spoiler_messages,
'label_personal_message': placeholder,
'label_spoiler_hint': __('Optional hint'),
'label_send': __('Send'),
'show_send_button': _converse.show_send_button,
'show_textarea': true,
'show_toolbar': _converse.show_toolbar,
'hint_value': _.get(this.el.querySelector('.spoiler-hint'), 'value'),
'message_value': _.get(this.el.querySelector('.chat-textarea'), 'value')
}));
},
afterRender () {
this.renderToolbar();
},
renderToolbar (toolbar, options) {
if (!_converse.show_toolbar) {
return this;
}
toolbar = toolbar || tpl_toolbar;
options = _.assign(
this.model.toJSON(),
this.getToolbarOptions(options || {})
);
this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
return this;
},
getToolbarOptions (options) {
return _.extend(options || {}, {
'allow_spoiler_messages': _converse.allow_spoiler_messages,
'label_clear': __('Clear all messages'),
'label_insert_smiley': __('Insert a smiley'),
'label_start_call': __('Start a call'),
'show_call_button': _converse.visible_toolbar_buttons.call,
'show_clear_button': _converse.visible_toolbar_buttons.clear,
'use_emoji': _converse.visible_toolbar_buttons.emoji,
});
},
focus () {
const textarea_el = this.el.querySelector('.chat-textarea');
if (!_.isNull(textarea_el)) {
textarea_el.focus();
_converse.emit('chatBoxFocused', this.parent);
}
return this;
},
toggleEditSpoilerMessage () {
const { __ } = _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')) {
this.model.set('sending_spoiler', false);
spoiler_title = __('Click to write your message as a spoiler');
} else {
this.model.set('sending_spoiler', true);
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.render();
this.focus();
}
});
_converse.ChatBoxView = Backbone.NativeView.extend({ _converse.ChatBoxView = Backbone.NativeView.extend({
length: 200, length: 200,
...@@ -364,6 +278,7 @@ ...@@ -364,6 +278,7 @@
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji', 'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-smiley': 'toggleEmojiMenu', 'click .toggle-smiley': 'toggleEmojiMenu',
'click .toggle-spoiler': 'toggleSpoilerMessage', 'click .toggle-spoiler': 'toggleSpoilerMessage',
'click .toggle-spoiler-edit': 'toggleComposeSpoilerMessage',
'keypress .chat-textarea': 'keyPressed' 'keypress .chat-textarea': 'keyPressed'
}, },
...@@ -380,8 +295,6 @@ ...@@ -380,8 +295,6 @@
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();
this.renderMessageForm();
this.insertHeading();
this.fetchMessages(); this.fetchMessages();
_converse.emit('chatBoxOpened', this); _converse.emit('chatBoxOpened', this);
_converse.emit('chatBoxInitialized', this); _converse.emit('chatBoxInitialized', this);
...@@ -395,19 +308,46 @@ ...@@ -395,19 +308,46 @@
} }
)); ));
this.content = this.el.querySelector('.chat-content'); this.content = this.el.querySelector('.chat-content');
this.renderMessageForm();
this.insertHeading();
return this; return this;
}, },
renderMessageForm () { renderToolbar (toolbar, options) {
this.message_form_view = new _converse.ChatBoxMessageForm({ if (!_converse.show_toolbar) {
'model': new Backbone.Model() return this;
}); }
this.message_form_view.parent = this; toolbar = toolbar || tpl_toolbar;
this.message_form_view.render(); options = _.assign(
this.content.insertAdjacentElement( this.model.toJSON(),
'afterEnd', this.getToolbarOptions(options || {})
this.message_form_view.el
); );
this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
this.insertEmojiPicker();
return this;
},
renderMessageForm () {
let placeholder;
if (this.model.get('composing_spoiler')) {
placeholder = __('Spoiler message');
} else {
placeholder = __('Personal message');
}
const form_container = this.el.querySelector('.message-form-container');
form_container.innerHTML = tpl_chatbox_message_form(
_.extend(this.model.toJSON(), {
'hint_value': _.get(this.el.querySelector('.spoiler-hint'), 'value'),
'label_personal_message': placeholder,
'label_send': __('Send'),
'label_spoiler_hint': __('Optional hint'),
'message_value': _.get(this.el.querySelector('.chat-textarea'), 'value'),
'show_send_button': _converse.show_send_button,
'show_spoiler_button': _converse.visible_toolbar_buttons.spoiler,
'show_textarea': true,
'show_toolbar': _converse.show_toolbar
}));
this.renderToolbar();
}, },
insertHeading () { insertHeading () {
...@@ -420,13 +360,22 @@ ...@@ -420,13 +360,22 @@
return this; return this;
}, },
createEmojiPicker () { getToolbarOptions (options) {
if (_.isUndefined(_converse.emojipicker)) { let label_toggle_spoiler;
_converse.emojipicker = new _converse.EmojiPicker(); if (this.model.get('composing_spoiler')) {
_converse.emojipicker.fetch(); label_toggle_spoiler = __('Click to write as a normal (non-spoiler) message');
} else {
label_toggle_spoiler = __('Click to write your message as a spoiler');
} }
this.emoji_picker_view = new _converse.EmojiPickerView({ return _.extend(options || {}, {
'model': _converse.emojipicker 'label_clear': __('Clear all messages'),
'label_insert_smiley': __('Insert a smiley'),
'label_start_call': __('Start a call'),
'label_toggle_spoiler': label_toggle_spoiler,
'show_call_button': _converse.visible_toolbar_buttons.call,
'show_clear_button': _converse.visible_toolbar_buttons.clear,
'show_spoiler_button': _converse.visible_toolbar_buttons.spoiler,
'use_emoji': _converse.visible_toolbar_buttons.emoji,
}); });
}, },
...@@ -901,7 +850,7 @@ ...@@ -901,7 +850,7 @@
* passed to Backbone.Message's constructor. * passed to Backbone.Message's constructor.
*/ */
const fullname = _converse.xmppstatus.get('fullname'), const fullname = _converse.xmppstatus.get('fullname'),
is_spoiler = this.message_form_view.model.get('sending_spoiler'), is_spoiler = this.model.get('composing_spoiler'),
attrs = { attrs = {
'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname, 'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
'sender': 'me', 'sender': 'me',
...@@ -969,7 +918,7 @@ ...@@ -969,7 +918,7 @@
message = textarea.value; message = textarea.value;
let spoiler_hint; let spoiler_hint;
if (this.message_form_view.model.get('sending_spoiler')) { if (this.model.get('composing_spoiler')) {
const hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint'); const hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint');
spoiler_hint = hint_el.value; spoiler_hint = hint_el.value;
hint_el.value = ''; hint_el.value = '';
...@@ -1016,13 +965,22 @@ ...@@ -1016,13 +965,22 @@
textbox_el.focus() textbox_el.focus()
}, },
createEmojiPicker () {
if (_.isUndefined(_converse.emojipicker)) {
_converse.emojipicker = new _converse.EmojiPicker();
_converse.emojipicker.fetch();
}
this.emoji_picker_view = new _converse.EmojiPickerView({
'model': _converse.emojipicker
});
},
insertEmoji (ev) { insertEmoji (ev) {
ev.stopPropagation(); ev.stopPropagation();
const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target; const target = ev.target.nodeName === 'IMG' ? ev.target.parentElement : ev.target;
this.insertIntoTextArea(target.getAttribute('data-emoji')); this.insertIntoTextArea(target.getAttribute('data-emoji'));
}, },
toggleEmojiMenu (ev) { toggleEmojiMenu (ev) {
if (u.hasClass('insert-emoji', ev.target)) { if (u.hasClass('insert-emoji', ev.target)) {
return; return;
...@@ -1054,6 +1012,12 @@ ...@@ -1054,6 +1012,12 @@
}); });
}, },
toggleComposeSpoilerMessage () {
this.model.set('composing_spoiler', !this.model.get('composing_spoiler'));
this.renderMessageForm();
this.focus();
},
toggleSpoilerMessage (ev) { toggleSpoilerMessage (ev) {
if (ev && ev.preventDefault) { if (ev && ev.preventDefault) {
ev.preventDefault(); ev.preventDefault();
...@@ -1113,7 +1077,7 @@ ...@@ -1113,7 +1077,7 @@
return this; return this;
}, },
renderEmojiPicker () { insertEmojiPicker () {
var toggle = this.el.querySelector('.toggle-smiley'); var toggle = this.el.querySelector('.toggle-smiley');
if (!_.isNull(toggle)) { if (!_.isNull(toggle)) {
toggle.innerHTML = ''; toggle.innerHTML = '';
...@@ -1122,7 +1086,12 @@ ...@@ -1122,7 +1086,12 @@
}, },
focus () { focus () {
this.message_form_view.focus(); const textarea_el = this.el.querySelector('.chat-textarea');
if (!_.isNull(textarea_el)) {
textarea_el.focus();
_converse.emit('chatBoxFocused', this);
}
return this;
}, },
hide () { hide () {
...@@ -1135,8 +1104,8 @@ ...@@ -1135,8 +1104,8 @@
this.model.save(); this.model.save();
} }
this.setChatState(_converse.ACTIVE); this.setChatState(_converse.ACTIVE);
this.renderEmojiPicker();
this.scrollDown(); this.scrollDown();
this.renderToolbar();
if (focus) { if (focus) {
this.focus(); this.focus();
} }
......
src/converse-otr.js
View file @ 86a962be
...@@ -298,6 +298,10 @@ ...@@ -298,6 +298,10 @@
return this.__super__.parseMessageForCommands.apply(this, arguments); return this.__super__.parseMessageForCommands.apply(this, arguments);
}, },
isOTREncryptedSession () {
return _.includes([UNVERIFIED, VERIFIED], this.model.get('otr_status'));
},
onMessageSubmitted (text, spoiler_hint) { onMessageSubmitted (text, spoiler_hint) {
const { _converse } = this.__super__; const { _converse } = this.__super__;
if (!_converse.connection.authenticated) { if (!_converse.connection.authenticated) {
...@@ -306,8 +310,7 @@ ...@@ -306,8 +310,7 @@
if (this.parseMessageForCommands(text)) { if (this.parseMessageForCommands(text)) {
return; return;
} }
if (_.includes([UNVERIFIED, VERIFIED], this.model.get('otr_status'))) { if (this.isOTREncryptedSession()) {
// Off-the-record encryption is active
this.model.otr.sendMsg(text); this.model.otr.sendMsg(text);
this.model.trigger('showSentOTRMessage', text); this.model.trigger('showSentOTRMessage', text);
} else { } else {
...@@ -453,6 +456,14 @@ ...@@ -453,6 +456,14 @@
)); ));
}, },
getToolbarOptions (options) {
options = this.__super__.getToolbarOptions();
if (this.model.get('composing_spoiler') && this.isOTREncryptedSession()) {
options.show_spoiler_button = false;
}
return options;
},
renderToolbar (toolbar, options) { renderToolbar (toolbar, options) {
const result = this.__super__.renderToolbar.apply(this, arguments); const result = this.__super__.renderToolbar.apply(this, arguments);
this.addOTRToolbarButton(options); this.addOTRToolbarButton(options);
......
src/templates/chatbox.html
View file @ 86a962be
<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="message-form-container"/>
</div> </div>
</div> </div>
src/templates/chatbox_message_form.html
View file @ 86a962be
...@@ -4,15 +4,13 @@ ...@@ -4,15 +4,13 @@
{[ if (o.show_toolbar) { ]} {[ if (o.show_toolbar) { ]}
<ul class="chat-toolbar no-text-select"></ul> <ul class="chat-toolbar no-text-select"></ul>
{[ } ]} {[ } ]}
{[ if (o.allow_spoiler_messages) { ]}
<input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}" <input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} spoiler-hint"/> class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
{[ } ]}
<textarea <textarea
type="text" type="text"
class="chat-textarea class="chat-textarea
{[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]} {[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
{[ if (o.sending_spoiler) { ]} spoiler {[ } ]}" {[ if (o.composing_spoiler) { ]} spoiler {[ } ]}"
placeholder="{{{o.label_personal_message}}}">{{ o.message_value }}</textarea> placeholder="{{{o.label_personal_message}}}">{{ o.message_value }}</textarea>
{[ if (o.show_send_button) { ]} {[ if (o.show_send_button) { ]}
<button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button> <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
......
src/templates/spoiler_button.html
View file @ 86a962be
{[ if (o.show_spoiler_button) { ]}
<!-- XXX: This markup is also in src/templates/toolbar.html -->
<li class="toggle-spoiler-edit"> <li class="toggle-spoiler-edit">
<a class=" <a class="
{[ if (o.sending_spoiler) { ]} icon-eye-blocked {[ } ]} {[ if (o.sending_spoiler) { ]} icon-eye-blocked {[ } ]}
{[ if (!o.sending_spoiler) { ]} icon-eye {[ } ]}" {[ if (!o.sending_spoiler) { ]} icon-eye {[ } ]}"
title="{{ o.title }}"></a> title="{{ o.title }}"></a>
</li> </li>
{[ } ]}
src/templates/toolbar.html
View file @ 86a962be
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<a class=" <a class="
{[ if (o.sending_spoiler) { ]} icon-eye-blocked {[ } ]} {[ if (o.sending_spoiler) { ]} icon-eye-blocked {[ } ]}
{[ if (!o.sending_spoiler) { ]} icon-eye {[ } ]}" {[ if (!o.sending_spoiler) { ]} icon-eye {[ } ]}"
title="{{ o.title }}"></a> title="{{ o.label_toggle_spoiler }}"></a>
</li> </li>
{[ } ]} {[ } ]}
{[ if (o.show_call_button) { ]} {[ if (o.show_call_button) { ]}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7