Rewrite and improve trimOpenChats. updates #61

converse.js

@@ -644,17 +644,21 @@
                     this.messages = new converse.Messages();
                     this.messages.localStorage = new Backbone.LocalStorage(
                         b64_sha1('converse.messages'+this.get('jid')+converse.bare_jid));
+
                     this.save({
                         'user_id' : Strophe.getNodeFromJid(this.get('jid')),
                         'box_id' : b64_sha1(this.get('jid')),
                         'otr_status': this.get('otr_status') || UNENCRYPTED,
                         'minimized': this.get('minimized') || false,
                         'time_minimized': this.get('time_minimized') || moment(),
-                        'time_opened': this.get('time_opened') || moment(),
+                        'time_opened': this.get('time_opened') || moment().format(),
                         'height': height
                     });
                 } else {
-                    this.set({'height': height});
+                    this.set({
+                        'height': height,
+                        'time_opened': moment(0).format()
+                    });
                 }
             },
 
@@ -1297,6 +1301,13 @@
                 return this;
             },
 
+            trimChat: function () {
+                // TODO: Instead of closing the chat, we should add it to
+                // div#offscreen-chatboxes
+                this.$el.hide(); // Hide it immediately to avoid flashes on the screen
+                this.closeChat();
+            },
+
             saveToggleState: function () {
                 var flyout = this.$el.find('.box-flyout');
                 if (flyout.hasClass('minimized')) {
@@ -2380,6 +2391,7 @@
 
         this.ChatBoxes = Backbone.Collection.extend({
             model: converse.ChatBox,
+            comparator : 'time_opened',
 
             registerMessageHandler: function () {
                 converse.connection.addHandler(
@@ -2480,7 +2492,6 @@
                 this.getAll = function () { return views; };
 
                 this.model.on("add", function (item) {
-                    this.trimOpenChats();
                     var view = this.get(item.get('id'));
                     if (!view) {
                         if (item.get('chatroom')) {
@@ -2497,51 +2508,34 @@
                         view.model = item;
                         view.initialize();
                     }
+                    this.trimOpenChats(view);
                 }, this);
             },
 
-            trimOpenChats: function () {
+            trimOpenChats: function (view) {
                 /* This method is called before a new chat box will be opened.
                  *
                  * Check whether there is enough space in the page to show
                  * another chat box. Otherwise, close the oldest chat box.
                  */
-                var toggle_width = 0;
-                var controlbox = this.get('controlbox');
+                var toggle_width = 0, 
+                    boxes_width = view.$el.outerWidth(true),
+                    controlbox = this.get('controlbox');
                 if (!controlbox || !controlbox.$el.is(':visible')) {
                     toggle_width = converse.controlboxtoggle.$el.width();
                 }
-                var views = this.getAll();
-                var oldest = moment();
-                var oldest_view;
-                var total_width = this.$el.width();
-                var view_list = _.values(views);
-                if (view_list.length === 0) {
-                    return;
-                }
-                var box_width = view_list[0].$el.outerWidth();
-                var num_visible_views = 1; // Include view about to be opened
-                _.each(views, function (v) {
-                    if (v.$el.is(':visible')) {
-                        num_visible_views += 1;
+                this.$el.find('.chatbox').addBack('.chatroom').each(function (idx, el) {
+                    var $el = $(el);
+                    if ($el.is(':visible')) {
+                        boxes_width += $el.outerWidth(true);
                     }
                 });
-                if (num_visible_views === 1) {
+                if (this.model.length <= 1) {
                     return;
                 }
-                if ((num_visible_views*box_width + toggle_width) > total_width) {
-                    _.each(views, function (v) {
-                        if (v.id === 'controlbox' || !v.$el.is(':visible')) {
-                            return;
-                        }
-                        var opened = v.model.get('time_opened');
-                        if (moment(opened).isBefore(oldest)) {
-                            oldest = opened;
-                            oldest_view = v;
-                        }
-                    });
-                    oldest_view.$el.hide(); // Hide it immediately to avoid flashes on the screen
-                    oldest_view.closeChat();
+                if ((boxes_width + toggle_width) > this.$el.width()) {
+                    // trim oldest view (which is not controlbox)
+                    this.get(this.model.at(1).get('id')).trimChat();
                 }
             },