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

Defer rendering of the messages area and roster

Browse Source 
until after we are sure that the user has actually entered the room
This commit is contained in:
JC Brand 2013-05-13 09:10:47 +02:00
parent 5f0a90d00e
commit 01336fefd9
2 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
converse.css
View File

@ -17,10 +17,10 @@ img.spinner {
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
} }
img.centered { img.centered {
margin-left: auto; position: absolute;
margin-right: auto; top: 30%;
margin-top: 30%; left: 50%;
display: block; margin: 0 0 0 -25%;
} }
#chatpanel { #chatpanel {

29
converse.js
View File

@ -1045,6 +1045,10 @@
'<p class="chatroom-topic"><p/>' + '<p class="chatroom-topic"><p/>' +
'</div>' + '</div>' +
'<div class="chat-body">' + '<div class="chat-body">' +
'<img class="spinner centered" src="images/spinner.gif"/>' +
'</div>'),
chatarea_template: _.template(
'<div class="chat-area">' + '<div class="chat-area">' +
'<div class="chat-content"></div>' + '<div class="chat-content"></div>' +
'<form class="sendXMPPMessage" action="" method="post">' + '<form class="sendXMPPMessage" action="" method="post">' +
@ -1054,9 +1058,20 @@
'</div>' + '</div>' +
'<div class="participants">' + '<div class="participants">' +
'<ul class="participant-list"></ul>' + '<ul class="participant-list"></ul>' +
'</div>' +
'</div>'), '</div>'),
render: function () {
this.$el.attr('id', this.model.get('box_id'))
.html(this.template(this.model.toJSON()));
return this;
},
renderChatArea: function () {
this.$el.find('img.spinner.centered').remove();
this.$el.find('.chat-body').append(this.chatarea_template());
return this;
},
initialize: function () { initialize: function () {
converse.connection.muc.join( converse.connection.muc.join(
this.model.get('jid'), this.model.get('jid'),
@ -1218,6 +1233,9 @@
}, },
onChatRoomPresence: function (presence, room) { onChatRoomPresence: function (presence, room) {
if (!this.$el.find('.chat-area').length) {
this.renderChatArea();
}
var nick = room.nick, var nick = room.nick,
$presence = $(presence), $presence = $(presence),
from = $presence.attr('from'), $item; from = $presence.attr('from'), $item;
@ -1371,6 +1389,9 @@
), ),
onChatRoomRoster: function (roster, room) { onChatRoomRoster: function (roster, room) {
if (!this.$el.find('.chat-area').length) {
this.renderChatArea();
}
var controlboxview = converse.chatboxesview.views.controlbox, var controlboxview = converse.chatboxesview.views.controlbox,
roster_size = _.size(roster), roster_size = _.size(roster),
$participant_list = this.$el.find('.participant-list'), $participant_list = this.$el.find('.participant-list'),
@ -1385,12 +1406,6 @@
} }
$participant_list.append(participants.join("")); $participant_list.append(participants.join(""));
return true; return true;
},
render: function () {
this.$el.attr('id', this.model.get('box_id'))
.html(this.template(this.model.toJSON()));
return this;
} }
}); });