More working on trimming chats. (still very buggy)

More flesh on the view and superview for trimmed chats.
Add event handlers.
Renamed some methods to make them shorter, more consistent.

converse.js

@@ -668,14 +668,16 @@
                  */
                 var attrs;
                 // Handle both `"key", value` and `{key: value}` -style arguments.
-                if (key == null || typeof key === 'object') {
+                if (key === null || typeof key === 'object') {
                     attrs = key;
                     options = val;
                 } else {
                     (attrs = {})[key] = val;
                 }
-                if (typeof attrs === 'object' && attrs.trimmed) {
-                    delete attrs.trimmed;
+                if (typeof attrs === 'object' && attrs !== null) {
+                    if (attrs.trimmed) {
+                        delete attrs.trimmed;
+                    }
                 }
                 Backbone.Model.prototype.save.call(this, attrs, options);
             },
@@ -881,7 +883,7 @@
             is_chatroom: false,  // This is not a multi-user chatroom
 
             events: {
-                'click .close-chatbox-button': 'closeChat',
+                'click .close-chatbox-button': 'close',
                 'click .toggle-chatbox-button': 'toggleChatBox',
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
@@ -1303,6 +1305,9 @@
                 if (_.has(item.changed, 'otr_status')) {
                     this.renderToolbar().informOTRChange();
                 }
+                if (_.has(item.changed, 'trimmed')) {
+                    this.trim();
+                }
                 // TODO check for changed fullname as well
             },
 
@@ -1310,7 +1315,7 @@
                 this.$el.find('p.user-custom-message').text(msg).attr('title', msg);
             },
 
-            closeChat: function () {
+            close: function () {
                 if (converse.connection) {
                     this.model.destroy();
                 } else {
@@ -1319,12 +1324,8 @@
                 return this;
             },
 
-            trimChat: function () {
-                // TODO: Instead of closing the chat, we should add it to
-                // div#offscreen-chatboxes
-                this.model.set('trimmed', true);
-                this.$el.hide(); // Hide it immediately to avoid flashes on the screen
-                this.closeChat();
+            trim: function () {
+                this.$el.hide();
             },
 
             saveToggleState: function () {
@@ -1786,7 +1787,7 @@
                     }
                 }
                 if (!nick) { return; }
-                chatroom = converse.chatboxviews.showChatBox({
+                chatroom = converse.chatboxviews.showChat({
                     'id': jid,
                     'jid': jid,
                     'name': Strophe.unescapeNode(Strophe.getNodeFromJid(jid)),
@@ -1805,7 +1806,7 @@
             className: 'chatbox',
             id: 'controlbox',
             events: {
-                'click a.close-chatbox-button': 'closeChat',
+                'click a.close-chatbox-button': 'close',
                 'click ul#controlbox-tabs li a': 'switchTab',
                 'mousedown .dragresize-tm': 'onDragResizeStart'
             },
@@ -1909,7 +1910,7 @@
             tagName: 'div',
             className: 'chatroom',
             events: {
-                'click .close-chatbox-button': 'closeChat',
+                'click .close-chatbox-button': 'close',
                 'click .toggle-chatbox-button': 'toggleChatBox',
                 'click .configure-chatroom-button': 'configureChatRoom',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
@@ -2406,7 +2407,7 @@
 
         this.ChatBoxes = Backbone.Collection.extend({
             model: converse.ChatBox,
-            comparator : 'time_opened',
+            comparator: 'time_opened',
 
             registerMessageHandler: function () {
                 converse.connection.addHandler(
@@ -2525,7 +2526,7 @@
                         view.model = item;
                         view.initialize();
                     }
-                    this.trimOpenChats(view);
+                    this.trimChats(view);
                 }, this);
             },
 
@@ -2549,13 +2550,14 @@
                 }
             },
 
-            trimOpenChats: function (view) {
+            trimChats: 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,
+                    trimmed_chats_width,
                     boxes_width = view.$el.outerWidth(true),
                     controlbox = this.get('controlbox');
                 if (!controlbox || !controlbox.$el.is(':visible')) {
@@ -2570,13 +2572,24 @@
                 if (this.model.length <= 1) {
                     return;
                 }
-                if ((boxes_width + toggle_width) > this.$el.width()) {
-                    // trim oldest view (which is not controlbox)
-                    this.get(this.model.at(1).get('id')).trimChat();
+                trimmed_chats_width = this.trimmed_chatboxes_view.$('.box-flyout').outerWidth(true) || 0;
+                if ((trimmed_chats_width + boxes_width + toggle_width) > this.$el.width()) {
+                    this.getOldestNonTrimmedChat().set('trimmed', true);
                 }
             },
 
-            showChatBox: function (attrs) {
+            getOldestNonTrimmedChat: function () {
+                // Get oldest view (which is not controlbox)
+                var i = 0;
+                var model = this.model.at(i);
+                while (model.get('id') === 'controlbox' || model.get('trimmed') === true) {
+                    i++;
+                    model = this.model.at(i);
+                }
+                return model;
+            },
+
+            showChat: function (attrs) {
                 var chatbox  = this.model.get(attrs.jid);
                 if (chatbox) {
                     chatbox.trigger('show');
@@ -2592,22 +2605,32 @@
         });
 
         this.TrimmedChatBoxView = Backbone.View.extend({
+            tagName: 'div',
+            className: 'chat-head',
+
+            events: {
+                'click .close-chatbox-button': 'close',
+                'click .restore-chat': 'restore'
+            },
+
             render: function () {
-                return this.$el;
+                return this.$el.addClass('chat-head-chatbox').html(
+                    converse.templates.trimmed_chat(this.model.toJSON()));
             },
 
-            _ensureElement: function() {
-                /* Override method from backbone.js
-                * Make sure that the el and $el attributes point to a DOM snippet
-                * from src/templates/trimmed_chat.html
-                */
-                if (!this.el) {
-                    var $el = $(converse.templates.trimmed_chat());
-                    this.setElement($el, false);
-                } else {
-                    this.setElement(_.result(this, 'el'), false);
-                }
+            close: function (ev) {
+                ev.preventDefault();
+                this.$el.remove();
+                this.model.destroy();
+                return this;
             },
+
+            restore: function (ev) {
+                ev.preventDefault();
+                this.model.set('trimmed', false);
+                this.$el.remove();
+                return this;
+            }
         });
 
         this.TrimmedChatBoxesView = Backbone.View.extend({
@@ -2628,7 +2651,7 @@
                     var view;
                     if (item.get('trimmed')) {
                         view = new converse.TrimmedChatBoxView({model: item});
-                        this.$el.append(view.render());
+                        this.$('.box-flyout').append(view.render());
                         views[item.get('id')] = view;
                     } else {
                         this.remove(item.get('id'));
@@ -2684,7 +2707,7 @@
 
             openChat: function (ev) {
                 ev.preventDefault();
-                return converse.chatboxviews.showChatBox({
+                return converse.chatboxviews.showChat({
                     'id': this.model.get('jid'),
                     'jid': this.model.get('jid'),
                     'fullname': this.model.get('fullname'),

spec/chatbox.js

@@ -104,8 +104,8 @@
                 var chatbox = utils.openChatBoxes(1)[0],
                     controlview = this.chatboxviews.get('controlbox'), // The controlbox is currently open
                     chatview = this.chatboxviews.get(chatbox.get('jid'));
-                spyOn(chatview, 'closeChat').andCallThrough();
-                spyOn(controlview, 'closeChat').andCallThrough();
+                spyOn(chatview, 'close').andCallThrough();
+                spyOn(controlview, 'close').andCallThrough();
                 spyOn(converse, 'emit');
 
                 // We need to rebind all events otherwise our spy won't be called
@@ -117,14 +117,14 @@
                 });
                 waits(250);
                 runs(function () {
-                    expect(controlview.closeChat).toHaveBeenCalled();
+                    expect(controlview.close).toHaveBeenCalled();
                     expect(converse.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object));
                     expect(converse.emit.callCount, 1);
                     chatview.$el.find('.close-chatbox-button').click();
                 });
                 waits(250);
                 runs(function () {
-                    expect(chatview.closeChat).toHaveBeenCalled();
+                    expect(chatview.close).toHaveBeenCalled();
                     expect(converse.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object));
                     expect(converse.emit.callCount, 2);
                 });
@@ -303,7 +303,7 @@
                     $toolbar = view.$el.find('ul.chat-toolbar');
                     callButton = $toolbar.find('.toggle-call');
                     expect(callButton.length).toBe(0);
-                    view.closeChat();
+                    view.close();
                     // Now check that it's shown if enabled and that it emits
                     // onCallButtonClicked
                     converse.visible_toolbar_buttons.call = true; // enable the button
@@ -328,7 +328,7 @@
                     $toolbar = view.$el.find('ul.chat-toolbar');
                     clearButton = $toolbar.find('.toggle-clear');
                     expect(clearButton.length).toBe(0);
-                    view.closeChat();
+                    view.close();
                     // Now check that it's shown if enabled and that it calls
                     // clearMessages
                     converse.visible_toolbar_buttons.clear = true; // enable the button

spec/chatroom.js

@@ -174,7 +174,7 @@
 
             it("can be closed again by clicking a DOM element with class 'close-chatbox-button'", $.proxy(function () {
                 var view = this.chatboxviews.get('lounge@muc.localhost'), chatroom = view.model, $el;
-                spyOn(view, 'closeChat').andCallThrough();
+                spyOn(view, 'close').andCallThrough();
                 spyOn(converse, 'emit');
                 spyOn(converse.connection.muc, 'leave');
                 view.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
@@ -183,7 +183,7 @@
                 });
                 waits(250);
                 runs(function () {
-                    expect(view.closeChat).toHaveBeenCalled();
+                    expect(view.close).toHaveBeenCalled();
                     expect(this.connection.muc.leave).toHaveBeenCalled();
                     expect(this.emit).toHaveBeenCalledWith('onChatBoxClosed', jasmine.any(Object));
                 }.bind(converse));
@@ -204,7 +204,7 @@
 
             afterEach($.proxy(function () {
                 var view = this.chatboxviews.get('problematic@muc.localhost');
-                view.closeChat();
+                view.close();
             }, converse));
 
             it("will show an error message if the room requires a password", $.proxy(function () {

src/templates/trimmed_chat.html

@@ -1,4 +1,6 @@
-<div class="chat-head">
-    <a class="close-chatbox-button icon-close"></a>
-    <div class="chat-title">JC Brand</div>
+<a class="close-chatbox-button icon-close"></a>
+<div class="chat-title">
+    <a href="#" class="restore-chat">
+        {{ fullname }}
+    </a>
 </div>

tests/utils.js

@@ -13,7 +13,7 @@
         var i, chatbox;
         for (i=converse.chatboxes.models.length-1; i>-1; i--) {
             chatbox = converse.chatboxes.models[i];
-            converse.chatboxviews.get(chatbox.get('id')).closeChat();
+            converse.chatboxviews.get(chatbox.get('id')).close();
         }
         return this;
     };
@@ -22,10 +22,10 @@
         var i, chatbox, num_chatboxes = converse.chatboxes.models.length;
         for (i=num_chatboxes-1; i>-1; i--) {
             chatbox = converse.chatboxes.models[i];
-            converse.chatboxviews.get(chatbox.get('id')).closeChat();
+            converse.chatboxviews.get(chatbox.get('id')).close();
             converse.chatboxviews.get(chatbox.get('id')).$el.remove();
         }
-        converse.chatboxviews.get('controlbox').closeChat();
+        converse.chatboxviews.get('controlbox').close();
         converse.chatboxviews.get('controlbox').$el.remove();
         return this;
     };