Move leaky MUC abstractions out of converse-chatview.js

In the process also updated `updateSettings` to allow merging.

config.js

@@ -139,6 +139,7 @@ require.config({
         "chatroom_nickname_form":   "src/templates/chatroom_nickname_form",
         "chatroom_password_form":   "src/templates/chatroom_password_form",
         "chatroom_sidebar":         "src/templates/chatroom_sidebar",
+        "chatroom_toolbar":         "src/templates/chatroom_toolbar",
         "chatrooms_tab":            "src/templates/chatrooms_tab",
         "chats_panel":              "src/templates/chats_panel",
         "choose_status":            "src/templates/choose_status",

spec/utils.js

@@ -44,6 +44,15 @@
             expect(context.visible_toolbar_buttons.call).toBeFalsy();
             expect(context.visible_toolbar_buttons.toggle_occupants).toBeFalsy();
             expect(context.visible_toolbar_buttons.invalid).toBeFalsy();
+
+            user_settings = {
+                visible_toolbar_buttons: {
+                    'toggle_occupants': true
+                }
+            };
+            utils.applyUserSettings(context, settings, user_settings);
+            expect(Object.keys(context.visible_toolbar_buttons)).toEqual(Object.keys(settings.visible_toolbar_buttons));
+            expect(context.visible_toolbar_buttons.toggle_occupants).toBeTruthy();
         });
     });
 }));

src/converse-chatview.js

@@ -84,8 +84,7 @@
                 visible_toolbar_buttons: {
                     'emoticons': true,
                     'call': false,
-                    'clear': true,
-                    'toggle_occupants': true // Leaky abstraction from MUC
+                    'clear': true
                 },
             });
 
@@ -668,22 +667,25 @@
                     return this;
                 },
 
-                renderToolbar: function (options) {
-                    if (!converse.show_toolbar) {
-                        return;
-                    }
-                    options = _.extend(options || {}, {
-                        label_clear: __('Clear all messages'),
-                        label_hide_occupants: __('Hide the list of occupants'),
-                        label_insert_smiley: __('Insert a smiley'),
-                        label_start_call: __('Start a call'),
-                        show_call_button: converse.visible_toolbar_buttons.call,
-                        show_clear_button: converse.visible_toolbar_buttons.clear,
-                        show_emoticons: converse.visible_toolbar_buttons.emoticons,
-                        // FIXME Leaky abstraction MUC
-                        show_occupants_toggle: this.is_chatroom && converse.visible_toolbar_buttons.toggle_occupants
+                getToolbarOptions: function (options) {
+                    return _.extend(options || {}, {
+                        'label_clear': __('Clear all messages'),
+                        'label_insert_smiley': __('Insert a smiley'),
+                        'label_start_call': __('Start a call'),
+                        'show_call_button': converse.visible_toolbar_buttons.call,
+                        'show_clear_button': converse.visible_toolbar_buttons.clear,
+                        'show_emoticons': converse.visible_toolbar_buttons.emoticons,
                     });
-                    this.$el.find('.chat-toolbar').html(converse.templates.toolbar(_.extend(this.model.toJSON(), options || {})));
+                },
+
+                renderToolbar: function (toolbar, options) {
+                    if (!converse.show_toolbar) { return; }
+                    toolbar = toolbar || converse.templates.toolbar;
+                    options = _.extend(
+                        this.model.toJSON(),
+                        this.getToolbarOptions(options || {})
+                    );
+                    this.$el.find('.chat-toolbar').html(toolbar(options));
                     return this;
                 },
 

src/converse-core.js

@@ -1940,8 +1940,8 @@
             /* Helper method which gets put on the plugin and allows it to
              * add more user-facing config settings to converse.js.
              */
-            _.extend(converse.default_settings, settings);
-            _.extend(converse, settings);
+            utils.merge(converse.default_settings, settings);
+            utils.merge(converse, settings);
             utils.applyUserSettings(converse, settings, converse.user_settings);
         };
         converse.pluggable.initializePlugins({

src/converse-muc.js

@@ -19,6 +19,7 @@
             "tpl!chatroom_nickname_form",
             "tpl!chatroom_password_form",
             "tpl!chatroom_sidebar",
+            "tpl!chatroom_toolbar",
             "tpl!chatrooms_tab",
             "tpl!info",
             "tpl!occupant",
@@ -37,6 +38,7 @@
             tpl_chatroom_nickname_form,
             tpl_chatroom_password_form,
             tpl_chatroom_sidebar,
+            tpl_chatroom_toolbar,
             tpl_chatrooms_tab,
             tpl_info,
             tpl_occupant,
@@ -215,7 +217,10 @@
                 muc_domain: undefined,
                 muc_history_max_stanzas: undefined,
                 muc_instant_rooms: true,
-                muc_nickname_from_jid: false
+                muc_nickname_from_jid: false,
+                visible_toolbar_buttons: {
+                    'toggle_occupants': true
+                },
             });
 
 
@@ -304,13 +309,23 @@
                                     'label_message': __('Message')
                                 }))
                             .append(this.occupantsview.render().$el);
-                        this.renderToolbar();
+                        this.renderToolbar(tpl_chatroom_toolbar);
                         this.$content = this.$el.find('.chat-content');
                     }
                     this.toggleOccupants(null, true);
                     return this;
                 },
 
+                getToolbarOptions: function () {
+                    return _.extend(
+                        converse.ChatBoxView.prototype.getToolbarOptions.apply(this, arguments),
+                        {
+                          label_hide_occupants: __('Hide the list of occupants'),
+                          show_occupants_toggle: this.is_chatroom && converse.visible_toolbar_buttons.toggle_occupants
+                        }
+                    );
+                },
+
                 close: function (ev) {
                     this.leave();
                     converse.ChatBoxView.prototype.close.apply(this, arguments);

src/converse-otr.js

@@ -426,7 +426,7 @@
                     }
                 },
 
-                renderToolbar: function (options) {
+                renderToolbar: function (toolbar, options) {
                     var converse = this.__super__.converse;
                     if (!converse.show_toolbar) {
                         return;
@@ -449,7 +449,7 @@
                         otr_tooltip: this.getOTRTooltip(),
                         otr_translated_status: OTR_TRANSLATED_MAPPING[data.otr_status],
                     });
-                    this.__super__.renderToolbar.call(this, options);
+                    this.__super__.renderToolbar.apply(this, arguments);
                     this.$el.find('.chat-toolbar').append(
                             converse.templates.toolbar_otr(
                                 _.extend(this.model.toJSON(), options || {})

src/templates/chatroom_toolbar.html

+{[ if (show_emoticons)  { ]}
+    <li class="toggle-smiley icon-happy" title="{{label_insert_smiley}}">
+        <ul>
+            <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
+            <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
+            <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
+            <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
+            <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
+            <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
+            <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
+            <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
+            <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
+            <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
+            <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
+            <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
+            <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
+        </ul>
+    </li>
+{[ } ]}
+{[ if (show_call_button)  { ]}
+<li class="toggle-call"><a class="icon-phone" title="{{label_start_call}}"></a></li>
+{[ } ]}
+{[ if (show_occupants_toggle)  { ]}
+<li class="toggle-occupants"><a class="icon-hide-users" title="{{label_hide_occupants}}"></a></li>
+{[ } ]}
+{[ if (show_clear_button)  { ]}
+<li class="toggle-clear"><a class="icon-remove" title="{{label_clear}}"></a></li>
+{[ } ]}
+

src/templates/toolbar.html

@@ -20,9 +20,6 @@
 {[ if (show_call_button)  { ]}
 <li class="toggle-call"><a class="icon-phone" title="{{label_start_call}}"></a></li>
 {[ } ]}
-{[ if (show_occupants_toggle)  { ]}
-<li class="toggle-occupants"><a class="icon-hide-users" title="{{label_hide_occupants}}"></a></li>
-{[ } ]}
 {[ if (show_clear_button)  { ]}
 <li class="toggle-clear"><a class="icon-remove" title="{{label_clear}}"></a></li>
 {[ } ]}

src/utils.js

@@ -233,6 +233,18 @@
             return false;
         },
 
+        merge: function merge (first, second) {
+            /* Merge the second object into the first one.
+             */
+            for (var k in second) {
+                if (_.isObject(first[k])) {
+                    merge(first[k], second[k]);
+                } else {
+                    first[k] = second[k];
+                }
+            }
+        },
+
         applyUserSettings: function applyUserSettings (context, settings, user_settings) {
             /* Configuration settings might be nested objects. We only want to
              * add settings which are whitelisted.

tests.html

@@ -9,7 +9,6 @@
     <link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
     <script src="config.js"></script>
-    <script src="converse.js"></script>
     <script data-main="tests/main" src="node_modules/requirejs/require.js"></script>
 </head>