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

MAM: Maintain scroll position during upwards infinite scroll

Browse Source
This commit is contained in:
JC Brand 2020-10-13 05:57:27 +02:00
parent 48f119b673
commit 4295264a33
3 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/converse-chatview.js
View File

@ -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
src/converse-mam-views.js
View File

@ -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
src/templates/chat_message.js
View File

@ -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' : ''}">