More work on trimming chat boxes.

Added a view for trimmed chat boxes and a super-view for keeping track of them.

converse.js

@@ -674,7 +674,7 @@
                 } else {
                     (attrs = {})[key] = val;
                 }
-                if (typeof attrs === 'object') {
+                if (typeof attrs === 'object' && attrs.trimmed) {
                     delete attrs.trimmed;
                 }
                 Backbone.Model.prototype.save.call(this, attrs, options);
@@ -2500,13 +2500,14 @@
         this.ChatBoxViews = Backbone.View.extend({
 
             initialize: function () {
-                this.render();
-
                 var views = {};
                 this.get = function (id) { return views[id]; };
                 this.set = function (id, view) { views[id] = view; };
                 this.getAll = function () { return views; };
 
+                this.trimmed_chatboxes_view = new converse.TrimmedChatBoxesView({model: this.model});
+                this.render();
+
                 this.model.on("add", function (item) {
                     var view = this.get(item.get('id'));
                     if (!view) {
@@ -2529,10 +2530,13 @@
             },
 
             render: function () {
-                this.$el.html(converse.templates.trimmed_chats());
+                this.$el.html(this.trimmed_chatboxes_view.render());
             },
 
             _ensureElement: function() {
+                /* Override method from backbone.js
+                 * If the #conversejs element doesn't exist, create it.
+                 */
                 if (!this.el) {
                     var $el = $('#conversejs');
                     if (!$el.length) {
@@ -2551,7 +2555,7 @@
                  * 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 toggle_width = 0,
                     boxes_width = view.$el.outerWidth(true),
                     controlbox = this.get('controlbox');
                 if (!controlbox || !controlbox.$el.is(':visible')) {
@@ -2587,6 +2591,69 @@
             }
         });
 
+        this.TrimmedChatBoxView = Backbone.View.extend({
+            render: function () {
+                return this.$el;
+            },
+
+            _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);
+                }
+            },
+        });
+
+        this.TrimmedChatBoxesView = Backbone.View.extend({
+
+            initialize: function () {
+                var views = {};
+                this.get = function (id) { return views[id]; };
+                this.set = function (id, view) { views[id] = view; };
+                this.remove = function (id) {
+                    var view = views[id];
+                    if (view) {
+                        view.remove();
+                        delete views[id];
+                    }
+                };
+
+                this.model.on("change:trimmed", function (item) {
+                    var view;
+                    if (item.get('trimmed')) {
+                        view = new converse.TrimmedChatBoxView({model: item});
+                        this.$el.append(view.render());
+                        views[item.get('id')] = view;
+                    } else {
+                        this.remove(item.get('id'));
+                    }
+                }, this);
+            },
+
+            render: function () {
+                return this.$el;
+            },
+
+            _ensureElement: function() {
+                /* Override method from backbone.js
+                * Make sure that the el and $el attributes point to a DOM snippet
+                * from src/templates/trimmed_chats.html
+                */
+                if (!this.el) {
+                    var $el = $(converse.templates.trimmed_chats());
+                    this.setElement($el, false);
+                } else {
+                    this.setElement(_.result(this, 'el'), false);
+                }
+            },
+        });
+
         this.RosterItem = Backbone.Model.extend({
             initialize: function (attributes, options) {
                 var jid = attributes.jid;

src/templates.js

@@ -35,7 +35,8 @@ define("converse-templates", [
     "tpl!src/templates/select_option",
     "tpl!src/templates/status_option",
     "tpl!src/templates/toolbar",
-    "tpl!src/templates/trimmed_chats",
+    "tpl!src/templates/trimmed_chat",
+    "tpl!src/templates/trimmed_chats"
 ], function () {
     return {
         action:                 arguments[0],
@@ -74,6 +75,7 @@ define("converse-templates", [
         select_option:          arguments[33],
         status_option:          arguments[34],
         toolbar:                arguments[35],
-        trimmed_chats:          arguments[36]
+        trimmed_chat:           arguments[36],
+        trimmed_chats:          arguments[37]
     };
 });