Fixes #1637 aned #2130

src/converse-chatview.js

@@ -240,11 +240,7 @@ converse.plugins.add('converse-chatview', {
 
             render () {
                 const result = tpl_chatbox(
-                    Object.assign(
-                        this.model.toJSON(), {
-                            'markScrolled': () => this.markScrolled()
-                        }
-                    )
+                    Object.assign(this.model.toJSON(), {'markScrolled': () => this.markScrolled()})
                 );
                 render(result, this.el);
                 this.content = this.el.querySelector('.chat-content');
@@ -1099,6 +1095,14 @@ converse.plugins.add('converse-chatview', {
                 if (is_at_bottom) {
                     scrolled = false;
                     this.onScrolledDown();
+                } else if (this.content.scrollTop === 0) {
+                    /**
+                     * Triggered once the chat's message area has been scrolled to the top
+                     * @event _converse#chatBoxScrolledUp
+                     * @property { _converse.ChatBoxView | _converse.ChatRoomView } view
+                     * @example _converse.api.listen.on('chatBoxScrolledUp', obj => { ... });
+                     */
+                    api.trigger('chatBoxScrolledUp', this);
                 }
                 u.safeSave(this.model, {
                     'scrolled': scrolled,

src/converse-mam-views.js

@@ -5,60 +5,29 @@
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
-import { converse } from "@converse/headless/converse-core";
-import { debounce } from 'lodash-es'
+import { api, converse } from "@converse/headless/converse-core";
 
 
 converse.plugins.add('converse-mam-views', {
 
     dependencies: ['converse-mam', 'converse-chatview', 'converse-muc-views'],
 
-    overrides: {
-        // Overrides mentioned here will be picked up by converse.js's
-        // plugin architecture they will replace existing methods on the
-        // relevant objects or classes.
-        //
-        // New functions which don't exist yet can also be added.
-
-        ChatBoxView: {
-            render () {
-                const result = this.__super__.render.apply(this, arguments);
-                if (!this.disable_mam) {
-                    this.content.addEventListener('scroll', debounce(this.onScroll.bind(this), 100));
-                }
-                return result;
-            },
-
-            async onScroll () {
-                if (this.content.scrollTop === 0 && this.model.messages.length) {
-                    const oldest_message = this.model.getOldestMessage();
-                    if (oldest_message) {
-                        const by_jid = this.model.get('jid');
-                        const stanza_id = oldest_message && oldest_message.get(`stanza_id ${by_jid}`);
-                        this.addSpinner();
-                        if (stanza_id) {
-                            await this.model.fetchArchivedMessages({
-                                'before': stanza_id
-                            });
-                        } else {
-                            await this.model.fetchArchivedMessages({
-                                'end': oldest_message.get('time')
-                            });
-                        }
-                        this.clearSpinner();
+    initialize () {
+        api.listen.on('chatBoxScrolledUp', async view => {
+            if (view.model.messages.length) {
+                const oldest_message = view.model.getOldestMessage();
+                if (oldest_message) {
+                    const by_jid = view.model.get('jid');
+                    const stanza_id = oldest_message && oldest_message.get(`stanza_id ${by_jid}`);
+                    view.addSpinner();
+                    if (stanza_id) {
+                        await view.model.fetchArchivedMessages({'before': stanza_id});
+                    } else {
+                        await view.model.fetchArchivedMessages({'end': oldest_message.get('time')});
                     }
+                    view.clearSpinner();
                 }
             }
-        },
-
-        ChatRoomView: {
-            renderChatArea () {
-                const result = this.__super__.renderChatArea.apply(this, arguments);
-                if (!this.disable_mam) {
-                    this.content.addEventListener('scroll', debounce(this.onScroll.bind(this), 100));
-                }
-                return result;
-            }
-        }
+        });
     }
 });