Some fixes to minimization of chats. Updates #622

Don't call trimChats in onChatBoxAdded event. Reduntant because it will be
called after maximization and after being shown.

Add new method getShownChats and don't trim if only one or zero chats are being
shown.

Don't trim chats when in responsive mode.

Don't call trimChats unnecessarily in the render method of the trimmed chats
thingy.

dist/converse-no-dependencies.js

@@ -3857,18 +3857,10 @@ define("polyfill", function(){});
             },
 
             onChatBoxAdded: function (item) {
-                var view = this.get(item.get('id'));
-                // Views aren't created here, since the core code doesn't have
+                // Views aren't created here, since the core code doesn't
                 // contain any views. Instead, they're created in overrides in
-                // converse-chatiew.js and/or converse-muc.js
-                if (view) {
-                    // This is an optimization. We don't remove older views, so
-                    // when one is available, we reuse it.
-                    delete view.model; // Remove ref to old model to help garbage collection
-                    view.model = item;
-                    view.initialize();
-                }
-                return view;
+                // plugins, such as in converse-chatview.js and converse-muc.js
+                return this.get(item.get('id'));
             },
 
             removeChat: function (item) {
@@ -4344,8 +4336,13 @@ define("polyfill", function(){});
         'initialize': function (settings, callback) {
             converse.initialize(settings, callback);
         },
-        'disconnect': function () {
-              converse.connection.disconnect();
+        'connection': {
+            'connected': function () {
+                return converse.connection && converse.connection.connected || false;
+            },
+            'disconnect': function () {
+                converse.connection.disconnect();
+            },
         },
         'user': {
             'logout': function () {
@@ -4474,7 +4471,7 @@ define("polyfill", function(){});
                 converse.connection.addHandler(
                     handler,
                     options.ns,
-                    options.name,
+                    name,
                     options.type,
                     options.id,
                     options.from,
@@ -5680,6 +5677,7 @@ return parser;
                 },
 
                 onScroll: function (ev) {
+                    // XXX: This should go into converse-mam.js
                     if ($(ev.target).scrollTop() === 0 && this.model.messages.length) {
                         this.fetchArchivedMessages({
                             'before': this.model.messages.at(0).get('archive_id'),
@@ -5698,6 +5696,7 @@ return parser;
                     this.model.messages.fetch({
                         'add': true,
                         'success': function () {
+                                // XXX: This should go into converse-mam.js
                                 if (!converse.features.findWhere({'var': Strophe.NS.MAM})) {
                                     return;
                                 }
@@ -5719,6 +5718,7 @@ return parser;
                      * Then, upon receiving them, call onMessage on the chat box,
                      * so that they are displayed inside it.
                      */
+                    // XXX: This should go into converse-mam.js
                     if (!converse.features.findWhere({'var': Strophe.NS.MAM})) {
                         converse.log("Attempted to fetch archived messages but this user's server doesn't support XEP-0313");
                         return;
@@ -7501,10 +7501,16 @@ return parser;
 
             ChatBoxViews: {
                 onChatBoxAdded: function (item) {
-                    var view = this.get(item.get('id'));
-                    if (!view && item.get('box_id') === 'controlbox') {
-                        view = new converse.ControlBoxView({model: item});
-                        return this.add(item.get('id'), view);
+                    if (item.get('box_id') === 'controlbox') {
+                        var view = this.get(item.get('id'));
+                        if (view) {
+                            view.model = item;
+                            view.initialize();
+                            return view;
+                        } else {
+                            view = new converse.ControlBoxView({model: item});
+                            return this.add(item.get('id'), view);
+                        }
                     } else {
                         return this._super.onChatBoxAdded.apply(this, arguments);
                     }
@@ -9932,10 +9938,6 @@ return parser;
                     return chatbox;
                 },
 
-                onChatBoxAdded: function (item) {
-                    this.trimChats(this._super.onChatBoxAdded.apply(this, arguments));
-                },
-
                 getChatBoxWidth: function (view) {
                     if (!view.model.get('minimized') && view.$el.is(':visible')) {
                         return view.$el.outerWidth(true);
@@ -9943,6 +9945,12 @@ return parser;
                     return 0;
                 },
 
+                getShownChats: function () {
+                    return this.filter(function (view) {
+                        return (!view.model.get('minimized') && view.$el.is(':visible'));
+                    });
+                },
+
                 trimChats: function (newchat) {
                     /* This method is called when a newly created chat box will
                      * be shown.
@@ -9951,7 +9959,14 @@ return parser;
                      * another chat box. Otherwise it minimizes the oldest chat box
                      * to create space.
                      */
-                    if (converse.no_trimming || (this.model.length <= 1)) {
+                    var shown_chats = this.getShownChats();
+                    if (converse.no_trimming || shown_chats.length <= 1) {
+                        return;
+                    }
+                    if (this.getChatBoxWidth(shown_chats[0]) === $('body').outerWidth(true)) {
+                        // If the chats shown are the same width as the body,
+                        // then we're in responsive mode and the chats are
+                        // fullscreen. In this case we don't trim.
                         return;
                     }
                     var oldest_chat, boxes_width, view,
@@ -10107,7 +10122,7 @@ return parser;
                 render: function () {
                     if (this.keys().length === 0) {
                         this.$el.hide('fast', converse.chatboxviews.trimChats.bind(converse.chatboxviews));
-                    } else if (this.keys().length === 1) {
+                    } else if (this.keys().length === 1 && !this.$el.is(':visible')) {
                         this.$el.show('fast', converse.chatboxviews.trimChats.bind(converse.chatboxviews));
                     }
                     return this.$el;

dist/converse.js

@@ -29656,18 +29656,10 @@ return Backbone.BrowserStorage;
             },
 
             onChatBoxAdded: function (item) {
-                var view = this.get(item.get('id'));
-                // Views aren't created here, since the core code doesn't have
+                // Views aren't created here, since the core code doesn't
                 // contain any views. Instead, they're created in overrides in
-                // converse-chatiew.js and/or converse-muc.js
-                if (view) {
-                    // This is an optimization. We don't remove older views, so
-                    // when one is available, we reuse it.
-                    delete view.model; // Remove ref to old model to help garbage collection
-                    view.model = item;
-                    view.initialize();
-                }
-                return view;
+                // plugins, such as in converse-chatview.js and converse-muc.js
+                return this.get(item.get('id'));
             },
 
             removeChat: function (item) {
@@ -30143,8 +30135,13 @@ return Backbone.BrowserStorage;
         'initialize': function (settings, callback) {
             converse.initialize(settings, callback);
         },
-        'disconnect': function () {
-              converse.connection.disconnect();
+        'connection': {
+            'connected': function () {
+                return converse.connection && converse.connection.connected || false;
+            },
+            'disconnect': function () {
+                converse.connection.disconnect();
+            },
         },
         'user': {
             'logout': function () {
@@ -30273,7 +30270,7 @@ return Backbone.BrowserStorage;
                 converse.connection.addHandler(
                     handler,
                     options.ns,
-                    options.name,
+                    name,
                     options.type,
                     options.id,
                     options.from,
@@ -31581,6 +31578,7 @@ define('text!zh',[],function () { return '{\n   "domain": "converse",\n   "local
                 },
 
                 onScroll: function (ev) {
+                    // XXX: This should go into converse-mam.js
                     if ($(ev.target).scrollTop() === 0 && this.model.messages.length) {
                         this.fetchArchivedMessages({
                             'before': this.model.messages.at(0).get('archive_id'),
@@ -31599,6 +31597,7 @@ define('text!zh',[],function () { return '{\n   "domain": "converse",\n   "local
                     this.model.messages.fetch({
                         'add': true,
                         'success': function () {
+                                // XXX: This should go into converse-mam.js
                                 if (!converse.features.findWhere({'var': Strophe.NS.MAM})) {
                                     return;
                                 }
@@ -31620,6 +31619,7 @@ define('text!zh',[],function () { return '{\n   "domain": "converse",\n   "local
                      * Then, upon receiving them, call onMessage on the chat box,
                      * so that they are displayed inside it.
                      */
+                    // XXX: This should go into converse-mam.js
                     if (!converse.features.findWhere({'var': Strophe.NS.MAM})) {
                         converse.log("Attempted to fetch archived messages but this user's server doesn't support XEP-0313");
                         return;
@@ -34679,10 +34679,16 @@ Strophe.RSM.prototype = {
 
             ChatBoxViews: {
                 onChatBoxAdded: function (item) {
-                    var view = this.get(item.get('id'));
-                    if (!view && item.get('box_id') === 'controlbox') {
-                        view = new converse.ControlBoxView({model: item});
-                        return this.add(item.get('id'), view);
+                    if (item.get('box_id') === 'controlbox') {
+                        var view = this.get(item.get('id'));
+                        if (view) {
+                            view.model = item;
+                            view.initialize();
+                            return view;
+                        } else {
+                            view = new converse.ControlBoxView({model: item});
+                            return this.add(item.get('id'), view);
+                        }
                     } else {
                         return this._super.onChatBoxAdded.apply(this, arguments);
                     }
@@ -44778,10 +44784,6 @@ define("crypto.mode-ctr", ["crypto.cipher-core"], function(){});
                     return chatbox;
                 },
 
-                onChatBoxAdded: function (item) {
-                    this.trimChats(this._super.onChatBoxAdded.apply(this, arguments));
-                },
-
                 getChatBoxWidth: function (view) {
                     if (!view.model.get('minimized') && view.$el.is(':visible')) {
                         return view.$el.outerWidth(true);
@@ -44789,6 +44791,12 @@ define("crypto.mode-ctr", ["crypto.cipher-core"], function(){});
                     return 0;
                 },
 
+                getShownChats: function () {
+                    return this.filter(function (view) {
+                        return (!view.model.get('minimized') && view.$el.is(':visible'));
+                    });
+                },
+
                 trimChats: function (newchat) {
                     /* This method is called when a newly created chat box will
                      * be shown.
@@ -44797,7 +44805,14 @@ define("crypto.mode-ctr", ["crypto.cipher-core"], function(){});
                      * another chat box. Otherwise it minimizes the oldest chat box
                      * to create space.
                      */
-                    if (converse.no_trimming || (this.model.length <= 1)) {
+                    var shown_chats = this.getShownChats();
+                    if (converse.no_trimming || shown_chats.length <= 1) {
+                        return;
+                    }
+                    if (this.getChatBoxWidth(shown_chats[0]) === $('body').outerWidth(true)) {
+                        // If the chats shown are the same width as the body,
+                        // then we're in responsive mode and the chats are
+                        // fullscreen. In this case we don't trim.
                         return;
                     }
                     var oldest_chat, boxes_width, view,
@@ -44953,7 +44968,7 @@ define("crypto.mode-ctr", ["crypto.cipher-core"], function(){});
                 render: function () {
                     if (this.keys().length === 0) {
                         this.$el.hide('fast', converse.chatboxviews.trimChats.bind(converse.chatboxviews));
-                    } else if (this.keys().length === 1) {
+                    } else if (this.keys().length === 1 && !this.$el.is(':visible')) {
                         this.$el.show('fast', converse.chatboxviews.trimChats.bind(converse.chatboxviews));
                     }
                     return this.$el;

src/converse-chatview.js

@@ -123,6 +123,7 @@
                 },
 
                 onScroll: function (ev) {
+                    // XXX: This should go into converse-mam.js
                     if ($(ev.target).scrollTop() === 0 && this.model.messages.length) {
                         this.fetchArchivedMessages({
                             'before': this.model.messages.at(0).get('archive_id'),
@@ -141,6 +142,7 @@
                     this.model.messages.fetch({
                         'add': true,
                         'success': function () {
+                                // XXX: This should go into converse-mam.js
                                 if (!converse.features.findWhere({'var': Strophe.NS.MAM})) {
                                     return;
                                 }
@@ -162,6 +164,7 @@
                      * Then, upon receiving them, call onMessage on the chat box,
                      * so that they are displayed inside it.
                      */
+                    // XXX: This should go into converse-mam.js
                     if (!converse.features.findWhere({'var': Strophe.NS.MAM})) {
                         converse.log("Attempted to fetch archived messages but this user's server doesn't support XEP-0313");
                         return;

src/converse-minimize.js

@@ -186,10 +186,6 @@
                     return chatbox;
                 },
 
-                onChatBoxAdded: function (item) {
-                    this.trimChats(this._super.onChatBoxAdded.apply(this, arguments));
-                },
-
                 getChatBoxWidth: function (view) {
                     if (!view.model.get('minimized') && view.$el.is(':visible')) {
                         return view.$el.outerWidth(true);
@@ -197,6 +193,12 @@
                     return 0;
                 },
 
+                getShownChats: function () {
+                    return this.filter(function (view) {
+                        return (!view.model.get('minimized') && view.$el.is(':visible'));
+                    });
+                },
+
                 trimChats: function (newchat) {
                     /* This method is called when a newly created chat box will
                      * be shown.
@@ -205,7 +207,14 @@
                      * another chat box. Otherwise it minimizes the oldest chat box
                      * to create space.
                      */
-                    if (converse.no_trimming || (this.model.length <= 1)) {
+                    var shown_chats = this.getShownChats();
+                    if (converse.no_trimming || shown_chats.length <= 1) {
+                        return;
+                    }
+                    if (this.getChatBoxWidth(shown_chats[0]) === $('body').outerWidth(true)) {
+                        // If the chats shown are the same width as the body,
+                        // then we're in responsive mode and the chats are
+                        // fullscreen. In this case we don't trim.
                         return;
                     }
                     var oldest_chat, boxes_width, view,
@@ -361,7 +370,7 @@
                 render: function () {
                     if (this.keys().length === 0) {
                         this.$el.hide('fast', converse.chatboxviews.trimChats.bind(converse.chatboxviews));
-                    } else if (this.keys().length === 1) {
+                    } else if (this.keys().length === 1 && !this.$el.is(':visible')) {
                         this.$el.show('fast', converse.chatboxviews.trimChats.bind(converse.chatboxviews));
                     }
                     return this.$el;