2021-05-12 12:14:28 +02:00
|
|
|
import debounce from 'lodash-es/debounce';
|
2020-12-08 12:54:14 +01:00
|
|
|
import log from '@converse/headless/log';
|
|
|
|
import { ElementView } from '@converse/skeletor/src/element.js';
|
|
|
|
import { _converse, api, converse } from '@converse/headless/core';
|
|
|
|
|
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
export default class BaseChatView extends ElementView {
|
|
|
|
|
|
|
|
initDebounced () {
|
|
|
|
this.markScrolled = debounce(this._markScrolled, 100);
|
|
|
|
}
|
|
|
|
|
2021-03-11 12:33:50 +01:00
|
|
|
disconnectedCallback () {
|
|
|
|
super.disconnectedCallback();
|
|
|
|
const jid = this.getAttribute('jid');
|
|
|
|
_converse.chatboxviews.remove(jid, this);
|
|
|
|
}
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
maybeFocus () {
|
|
|
|
api.settings.get('auto_focus') && this.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
focus () {
|
|
|
|
const textarea_el = this.getElementsByClassName('chat-textarea')[0];
|
|
|
|
if (textarea_el && document.activeElement !== textarea_el) {
|
|
|
|
textarea_el.focus();
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
show () {
|
|
|
|
if (this.model.get('hidden')) {
|
|
|
|
log.debug(`Not showing chat ${this.model.get('jid')} because it's set as hidden`);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (u.isVisible(this)) {
|
|
|
|
this.maybeFocus();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.afterShown();
|
|
|
|
}
|
|
|
|
|
2021-02-11 22:32:55 +01:00
|
|
|
emitBlurred (ev) {
|
|
|
|
if (this.contains(document.activeElement) || this.contains(ev.relatedTarget)) {
|
|
|
|
// Something else in this chatbox is still focused
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* Triggered when the focus has been removed from a particular chat.
|
|
|
|
* @event _converse#chatBoxBlurred
|
|
|
|
* @type { _converse.ChatBoxView | _converse.ChatRoomView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxBlurred', (view, event) => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('chatBoxBlurred', this, ev);
|
|
|
|
}
|
|
|
|
|
|
|
|
emitFocused (ev) {
|
|
|
|
if (this.contains(ev.relatedTarget)) {
|
|
|
|
// Something else in this chatbox was already focused
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* Triggered when the focus has been moved to a particular chat.
|
|
|
|
* @event _converse#chatBoxFocused
|
|
|
|
* @type { _converse.ChatBoxView | _converse.ChatRoomView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxFocused', (view, event) => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('chatBoxFocused', this, ev);
|
|
|
|
}
|
|
|
|
|
2021-01-28 22:50:53 +01:00
|
|
|
onStatusMessageChanged (item) {
|
|
|
|
this.renderHeading();
|
|
|
|
/**
|
|
|
|
* When a contact's custom status message has changed.
|
|
|
|
* @event _converse#contactStatusMessageChanged
|
|
|
|
* @type {object}
|
|
|
|
* @property { object } contact - The chat buddy
|
|
|
|
* @property { string } message - The message text
|
|
|
|
* @example _converse.api.listen.on('contactStatusMessageChanged', obj => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('contactStatusMessageChanged', {
|
|
|
|
'contact': item.attributes,
|
|
|
|
'message': item.get('status')
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-03-04 15:53:04 +01:00
|
|
|
getBottomPanel () {
|
2021-02-11 15:05:04 +01:00
|
|
|
if (this.model.get('type') === _converse.CHATROOMS_TYPE) {
|
2021-03-04 15:53:04 +01:00
|
|
|
return this.querySelector('converse-muc-bottom-panel');
|
2020-12-08 12:54:14 +01:00
|
|
|
} else {
|
2021-03-04 15:53:04 +01:00
|
|
|
return this.querySelector('converse-chat-bottom-panel');
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Called when the chat content is scrolled up or down.
|
|
|
|
* We want to record when the user has scrolled away from
|
|
|
|
* the bottom, so that we don't automatically scroll away
|
|
|
|
* from what the user is reading when new messages are received.
|
|
|
|
*
|
|
|
|
* Don't call this method directly, instead, call `markScrolled`,
|
|
|
|
* which debounces this method by 100ms.
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
_markScrolled (ev) {
|
|
|
|
let scrolled = true;
|
|
|
|
let scrollTop = null;
|
2021-02-08 11:27:42 +01:00
|
|
|
const msgs_container = this.querySelector('.chat-content__messages');
|
2020-12-08 12:54:14 +01:00
|
|
|
const is_at_bottom =
|
2021-02-08 11:27:42 +01:00
|
|
|
msgs_container.scrollTop + msgs_container.clientHeight >= msgs_container.scrollHeight - 62; // sigh...
|
2020-12-08 12:54:14 +01:00
|
|
|
|
|
|
|
if (is_at_bottom) {
|
|
|
|
scrolled = false;
|
|
|
|
this.onScrolledDown();
|
2021-02-08 11:27:42 +01:00
|
|
|
} else if (msgs_container.scrollTop === 0) {
|
2020-12-08 12:54:14 +01:00
|
|
|
/**
|
|
|
|
* Triggered once the chat's message area has been scrolled to the top
|
|
|
|
* @event _converse#chatBoxScrolledUp
|
|
|
|
* @property { _converse.ChatBoxView | _converse.ChatRoomView } view
|
|
|
|
* @example _converse.api.listen.on('chatBoxScrolledUp', obj => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('chatBoxScrolledUp', this);
|
|
|
|
} else {
|
|
|
|
scrollTop = ev.target.scrollTop;
|
|
|
|
}
|
|
|
|
u.safeSave(this.model, { scrolled, scrollTop });
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Scrolls the chat down.
|
|
|
|
*
|
|
|
|
* This method will always scroll the chat down, regardless of
|
|
|
|
* whether the user scrolled up manually or not.
|
|
|
|
* @param { Event } [ev] - An optional event that is the cause for needing to scroll down.
|
|
|
|
*/
|
|
|
|
scrollDown (ev) {
|
|
|
|
ev?.preventDefault?.();
|
|
|
|
ev?.stopPropagation?.();
|
|
|
|
if (this.model.get('scrolled')) {
|
|
|
|
u.safeSave(this.model, {
|
|
|
|
'scrolled': false,
|
|
|
|
'scrollTop': null
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.onScrolledDown();
|
|
|
|
}
|
|
|
|
|
|
|
|
onScrolledDown () {
|
|
|
|
if (!this.model.isHidden()) {
|
|
|
|
this.model.clearUnreadMsgCounter();
|
2021-04-14 22:56:59 +02:00
|
|
|
if (api.settings.get('allow_url_history_change')) {
|
|
|
|
// 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();
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-09 10:00:23 +01:00
|
|
|
onWindowStateChanged (data) {
|
|
|
|
if (data.state === 'visible') {
|
2020-12-08 12:54:14 +01:00
|
|
|
if (!this.model.isHidden() && this.model.get('num_unread', 0)) {
|
|
|
|
this.model.clearUnreadMsgCounter();
|
|
|
|
}
|
2021-02-09 10:00:23 +01:00
|
|
|
} else if (data.state === 'hidden') {
|
2020-12-08 12:54:14 +01:00
|
|
|
this.model.setChatState(_converse.INACTIVE, { 'silent': true });
|
|
|
|
this.model.sendChatState();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|