2021-02-11 22:32:55 +01:00
|
|
|
import 'plugins/chatview/heading.js';
|
2021-03-12 09:58:17 +01:00
|
|
|
import 'plugins/chatview/bottom-panel.js';
|
2021-03-10 12:17:23 +01:00
|
|
|
import { html, render } from 'lit-html';
|
2021-02-11 15:05:04 +01:00
|
|
|
import BaseChatView from 'shared/chat/baseview.js';
|
2021-02-12 14:38:26 +01:00
|
|
|
import tpl_chat from './templates/chat.js';
|
2020-12-08 12:54:14 +01:00
|
|
|
import { __ } from 'i18n';
|
2020-12-03 13:40:30 +01:00
|
|
|
import { _converse, api, converse } from '@converse/headless/core';
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2019-07-11 12:30:51 +02:00
|
|
|
const u = converse.env.utils;
|
2020-12-04 23:12:09 +01:00
|
|
|
const { dayjs } = converse.env;
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2020-09-09 14:37:43 +02:00
|
|
|
/**
|
|
|
|
* The View of an open/ongoing chat conversation.
|
|
|
|
* @class
|
|
|
|
* @namespace _converse.ChatBoxView
|
|
|
|
* @memberOf _converse
|
|
|
|
*/
|
2020-12-08 12:54:14 +01:00
|
|
|
export default class ChatView extends BaseChatView {
|
|
|
|
length = 200
|
|
|
|
className = 'chatbox hidden'
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
async initialize () {
|
2020-12-08 12:54:14 +01:00
|
|
|
const jid = this.getAttribute('jid');
|
|
|
|
_converse.chatboxviews.add(jid, this);
|
|
|
|
|
|
|
|
this.model = _converse.chatboxes.get(jid);
|
2020-09-09 14:37:43 +02:00
|
|
|
this.initDebounced();
|
|
|
|
|
2021-02-10 11:44:04 +01:00
|
|
|
this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
|
2021-01-29 15:27:54 +01:00
|
|
|
this.listenTo(this.model, 'change:hidden', () => !this.model.get('hidden') && this.afterShown());
|
2020-09-09 14:37:43 +02:00
|
|
|
this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
|
|
|
|
this.render();
|
|
|
|
|
|
|
|
// Need to be registered after render has been called.
|
|
|
|
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
|
|
|
this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
|
|
|
|
|
2020-10-28 13:02:12 +01:00
|
|
|
await this.model.messages.fetched;
|
2021-01-28 22:50:53 +01:00
|
|
|
!this.model.get('hidden') && this.afterShown()
|
2020-09-09 14:37:43 +02:00
|
|
|
/**
|
|
|
|
* Triggered once the {@link _converse.ChatBoxView} has been initialized
|
|
|
|
* @event _converse#chatBoxViewInitialized
|
|
|
|
* @type { _converse.HeadlinesBoxView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxViewInitialized', view => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('chatBoxViewInitialized', this);
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
render () {
|
2021-02-12 14:38:26 +01:00
|
|
|
const result = tpl_chat(Object.assign(
|
2021-02-09 11:14:06 +01:00
|
|
|
this.model.toJSON(), { 'markScrolled': ev => this.markScrolled(ev) })
|
2021-02-08 11:27:42 +01:00
|
|
|
);
|
2020-12-08 12:54:14 +01:00
|
|
|
render(result, this);
|
|
|
|
this.help_container = this.querySelector('.chat-content__help');
|
2020-09-09 14:37:43 +02:00
|
|
|
return this;
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
2021-03-10 12:17:23 +01:00
|
|
|
renderHelpMessages () {
|
|
|
|
render(
|
|
|
|
html`
|
|
|
|
<converse-chat-help
|
|
|
|
.model=${this.model}
|
|
|
|
.messages=${this.getHelpMessages()}
|
|
|
|
?hidden=${!this.model.get('show_help_messages')}
|
|
|
|
type="info"
|
|
|
|
chat_type="${this.model.get('type')}"
|
|
|
|
></converse-chat-help>
|
|
|
|
`,
|
|
|
|
this.help_container
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
getHelpMessages () { // eslint-disable-line class-methods-use-this
|
2020-09-09 14:37:43 +02:00
|
|
|
return [
|
|
|
|
`<strong>/clear</strong>: ${__('Remove messages')}`,
|
|
|
|
`<strong>/close</strong>: ${__('Close this chat')}`,
|
|
|
|
`<strong>/me</strong>: ${__('Write in the third person')}`,
|
|
|
|
`<strong>/help</strong>: ${__('Show this menu')}`
|
|
|
|
];
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
showControlBox () {
|
|
|
|
// Used in mobile view, to navigate back to the controlbox
|
2020-10-27 11:57:23 +01:00
|
|
|
_converse.chatboxviews.get('controlbox')?.show();
|
2020-09-09 14:37:43 +02:00
|
|
|
this.hide();
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Given a message element, determine wether it should be
|
|
|
|
* marked as a followup message to the previous element.
|
|
|
|
*
|
|
|
|
* Also determine whether the element following it is a
|
|
|
|
* followup message or not.
|
|
|
|
*
|
|
|
|
* Followup messages are subsequent ones written by the same
|
|
|
|
* author with no other conversation elements in between and
|
|
|
|
* which were posted within 10 minutes of one another.
|
|
|
|
* @private
|
|
|
|
* @method _converse.ChatBoxView#markFollowups
|
|
|
|
* @param { HTMLElement } el - The message element
|
|
|
|
*/
|
2020-12-08 12:54:14 +01:00
|
|
|
markFollowups (el) { // eslint-disable-line class-methods-use-this
|
2020-09-09 14:37:43 +02:00
|
|
|
const from = el.getAttribute('data-from');
|
|
|
|
const previous_el = el.previousElementSibling;
|
|
|
|
const date = dayjs(el.getAttribute('data-isodate'));
|
|
|
|
const next_el = el.nextElementSibling;
|
|
|
|
|
2020-12-04 23:12:09 +01:00
|
|
|
if (
|
|
|
|
!u.hasClass('chat-msg--action', el) &&
|
|
|
|
!u.hasClass('chat-msg--action', previous_el) &&
|
|
|
|
!u.hasClass('chat-info', el) &&
|
|
|
|
!u.hasClass('chat-info', previous_el) &&
|
|
|
|
previous_el.getAttribute('data-from') === from &&
|
|
|
|
date.isBefore(dayjs(previous_el.getAttribute('data-isodate')).add(10, 'minutes')) &&
|
|
|
|
el.getAttribute('data-encrypted') === previous_el.getAttribute('data-encrypted')
|
|
|
|
) {
|
2020-09-09 14:37:43 +02:00
|
|
|
u.addClass('chat-msg--followup', el);
|
|
|
|
}
|
2020-12-04 23:12:09 +01:00
|
|
|
if (!next_el) {
|
|
|
|
return;
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
2020-12-04 23:12:09 +01:00
|
|
|
if (
|
|
|
|
!u.hasClass('chat-msg--action', el) &&
|
|
|
|
u.hasClass('chat-info', el) &&
|
|
|
|
next_el.getAttribute('data-from') === from &&
|
|
|
|
dayjs(next_el.getAttribute('data-isodate')).isBefore(date.add(10, 'minutes')) &&
|
|
|
|
el.getAttribute('data-encrypted') === next_el.getAttribute('data-encrypted')
|
|
|
|
) {
|
2020-09-09 14:37:43 +02:00
|
|
|
u.addClass('chat-msg--followup', next_el);
|
|
|
|
} else {
|
|
|
|
u.removeClass('chat-msg--followup', next_el);
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
async close (ev) {
|
2021-01-26 13:22:04 +01:00
|
|
|
ev?.preventDefault?.();
|
2020-12-04 23:12:09 +01:00
|
|
|
if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) {
|
2020-09-09 14:37:43 +02:00
|
|
|
_converse.router.navigate('');
|
|
|
|
}
|
|
|
|
if (api.connection.connected()) {
|
|
|
|
// Immediately sending the chat state, because the
|
|
|
|
// model is going to be destroyed afterwards.
|
|
|
|
this.model.setChatState(_converse.INACTIVE);
|
|
|
|
this.model.sendChatState();
|
|
|
|
}
|
2020-12-17 13:54:32 +01:00
|
|
|
await this.model.close(ev);
|
2020-09-09 14:37:43 +02:00
|
|
|
/**
|
|
|
|
* Triggered once a chatbox has been closed.
|
|
|
|
* @event _converse#chatBoxClosed
|
|
|
|
* @type { _converse.ChatBoxView | _converse.ChatRoomView }
|
|
|
|
* @example _converse.api.listen.on('chatBoxClosed', view => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('chatBoxClosed', this);
|
|
|
|
return this;
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
afterShown () {
|
|
|
|
this.model.clearUnreadMsgCounter();
|
|
|
|
this.model.setChatState(_converse.ACTIVE);
|
|
|
|
this.scrollDown();
|
|
|
|
this.maybeFocus();
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
api.elements.define('converse-chat', ChatView);
|