2020-08-12 17:57:39 +02:00
|
|
|
import "./message-history";
|
2020-05-15 14:33:31 +02:00
|
|
|
import { CustomElement } from './element.js';
|
2021-02-09 11:14:06 +01:00
|
|
|
import { _converse, api } from "@converse/headless/core";
|
2020-05-15 14:33:31 +02:00
|
|
|
import { html } from 'lit-element';
|
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
export default class ChatContent extends CustomElement {
|
2020-05-15 14:33:31 +02:00
|
|
|
|
|
|
|
static get properties () {
|
|
|
|
return {
|
2021-02-09 11:14:06 +01:00
|
|
|
jid: { type: String }
|
2021-02-08 11:27:42 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
connectedCallback () {
|
|
|
|
super.connectedCallback();
|
2021-02-09 11:14:06 +01:00
|
|
|
this.model = _converse.chatboxes.get(this.jid);
|
|
|
|
this.listenTo(this.model.messages, 'add', this.requestUpdate);
|
|
|
|
this.listenTo(this.model.messages, 'change', this.requestUpdate);
|
|
|
|
this.listenTo(this.model.messages, 'remove', this.requestUpdate);
|
|
|
|
this.listenTo(this.model.messages, 'reset', this.requestUpdate);
|
|
|
|
this.listenTo(this.model.notifications, 'change', this.requestUpdate);
|
|
|
|
if (this.model.occupants) {
|
|
|
|
this.listenTo(this.model.occupants, 'change', this.requestUpdate);
|
2020-05-15 14:33:31 +02:00
|
|
|
}
|
2021-02-09 11:14:06 +01:00
|
|
|
|
|
|
|
// We jot down whether we were scrolled down before rendering, because when an
|
|
|
|
// image loads, it triggers 'scroll' and the chat will be marked as scrolled,
|
|
|
|
// which is technically true, but not what we want because the user
|
|
|
|
// didn't initiate the scrolling.
|
|
|
|
this.was_scrolled_up = this.model.get('scrolled');
|
|
|
|
this.addEventListener('imageLoaded', () => {
|
|
|
|
!this.was_scrolled_up && this.scrollDown();
|
|
|
|
});
|
2020-05-15 14:33:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return html`
|
|
|
|
<converse-message-history
|
2021-02-09 11:14:06 +01:00
|
|
|
.model=${this.model}
|
|
|
|
.messages=${[...this.model.messages.models]}>
|
2020-05-15 14:33:31 +02:00
|
|
|
</converse-message-history>
|
2021-02-09 11:14:06 +01:00
|
|
|
<div class="chat-content__notifications">${this.model.getNotificationsText()}</div>
|
2020-05-15 14:33:31 +02:00
|
|
|
`;
|
|
|
|
}
|
2021-02-09 11:14:06 +01:00
|
|
|
|
|
|
|
scrollDown () {
|
|
|
|
if (this.scrollTo) {
|
|
|
|
const behavior = this.scrollTop ? 'smooth' : 'auto';
|
|
|
|
this.scrollTo({ 'top': this.scrollHeight, behavior });
|
|
|
|
} else {
|
|
|
|
this.scrollTop = this.scrollHeight;
|
|
|
|
}
|
|
|
|
}
|
2020-05-15 14:33:31 +02:00
|
|
|
}
|
|
|
|
|
2020-07-01 21:45:18 +02:00
|
|
|
api.elements.define('converse-chat-content', ChatContent);
|