2020-12-08 12:54:14 +01:00
|
|
|
|
import BaseChatView from 'shared/chatview.js';
|
2020-12-04 23:12:09 +01:00
|
|
|
|
import UserDetailsModal from 'modals/user-details.js';
|
2020-12-01 16:31:57 +01:00
|
|
|
|
import log from '@converse/headless/log';
|
|
|
|
|
import tpl_chatbox from 'templates/chatbox.js';
|
|
|
|
|
import tpl_chatbox_head from 'templates/chatbox_head.js';
|
|
|
|
|
import tpl_spinner from 'templates/spinner.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';
|
2020-12-01 16:31:57 +01:00
|
|
|
|
import { debounce } from 'lodash-es';
|
|
|
|
|
import { html, render } from 'lit-html';
|
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'
|
|
|
|
|
is_chatroom = false // Leaky abstraction from MUC
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
|
events = {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
'click .chatbox-navback': 'showControlBox',
|
|
|
|
|
'click .new-msgs-indicator': 'viewUnreadMessages',
|
|
|
|
|
'click .send-button': 'onFormSubmitted',
|
|
|
|
|
'click .toggle-clear': 'clearMessages',
|
|
|
|
|
'input .chat-textarea': 'inputChanged',
|
|
|
|
|
'keydown .chat-textarea': 'onKeyDown',
|
|
|
|
|
'keyup .chat-textarea': 'onKeyUp',
|
2020-12-04 23:12:09 +01:00
|
|
|
|
'paste .chat-textarea': 'onPaste'
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
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();
|
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
|
api.listen.on('windowStateChanged', this.onWindowStateChanged);
|
|
|
|
|
|
2020-09-21 17:20:07 +02:00
|
|
|
|
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
|
2021-01-25 22:04:01 +01:00
|
|
|
|
this.listenTo(this.model, 'change:hidden', () => this.afterShown());
|
|
|
|
|
this.listenTo(this.model, 'change:minimized', () => this.afterShown());
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
|
|
|
|
|
this.listenTo(this.model, 'vcard:change', this.renderHeading);
|
|
|
|
|
|
|
|
|
|
if (this.model.contact) {
|
|
|
|
|
this.listenTo(this.model.contact, 'destroy', this.renderHeading);
|
|
|
|
|
}
|
|
|
|
|
if (this.model.rosterContactAdded) {
|
|
|
|
|
this.model.rosterContactAdded.then(() => {
|
|
|
|
|
this.listenTo(this.model.contact, 'change:nickname', this.renderHeading);
|
|
|
|
|
this.renderHeading();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.listenTo(this.model.presence, 'change:show', this.onPresenceChanged);
|
|
|
|
|
this.render();
|
|
|
|
|
|
|
|
|
|
// Need to be registered after render has been called.
|
|
|
|
|
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
|
|
|
|
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.notifications, 'change', this.renderNotifications);
|
|
|
|
|
this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
|
|
|
|
|
|
2020-10-28 13:02:12 +01:00
|
|
|
|
await this.model.messages.fetched;
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.model.maybeShow();
|
2020-10-28 13:02:12 +01:00
|
|
|
|
this.scrollDown();
|
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
|
|
|
|
|
|
|
|
|
initDebounced () {
|
|
|
|
|
this.markScrolled = debounce(this._markScrolled, 100);
|
|
|
|
|
this.debouncedScrollDown = debounce(this.scrollDown, 100);
|
|
|
|
|
|
|
|
|
|
// For tests that use Jasmine.Clock we want to turn of
|
|
|
|
|
// debouncing, since setTimeout breaks.
|
|
|
|
|
if (api.settings.get('debounced_content_rendering')) {
|
|
|
|
|
this.renderChatHistory = debounce(() => this.renderChatContent(false), 100);
|
|
|
|
|
this.renderNotifications = debounce(() => this.renderChatContent(true), 100);
|
|
|
|
|
} else {
|
|
|
|
|
this.renderChatHistory = () => this.renderChatContent(false);
|
|
|
|
|
this.renderNotifications = () => this.renderChatContent(true);
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
render () {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
const result = tpl_chatbox(Object.assign(this.model.toJSON(), { 'markScrolled': ev => this.markScrolled(ev) }));
|
2020-12-08 12:54:14 +01:00
|
|
|
|
render(result, this);
|
|
|
|
|
this.content = this.querySelector('.chat-content');
|
|
|
|
|
this.notifications = this.querySelector('.chat-content__notifications');
|
|
|
|
|
this.msgs_container = this.querySelector('.chat-content__messages');
|
|
|
|
|
this.help_container = this.querySelector('.chat-content__help');
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.renderChatContent();
|
|
|
|
|
this.renderMessageForm();
|
|
|
|
|
this.renderHeading();
|
|
|
|
|
return this;
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
onMessageAdded (message) {
|
|
|
|
|
this.renderChatHistory();
|
|
|
|
|
|
|
|
|
|
if (u.isNewMessage(message)) {
|
|
|
|
|
if (message.get('sender') === 'me') {
|
|
|
|
|
// We remove the "scrolled" flag so that the chat area
|
|
|
|
|
// gets scrolled down. We always want to scroll down
|
|
|
|
|
// when the user writes a message as opposed to when a
|
|
|
|
|
// message is received.
|
|
|
|
|
this.model.set('scrolled', false);
|
|
|
|
|
} else if (this.model.get('scrolled', true)) {
|
|
|
|
|
this.showNewMessagesIndicator();
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
getNotifications () {
|
|
|
|
|
if (this.model.notifications.get('chat_state') === _converse.COMPOSING) {
|
|
|
|
|
return __('%1$s is typing', this.model.getDisplayName());
|
|
|
|
|
} else if (this.model.notifications.get('chat_state') === _converse.PAUSED) {
|
|
|
|
|
return __('%1$s has stopped typing', this.model.getDisplayName());
|
|
|
|
|
} else if (this.model.notifications.get('chat_state') === _converse.GONE) {
|
|
|
|
|
return __('%1$s has gone away', this.model.getDisplayName());
|
|
|
|
|
} else {
|
|
|
|
|
return '';
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
renderHelpMessages () {
|
|
|
|
|
render(
|
2020-12-04 23:12:09 +01:00
|
|
|
|
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>
|
|
|
|
|
`,
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
this.help_container
|
|
|
|
|
);
|
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
|
|
|
|
|
|
|
|
|
showUserDetailsModal (ev) {
|
|
|
|
|
ev.preventDefault();
|
2020-12-04 23:12:09 +01:00
|
|
|
|
api.modal.show(UserDetailsModal, { model: this.model }, ev);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
|
onDragOver (evt) { // eslint-disable-line class-methods-use-this
|
2020-09-09 14:37:43 +02:00
|
|
|
|
evt.preventDefault();
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
onDrop (evt) {
|
|
|
|
|
if (evt.dataTransfer.files.length == 0) {
|
|
|
|
|
// There are no files to be dropped, so this isn’t a file
|
|
|
|
|
// transfer operation.
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
evt.preventDefault();
|
|
|
|
|
this.model.sendFiles(evt.dataTransfer.files);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
async generateHeadingTemplate () {
|
|
|
|
|
const vcard = this.model?.vcard;
|
|
|
|
|
const vcard_json = vcard ? vcard.toJSON() : {};
|
2020-12-04 23:12:09 +01:00
|
|
|
|
const i18n_profile = __("The User's Profile Image");
|
|
|
|
|
const avatar_data = Object.assign(
|
|
|
|
|
{
|
|
|
|
|
'alt_text': i18n_profile,
|
|
|
|
|
'extra_classes': '',
|
|
|
|
|
'height': 40,
|
|
|
|
|
'width': 40
|
|
|
|
|
},
|
|
|
|
|
vcard_json
|
|
|
|
|
);
|
2020-09-09 14:37:43 +02:00
|
|
|
|
const heading_btns = await this.getHeadingButtons();
|
|
|
|
|
const standalone_btns = heading_btns.filter(b => b.standalone);
|
|
|
|
|
const dropdown_btns = heading_btns.filter(b => !b.standalone);
|
|
|
|
|
return tpl_chatbox_head(
|
2020-12-04 23:12:09 +01:00
|
|
|
|
Object.assign(this.model.toJSON(), {
|
|
|
|
|
avatar_data,
|
|
|
|
|
'display_name': this.model.getDisplayName(),
|
|
|
|
|
'dropdown_btns': dropdown_btns.map(b => this.getHeadingDropdownItem(b)),
|
|
|
|
|
'showUserDetailsModal': ev => this.showUserDetailsModal(ev),
|
|
|
|
|
'standalone_btns': standalone_btns.map(b => this.getHeadingStandaloneButton(b))
|
|
|
|
|
})
|
2020-09-09 14:37:43 +02:00
|
|
|
|
);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns a list of objects which represent buttons for the chat's header.
|
|
|
|
|
* @async
|
|
|
|
|
* @emits _converse#getHeadingButtons
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#getHeadingButtons
|
|
|
|
|
*/
|
|
|
|
|
getHeadingButtons () {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
const buttons = [
|
|
|
|
|
{
|
|
|
|
|
'a_class': 'show-user-details-modal',
|
|
|
|
|
'handler': ev => this.showUserDetailsModal(ev),
|
|
|
|
|
'i18n_text': __('Details'),
|
|
|
|
|
'i18n_title': __('See more information about this person'),
|
|
|
|
|
'icon_class': 'fa-id-card',
|
|
|
|
|
'name': 'details',
|
|
|
|
|
'standalone': api.settings.get('view_mode') === 'overlayed'
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
if (!api.settings.get('singleton')) {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
buttons.push({
|
|
|
|
|
'a_class': 'close-chatbox-button',
|
|
|
|
|
'handler': ev => this.close(ev),
|
|
|
|
|
'i18n_text': __('Close'),
|
|
|
|
|
'i18n_title': __('Close and end this conversation'),
|
|
|
|
|
'icon_class': 'fa-times',
|
|
|
|
|
'name': 'close',
|
2020-12-04 23:12:09 +01:00
|
|
|
|
'standalone': api.settings.get('view_mode') === 'overlayed'
|
2020-09-09 14:37:43 +02:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
* *Hook* which allows plugins to add more buttons to a chat's heading.
|
|
|
|
|
* @event _converse#getHeadingButtons
|
2020-12-03 16:56:54 +01:00
|
|
|
|
* @example
|
|
|
|
|
* api.listen.on('getHeadingButtons', (view, buttons) => {
|
|
|
|
|
* buttons.push({
|
|
|
|
|
* 'i18n_title': __('Foo'),
|
|
|
|
|
* 'i18n_text': __('Foo Bar'),
|
|
|
|
|
* 'handler': ev => alert('Foo!'),
|
|
|
|
|
* 'a_class': 'toggle-foo',
|
|
|
|
|
* 'icon_class': 'fa-foo',
|
|
|
|
|
* 'name': 'foo'
|
|
|
|
|
* });
|
|
|
|
|
* return buttons;
|
|
|
|
|
* });
|
2020-09-09 14:37:43 +02:00
|
|
|
|
*/
|
|
|
|
|
return _converse.api.hook('getHeadingButtons', this, buttons);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
|
getToolbarOptions () { // eslint-disable-line class-methods-use-this
|
2020-09-09 14:37:43 +02:00
|
|
|
|
// FIXME: can this be removed?
|
|
|
|
|
return {};
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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) {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
const new_own_msg = !message?.get('is_archived') && message?.get('sender') === 'me';
|
2020-10-13 05:57:27 +02:00
|
|
|
|
if ((new_own_msg || !this.model.get('scrolled')) && !this.model.isHidden()) {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.debouncedScrollDown();
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Scroll to the previously saved scrollTop position, or scroll
|
|
|
|
|
* down if it wasn't set.
|
|
|
|
|
*/
|
|
|
|
|
maintainScrollTop () {
|
|
|
|
|
const pos = this.model.get('scrollTop');
|
|
|
|
|
if (pos) {
|
|
|
|
|
this.msgs_container.scrollTop = pos;
|
|
|
|
|
} else {
|
|
|
|
|
this.scrollDown();
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
2020-12-04 23:12:09 +01:00
|
|
|
|
addSpinner (append = false) {
|
2020-12-08 12:54:14 +01:00
|
|
|
|
if (this.querySelector('.spinner') === null) {
|
2020-09-26 09:51:44 +02:00
|
|
|
|
const el = u.getElementFromTemplateResult(tpl_spinner());
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (append) {
|
2020-09-26 09:51:44 +02:00
|
|
|
|
this.content.insertAdjacentElement('beforeend', el);
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.scrollDown();
|
|
|
|
|
} else {
|
2020-09-26 09:51:44 +02:00
|
|
|
|
this.content.insertAdjacentElement('afterbegin', el);
|
2020-09-09 14:37:43 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
clearSpinner () {
|
|
|
|
|
this.content.querySelectorAll('.spinner').forEach(u.removeElement);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02: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')
|
|
|
|
|
});
|
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
|
|
|
|
|
|
|
|
|
parseMessageForCommands (text) {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
const match = text.replace(/^\s*/, '').match(/^\/(.*)\s*$/);
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (match) {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
if (match[1] === 'clear') {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.clearMessages();
|
|
|
|
|
return true;
|
2020-12-04 23:12:09 +01:00
|
|
|
|
} else if (match[1] === 'close') {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.close();
|
|
|
|
|
return true;
|
2020-12-04 23:12:09 +01:00
|
|
|
|
} else if (match[1] === 'help') {
|
|
|
|
|
this.model.set({ 'show_help_messages': true });
|
2020-09-09 14:37:43 +02:00
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
onPaste (ev) {
|
|
|
|
|
if (ev.clipboardData.files.length !== 0) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
// Workaround for quirk in at least Firefox 60.7 ESR:
|
|
|
|
|
// It seems that pasted files disappear from the event payload after
|
|
|
|
|
// the event has finished, which apparently happens during async
|
|
|
|
|
// processing in sendFiles(). So we copy the array here.
|
|
|
|
|
this.model.sendFiles(Array.from(ev.clipboardData.files));
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.updateCharCounter(ev.clipboardData.getData('text/plain'));
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Event handler for when a depressed key goes up
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#onKeyUp
|
|
|
|
|
*/
|
|
|
|
|
onKeyUp (ev) {
|
|
|
|
|
this.updateCharCounter(ev.target.value);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Event handler for when a key is pressed down in a chat box textarea.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#onKeyDown
|
|
|
|
|
* @param { Event } ev
|
|
|
|
|
*/
|
|
|
|
|
onKeyDown (ev) {
|
|
|
|
|
if (ev.ctrlKey) {
|
|
|
|
|
// When ctrl is pressed, no chars are entered into the textarea.
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (!ev.shiftKey && !ev.altKey && !ev.metaKey) {
|
|
|
|
|
if (ev.keyCode === converse.keycodes.TAB) {
|
|
|
|
|
const value = u.getCurrentWord(ev.target, null, /(:.*?:)/g);
|
|
|
|
|
if (value.startsWith(':') && this.autocompleteInPicker(ev.target, value)) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
}
|
|
|
|
|
} else if (ev.keyCode === converse.keycodes.FORWARD_SLASH) {
|
|
|
|
|
// Forward slash is used to run commands. Nothing to do here.
|
|
|
|
|
return;
|
|
|
|
|
} else if (ev.keyCode === converse.keycodes.ESCAPE) {
|
|
|
|
|
return this.onEscapePressed(ev);
|
|
|
|
|
} else if (ev.keyCode === converse.keycodes.ENTER) {
|
|
|
|
|
return this.onEnterPressed(ev);
|
|
|
|
|
} else if (ev.keyCode === converse.keycodes.UP_ARROW && !ev.target.selectionEnd) {
|
2020-12-08 12:54:14 +01:00
|
|
|
|
const textarea = this.querySelector('.chat-textarea');
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (!textarea.value || u.hasClass('correcting', textarea)) {
|
|
|
|
|
return this.editEarlierMessage();
|
|
|
|
|
}
|
2020-12-04 23:12:09 +01:00
|
|
|
|
} else if (
|
|
|
|
|
ev.keyCode === converse.keycodes.DOWN_ARROW &&
|
|
|
|
|
ev.target.selectionEnd === ev.target.value.length &&
|
2020-12-08 12:54:14 +01:00
|
|
|
|
u.hasClass('correcting', this.querySelector('.chat-textarea'))
|
2020-12-04 23:12:09 +01:00
|
|
|
|
) {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
return this.editLaterMessage();
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-12-04 23:12:09 +01:00
|
|
|
|
if (
|
|
|
|
|
[
|
|
|
|
|
converse.keycodes.SHIFT,
|
2020-09-09 14:37:43 +02:00
|
|
|
|
converse.keycodes.META,
|
|
|
|
|
converse.keycodes.META_RIGHT,
|
|
|
|
|
converse.keycodes.ESCAPE,
|
2020-12-04 23:12:09 +01:00
|
|
|
|
converse.keycodes.ALT
|
|
|
|
|
].includes(ev.keyCode)
|
|
|
|
|
) {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (this.model.get('chat_state') !== _converse.COMPOSING) {
|
|
|
|
|
// Set chat state to composing if keyCode is not a forward-slash
|
|
|
|
|
// (which would imply an internal command and not a message).
|
|
|
|
|
this.model.setChatState(_converse.COMPOSING);
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
getOwnMessages () {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
return this.model.messages.filter({ 'sender': 'me' });
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
onEscapePressed (ev) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
const idx = this.model.messages.findLastIndex('correcting');
|
2020-12-04 23:12:09 +01:00
|
|
|
|
const message = idx >= 0 ? this.model.messages.at(idx) : null;
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (message) {
|
|
|
|
|
message.save('correcting', false);
|
|
|
|
|
}
|
|
|
|
|
this.insertIntoTextArea('', true, false);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
async onMessageRetractButtonClicked (message) {
|
|
|
|
|
if (message.get('sender') !== 'me') {
|
|
|
|
|
return log.error("onMessageRetractButtonClicked called for someone else's message!");
|
|
|
|
|
}
|
2020-12-04 23:12:09 +01:00
|
|
|
|
const retraction_warning = __(
|
|
|
|
|
'Be aware that other XMPP/Jabber clients (and servers) may ' +
|
|
|
|
|
'not yet support retractions and that this message may not ' +
|
|
|
|
|
'be removed everywhere.'
|
|
|
|
|
);
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
const messages = [__('Are you sure you want to retract this message?')];
|
|
|
|
|
if (api.settings.get('show_retraction_warning')) {
|
|
|
|
|
messages[1] = retraction_warning;
|
|
|
|
|
}
|
|
|
|
|
const result = await api.confirm(__('Confirm'), messages);
|
|
|
|
|
if (result) {
|
|
|
|
|
this.model.retractOwnMessage(message);
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
onMessageEditButtonClicked (message) {
|
|
|
|
|
const currently_correcting = this.model.messages.findWhere('correcting');
|
2020-12-08 12:54:14 +01:00
|
|
|
|
const unsent_text = this.querySelector('.chat-textarea')?.value;
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (unsent_text && (!currently_correcting || currently_correcting.get('message') !== unsent_text)) {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
if (!confirm(__('You have an unsent message which will be lost if you continue. Are you sure?'))) {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (currently_correcting !== message) {
|
|
|
|
|
currently_correcting?.save('correcting', false);
|
|
|
|
|
message.save('correcting', true);
|
|
|
|
|
this.insertIntoTextArea(u.prefixMentions(message), true, true);
|
|
|
|
|
} else {
|
|
|
|
|
message.save('correcting', false);
|
|
|
|
|
this.insertIntoTextArea('', true, false);
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
editLaterMessage () {
|
|
|
|
|
let message;
|
|
|
|
|
let idx = this.model.messages.findLastIndex('correcting');
|
|
|
|
|
if (idx >= 0) {
|
|
|
|
|
this.model.messages.at(idx).save('correcting', false);
|
2020-12-04 23:12:09 +01:00
|
|
|
|
while (idx < this.model.messages.length - 1) {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
idx += 1;
|
|
|
|
|
const candidate = this.model.messages.at(idx);
|
|
|
|
|
if (candidate.get('editable')) {
|
|
|
|
|
message = candidate;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (message) {
|
|
|
|
|
this.insertIntoTextArea(u.prefixMentions(message), true, true);
|
|
|
|
|
message.save('correcting', true);
|
|
|
|
|
} else {
|
|
|
|
|
this.insertIntoTextArea('', true, false);
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
editEarlierMessage () {
|
|
|
|
|
let message;
|
|
|
|
|
let idx = this.model.messages.findLastIndex('correcting');
|
|
|
|
|
if (idx >= 0) {
|
|
|
|
|
this.model.messages.at(idx).save('correcting', false);
|
|
|
|
|
while (idx > 0) {
|
|
|
|
|
idx -= 1;
|
|
|
|
|
const candidate = this.model.messages.at(idx);
|
|
|
|
|
if (candidate.get('editable')) {
|
|
|
|
|
message = candidate;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-12-04 23:12:09 +01:00
|
|
|
|
message =
|
|
|
|
|
message ||
|
|
|
|
|
this.getOwnMessages()
|
|
|
|
|
.reverse()
|
|
|
|
|
.find(m => m.get('editable'));
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (message) {
|
|
|
|
|
this.insertIntoTextArea(u.prefixMentions(message), true, true);
|
|
|
|
|
message.save('correcting', true);
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
|
inputChanged (ev) { // eslint-disable-line class-methods-use-this
|
2020-09-09 14:37:43 +02:00
|
|
|
|
const height = ev.target.scrollHeight + 'px';
|
|
|
|
|
if (ev.target.style.height != height) {
|
|
|
|
|
ev.target.style.height = 'auto';
|
|
|
|
|
ev.target.style.height = height;
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
async clearMessages (ev) {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
if (ev && ev.preventDefault) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
const result = confirm(__('Are you sure you want to clear the messages from this conversation?'));
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (result === true) {
|
|
|
|
|
await this.model.clearMessages();
|
|
|
|
|
}
|
|
|
|
|
return this;
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
onPresenceChanged (item) {
|
|
|
|
|
const show = item.get('show');
|
|
|
|
|
const fullname = this.model.getDisplayName();
|
|
|
|
|
|
|
|
|
|
let text;
|
2020-12-08 12:54:14 +01:00
|
|
|
|
if (u.isVisible(this)) {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
if (show === 'offline') {
|
|
|
|
|
text = __('%1$s has gone offline', fullname);
|
|
|
|
|
} else if (show === 'away') {
|
|
|
|
|
text = __('%1$s has gone away', fullname);
|
2020-12-04 23:12:09 +01:00
|
|
|
|
} else if (show === 'dnd') {
|
2020-09-09 14:37:43 +02:00
|
|
|
|
text = __('%1$s is busy', fullname);
|
|
|
|
|
} else if (show === 'online') {
|
|
|
|
|
text = __('%1$s is online', fullname);
|
|
|
|
|
}
|
2020-12-04 23:12:09 +01:00
|
|
|
|
text && this.model.createMessage({ 'message': text, 'type': 'info' });
|
2020-09-09 14:37:43 +02:00
|
|
|
|
}
|
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
|
|
|
|
|
|
|
|
|
showNewMessagesIndicator () {
|
2020-12-08 12:54:14 +01:00
|
|
|
|
u.showElement(this.querySelector('.new-msgs-indicator'));
|
|
|
|
|
}
|
2020-09-09 14:37:43 +02:00
|
|
|
|
|
|
|
|
|
viewUnreadMessages () {
|
2020-12-04 23:12:09 +01:00
|
|
|
|
this.model.save({ 'scrolled': false, 'scrollTop': null });
|
2020-09-09 14:37:43 +02:00
|
|
|
|
this.scrollDown();
|
|
|
|
|
}
|
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);
|