Render room features separately

So that the occupants list doesn't get wiped.

config.js

@@ -129,6 +129,7 @@ require.config({
         "chatroom":                 "src/templates/chatroom",
         "chatroom_bookmark_form":   "src/templates/chatroom_bookmark_form",
         "chatroom_bookmark_toggle": "src/templates/chatroom_bookmark_toggle",
+        "chatroom_features":        "src/templates/chatroom_features",
         "chatroom_form":            "src/templates/chatroom_form",
         "chatroom_head":            "src/templates/chatroom_head",
         "chatroom_nickname_form":   "src/templates/chatroom_nickname_form",

docs/CHANGES.md

@@ -13,6 +13,8 @@
       available to plugins, has been renamed from `converse` to `_converse`.
       The public API is accessible via a global `converse` object.
     * The `keepalive` and `roster_groups` options are now set to `true` by default.
+    * Templates are no longer stored as attributes on the `_converse` object.
+      If you need a particular template, use `require` to load it.
 
 - The chat room `description` is now shown in the heading, not the `subject`.
   [jcbrand]

src/converse-muc.js

@@ -14,12 +14,13 @@
             "converse-core",
             "tpl!chatarea",
             "tpl!chatroom",
+            "tpl!chatroom_features",
             "tpl!chatroom_form",
+            "tpl!chatroom_head",
             "tpl!chatroom_nickname_form",
             "tpl!chatroom_password_form",
             "tpl!chatroom_sidebar",
             "tpl!chatroom_toolbar",
-            "tpl!chatroom_head",
             "tpl!chatrooms_tab",
             "tpl!info",
             "tpl!occupant",
@@ -33,12 +34,13 @@
             converse,
             tpl_chatarea,
             tpl_chatroom,
+            tpl_chatroom_features,
             tpl_chatroom_form,
+            tpl_chatroom_head,
             tpl_chatroom_nickname_form,
             tpl_chatroom_password_form,
             tpl_chatroom_sidebar,
             tpl_chatroom_toolbar,
-            tpl_chatroom_head,
             tpl_chatrooms_tab,
             tpl_info,
             tpl_occupant,
@@ -398,9 +400,7 @@
                      */
                     this.occupantsview = new _converse.ChatRoomOccupantsView({
                         'model': new _converse.ChatRoomOccupants(),
-                        'attributes': {
-                            'chatroomview': this
-                        }
+                        'attributes': { 'chatroomview': this }  // Hack
                     });
                     var id = b64_sha1('converse.occupants'+_converse.bare_jid+this.model.get('jid'));
                     this.occupantsview.model.browserStorage = new Backbone.BrowserStorage.session(id);
@@ -1959,21 +1959,25 @@
 
                 initialize: function () {
                     this.model.on("add", this.onOccupantAdded, this);
-                    var debounced_render = _.debounce(this.render, 100);
+                    var debouncedRenderRoomFeatures = _.debounce(this.renderRoomFeatures, 100);
+
+                    // This is an ugly hack (misusing view attributes)
                     this.chatroomview = this.attributes.chatroomview;
-                    this.chatroomview.model.on('change:hidden', debounced_render, this);
-                    this.chatroomview.model.on('change:mam_enabled', debounced_render, this);
-                    this.chatroomview.model.on('change:membersonly', debounced_render, this);
-                    this.chatroomview.model.on('change:moderated', debounced_render, this);
-                    this.chatroomview.model.on('change:nonanonymous', debounced_render, this);
-                    this.chatroomview.model.on('change:open', debounced_render, this);
-                    this.chatroomview.model.on('change:passwordprotected', debounced_render, this);
-                    this.chatroomview.model.on('change:persistent', debounced_render, this);
-                    this.chatroomview.model.on('change:public', debounced_render, this);
-                    this.chatroomview.model.on('change:semianonymous', debounced_render, this);
-                    this.chatroomview.model.on('change:temporary', debounced_render, this);
-                    this.chatroomview.model.on('change:unmoderated', debounced_render, this);
-                    this.chatroomview.model.on('change:unsecured', debounced_render, this);
+                    delete this.attributes.chatroomview;
+
+                    this.chatroomview.model.on('change:hidden', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:mam_enabled', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:membersonly', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:moderated', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:nonanonymous', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:open', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:passwordprotected', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:persistent', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:public', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:semianonymous', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:temporary', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:unmoderated', debouncedRenderRoomFeatures, this);
+                    this.chatroomview.model.on('change:unsecured', debouncedRenderRoomFeatures, this);
                 },
 
                 render: function () {
@@ -1982,13 +1986,26 @@
                             _.extend(this.chatroomview.model.toJSON(), {
                                 'allow_muc_invitations': _converse.allow_muc_invitations,
                                 'label_features': __('Features'),
+                                'label_invitation': __('Invite'),
+                                'label_occupants': __('Occupants'),
+                            }))
+                    );
+                    if (_converse.allow_muc_invitations) {
+                        _converse.api.waitUntil('rosterContactsFetched').then(this.initInviteWidget.bind(this));
+                    }
+                    return this.renderRoomFeatures();
+                },
+
+                renderRoomFeatures: function () {
+                    this.$('.features-list').html(
+                        tpl_chatroom_features(
+                            _.extend(this.chatroomview.model.toJSON(), {
                                 'label_hidden': __('Hidden'),
                                 'label_invitation': __('Invite'),
                                 'label_mam_enabled': __('Message archiving'),
                                 'label_membersonly': __('Members only'),
                                 'label_moderated': __('Moderated'),
                                 'label_nonanonymous': __('Non-anonymous'),
-                                'label_occupants': __('Occupants'),
                                 'label_open': __('Open'),
                                 'label_passwordprotected': __('Password protected'),
                                 'label_persistent': __('Persistent'),
@@ -2012,9 +2029,6 @@
                                 'tt_unsecured': __('This room does not require a password upon entry')
                             }))
                     );
-                    if (_converse.allow_muc_invitations) {
-                        _converse.api.waitUntil('rosterContactsFetched').then(this.initInviteWidget.bind(this));
-                    }
                     return this;
                 },
 

src/templates/chatroom_features.html

@@ -0,0 +1,39 @@
+{[ if (passwordprotected) { ]}
+<li class="feature" title="{{{ tt_passwordprotected }}}"><span class="icon-lock-2"></span>{{{ label_passwordprotected }}}</li>
+{[ } ]}
+{[ if (unsecured) { ]}
+<li class="feature" title="{{{ tt_unsecured }}}"><span class="icon-unlocked"></span>{{{ label_unsecured }}}</li>
+{[ } ]}
+{[ if (hidden) { ]}
+<li class="feature" title="{{{ tt_hidden }}}"><span class="icon-eye-blocked"></span>{{{ label_hidden }}}</li>
+{[ } ]}
+{[ if (public) { ]}
+<li class="feature" title="{{{ tt_public }}}"><span class="icon-eye"></span>{{{ label_public }}}</li>
+{[ } ]}
+{[ if (membersonly) { ]}
+<li class="feature" title="{{{ tt_membersonly }}}"><span class="icon-address-book"></span>{{{ label_membersonly }}}</li>
+{[ } ]}
+{[ if (open) { ]}
+<li class="feature" title="{{{ tt_open }}}"><span class="icon-globe"></span>{{{ label_open }}}</li>
+{[ } ]}
+{[ if (persistent) { ]}
+<li class="feature" title="{{{ tt_persistent }}}"><span class="icon-save"></span>{{{ label_persistent }}}</li>
+{[ } ]}
+{[ if (temporary) { ]}
+<li class="feature" title="{{{ tt_temporary }}}"><span class="icon-snowflake"></span>{{{ label_temporary }}}</li>
+{[ } ]}
+{[ if (nonanonymous) { ]}
+<li class="feature" title="{{{ tt_nonanonymous }}}"><span class="icon-idcard-dark"></span>{{{ label_nonanonymous }}}</li>
+{[ } ]}
+{[ if (semianonymous) { ]}
+<li class="feature" title="{{{ tt_semianonymous }}}"><span class="icon-info"></span>{{{ label_semianonymous }}}</li>
+{[ } ]}
+{[ if (moderated) { ]}
+<li class="feature" title="{{{ tt_moderated }}}"><span class="icon-legal"></span>{{{ label_moderated }}}</li>
+{[ } ]}
+{[ if (unmoderated) { ]}
+<li class="feature" title="{{{ tt_unmoderated }}}"><span class="icon-info"></span>{{{ label_unmoderated }}}</li>
+{[ } ]}
+{[ if (mam_enabled) { ]}
+<li class="feature" title="{{{ tt_mam_enabled }}}"><span class="icon-database"></span>{{{ label_mam_enabled }}}</li>
+{[ } ]}

src/templates/chatroom_sidebar.html

@@ -10,46 +10,5 @@
 <ul class="occupant-list"></ul>
 
 <p class="occupants-heading">{{{label_features}}}</p>
-<ul>
-    {[ if (passwordprotected) { ]}
-    <li class="feature" title="{{{ tt_passwordprotected }}}"><span class="icon-lock-2"></span>{{{ label_passwordprotected }}}</li>
-    {[ } ]}
-    {[ if (unsecured) { ]}
-    <li class="feature" title="{{{ tt_unsecured }}}"><span class="icon-unlocked"></span>{{{ label_unsecured }}}</li>
-    {[ } ]}
-    {[ if (hidden) { ]}
-    <li class="feature" title="{{{ tt_hidden }}}"><span class="icon-eye-blocked"></span>{{{ label_hidden }}}</li>
-    {[ } ]}
-    {[ if (public) { ]}
-    <li class="feature" title="{{{ tt_public }}}"><span class="icon-eye"></span>{{{ label_public }}}</li>
-    {[ } ]}
-    {[ if (membersonly) { ]}
-    <li class="feature" title="{{{ tt_membersonly }}}"><span class="icon-address-book"></span>{{{ label_membersonly }}}</li>
-    {[ } ]}
-    {[ if (open) { ]}
-    <li class="feature" title="{{{ tt_open }}}"><span class="icon-globe"></span>{{{ label_open }}}</li>
-    {[ } ]}
-    {[ if (persistent) { ]}
-    <li class="feature" title="{{{ tt_persistent }}}"><span class="icon-save"></span>{{{ label_persistent }}}</li>
-    {[ } ]}
-    {[ if (temporary) { ]}
-    <li class="feature" title="{{{ tt_temporary }}}"><span class="icon-snowflake"></span>{{{ label_temporary }}}</li>
-    {[ } ]}
-    {[ if (nonanonymous) { ]}
-    <li class="feature" title="{{{ tt_nonanonymous }}}"><span class="icon-idcard-dark"></span>{{{ label_nonanonymous }}}</li>
-    {[ } ]}
-    {[ if (semianonymous) { ]}
-    <li class="feature" title="{{{ tt_semianonymous }}}"><span class="icon-info"></span>{{{ label_semianonymous }}}</li>
-    {[ } ]}
-    {[ if (moderated) { ]}
-    <li class="feature" title="{{{ tt_moderated }}}"><span class="icon-legal"></span>{{{ label_moderated }}}</li>
-    {[ } ]}
-    {[ if (unmoderated) { ]}
-    <li class="feature" title="{{{ tt_unmoderated }}}"><span class="icon-info"></span>{{{ label_unmoderated }}}</li>
-    {[ } ]}
-    {[ if (mam_enabled) { ]}
-    <li class="feature" title="{{{ tt_mam_enabled }}}"><span class="icon-database"></span>{{{ label_mam_enabled }}}</li>
-    {[ } ]}
-</ul>
-
+<ul class="features-list"></ul>
 <!-- </div> -->