Commit 86a962be authored by JC Brand's avatar JC Brand

Don't render message form via separate Backbone.View

Appeared to only complicate things...
parent cc4d4a6f
...@@ -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();
} }
......
...@@ -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);
......
<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>
...@@ -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.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
class="{[ if (!o.sending_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>
......
{[ 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>
{[ } ]}
...@@ -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