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 "./message-history";
|
||||||
|
import debounce from 'lodash/debounce';
|
||||||
import { CustomElement } from './element.js';
|
import { CustomElement } from './element.js';
|
||||||
import { _converse, api } from "@converse/headless/core";
|
import { _converse, api } from "@converse/headless/core";
|
||||||
import { html } from 'lit-element';
|
import { html } from 'lit-element';
|
||||||
@ -13,6 +14,7 @@ export default class ChatContent extends CustomElement {
|
|||||||
|
|
||||||
connectedCallback () {
|
connectedCallback () {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
|
this.debouncedScrolldown = debounce(this.scrollDown, 100);
|
||||||
this.model = _converse.chatboxes.get(this.jid);
|
this.model = _converse.chatboxes.get(this.jid);
|
||||||
this.listenTo(this.model.messages, 'add', this.requestUpdate);
|
this.listenTo(this.model.messages, 'add', this.requestUpdate);
|
||||||
this.listenTo(this.model.messages, 'change', 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 () {
|
scrollDown () {
|
||||||
if (this.scrollTo) {
|
if (this.scrollTo) {
|
||||||
const behavior = this.scrollTop ? 'smooth' : 'auto';
|
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.
|
// Need to be registered after render has been called.
|
||||||
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
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);
|
this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
|
||||||
|
|
||||||
await this.model.messages.fetched;
|
await this.model.messages.fetched;
|
||||||
@ -202,22 +201,6 @@ export default class ChatView extends BaseChatView {
|
|||||||
return {};
|
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
|
* Given a message element, determine wether it should be
|
||||||
* marked as a followup message to the previous element.
|
* marked as a followup message to the previous element.
|
||||||
|
@ -5,7 +5,7 @@ import { CustomElement } from 'components/element.js';
|
|||||||
class ConverseDragResize extends CustomElement {
|
class ConverseDragResize extends CustomElement {
|
||||||
|
|
||||||
render () { // eslint-disable-line class-methods-use-this
|
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.
|
// Need to be registered after render has been called.
|
||||||
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
||||||
this.listenTo(this.model.messages, 'remove', this.renderChatHistory);
|
this.listenTo(this.model.messages, 'remove', this.renderChatHistory);
|
||||||
this.listenTo(this.model.messages, 'rendered', this.maybeScrollDown);
|
|
||||||
this.listenTo(this.model.messages, 'reset', this.renderChatHistory);
|
this.listenTo(this.model.messages, 'reset', this.renderChatHistory);
|
||||||
|
|
||||||
await this.model.messages.fetched;
|
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, 'show', this.show);
|
||||||
this.listenTo(this.model.features, 'change:moderated', this.renderBottomPanel);
|
this.listenTo(this.model.features, 'change:moderated', this.renderBottomPanel);
|
||||||
this.listenTo(this.model.features, 'change:open', this.renderHeading);
|
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.messages, 'change:correcting', this.onMessageCorrecting);
|
||||||
this.listenTo(this.model.session, 'change:connection_status', this.onConnectionStatusChanged);
|
this.listenTo(this.model.session, 'change:connection_status', this.onConnectionStatusChanged);
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user