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

Don't call disco#info for all chatrooms

Browse Source 
It's way to inefficient when there are multiple chatrooms. Instead, I added an
info icon that can be clicked and which will fetch and display additional info
on the chatroom.
This commit is contained in:
JC Brand 2013-05-10 21:05:58 +02:00
parent 1904c62095
commit 7142dc58c7
2 changed files with 90 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
converse.css
View File

@ -441,7 +441,7 @@ form.search-xmpp-contact input {
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width: 160px;
width: 170px;
}
#available-chatrooms dt,
@ -468,6 +468,38 @@ dd.available-chatroom,
text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
}
p.room-info {
margin: 0;
padding: 0;
font-size: 11px;
font-style: normal;
font-weight: normal;
display: block;
white-space: normal;
}
a.room-info {
background: url('images/information.png') no-repeat right top;
width: 22px;
float: right;
display: none;
}
a.open-room {
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
}
dd.available-chatroom:hover a.room-info {
display: inline-block;
}
dd.available-chatroom:hover a.open-room {
width: 75%;
}
#converse-roster dd a.remove-xmpp-contact {
background: url('images/delete_icon.png') no-repeat right top;
padding: 0 0 1em 0;
@ -477,11 +509,11 @@ dd.available-chatroom,
display: none;
}
#converse-roster dd:hover *[class*="remove-xmpp-contact"] {
#converse-roster dd:hover a.remove-xmpp-contact {
display: inline-block;
}
#converse-roster dd:hover *[class*="open-chat"] {
#converse-roster dd:hover a.open-chat {
width: 75%;
}

89
converse.js
View File

@ -684,14 +684,24 @@
events: {
'submit form.add-chatroom': 'createChatRoom',
'click input#show-rooms': 'showRooms',
'click a.open-room': 'createChatRoom'
'click a.open-room': 'createChatRoom',
'click a.room-info': 'showRoomInfo'
},
room_template: _.template(
'<dd class="available-chatroom">' +
'<a class="open-room {{classes}}" data-room-jid="{{jid}}"' +
' title="{{desc}}"' +
' href="#">' +
'{{name}}</a>&nbsp;{{occ}}</dd>'),
'<dd class="available-chatroom">'+
'<a class="open-room" data-room-jid="{{jid}}" title="Click to open this room" href="#">{{name}}</a>'+
'<a class="room-info" data-room-jid="{{jid}}" title="Show more information on this room" href="#">&nbsp;</a>'+
'</dd>'),
room_description_template: _.template(
'<div class="room-info">'+
'<p class="room-info"><strong>Description:</strong> {{desc}}</p>' +
'<p class="room-info"><strong>Occupants:</strong> {{occ}}</p>' +
'{[ if (locked) { ]}' +
'<p class="room-info locked">Requires authentication</p>' +
'{[ } ]}' +
'</div>'
),
tab_template: _.template('<li><a class="s" href="#chatrooms">Rooms</a></li>'),
@ -720,37 +730,23 @@
converse.connection.muc.listRooms(
this.muc_domain,
$.proxy(function (iq) { // Success
var name, jid, i, that = this, $available_chatrooms = this.$el.find('#available-chatrooms');
this.rdict = {};
var name, jid, i, fragment,
that = this,
$available_chatrooms = this.$el.find('#available-chatrooms');
this.rooms = $(iq).find('query').find('item');
this.rooms.each(function (i) { that.rdict[$(this).attr('jid')] = this; });
this.fragment = document.createDocumentFragment();
if (this.rooms.length) {
$available_chatrooms.html('<dt>Rooms on '+this.muc_domain+'</dt>');
_.each(this.rooms, $.proxy(function (room, idx) {
converse.connection.disco.info(
$(room).attr('jid'),
null,
$.proxy(function (stanza) {
var name = $(stanza).find('identity').attr('name');
var desc = $(stanza).find('field[var="muc#roominfo_description"] value').text();
var occ = $(stanza).find('field[var="muc#roominfo_occupants"] value').text();
var locked = $(stanza).find('feature[var="muc_passwordprotected"]').length;
var jid = $(stanza).attr('from');
var classes = locked && 'locked' || '';
delete this.rdict[jid];
this.$el.find('#available-chatrooms').append(
this.room_template({'name':name,
'desc':desc,
'occ':occ,
'jid':jid,
'classes': classes
}));
if (_.keys(this.rdict).length === 0) {
$('input#show-rooms').show().siblings('img.spinner').remove();
}
}, this));
}, this));
fragment = document.createDocumentFragment();
for (i=0; i<this.rooms.length; i++) {
name = Strophe.unescapeNode($(this.rooms[i]).attr('name')||$(this.rooms[i]).attr('jid'));
jid = $(this.rooms[i]).attr('jid');
fragment.appendChild($(this.room_template({
'name':name,
'jid':jid
}))[0]);
}
$available_chatrooms.append(fragment);
$('input#show-rooms').show().siblings('img.spinner').remove();
} else {
$available_chatrooms.html('<dt>No rooms on '+this.muc_domain+'</dt>');
$('input#show-rooms').show().siblings('img.spinner').remove();
@ -780,6 +776,31 @@
this.updateRoomsList();
},
showRoomInfo: function (ev) {
var target = ev.target,
$dd = $(target).parent('dd'),
$div = $dd.find('div.room-info');
if ($div.length) {
$div.remove();
} else {
$dd.append('<img class="spinner" src="images/spinner.gif"/>');
converse.connection.disco.info(
$(target).attr('data-room-jid'),
null,
$.proxy(function (stanza) {
var desc = $(stanza).find('field[var="muc#roominfo_description"] value').text();
var occ = $(stanza).find('field[var="muc#roominfo_occupants"] value').text();
var locked = $(stanza).find('feature[var="muc_passwordprotected"]').length;
$dd.find('img.spinner').replaceWith(
this.room_description_template({
'desc':desc,
'occ':occ,
'locked':locked
}));
}, this));
}
},
createChatRoom: function (ev) {
ev.preventDefault();
var name, server, jid, $name, $server, errors;