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

Speed up rendering of chat boxes by lazily rendering the emoji picker

Browse Source
This commit is contained in:
JC Brand 2017-12-19 21:37:51 +00:00
parent 19979c4840
commit 3f94028377
4 changed files with 13 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/converse-chatview.js
View File

@ -275,6 +275,7 @@
this.model.on('sendMessage', this.sendMessage, this); this.model.on('sendMessage', this.sendMessage, this);
this.render().renderToolbar().insertHeading().fetchMessages(); this.render().renderToolbar().insertHeading().fetchMessages();
this.createEmojiPicker();
u.refreshWebkit(); u.refreshWebkit();
_converse.emit('chatBoxOpened', this); _converse.emit('chatBoxOpened', this);
_converse.emit('chatBoxInitialized', this); _converse.emit('chatBoxInitialized', this);
@ -906,10 +907,13 @@
); );
this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options); this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
return this;
},
renderEmojiPicker () {
var toggle = this.el.querySelector('.toggle-smiley'); var toggle = this.el.querySelector('.toggle-smiley');
toggle.innerHTML = ''; toggle.innerHTML = '';
toggle.appendChild(this.emoji_picker_view.render().el); toggle.appendChild(this.emoji_picker_view.render().el);
return this;
}, },
focus () { focus () {
@ -929,15 +933,15 @@
this.model.save(); this.model.save();
} }
this.setChatState(_converse.ACTIVE); this.setChatState(_converse.ACTIVE);
this.renderEmojiPicker();
this.scrollDown(); this.scrollDown();
if (focus) { if (focus) {
this.focus(); this.focus();
} }
}, },
_show (focus) { show (focus) {
/* Inner show method that gets debounced */ if (u.isVisible(this.el) && this.$el.css('opacity') === "1") {
if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
if (focus) { this.focus(); } if (focus) { this.focus(); }
return; return;
} }
@ -948,18 +952,6 @@
}); });
}, },
show (focus) {
if (_.isUndefined(this.debouncedShow)) {
/* We wrap the method in a debouncer and set it on the
* instance, so that we have it debounced per instance.
* Debouncing it on the class-level is too broad.
*/
this.debouncedShow = _.debounce(this._show, 250, {'leading': true});
}
this.debouncedShow.apply(this, arguments);
return this;
},
hideNewMessagesIndicator () { hideNewMessagesIndicator () {
const new_msgs_indicator = this.el.querySelector('.new-msgs-indicator'); const new_msgs_indicator = this.el.querySelector('.new-msgs-indicator');
if (!_.isNull(new_msgs_indicator)) { if (!_.isNull(new_msgs_indicator)) {

1
src/converse-muc.js
View File

@ -567,6 +567,7 @@
afterConnected () { afterConnected () {
if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) { if (this.model.get('connection_status') === converse.ROOMSTATUS.ENTERED) {
this.setChatState(_converse.ACTIVE); this.setChatState(_converse.ACTIVE);
this.renderEmojiPicker();
this.scrollDown(); this.scrollDown();
this.focus(); this.focus();
} }

4
src/converse-singleton.js
View File

@ -92,14 +92,14 @@
}, },
ChatBoxView: { ChatBoxView: {
_show (focus) { show (focus) {
/* We only have one chat visible at any one /* We only have one chat visible at any one
* time. So before opening a chat, we make sure all other * time. So before opening a chat, we make sure all other
* chats are hidden. * chats are hidden.
*/ */
if (!this.model.get('hidden')) { if (!this.model.get('hidden')) {
_.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat); _.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat);
return this.__super__._show.apply(this, arguments); return this.__super__.show.apply(this, arguments);
} }
} }
}, },