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

4
src/converse-chatboxes.js
View File

@ -443,8 +443,8 @@
showChat (attrs) {
/* Find the chat box and show it (if it may be shown).
* If it doesn't exist, create it.
*/
* If it doesn't exist, create it.
*/
const chatbox = this.getChatBox(attrs, true);
if (this.chatBoxMayBeShown(chatbox)) {
chatbox.trigger('show', true);

24
src/converse-chatview.js
View File

@ -275,6 +275,7 @@
this.model.on('sendMessage', this.sendMessage, this);
this.render().renderToolbar().insertHeading().fetchMessages();
this.createEmojiPicker();
u.refreshWebkit();
_converse.emit('chatBoxOpened', this);
_converse.emit('chatBoxInitialized', this);
@ -906,10 +907,13 @@
);
this.el.querySelector('.chat-toolbar').innerHTML = toolbar(options);
return this;
},
renderEmojiPicker () {
var toggle = this.el.querySelector('.toggle-smiley');
toggle.innerHTML = '';
toggle.appendChild(this.emoji_picker_view.render().el);
return this;
},
focus () {
@ -929,15 +933,15 @@
this.model.save();
}
this.setChatState(_converse.ACTIVE);
this.renderEmojiPicker();
this.scrollDown();
if (focus) {
this.focus();
}
},
_show (focus) {
/* Inner show method that gets debounced */
if (this.$el.is(':visible') && this.$el.css('opacity') === "1") {
show (focus) {
if (u.isVisible(this.el) && this.$el.css('opacity') === "1") {
if (focus) { this.focus(); }
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 () {
const new_msgs_indicator = this.el.querySelector('.new-msgs-indicator');
if (!_.isNull(new_msgs_indicator)) {

1
src/converse-muc.js
View File

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

4
src/converse-singleton.js
View File

@ -92,14 +92,14 @@
},
ChatBoxView: {
_show (focus) {
show (focus) {
/* We only have one chat visible at any one
* time. So before opening a chat, we make sure all other
* chats are hidden.
*/
if (!this.model.get('hidden')) {
_.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);
}
}
},