From 2998ef818a70c9d23c7697f62ab62b4003706b83 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 24 Feb 2017 21:18:41 +0000 Subject: [PATCH] Chat rooms weren't being scrolled down after page reload --- src/converse-chatview.js | 50 ++++++++++++++++++++++------------------ src/converse-mam.js | 3 ++- src/converse-muc.js | 2 +- 3 files changed, 31 insertions(+), 24 deletions(-) diff --git a/src/converse-chatview.js b/src/converse-chatview.js index 12a465ae1..d999a9c8f 100644 --- a/src/converse-chatview.js +++ b/src/converse-chatview.js @@ -109,13 +109,7 @@ this.model.on('change:status', this.onStatusChanged, this); this.model.on('showHelpMessages', this.showHelpMessages, this); this.model.on('sendMessage', this.sendMessage, this); - this.render().fetchMessages().insertIntoDOM(); - // 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)); + this.render().fetchMessages(); _converse.emit('chatBoxInitialized', this); }, @@ -141,14 +135,18 @@ }, afterMessagesFetched: function () { - // Provides a hook for plugins, such as converse-mam. - return; + this.scrollDown(); + 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 () { this.model.messages.fetch({ 'add': true, - 'success': this.afterMessagesFetched.bind(this) + 'success': this.afterMessagesFetched.bind(this), + 'error': this.afterMessagesFetched.bind(this), }); return this; }, @@ -233,7 +231,8 @@ * message, or older than the oldest message. * * Parameters: - * (Object) attrs: An object containing the message attributes. + * (Object) attrs: An object containing the message + * attributes. */ var msg_dates, idx, $first_msg = this.$content.find('.chat-message:first'), @@ -248,7 +247,8 @@ this.insertMessage(attrs); 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 if (current_msg_date.isAfter(last_msg_date, 'day')) { // Append a new day indicator @@ -257,13 +257,16 @@ this.insertMessage(attrs); 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. // 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'); 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'); } return; @@ -278,7 +281,8 @@ idx = msg_dates.indexOf(current_msg_date)-1; _.flow( 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; }.bind(this), this.scrollDownMessageHeight.bind(this) @@ -777,26 +781,28 @@ * received. */ 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) { - this.model.set('scrolled', false); + this.model.save('scrolled', false); this.$el.find('.new-msgs-indicator').addClass('hidden'); } else { // We're not at the bottom of the chat area, so we mark // that the box is in a scrolled-up state. - this.model.set('scrolled', true); + this.model.save('scrolled', true); } }, 150), - viewUnreadMessages: function () { - this.model.set('scrolled', false); + this.model.save('scrolled', false); this.scrollDown(); }, scrollDownMessageHeight: function ($message) { 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; }, diff --git a/src/converse-mam.js b/src/converse-mam.js index 9ef668e8b..a5a95c29f 100644 --- a/src/converse-mam.js +++ b/src/converse-mam.js @@ -67,7 +67,8 @@ afterMessagesFetched: function () { 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); } if (!this.model.get('mam_initialized') && diff --git a/src/converse-muc.js b/src/converse-muc.js index df7deed38..27bda5b1f 100755 --- a/src/converse-muc.js +++ b/src/converse-muc.js @@ -451,7 +451,7 @@ }, afterConnected: function () { - if (this.model.get('connection_status') === ROOMSTATUS.ENTERED) { + if (this.model.get('connection_status') === ROOMSTATUS.ENTERED) { this.setChatState(_converse.ACTIVE); this.scrollDown(); this.focus();