From d1bafdb38a432aed8eb1d848bd23fda0c7bbdab2 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 9 Jun 2017 23:43:58 +0200 Subject: [PATCH] Re-render only the tab when `num_unread` changes. --- src/converse-controlbox.js | 35 ++++++++++++++++++----------------- src/converse-muc.js | 26 ++++++++++++++++---------- src/converse-rosterview.js | 2 -- src/utils.js | 4 ++++ 4 files changed, 38 insertions(+), 29 deletions(-) diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js index 6aad62702..bc9eb4074 100644 --- a/src/converse-controlbox.js +++ b/src/converse-controlbox.js @@ -43,6 +43,7 @@ "use strict"; var USERS_PANEL_ID = 'users'; + var CHATBOX_TYPE = 'chatbox'; // Strophe methods for building stanzas var Strophe = converse.env.Strophe, Backbone = converse.env.Backbone, @@ -287,6 +288,7 @@ '$parent': this.$el.find('.controlbox-panes') }); this.contactspanel.insertIntoDOM(); + _converse.xmppstatusview = new _converse.XMPPStatusView({ 'model': _converse.xmppstatus }); @@ -585,23 +587,11 @@ initialize: function (cfg) { this.parent_el = cfg.$parent[0]; this.tab_el = document.createElement('li'); - _converse.chatboxes.on('change:num_unread', this.render, this); + _converse.chatboxes.on('change:num_unread', this.renderTab, this); }, render: function () { - var controlbox = _converse.chatboxes.get('controlbox'); - var is_current = controlbox.get('active-panel') === USERS_PANEL_ID; - - var isChatBox = function (item) { - return item.get('type') == 'chatbox'; - } - var chatrooms = fp.filter(isChatBox, _converse.chatboxes.models); - - this.tab_el.innerHTML = tpl_contacts_tab({ - 'label_contacts': LABEL_CONTACTS, - 'is_current': is_current, - 'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chatrooms)) - }); + this.renderTab(); var widgets = tpl_contacts_panel({ label_online: __('Online'), @@ -620,17 +610,28 @@ } this.el.innerHTML = widgets; - if (!is_current) { - this.$el.addClass('hidden'); + var controlbox = _converse.chatboxes.get('controlbox'); + if (controlbox.get('active-panel') !== USERS_PANEL_ID) { + this.el.classList.add('hidden'); } return this; }, + renderTab: function () { + var controlbox = _converse.chatboxes.get('controlbox'); + var chats = fp.filter(_.partial(utils.isOfType, CHATBOX_TYPE), _converse.chatboxes.models); + this.tab_el.innerHTML = tpl_contacts_tab({ + 'label_contacts': LABEL_CONTACTS, + 'is_current': controlbox.get('active-panel') === USERS_PANEL_ID, + 'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chats)) + }); + }, + insertIntoDOM: function () { this.parent_el.appendChild(this.render().el); this.tabs = this.parent_el.parentNode.querySelector('#controlbox-tabs'); this.tabs.appendChild(this.tab_el); - this.$el.find('.search-xmpp ul').append( + this.$('.search-xmpp ul').append( this.generateAddContactHTML() ); return this; diff --git a/src/converse-muc.js b/src/converse-muc.js index 4e7fa0069..869271ba5 100755 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -2385,7 +2385,7 @@ this.tab_el = document.createElement('li'); this.model.on('change:muc_domain', this.onDomainChange, this); this.model.on('change:nick', this.onNickChange, this); - _converse.chatboxes.on('change:num_unread', this.render, this); + _converse.chatboxes.on('change:num_unread', this.renderTab, this); }, render: function () { @@ -2398,21 +2398,27 @@ 'label_join': __('Join Room'), 'label_show_rooms': __('Show rooms') }); + this.renderTab(); var controlbox = _converse.chatboxes.get('controlbox'); - var is_current = controlbox.get('active-panel') === ROOMS_PANEL_ID; - var isChatroom = fp.curry(utils.isInstance)(_converse.ChatRoom) - var chatrooms = fp.filter(isChatroom, _converse.chatboxes.models); - this.tab_el.innerHTML = tpl_chatrooms_tab({ - 'label_rooms': __('Rooms'), - 'is_current': is_current, - 'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chatrooms)) - }); - if (!is_current) { + if (controlbox.get('active-panel') !== ROOMS_PANEL_ID) { this.el.classList.add('hidden'); } return this; }, + renderTab: function () { + var controlbox = _converse.chatboxes.get('controlbox'); + var chatrooms = fp.filter( + _.partial(utils.isOfType, CHATROOMS_TYPE), + _converse.chatboxes.models + ); + this.tab_el.innerHTML = tpl_chatrooms_tab({ + 'label_rooms': __('Rooms'), + 'is_current': controlbox.get('active-panel') === ROOMS_PANEL_ID, + 'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chatrooms)) + }); + }, + insertIntoDOM: function () { this.parent_el.appendChild(this.render().el); this.tabs = this.parent_el.parentNode.querySelector('#controlbox-tabs'); diff --git a/src/converse-rosterview.js b/src/converse-rosterview.js index d3a7f70e2..85827a27d 100644 --- a/src/converse-rosterview.js +++ b/src/converse-rosterview.js @@ -281,8 +281,6 @@ _converse.on('rosterGroupsFetched', this.positionFetchedGroups, this); _converse.on('rosterContactsFetched', this.update, this); this.createRosterFilter(); - - }, render: function () { diff --git a/src/utils.js b/src/utils.js index 8c83d923e..43a811ef3 100755 --- a/src/utils.js +++ b/src/utils.js @@ -471,6 +471,10 @@ return utils.detectLocale(isSupportedByLibrary) || 'en'; }; + utils.isOfType = function (type, item) { + return item.get('type') == type; + } + utils.isInstance = function (type, item) { return item instanceof type; };