Jelajahi Sumber

MAM: Maintain scroll position during upwards infinite scroll

JC Brand 4 tahun lalu
induk
melakukan
4295264a33
3 mengubah file dengan 12 tambahan dan 2 penghapusan
  1. 8 2
      src/converse-chatview.js
  2. 1 0
      src/converse-mam-views.js
  3. 3 0
      src/templates/chat_message.js

+ 8 - 2
src/converse-chatview.js

@@ -363,7 +363,8 @@ export const ChatBoxView = View.extend({
      *  - An optional message that serves as the cause for needing to scroll down.
      */
     maybeScrollDown (message) {
-        if (message?.get('sender') === 'me' || !this.model.isHidden()) {
+        const new_own_msg = !(message?.get('is_archived')) && message?.get('sender') === 'me';
+        if ((new_own_msg || !this.model.get('scrolled')) && !this.model.isHidden()) {
             this.debouncedScrollDown();
         }
     },
@@ -1001,7 +1002,12 @@ export const ChatBoxView = View.extend({
 
     onScrolledDown () {
         this.hideNewMessagesIndicator();
-        (!this.model.isHidden()) && this.model.clearUnreadMsgCounter();
+        if (!this.model.isHidden()) {
+            this.model.clearUnreadMsgCounter();
+            // Clear location hash if set to one of the messages in our history
+            const hash = window.location.hash;
+            hash && this.model.messages.get(hash.slice(1)) && _converse.router.history.navigate();
+        }
         /**
          * Triggered once the chat's message area has been scrolled down to the bottom.
          * @event _converse#chatBoxScrolledDown

+ 1 - 0
src/converse-mam-views.js

@@ -27,6 +27,7 @@ converse.plugins.add('converse-mam-views', {
                         await view.model.fetchArchivedMessages({'end': oldest_message.get('time')});
                     }
                     view.clearSpinner();
+                    _converse.router.history.navigate(`#${oldest_message.get('msgid')}`);
                 }
             }
         });

+ 3 - 0
src/templates/chat_message.js

@@ -13,6 +13,9 @@ export default (o) => {
                 data-from="${o.from}"
                 data-encrypted="${o.is_encrypted}">
 
+            <!-- Anchor to allow us to scroll the message into view -->
+            <a id="${o.msgid}"></a>
+
             ${ o.shouldShowAvatar() ? renderAvatar(o.getAvatarData()) : '' }
             <div class="chat-msg__content chat-msg__content--${o.sender} ${o.is_me_message ? 'chat-msg__content--action' : ''}">