Skip to content

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

Render the message form via VDOMView

parent 4e077aac
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 67 deletions
src/converse-chatview.js
View file @ d5348ea8
...@@ -263,6 +263,79 @@ ...@@ -263,6 +263,79 @@
} }
}); });
_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 spoiler hint'),
'label_send': __('Send'),
'show_send_button': _converse.show_send_button,
'show_textarea': true,
'show_toolbar': _converse.show_toolbar
}));
},
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;
},
afterRender () {
this.renderToolbar();
},
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,
});
},
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();
}
});
_converse.ChatBoxView = Backbone.NativeView.extend({ _converse.ChatBoxView = Backbone.NativeView.extend({
length: 200, length: 200,
className: 'chatbox hidden', className: 'chatbox hidden',
...@@ -277,7 +350,6 @@ ...@@ -277,7 +350,6 @@
'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-display': 'toggleSpoilerMessage', 'click .toggle-spoiler-display': 'toggleSpoilerMessage',
'click .toggle-spoiler-edit': 'toggleEditSpoilerMessage',
'keypress .chat-textarea': 'keyPressed' 'keypress .chat-textarea': 'keyPressed'
}, },
...@@ -313,24 +385,14 @@ ...@@ -313,24 +385,14 @@
}, },
renderMessageForm () { renderMessageForm () {
const div = this.el.querySelector('.message-form-container'); this.message_form_view = new _converse.ChatBoxMessageForm({
let placeholder; 'model': new Backbone.Model()
if (this.model.get('sending_spoiler')) { });
placeholder = __('Spoiler message'); this.message_form_view.render();
} else { this.content.insertAdjacentElement(
placeholder = __('Personal message'); 'afterEnd',
} this.message_form_view.el
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 () {
...@@ -721,7 +783,7 @@ ...@@ -721,7 +783,7 @@
}).c('body').t(message.get('message')).up() }).c('body').t(message.get('message')).up()
.c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up(); .c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up();
if (this.model.get('sending_spoiler')) { if (this.message_form_view.model.get('sending_spoiler')) {
const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0; const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
if (has_hint) { if (has_hint) {
const hint = document.querySelector('.chat-textarea-hint').value; const hint = document.querySelector('.chat-textarea-hint').value;
...@@ -796,7 +858,7 @@ ...@@ -796,7 +858,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.model.get('sending_spoiler'), is_spoiler = this.message_form_view.model.get('sending_spoiler'),
attrs = { attrs = {
'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname, 'fullname': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
'sender': 'me', 'sender': 'me',
...@@ -980,31 +1042,6 @@ ...@@ -980,31 +1042,6 @@
return this; 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,
});
},
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;
},
renderEmojiPicker () { renderEmojiPicker () {
var toggle = this.el.querySelector('.toggle-smiley'); var toggle = this.el.querySelector('.toggle-smiley');
if (!_.isNull(toggle)) { if (!_.isNull(toggle)) {
...@@ -1013,26 +1050,6 @@ ...@@ -1013,26 +1050,6 @@
} }
}, },
toggleEditSpoilerMessage () {
const { _converse } = this.__super__,
{ __ } = _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.renderMessageForm();
},
focus () { focus () {
const textarea_el = this.el.querySelector('.chat-textarea'); const textarea_el = this.el.querySelector('.chat-textarea');
if (!_.isNull(textarea_el)) { if (!_.isNull(textarea_el)) {
......
src/templates/chatbox.html
View file @ d5348ea8
<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> </div>
src/templates/chatbox_message_form.html
View file @ d5348ea8
<div class="message-form-container">
<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div> <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
<form class="sendXMPPMessage"> <form class="sendXMPPMessage">
{[ if (o.show_toolbar) { ]} {[ if (o.show_toolbar) { ]}
...@@ -17,3 +18,4 @@ ...@@ -17,3 +18,4 @@
<button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button> <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
{[ } ]} {[ } ]}
</form> </form>
</div>
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