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';
|
2021-06-03 16:29:31 +02:00
|
|
|
import { onScrolledDown } from './utils.js';
|
2020-12-08 12:54:14 +01:00
|
|
|
|
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
export default class BaseChatView extends ElementView {
|
|
|
|
|
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
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-03 19:11:32 +02:00
|
|
|
getMessageForm () {
|
|
|
|
if (this.model.get('type') === _converse.CHATROOMS_TYPE) {
|
|
|
|
return this.querySelector('converse-muc-message-form');
|
|
|
|
} else {
|
|
|
|
return this.querySelector('converse-message-form');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
/**
|
|
|
|
* 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')) {
|
2021-06-03 16:29:31 +02:00
|
|
|
u.safeSave(this.model, { 'scrolled': false });
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2021-06-03 16:29:31 +02:00
|
|
|
onScrolledDown(this.model);
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
|
|
|
|
2021-02-09 10:00:23 +01:00
|
|
|
onWindowStateChanged (data) {
|
|
|
|
if (data.state === 'visible') {
|
2021-06-03 19:11:32 +02:00
|
|
|
if (!this.model.isHidden()) {
|
2020-12-08 12:54:14 +01:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|