Cleaner separation between minimize/trimming feature and core

One visible effect is that when this component is now removed,
minimize buttons are not visible on the chat boxes.

updates #622

converse.js

@@ -169,7 +169,8 @@ require.config({
         "toolbar":                  "src/templates/toolbar",
         "toolbar_otr":              "src/templates/toolbar_otr",
         "trimmed_chat":             "src/templates/trimmed_chat",
-        "vcard":                    "src/templates/vcard"
+        "vcard":                    "src/templates/vcard",
+        "chatbox_minimize":         "src/templates/chatbox_minimize"
     },
 
     map: {

spec/chatbox.js

@@ -584,7 +584,7 @@
                 it("received for a minimized chat box will increment a counter on its header", function () {
                     var contact_name = mock.cur_names[0];
                     var contact_jid = contact_name.replace(/ /g,'.').toLowerCase() + '@localhost';
-                    spyOn(this, 'emit');
+                    spyOn(this, 'emit').andCallThrough();
                     test_utils.openChatBoxFor(contact_jid);
                     var chatview = this.chatboxviews.get(contact_jid);
                     expect(chatview.$el.is(':visible')).toBeTruthy();

src/converse-chatview.js

@@ -98,8 +98,6 @@
                                         show_textarea: true,
                                         title: this.model.get('fullname'),
                                         info_close: __('Close this chat box'),
-                                        // FIXME: leaky-abstraction from converse-minimize
-                                        info_minimize: __('Minimize this chat box'),
                                         label_personal_message: __('Personal message')
                                     }
                                 )
@@ -110,6 +108,7 @@
                     this.renderToolbar().renderAvatar();
                     this.$content.on('scroll', _.debounce(this.onScroll.bind(this), 100));
                     converse.emit('chatBoxOpened', this);
+                    converse.emit('chatRoomOpened', this);
                     window.setTimeout(utils.refreshWebkit, 50);
                     return this.showStatusMessage();
                 },

src/converse-controlbox.js

@@ -109,11 +109,6 @@
                     return this;
                 },
 
-                getOldestMaximizedChat: function (exclude_ids) {
-                    exclude_ids.push('controlbox');
-                    return this._super.getOldestMaximizedChat.apply(this, arguments);
-                },
-
                 getChatBoxWidth: function (view) {
                     var controlbox = this.get('controlbox');
                     if (view.model.get('id') === 'controlbox') {
@@ -151,13 +146,6 @@
                 insertIntoPage: function () {
                     this.$el.insertAfter(converse.chatboxviews.get("controlbox").$el);
                     return this;
-                },
-
-                maximize: function () {
-                    var chatboxviews = converse.chatboxviews;
-                    // Restores a minimized chat box
-                    this.$el.insertAfter(chatboxviews.get("controlbox").$el).show('fast', this.onMaximized.bind(this));
-                    return this;
                 }
             }
         },

src/converse-minimize.js

@@ -10,7 +10,9 @@
     define("converse-minimize", [
             "converse-core",
             "converse-api",
-            "converse-chatview"
+            "converse-controlbox",
+            "converse-chatview",
+            "converse-muc"
     ], factory);
 }(this, function (converse, converse_api) {
     "use strict";
@@ -152,9 +154,10 @@
                 },
 
                 maximize: function () {
-                    // Restore a minimized chat box
-                    $('#conversejs').prepend(this.$el);
-                    this.$el.show('fast', this.onMaximized.bind(this));
+                    // Restores a minimized chat box
+                    var chatboxviews = converse.chatboxviews;
+                    this.$el.insertAfter(chatboxviews.get("controlbox").$el)
+                        .show('fast', this.onMaximized.bind(this));
                     return this;
                 },
 
@@ -165,7 +168,29 @@
                     this.setChatState(converse.INACTIVE).model.minimize();
                     this.$el.hide('fast', this.onMinimized.bind(this));
                 },
+            },
 
+            ChatRoomView: {
+                events: {
+                    'click .toggle-chatbox-button': 'minimize',
+                },
+
+                initialize: function () {
+                    this.model.on('change:minimized', function (item) {
+                        if (item.get('minimized')) {
+                            this.hide();
+                        } else {
+                            this.maximize();
+                        }
+                    }, this);
+                    var result = this._super.initialize.apply(this, arguments);
+                    if (this.model.get('minimized')) {
+                        this.hide();
+                    } else {
+                        this.show();
+                    }
+                    return result;
+                }
             },
 
             ChatBoxes: {
@@ -244,6 +269,7 @@
 
                 getOldestMaximizedChat: function (exclude_ids) {
                     // Get oldest view (if its id is not excluded)
+                    exclude_ids.push('controlbox');
                     var i = 0;
                     var model = this.model.sort().at(i);
                     while (_.contains(exclude_ids, model.get('id')) ||
@@ -264,7 +290,6 @@
             /* The initialize function gets called as soon as the plugin is
              * loaded by converse.js's plugin machinery.
              */
-
             this.updateSettings({
                 no_trimming: false, // Set to true for phantomjs tests (where browser apparently has no width)
             });
@@ -284,6 +309,9 @@
                         }
                     }, this);
                     this.model.on('change:minimized', this.clearUnreadMessagesCounter, this);
+                    // OTR stuff, doesn't require this module to depend on OTR.
+                    this.model.on('showReceivedOTRMessage', this.updateUnreadMessagesCounter, this);
+                    this.model.on('showSentOTRMessage', this.updateUnreadMessagesCounter, this);
                 },
 
                 render: function () {
@@ -457,6 +485,21 @@
                 }
             });
 
+            var renderMinimizeButton = function (evt, view) {
+                // Inserts a "minimize" button in the chatview's header
+                var $el = view.$el.find('.toggle-chatbox-button');
+                var $new_el = converse.templates.chatbox_minimize(
+                    _.extend({info_minimize: __('Minimize this chat box')})
+                );
+                if ($el.length) {
+                    $el.replaceWith($new_el);
+                } else {
+                    view.$el.find('.close-chatbox-button').after($new_el);
+                }
+            };
+            converse.on('chatBoxOpened', renderMinimizeButton);
+            converse.on('chatRoomOpened', renderMinimizeButton);
+
             converse.on('controlBoxOpened', function (evt, chatbox) {
                 // Wrapped in anon method because at scan time, chatboxviews
                 // attr not set yet.

src/converse-muc.js

@@ -169,7 +169,6 @@
                 is_chatroom: true,
                 events: {
                     'click .close-chatbox-button': 'close',
-                    'click .toggle-chatbox-button': 'minimize',
                     'click .configure-chatroom-button': 'configureChatRoom',
                     'click .toggle-smiley': 'toggleEmoticonMenu',
                     'click .toggle-smiley ul li': 'insertEmoticon',
@@ -185,33 +184,18 @@
                 initialize: function () {
                     $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
                     this.model.messages.on('add', this.onMessageAdded, this);
-                    this.model.on('change:minimized', function (item) {
-                        if (item.get('minimized')) {
-                            this.hide();
-                        } else {
-                            this.maximize();
-                        }
-                    }, this);
-
                     this.occupantsview = new converse.ChatRoomOccupantsView({
                         model: new converse.ChatRoomOccupants({nick: this.model.get('nick')})
                     });
                     var id = b64_sha1('converse.occupants'+converse.bare_jid+this.model.get('id')+this.model.get('nick'));
                     this.occupantsview.model.browserStorage = new Backbone.BrowserStorage[converse.storage](id);
-
                     this.occupantsview.chatroomview = this;
                     this.render().$el.hide();
                     this.occupantsview.model.fetch({add:true});
                     this.join(null, {'maxstanzas': converse.muc_history_max_stanzas});
                     this.fetchMessages();
-                    converse.emit('chatRoomOpened', this);
-
                     this.$el.insertAfter(converse.chatboxviews.get("controlbox").$el);
-                    if (this.model.get('minimized')) {
-                        this.hide();
-                    } else {
-                        this.show();
-                    }
+                    converse.emit('chatRoomOpened', this);
                 },
 
                 render: function () {

src/converse-otr.js

@@ -13,8 +13,7 @@
     define("converse-otr", [
             "otr",
             "converse-core",
-            "converse-api",
-            "converse-minimize"
+            "converse-api"
     ], factory);
 }(this, function (otr, converse, converse_api) {
     "use strict";
@@ -458,14 +457,6 @@
                             ));
                     return this;
                 }
-            },
-
-            MinimizedChatBoxView: {
-                initialize: function () {
-                    this._super.initialize.apply(this, arguments);
-                    this.model.on('showReceivedOTRMessage', this.updateUnreadMessagesCounter, this);
-                    this.model.on('showSentOTRMessage', this.updateUnreadMessagesCounter, this);
-                },
             }
         },
 

src/converse-templates.js

@@ -52,6 +52,11 @@ define("converse-templates", [
     "tpl!toolbar_otr",
     "tpl!trimmed_chat",
     "tpl!vcard",
+
+    // Can be removed together with converse-minimize.js
+    // if minimization/trimming features not needed (for example for mobile
+    // apps).
+    "tpl!chatbox_minimize",
 ], function () {
     return {
         action:                 arguments[0],
@@ -106,6 +111,7 @@ define("converse-templates", [
         toolbar:                arguments[49],
         toolbar_otr:            arguments[50],
         trimmed_chat:           arguments[51],
-        vcard:                  arguments[52]
+        vcard:                  arguments[52],
+        chatbox_minimize:       arguments[53]
     };
 });

src/templates/chatbox.html

@@ -4,7 +4,6 @@
     <div class="dragresize dragresize-left"></div>
     <div class="chat-head chat-head-chatbox">
         <a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
-        <a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>
         <div class="chat-title">
             {[ if (url) { ]}
                 <a href="{{url}}" target="_blank" rel="noopener" class="user">

src/templates/chatbox_minimize.html

@@ -0,0 +1 @@
+<a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>

src/templates/chatroom.html

@@ -4,7 +4,6 @@
     <div class="dragresize dragresize-left"></div>
     <div class="chat-head chat-head-chatroom">
         <a class="chatbox-btn close-chatbox-button icon-close"></a>
-        <a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
         <a class="chatbox-btn configure-chatroom-button icon-wrench" style="display:none"></a>
         <div class="chat-title"> {{ _.escape(name) }} </div>
         <p class="chatroom-topic"><p/>