Skip to content

C
converse.js
Commit 6bd0037c authored by JC Brand's avatar JC Brand
Browse files
Options

Save the chat content area on the view. 

To reduce $.find queries.
parent 1a7a5e80
Hide whitespace changes
Inline Side-by-side
Showing with 31 additions and 41 deletions
converse.js
View file @ 6bd0037c
...@@ -1269,8 +1269,9 @@ ...@@ -1269,8 +1269,9 @@
) )
) )
); );
this.$content = this.$el.find('.chat-content');
this.renderToolbar().renderAvatar(); this.renderToolbar().renderAvatar();
this.$el.find('.chat-content').on('scroll', _.debounce(this.onScroll.bind(this), 100)); this.$content.on('scroll', _.debounce(this.onScroll.bind(this), 100));
converse.emit('chatBoxOpened', this); converse.emit('chatBoxOpened', this);
setTimeout(converse.refreshWebkit, 50); setTimeout(converse.refreshWebkit, 50);
return this.showStatusMessage(); return this.showStatusMessage();
...@@ -1281,7 +1282,7 @@ ...@@ -1281,7 +1282,7 @@
if ($(ev.target).scrollTop() === 0) { if ($(ev.target).scrollTop() === 0) {
oldest = this.model.messages.where({'time': this.model.messages.pluck('time').sort()[0]}); oldest = this.model.messages.where({'time': this.model.messages.pluck('time').sort()[0]});
if (oldest) { if (oldest) {
this.$el.find('.chat-content').prepend('<span class="spinner"/>'); this.$content.prepend('<span class="spinner"/>');
this.fetchArchivedMessages({ this.fetchArchivedMessages({
'before': oldest[0].get('archive_id'), 'before': oldest[0].get('archive_id'),
'with': this.model.get('jid'), 'with': this.model.get('jid'),
...@@ -1368,11 +1369,10 @@ ...@@ -1368,11 +1369,10 @@
}, },
showStatusNotification: function (message, keep_old) { showStatusNotification: function (message, keep_old) {
var $chat_content = this.$el.find('.chat-content');
if (!keep_old) { if (!keep_old) {
$chat_content.find('div.chat-event').remove(); this.$content.find('div.chat-event').remove();
} }
$chat_content.append($('<div class="chat-event"></div>').text(message)); this.$content.append($('<div class="chat-event"></div>').text(message));
this.scrollDown(); this.scrollDown();
}, },
...@@ -1380,27 +1380,25 @@ ...@@ -1380,27 +1380,25 @@
if (typeof ev !== "undefined") { ev.stopPropagation(); } if (typeof ev !== "undefined") { ev.stopPropagation(); }
var result = confirm(__("Are you sure you want to clear the messages from this room?")); var result = confirm(__("Are you sure you want to clear the messages from this room?"));
if (result === true) { if (result === true) {
this.$el.find('.chat-content').empty(); this.$content.empty();
} }
return this; return this;
}, },
clearSpinner: function () { clearSpinner: function () {
var $content = this.$el.find('.chat-content'); if (this.$content.children(':first').is('span.spinner')) {
if ($content.children(':first').is('span.spinner')) { this.$content.children(':first').first().remove();
$content.children(':first').first().remove();
} }
}, },
showMessage: function (msg_dict) { showMessage: function (msg_dict) {
var $content = this.$el.find('.chat-content'), var msg_time = moment(msg_dict.time) || moment,
msg_time = moment(msg_dict.time) || moment,
text = msg_dict.message, text = msg_dict.message,
match = text.match(/^\/(.*?)(?: (.*))?$/), match = text.match(/^\/(.*?)(?: (.*))?$/),
fullname = this.model.get('fullname') || msg_dict.fullname, fullname = this.model.get('fullname') || msg_dict.fullname,
extra_classes = msg_dict.delayed && 'delayed' || '', extra_classes = msg_dict.delayed && 'delayed' || '',
num_messages = this.model.messages.length, num_messages = this.model.messages.length,
has_scrollbar = $content.get(0).scrollHeight > $content[0].clientHeight, has_scrollbar = this.$content.get(0).scrollHeight > this.$content[0].clientHeight,
template, username, insertMessage; template, username, insertMessage;
// FIXME: A better approach here is probably to look at what is // FIXME: A better approach here is probably to look at what is
...@@ -1412,12 +1410,12 @@ ...@@ -1412,12 +1410,12 @@
insertMessage = _.compose( insertMessage = _.compose(
this.scrollDownMessageHeight.bind(this), this.scrollDownMessageHeight.bind(this),
function ($el) { function ($el) {
$content.prepend($el); this.$content.prepend($el);
return $el; return $el;
} }.bind(this)
); );
} else { } else {
insertMessage = _.compose(_.debounce(this.scrollDown.bind(this), 50), $content.append.bind($content)); insertMessage = _.compose(_.debounce(this.scrollDown.bind(this), 50), this.$content.append.bind(this.$content));
} }
if ((match) && (match[1] === 'me')) { if ((match) && (match[1] === 'me')) {
text = text.replace(/^\/me/, ''); text = text.replace(/^\/me/, '');
...@@ -1427,7 +1425,7 @@ ...@@ -1427,7 +1425,7 @@
template = converse.templates.message; template = converse.templates.message;
username = msg_dict.sender === 'me' && __('me') || fullname; username = msg_dict.sender === 'me' && __('me') || fullname;
} }
$content.find('div.chat-event').remove(); this.$content.find('div.chat-event').remove();
if (this.is_chatroom && msg_dict.sender == 'them' && (new RegExp("\\b"+this.model.get('nick')+"\\b")).test(text)) { if (this.is_chatroom && msg_dict.sender == 'them' && (new RegExp("\\b"+this.model.get('nick')+"\\b")).test(text)) {
// Add special class to mark groupchat messages in which we // Add special class to mark groupchat messages in which we
...@@ -1450,15 +1448,14 @@ ...@@ -1450,15 +1448,14 @@
}, },
showHelpMessages: function (msgs, type, spinner) { showHelpMessages: function (msgs, type, spinner) {
var $chat_content = this.$el.find('.chat-content'), i, var i, msgs_length = msgs.length;
msgs_length = msgs.length;
for (i=0; i<msgs_length; i++) { for (i=0; i<msgs_length; i++) {
$chat_content.append($('<div class="chat-'+(type||'info')+'">'+msgs[i]+'</div>')); this.$content.append($('<div class="chat-'+(type||'info')+'">'+msgs[i]+'</div>'));
} }
if (spinner === true) { if (spinner === true) {
$chat_content.append('<span class="spinner"/>'); this.$content.append('<span class="spinner"/>');
} else if (spinner === false) { } else if (spinner === false) {
$chat_content.find('span.spinner').remove(); this.$content.find('span.spinner').remove();
} }
return this.scrollDown(); return this.scrollDown();
}, },
...@@ -1476,7 +1473,7 @@ ...@@ -1476,7 +1473,7 @@
prev_date = moment(previous_message.get('time')); prev_date = moment(previous_message.get('time'));
if (prev_date.isBefore(time, 'day')) { if (prev_date.isBefore(time, 'day')) {
this_date = moment(time); this_date = moment(time);
this.$el.find('.chat-content').append(converse.templates.new_day({ this.$content.append(converse.templates.new_day({
isodate: this_date.format("YYYY-MM-DD"), isodate: this_date.format("YYYY-MM-DD"),
datestring: this_date.format("dddd MMM Do YYYY") datestring: this_date.format("dddd MMM Do YYYY")
})); }));
...@@ -1490,7 +1487,7 @@ ...@@ -1490,7 +1487,7 @@
this.showStatusNotification(message.get('fullname')+' '+__('has stopped typing')); this.showStatusNotification(message.get('fullname')+' '+__('has stopped typing'));
return; return;
} else if (_.contains([INACTIVE, ACTIVE], message.get('chat_state'))) { } else if (_.contains([INACTIVE, ACTIVE], message.get('chat_state'))) {
this.$el.find('.chat-content div.chat-event').remove(); this.$content.find('div.chat-event').remove();
return; return;
} else if (message.get('chat_state') === GONE) { } else if (message.get('chat_state') === GONE) {
this.showStatusNotification(message.get('fullname')+' '+__('has gone away')); this.showStatusNotification(message.get('fullname')+' '+__('has gone away'));
...@@ -1673,7 +1670,7 @@ ...@@ -1673,7 +1670,7 @@
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
var result = confirm(__("Are you sure you want to clear the messages from this chat box?")); var result = confirm(__("Are you sure you want to clear the messages from this chat box?"));
if (result === true) { if (result === true) {
this.$el.find('.chat-content').empty(); this.$content.empty();
this.model.messages.reset(); this.model.messages.reset();
this.model.messages.browserStorage._clear(); this.model.messages.browserStorage._clear();
} }
...@@ -1985,17 +1982,15 @@ ...@@ -1985,17 +1982,15 @@
}, },
scrollDownMessageHeight: function ($message) { scrollDownMessageHeight: function ($message) {
var $content = this.$('.chat-content'); if (this.$content.is(':visible')) {
if ($content.is(':visible')) { this.$content.scrollTop(this.$content.scrollTop() + $message[0].scrollHeight);
$content.scrollTop($content.scrollTop() + $message[0].scrollHeight);
} }
return this; return this;
}, },
scrollDown: function () { scrollDown: function () {
var $content = this.$('.chat-content'); if (this.$content.is(':visible')) {
if ($content.is(':visible')) { this.$content.scrollTop(this.$content[0].scrollHeight);
$content.scrollTop($content[0].scrollHeight);
} }
return this; return this;
} }
...@@ -2749,6 +2744,7 @@ ...@@ -2749,6 +2744,7 @@
})) }))
.append(this.occupantsview.render().$el); .append(this.occupantsview.render().$el);
this.renderToolbar(); this.renderToolbar();
this.$content = this.$el.find('.chat-content');
} }
// XXX: This is a bit of a hack, to make sure that the // XXX: This is a bit of a hack, to make sure that the
// sidebar's state is remembered. // sidebar's state is remembered.
...@@ -2767,16 +2763,12 @@ ...@@ -2767,16 +2763,12 @@
this.model.save({hidden_occupants: true}); this.model.save({hidden_occupants: true});
$el.removeClass('icon-hide-users').addClass('icon-show-users'); $el.removeClass('icon-hide-users').addClass('icon-show-users');
this.$('form.sendXMPPMessage, .chat-area').animate({width: '100%'}); this.$('form.sendXMPPMessage, .chat-area').animate({width: '100%'});
this.$('div.participants').animate({width: 0}, function () { this.$('div.participants').animate({width: 0}, this.scrollDown.bind(this));
this.scrollDown();
}.bind(this));
} else { } else {
this.model.save({hidden_occupants: false}); this.model.save({hidden_occupants: false});
$el.removeClass('icon-show-users').addClass('icon-hide-users'); $el.removeClass('icon-show-users').addClass('icon-hide-users');
this.$('.chat-area, form.sendXMPPMessage').css({width: ''}); this.$('.chat-area, form.sendXMPPMessage').css({width: ''});
this.$('div.participants').show().animate({width: 'auto'}, function () { this.$('div.participants').show().animate({width: 'auto'}, this.scrollDown.bind(this));
this.scrollDown();
}.bind(this));
} }
}, },
...@@ -3213,8 +3205,7 @@ ...@@ -3213,8 +3205,7 @@
* Allow user to configure chat room if they are the owner. * Allow user to configure chat room if they are the owner.
* See: http://xmpp.org/registrar/mucstatus.html * See: http://xmpp.org/registrar/mucstatus.html
*/ */
var $chat_content, var disconnect_msgs = [],
disconnect_msgs = [],
msgs = [], msgs = [],
reasons = []; reasons = [];
$el.find('x[xmlns="'+Strophe.NS.MUC_USER+'"]').each(function (idx, x) { $el.find('x[xmlns="'+Strophe.NS.MUC_USER+'"]').each(function (idx, x) {
...@@ -3258,9 +3249,8 @@ ...@@ -3258,9 +3249,8 @@
this.model.set('connection_status', Strophe.Status.DISCONNECTED); this.model.set('connection_status', Strophe.Status.DISCONNECTED);
return; return;
} }
$chat_content = this.$el.find('.chat-content');
for (i=0; i<msgs.length; i++) { for (i=0; i<msgs.length; i++) {
$chat_content.append(converse.templates.info({message: msgs[i]})); this.$content.append(converse.templates.info({message: msgs[i]}));
} }
for (i=0; i<reasons.length; i++) { for (i=0; i<reasons.length; i++) {
this.showStatusNotification(__('The reason given is: "'+reasons[i]+'"'), true); this.showStatusNotification(__('The reason given is: "'+reasons[i]+'"'), true);
...@@ -3337,7 +3327,7 @@ ...@@ -3337,7 +3327,7 @@
this.$el.find('.chatroom-topic').text(subject).attr('title', subject); this.$el.find('.chatroom-topic').text(subject).attr('title', subject);
// # For translators: the %1$s and %2$s parts will get replaced by the user and topic text respectively // # For translators: the %1$s and %2$s parts will get replaced by the user and topic text respectively
// # Example: Topic set by JC Brand to: Hello World! // # Example: Topic set by JC Brand to: Hello World!
this.$el.find('.chat-content').append( this.$content.append(
converse.templates.info({ converse.templates.info({
'message': __('Topic set by %1$s to: %2$s', sender, subject) 'message': __('Topic set by %1$s to: %2$s', sender, subject)
})); }));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7