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

Chat rooms weren't being scrolled down after page reload

Browse Source
This commit is contained in:
JC Brand 2017-02-24 21:18:41 +00:00
parent 61b2dc7f99
commit 2998ef818a
3 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/converse-chatview.js
View File

@ -109,13 +109,7 @@
this.model.on('change:status', this.onStatusChanged, this); this.model.on('change:status', this.onStatusChanged, this);
this.model.on('showHelpMessages', this.showHelpMessages, this); this.model.on('showHelpMessages', this.showHelpMessages, this);
this.model.on('sendMessage', this.sendMessage, this); this.model.on('sendMessage', this.sendMessage, this);
this.render().fetchMessages().insertIntoDOM(); this.render().fetchMessages();
// XXX: adding the event below to the events map above doesn't work.
// The code that gets executed because of that looks like this:
// this.$el.on('scroll', '.chat-content', this.markScrolled.bind(this));
// Which for some reason doesn't work.
// So working around that fact here:
this.$el.find('.chat-content').on('scroll', this.markScrolled.bind(this));
_converse.emit('chatBoxInitialized', this); _converse.emit('chatBoxInitialized', this);
}, },
@ -141,14 +135,18 @@
}, },
afterMessagesFetched: function () { afterMessagesFetched: function () {
// Provides a hook for plugins, such as converse-mam. this.scrollDown();
return; this.insertIntoDOM();
// We only start listening for the scroll event after
// cached messages have been fetched
this.$content.on('scroll', this.markScrolled.bind(this));
}, },
fetchMessages: function () { fetchMessages: function () {
this.model.messages.fetch({ this.model.messages.fetch({
'add': true, 'add': true,
'success': this.afterMessagesFetched.bind(this) 'success': this.afterMessagesFetched.bind(this),
'error': this.afterMessagesFetched.bind(this),
}); });
return this; return this;
}, },
@ -233,7 +231,8 @@
* message, or older than the oldest message. * message, or older than the oldest message.
* *
* Parameters: * Parameters:
* (Object) attrs: An object containing the message attributes. * (Object) attrs: An object containing the message
* attributes.
*/ */
var msg_dates, idx, var msg_dates, idx,
$first_msg = this.$content.find('.chat-message:first'), $first_msg = this.$content.find('.chat-message:first'),
@ -248,7 +247,8 @@
this.insertMessage(attrs); this.insertMessage(attrs);
return; return;
} }
if (current_msg_date.isAfter(last_msg_date) || current_msg_date.isSame(last_msg_date)) { if (current_msg_date.isAfter(last_msg_date) ||
current_msg_date.isSame(last_msg_date)) {
// The new message is after the last message // The new message is after the last message
if (current_msg_date.isAfter(last_msg_date, 'day')) { if (current_msg_date.isAfter(last_msg_date, 'day')) {
// Append a new day indicator // Append a new day indicator
@ -257,13 +257,16 @@
this.insertMessage(attrs); this.insertMessage(attrs);
return; return;
} }
if (current_msg_date.isBefore(first_msg_date) || current_msg_date.isSame(first_msg_date)) { if (current_msg_date.isBefore(first_msg_date) ||
current_msg_date.isSame(first_msg_date)) {
// The message is before the first, but on the same day. // The message is before the first, but on the same day.
// We need to prepend the message immediately before the // We need to prepend the message immediately before the
// first message (so that it'll still be after the day indicator). // first message (so that it'll still be after the day
// indicator).
this.insertMessage(attrs, 'prepend'); this.insertMessage(attrs, 'prepend');
if (current_msg_date.isBefore(first_msg_date, 'day')) { if (current_msg_date.isBefore(first_msg_date, 'day')) {
// This message is also on a different day, so we prepend a day indicator. // This message is also on a different day, so
// we prepend a day indicator.
this.insertDayIndicator(current_msg_date, 'prepend'); this.insertDayIndicator(current_msg_date, 'prepend');
} }
return; return;
@ -278,7 +281,8 @@
idx = msg_dates.indexOf(current_msg_date)-1; idx = msg_dates.indexOf(current_msg_date)-1;
_.flow( _.flow(
function ($el) { function ($el) {
$el.insertAfter(this.$content.find('.chat-message[data-isodate="'+msg_dates[idx]+'"]')); $el.insertAfter(
this.$content.find('.chat-message[data-isodate="'+msg_dates[idx]+'"]'));
return $el; return $el;
}.bind(this), }.bind(this),
this.scrollDownMessageHeight.bind(this) this.scrollDownMessageHeight.bind(this)
@ -777,26 +781,28 @@
* received. * received.
*/ */
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
var is_at_bottom = this.$content.scrollTop() + this.$content.innerHeight() >= this.$content[0].scrollHeight-10; var is_at_bottom =
(this.$content.scrollTop() + this.$content.innerHeight()) >=
this.$content[0].scrollHeight-10;
if (is_at_bottom) { if (is_at_bottom) {
this.model.set('scrolled', false); this.model.save('scrolled', false);
this.$el.find('.new-msgs-indicator').addClass('hidden'); this.$el.find('.new-msgs-indicator').addClass('hidden');
} else { } else {
// We're not at the bottom of the chat area, so we mark // We're not at the bottom of the chat area, so we mark
// that the box is in a scrolled-up state. // that the box is in a scrolled-up state.
this.model.set('scrolled', true); this.model.save('scrolled', true);
} }
}, 150), }, 150),
viewUnreadMessages: function () { viewUnreadMessages: function () {
this.model.set('scrolled', false); this.model.save('scrolled', false);
this.scrollDown(); this.scrollDown();
}, },
scrollDownMessageHeight: function ($message) { scrollDownMessageHeight: function ($message) {
if (this.$content.is(':visible') && !this.model.get('scrolled')) { if (this.$content.is(':visible') && !this.model.get('scrolled')) {
this.$content.scrollTop(this.$content.scrollTop() + $message[0].scrollHeight); this.$content.scrollTop(
this.$content.scrollTop() + $message[0].scrollHeight);
} }
return this; return this;
}, },

3
src/converse-mam.js
View File

@ -67,7 +67,8 @@
afterMessagesFetched: function () { afterMessagesFetched: function () {
var _converse = this.__super__._converse; var _converse = this.__super__._converse;
if (this.disable_mam || !_converse.features.findWhere({'var': Strophe.NS.MAM})) { if (this.disable_mam ||
!_converse.features.findWhere({'var': Strophe.NS.MAM})) {
return this.__super__.afterMessagesFetched.apply(this, arguments); return this.__super__.afterMessagesFetched.apply(this, arguments);
} }
if (!this.model.get('mam_initialized') && if (!this.model.get('mam_initialized') &&