Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Also make the open rooms list an OrderedListView

Browse Source
This commit is contained in:
JC Brand 2018-01-05 12:33:28 +00:00
parent a91e9216e6
commit 96742a6684
6 changed files with 132 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dev.html
View File

@ -60,6 +60,7 @@
// 'prosody@conference.prosody.im', // 'prosody@conference.prosody.im',
// 'jdev@conference.jabber.org' // 'jdev@conference.jabber.org'
// ], // ],
hide_open_bookmarks: true,
notify_all_room_messages: [ notify_all_room_messages: [
'discuss@conference.conversejs.org' 'discuss@conference.conversejs.org'
], ],

1
spec/bookmarks.js
View File

@ -477,6 +477,7 @@
return true; return true;
} }
}).length).toBe(1); }).length).toBe(1);
var stanza = $iq({'to': _converse.connection.jid, 'type':'result', 'id':IQ_id}) var stanza = $iq({'to': _converse.connection.jid, 'type':'result', 'id':IQ_id})
.c('pubsub', {'xmlns': Strophe.NS.PUBSUB}) .c('pubsub', {'xmlns': Strophe.NS.PUBSUB})
.c('items', {'node': 'storage:bookmarks'}) .c('items', {'node': 'storage:bookmarks'})

2
spec/chatroom.js
View File

@ -3146,7 +3146,7 @@
panel.onRoomsFound(iq); panel.onRoomsFound(iq);
expect($(panel.el.querySelector('#available-chatrooms')).children('dt').length).toBe(1); expect($(panel.el.querySelector('#available-chatrooms')).children('dt').length).toBe(1);
expect($(panel.el.querySelector('#available-chatrooms')).children('dt').first().text()).toBe("Rooms on muc.localhost"); expect($(panel.el.querySelector('#available-chatrooms')).children('dt').first().text()).toBe("Rooms found");
expect($(panel.el.querySelector('#available-chatrooms')).children('dd').length).toBe(4); expect($(panel.el.querySelector('#available-chatrooms')).children('dd').length).toBe(4);
done(); done();
})); }));

25
src/converse-bookmarks.js
View File

@ -417,9 +417,9 @@
initialize () { initialize () {
Backbone.OrderedListView.prototype.initialize.apply(this, arguments); Backbone.OrderedListView.prototype.initialize.apply(this, arguments);
this.toggleBookmarksList = _.debounce(this._toggleBookmarksList, 600, {'leading': true}); this.model.on('add', this.showOrHide, this);
this.model.on('remove', this.showOrHide, this);
this.model.on('remove', this.hideListIfEmpty, this);
_converse.chatboxes.on('add', this.renderBookmarkListElement, this); _converse.chatboxes.on('add', this.renderBookmarkListElement, this);
_converse.chatboxes.on('remove', this.renderBookmarkListElement, this); _converse.chatboxes.on('remove', this.renderBookmarkListElement, this);
@ -441,7 +441,7 @@
'label_bookmarks': __('Bookmarks'), 'label_bookmarks': __('Bookmarks'),
'_converse': _converse '_converse': _converse
}); });
this.hideListIfEmpty(); this.showOrHide();
this.insertIntoControlBox(); this.insertIntoControlBox();
return this; return this;
}, },
@ -465,17 +465,24 @@
return; return;
} }
bookmarkview.render(); bookmarkview.render();
this.hideListIfEmpty(); this.showOrHide();
}, },
hideListIfEmpty (item) { showOrHide (item) {
const bookmarks = sizzle('.available-chatroom:not(.hidden)', this.el); if (_converse.hide_open_bookmarks) {
if (!this.model.models.length || !bookmarks.length) { const bookmarks = this.model.filter((bookmark) =>
u.hideElement(this.el); !_converse.chatboxes.get(bookmark.get('jid')));
if (!bookmarks.length) {
u.hideElement(this.el);
return;
}
}
if (this.model.models.length) {
u.showElement(this.el);
} }
}, },
_toggleBookmarksList (ev) { toggleBookmarksList (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
if (u.hasClass('icon-opened', ev.target)) { if (u.hasClass('icon-opened', ev.target)) {
u.slideIn(this.el.querySelector('.bookmarks')); u.slideIn(this.el.querySelector('.bookmarks'));

13
src/converse-muc.js
View File

@ -28,11 +28,11 @@
"tpl!chatroom_toolbar", "tpl!chatroom_toolbar",
"tpl!chatrooms_tab", "tpl!chatrooms_tab",
"tpl!info", "tpl!info",
"tpl!no_rooms",
"tpl!occupant", "tpl!occupant",
"tpl!room_description", "tpl!room_description",
"tpl!room_item", "tpl!room_item",
"tpl!room_panel", "tpl!room_panel",
"tpl!rooms_results",
"tpl!spinner", "tpl!spinner",
"awesomplete", "awesomplete",
"converse-chatview", "converse-chatview",
@ -59,11 +59,11 @@
tpl_chatroom_toolbar, tpl_chatroom_toolbar,
tpl_chatrooms_tab, tpl_chatrooms_tab,
tpl_info, tpl_info,
tpl_no_rooms,
tpl_occupant, tpl_occupant,
tpl_room_description, tpl_room_description,
tpl_room_item, tpl_room_item,
tpl_room_panel, tpl_room_panel,
tpl_rooms_results,
tpl_spinner, tpl_spinner,
Awesomplete Awesomplete
) { ) {
@ -2634,8 +2634,8 @@
informNoRoomsFound () { informNoRoomsFound () {
const chatrooms_el = this.el.querySelector('#available-chatrooms'); const chatrooms_el = this.el.querySelector('#available-chatrooms');
chatrooms_el.innerHTML = tpl_no_rooms({ chatrooms_el.innerHTML = tpl_rooms_results({
'no_rooms_text': __('No rooms found') 'feedback_text': __('No rooms found')
}); });
const input_el = this.el.querySelector('input#show-rooms'); const input_el = this.el.querySelector('input#show-rooms');
input_el.classList.remove('hidden') input_el.classList.remove('hidden')
@ -2651,8 +2651,9 @@
if (this.rooms.length) { if (this.rooms.length) {
// For translators: %1$s is a variable and will be // For translators: %1$s is a variable and will be
// replaced with the XMPP server name // replaced with the XMPP server name
available_chatrooms.innerHTML = available_chatrooms.innerHTML = tpl_rooms_results({
`<dt>${__('Rooms on %1$s',this.model.get('muc_domain'))}</dt>`; 'feedback_text': __('Rooms found')
});
const div = document.createElement('div'); const div = document.createElement('div');
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();
for (let i=0; i<this.rooms.length; i++) { for (let i=0; i<this.rooms.length; i++) {

121
src/converse-roomslist.js
View File

@ -18,6 +18,7 @@
], factory); ], factory);
}(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) { }(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
const { Backbone, Promise, b64_sha1, sizzle, _ } = converse.env; const { Backbone, Promise, b64_sha1, sizzle, _ } = converse.env;
const u = converse.env.utils;
converse.plugins.add('converse-roomslist', { converse.plugins.add('converse-roomslist', {
@ -42,13 +43,93 @@
const { _converse } = this, const { _converse } = this,
{ __ } = _converse; { __ } = _converse;
_converse.OpenRooms = Backbone.Collection.extend({
comparator (room) {
if (room.get('bookmarked')) {
const bookmark = _.head(_converse.bookmarksview.model.where({'jid': room.get('jid')}));
return bookmark.get('name');
} else {
return room.get('name');
}
},
initialize () {
this.browserStorage = new Backbone.BrowserStorage[_converse.storage](
b64_sha1(`converse.open-rooms-{_converse.bare_jid}`));
_converse.chatboxes.on('add', this.onChatBoxAdded, this);
_converse.chatboxes.on('change:bookmarked', this.onChatBoxChanged, this);
_converse.chatboxes.on('change:name', this.onChatBoxChanged, this);
_converse.chatboxes.on('change:num_unread', this.onChatBoxChanged, this);
_converse.chatboxes.on('change:num_unread_general', this.onChatBoxChanged, this);
_converse.chatboxes.on('remove', this.onChatBoxRemoved, this);
this.reset(_.map(_converse.chatboxes.where({'type': 'chatroom'}), 'attributes'));
},
onChatBoxAdded (item) {
if (item.get('type') === 'chatroom') {
this.create(item.attributes);
}
},
onChatBoxChanged (item) {
if (item.get('type') === 'chatroom') {
const room = this.get(item.get('jid'));
if (!_.isNil(room)) {
room.set(item.attributes);
}
}
},
onChatBoxRemoved (item) {
if (item.get('type') === 'chatroom') {
const room = this.get(item.get('jid'))
this.remove(room);
}
}
});
_converse.RoomsList = Backbone.Model.extend({ _converse.RoomsList = Backbone.Model.extend({
defaults: { defaults: {
"toggle-state": _converse.OPENED "toggle-state": _converse.OPENED
} }
}); });
_converse.RoomsListView = Backbone.NativeView.extend({ _converse.RoomsListElementView = Backbone.VDOMView.extend({
initialize () {
this.model.on('destroy', this.remove, this);
this.model.on('remove', this.remove, this);
this.model.on('change:bookmarked', this.render, this);
this.model.on('change:name', this.render, this);
this.model.on('change:num_unread', this.render, this);
this.model.on('change:num_unread_general', this.render, this);
},
getRoomsListElementName () {
if (this.model.get('bookmarked')) {
const bookmark = _.head(_converse.bookmarksview.model.where({'jid': this.model.get('jid')}));
return bookmark.get('name');
} else {
return this.model.get('name');
}
},
toHTML () {
return tpl_rooms_list_item(
_.extend(this.model.toJSON(), {
'allow_bookmarks': _converse.allow_bookmarks,
'info_leave_room': __('Leave this room'),
'info_remove_bookmark': __('Unbookmark this room'),
'info_add_bookmark': __('Bookmark this room'),
'info_title': __('Show more information on this room'),
'name': this.getRoomsListElementName(),
'open_title': __('Click to open this room')
}));
}
});
_converse.RoomsListView = Backbone.OrderedListView.extend({
tagName: 'div', tagName: 'div',
className: 'open-rooms-list rooms-list-container', className: 'open-rooms-list rooms-list-container',
events: { events: {
@ -57,16 +138,15 @@
'click .open-rooms-toggle': 'toggleRoomsList', 'click .open-rooms-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark', 'click .remove-bookmark': 'removeBookmark',
}, },
listSelector: '.rooms-list',
ItemView: _converse.RoomsListElementView,
subviewIndex: 'jid',
initialize () { initialize () {
this.toggleRoomsList = _.debounce(this.toggleRoomsList, 600, {'leading': true}); Backbone.OrderedListView.prototype.initialize.apply(this, arguments);
this.model.on('add', this.renderRoomsListElement, this); this.model.on('add', this.showOrHide, this);
this.model.on('change:bookmarked', this.renderRoomsListElement, this); this.model.on('remove', this.showOrHide, this);
this.model.on('change:name', this.renderRoomsListElement, this);
this.model.on('change:num_unread', this.renderRoomsListElement, this);
this.model.on('change:num_unread_general', this.renderRoomsListElement, this);
this.model.on('remove', this.removeRoomsListElement, this);
const cachekey = `converse.roomslist${_converse.bare_jid}`; const cachekey = `converse.roomslist${_converse.bare_jid}`;
this.list_model = new _converse.RoomsList(); this.list_model = new _converse.RoomsList();
@ -76,6 +156,7 @@
); );
this.list_model.fetch(); this.list_model.fetch();
this.render(); this.render();
this.sortAndPositionAllItems();
}, },
render () { render () {
@ -85,13 +166,16 @@
'desc_rooms': __('Click to toggle the rooms list'), 'desc_rooms': __('Click to toggle the rooms list'),
'label_rooms': __('Open Rooms') 'label_rooms': __('Open Rooms')
}); });
this.hide();
if (this.list_model.get('toggle-state') !== _converse.OPENED) { if (this.list_model.get('toggle-state') !== _converse.OPENED) {
this.el.querySelector('.open-rooms-list').classList.add('collapsed'); this.el.querySelector('.open-rooms-list').classList.add('collapsed');
} }
this.model.each(this.renderRoomsListElement.bind(this)); this.showOrHide();
const controlboxview = _converse.chatboxviews.get('controlbox'); this.insertIntoControlBox();
return this;
},
insertIntoControlBox () {
const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview) && if (!_.isUndefined(controlboxview) &&
!document.body.contains(this.el)) { !document.body.contains(this.el)) {
const container = controlboxview.el.querySelector('#chatrooms'); const container = controlboxview.el.querySelector('#chatrooms');
@ -99,15 +183,14 @@
container.insertBefore(this.el, container.firstChild); container.insertBefore(this.el, container.firstChild);
} }
} }
return this.el;
}, },
hide () { hide () {
this.el.classList.add('hidden'); u.hideElement(this.el);
}, },
show () { show () {
this.el.classList.remove('hidden'); u.showElement(this.el);
}, },
closeRoom (ev) { closeRoom (ev) {
@ -146,6 +229,14 @@
this.show(); this.show();
}, },
showOrHide (item) {
if (!this.model.models.length) {
u.hideElement(this.el);
} else {
u.showElement(this.el);
}
},
removeBookmark: _converse.removeBookmarkViaEvent, removeBookmark: _converse.removeBookmarkViaEvent,
addBookmark: _converse.addBookmarkViaEvent, addBookmark: _converse.addBookmarkViaEvent,
@ -181,7 +272,7 @@
const initRoomsListView = function () { const initRoomsListView = function () {
_converse.rooms_list_view = new _converse.RoomsListView( _converse.rooms_list_view = new _converse.RoomsListView(
{'model': _converse.chatboxes} {'model': new _converse.OpenRooms() }
); );
}; };