Handle scrolling down in converse-chat-content
component
This commit is contained in:
parent
b2ac138c88
commit
78fb5935c7
@ -1,4 +1,5 @@
|
||||
import "./message-history";
|
||||
import debounce from 'lodash/debounce';
|
||||
import { CustomElement } from './element.js';
|
||||
import { _converse, api } from "@converse/headless/core";
|
||||
import { html } from 'lit-element';
|
||||
@ -13,6 +14,7 @@ export default class ChatContent extends CustomElement {
|
||||
|
||||
connectedCallback () {
|
||||
super.connectedCallback();
|
||||
this.debouncedScrolldown = debounce(this.scrollDown, 100);
|
||||
this.model = _converse.chatboxes.get(this.jid);
|
||||
this.listenTo(this.model.messages, 'add', this.requestUpdate);
|
||||
this.listenTo(this.model.messages, 'change', this.requestUpdate);
|
||||
@ -43,6 +45,10 @@ export default class ChatContent extends CustomElement {
|
||||
`;
|
||||
}
|
||||
|
||||
updated () {
|
||||
!this.model.get('scrolled') && this.debouncedScrolldown();
|
||||
}
|
||||
|
||||
scrollDown () {
|
||||
if (this.scrollTo) {
|
||||
const behavior = this.scrollTop ? 'smooth' : 'auto';
|
||||
|
@ -61,7 +61,6 @@ export default class ChatView extends BaseChatView {
|
||||
|
||||
// Need to be registered after render has been called.
|
||||
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
||||
this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown);
|
||||
this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
|
||||
|
||||
await this.model.messages.fetched;
|
||||
@ -202,22 +201,6 @@ export default class ChatView extends BaseChatView {
|
||||
return {};
|
||||
}
|
||||
|
||||
/**
|
||||
* Scrolls the chat down, *if* appropriate.
|
||||
*
|
||||
* Will only scroll down if we have received a message from
|
||||
* ourselves, or if the chat was scrolled down before (i.e. the
|
||||
* `scrolled` flag is `false`);
|
||||
* @param { _converse.Message|_converse.ChatRoomMessage } [message]
|
||||
* - An optional message that serves as the cause for needing to scroll down.
|
||||
*/
|
||||
maybeScrollDown (message) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a message element, determine wether it should be
|
||||
* marked as a followup message to the previous element.
|
||||
|
@ -5,7 +5,7 @@ import { CustomElement } from 'components/element.js';
|
||||
class ConverseDragResize extends CustomElement {
|
||||
|
||||
render () { // eslint-disable-line class-methods-use-this
|
||||
return tpl_dragresize(this);
|
||||
return tpl_dragresize();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -32,7 +32,6 @@ class HeadlinesView extends BaseChatView {
|
||||
// Need to be registered after render has been called.
|
||||
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
||||
this.listenTo(this.model.messages, 'remove', this.renderChatHistory);
|
||||
this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown);
|
||||
this.listenTo(this.model.messages, 'reset', this.renderChatHistory);
|
||||
|
||||
await this.model.messages.fetched;
|
||||
|
@ -95,7 +95,6 @@ export default class MUCView extends BaseChatView {
|
||||
this.listenTo(this.model, 'show', this.show);
|
||||
this.listenTo(this.model.features, 'change:moderated', this.renderBottomPanel);
|
||||
this.listenTo(this.model.features, 'change:open', this.renderHeading);
|
||||
this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown);
|
||||
this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
|
||||
this.listenTo(this.model.session, 'change:connection_status', this.onConnectionStatusChanged);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user