Render room features separately

So that the occupants list doesn't get wiped.
This commit is contained in:
JC Brand 2017-02-19 11:02:36 +01:00
parent 9817aedea7
commit 4c41ae8fad
5 changed files with 80 additions and 65 deletions

View File

@ -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",

View File

@ -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]

View File

@ -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;
},

View File

@ -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>
{[ } ]}

View File

@ -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> -->