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',
// 'jdev@conference.jabber.org'
// ],
hide_open_bookmarks: true,
notify_all_room_messages: [
'discuss@conference.conversejs.org'
],

1
spec/bookmarks.js
View File

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

2
spec/chatroom.js
View File

@ -3146,7 +3146,7 @@
panel.onRoomsFound(iq);
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);
done();
}));

23
src/converse-bookmarks.js
View File

@ -417,9 +417,9 @@
initialize () {
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('remove', this.renderBookmarkListElement, this);
@ -441,7 +441,7 @@
'label_bookmarks': __('Bookmarks'),
'_converse': _converse
});
this.hideListIfEmpty();
this.showOrHide();
this.insertIntoControlBox();
return this;
},
@ -465,17 +465,24 @@
return;
}
bookmarkview.render();
this.hideListIfEmpty();
this.showOrHide();
},
hideListIfEmpty (item) {
const bookmarks = sizzle('.available-chatroom:not(.hidden)', this.el);
if (!this.model.models.length || !bookmarks.length) {
showOrHide (item) {
if (_converse.hide_open_bookmarks) {
const bookmarks = this.model.filter((bookmark) =>
!_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 (u.hasClass('icon-opened', ev.target)) {
u.slideIn(this.el.querySelector('.bookmarks'));

13
src/converse-muc.js
View File

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

121
src/converse-roomslist.js
View File

@ -18,6 +18,7 @@
], factory);
}(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
const { Backbone, Promise, b64_sha1, sizzle, _ } = converse.env;
const u = converse.env.utils;
converse.plugins.add('converse-roomslist', {
@ -42,13 +43,93 @@
const { _converse } = this,
{ __ } = _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({
defaults: {
"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',
className: 'open-rooms-list rooms-list-container',
events: {
@ -57,16 +138,15 @@
'click .open-rooms-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark',
},
listSelector: '.rooms-list',
ItemView: _converse.RoomsListElementView,
subviewIndex: 'jid',
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('change:bookmarked', this.renderRoomsListElement, 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);
this.model.on('add', this.showOrHide, this);
this.model.on('remove', this.showOrHide, this);
const cachekey = `converse.roomslist${_converse.bare_jid}`;
this.list_model = new _converse.RoomsList();
@ -76,6 +156,7 @@
);
this.list_model.fetch();
this.render();
this.sortAndPositionAllItems();
},
render () {
@ -85,13 +166,16 @@
'desc_rooms': __('Click to toggle the rooms list'),
'label_rooms': __('Open Rooms')
});
this.hide();
if (this.list_model.get('toggle-state') !== _converse.OPENED) {
this.el.querySelector('.open-rooms-list').classList.add('collapsed');
}
this.model.each(this.renderRoomsListElement.bind(this));
const controlboxview = _converse.chatboxviews.get('controlbox');
this.showOrHide();
this.insertIntoControlBox();
return this;
},
insertIntoControlBox () {
const controlboxview = _converse.chatboxviews.get('controlbox');
if (!_.isUndefined(controlboxview) &&
!document.body.contains(this.el)) {
const container = controlboxview.el.querySelector('#chatrooms');
@ -99,15 +183,14 @@
container.insertBefore(this.el, container.firstChild);
}
}
return this.el;
},
hide () {
this.el.classList.add('hidden');
u.hideElement(this.el);
},
show () {
this.el.classList.remove('hidden');
u.showElement(this.el);
},
closeRoom (ev) {
@ -146,6 +229,14 @@
this.show();
},
showOrHide (item) {
if (!this.model.models.length) {
u.hideElement(this.el);
} else {
u.showElement(this.el);
}
},
removeBookmark: _converse.removeBookmarkViaEvent,
addBookmark: _converse.addBookmarkViaEvent,
@ -181,7 +272,7 @@
const initRoomsListView = function () {
_converse.rooms_list_view = new _converse.RoomsListView(
{'model': _converse.chatboxes}
{'model': new _converse.OpenRooms() }
);
};