Save chat box's toggle state between page loads.

converse.js

@@ -629,10 +629,11 @@
                     this.messages = new converse.Messages();
                     this.messages.localStorage = new Backbone.LocalStorage(
                         hex_sha1('converse.messages'+this.get('jid')+converse.bare_jid));
-                    this.set({
+                    this.save({
                         'user_id' : Strophe.getNodeFromJid(this.get('jid')),
                         'box_id' : hex_sha1(this.get('jid')),
-                        'otr_status': this.get('otr_status') || UNENCRYPTED
+                        'otr_status': this.get('otr_status') || UNENCRYPTED,
+                        'minimized': this.get('minimized') || false
                     });
                 }
             },
@@ -840,7 +841,7 @@
 
             events: {
                 'click .close-chatbox-button': 'closeChat',
-                'click .toggle-chatbox-button': 'toggleChat',
+                'click .toggle-chatbox-button': 'toggleChatBox',
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
@@ -880,21 +881,6 @@
                 }
             },
 
-            initDragResize: function () {
-                this.min_height = 150;
-                this.prev_pageY = 0; // To store last known mouse position
-                this.original_height = this.$el.children('.box-flyout').height();
-                if (converse.connection) {
-                    this.height = this.model.get('height');
-                    if (this.height) {
-                        this.setChatBoxHeight(this.height);
-                    } else {
-                        this.height = this.original_height;
-                        this.model.save({'height': this.height});
-                    }
-                }
-            },
-
             render: function () {
                 this.$el.attr('id', this.model.get('box_id'))
                     .html(
@@ -913,6 +899,21 @@
                 return this;
             },
 
+            initDragResize: function () {
+                this.min_height = 150;
+                this.prev_pageY = 0; // To store last known mouse position
+                this.original_height = this.$el.children('.box-flyout').height();
+                if (converse.connection) {
+                    this.height = this.model.get('height');
+                    if (this.height) {
+                        this.setChatBoxHeight(this.height);
+                    } else {
+                        this.height = this.original_height;
+                        this.model.save({'height': this.height});
+                    }
+                }
+            },
+
             showStatusNotification: function (message, replace) {
                 var $chat_content = this.$el.find('.chat-content');
                 $chat_content.find('div.chat-event').remove().end()
@@ -1125,7 +1126,9 @@
             },
 
             setChatBoxHeight: function (height) {
-                this.$el.children('.box-flyout')[0].style.height = height + 'px';
+                if (!this.model.get('minimized')) {
+                    this.$el.children('.box-flyout')[0].style.height = height+'px';
+                }
             },
 
             resizeChatBox: function (ev) {
@@ -1295,11 +1298,10 @@
                 }
             },
 
-            toggleChat: function (ev) {
-                // FIXME: Restore chat box to original resized height.
+            toggleChatBox: function (ev) {
+                // TODO: Restore chat box to original resized height.
                 // Requires that we save the custom height.
                 this.$el.children('.box-flyout').attr('style', '');
-
                 this.saveToggleState();
                 this.$el.find('div.chat-body').slideToggle('fast');
                 var $target = $(ev.target);
@@ -1877,7 +1879,7 @@
             className: 'chatroom',
             events: {
                 'click .close-chatbox-button': 'closeChat',
-                'click .toggle-chatbox-button': 'toggleChat',
+                'click .toggle-chatbox-button': 'toggleChatBox',
                 'click .configure-chatroom-button': 'configureChatRoom',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',

src/templates/chatbox.html

@@ -1,9 +1,12 @@
-<div class="box-flyout">
+<div class="box-flyout {[ if (minimized) { ]} minimized {[ } ]}">
     <div class="dragresize dragresize-tm"></div>
     <div class="chat-head chat-head-chatbox">
         <a class="close-chatbox-button icon-close"></a>
-        <a class="toggle-chatbox-button icon-minus"></a>
-        <div class="chat-title"> 
+        <a class="toggle-chatbox-button
+                  {[ if (minimized) { ]} icon-plus {[ } ]}
+                  {[ if (!minimized) { ]} icon-minus {[ } ]}
+                 "></a>
+        <div class="chat-title">
             {[ if (url) { ]}
                 <a href="{{url}}" target="_blank" class="user">
             {[ } ]}
@@ -14,7 +17,7 @@
         </div>
         <p class="user-custom-message"><p/>
     </div>
-    <div class="chat-body">
+    <div class="chat-body" {[ if (minimized) { ]} style="display:none" {[ } ]}>
         <div class="chat-content"></div>
         <form class="sendXMPPMessage" action="" method="post">
             {[ if (show_toolbar) { ]}