Some initial work on adding trimmed chat functionality

converse.js

@@ -1304,6 +1304,7 @@
             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();
             },
@@ -2963,6 +2964,32 @@
             }
         });
 
+        this.TrimmedChatBoxes = Backbone.View.extend({
+            /* A view for trimmed chat boxes and chat rooms.
+             * XXX: Add this view inside ChatBoxViews's $el (i.e. #conversejs)
+             */
+            tagName: 'div',
+            id: 'trimmed-chatboxes',
+            initialize: function () {
+                var views = {};
+                this.get = function (id) { return views[id]; };
+                this.set = function (id, view) { views[id] = view; };
+                this.getAll = function () { return views; };
+
+                this.$el.html(converse.templates.trimmed_chats());
+                this.model.on("add", function (item) {
+                    if (!item.get('trimmed')) {
+                        return;
+                    }
+                    this.show(item);
+                }, this);
+            },
+
+            show: function (item) {
+                this.$('.box-flyout').append(converse.templates.trim_chat());
+            }
+        });
+
         this.RosterView = Backbone.View.extend({
             tagName: 'dl',
             id: 'converse-roster',

less/converse.less

@@ -551,14 +551,14 @@ span.spinner.hor_centered {
     color: white;
 }
 
-#conversejs #offscreen-chatboxes {
+#conversejs #trimmed-chatboxes {
     float: left;
     height: 25px;
     margin-left: 5px;
     display: block;
 }
 
-#conversejs #offscreen-chatboxes .box-flyout {
+#conversejs #trimmed-chatboxes .box-flyout {
     position: absolute;
     display: block;
     bottom: 1px;
@@ -567,7 +567,7 @@ span.spinner.hor_centered {
     height: auto;
 }
 
-#conversejs #offscreen-chatboxes .box-flyout .chat-head {
+#conversejs #trimmed-chatboxes .box-flyout .chat-head {
     font-size: 100%;
     border-radius: 4px;
     padding: 3px 0 0 5px;
@@ -576,7 +576,7 @@ span.spinner.hor_centered {
     height: 24px;
 }
 
-#conversejs #offscreen-chatboxes .chat-head-chatroom {
+#conversejs #trimmed-chatboxes .chat-head-chatroom {
     width: 100px;
 }
 

mockup/index.html

@@ -373,7 +373,7 @@
         </div>
     </div>
 
-    <div id="offscreen-chatboxes">
+    <div id="trimmed-chatboxes">
         <div class="box-flyout">
             <div class="chat-head chat-head-chatroom">
                 <a class="close-chatbox-button icon-close"></a>

src/templates/trimmed_chat.html

@@ -0,0 +1,4 @@
+<div class="chat-head">
+    <a class="close-chatbox-button icon-close"></a>
+    <div class="chat-title">JC Brand</div>
+</div>

src/templates/trimmed_chats.html

@@ -0,0 +1 @@
+<div class="box-flyout"></div>