2019-07-11 10:48:52 +02:00
|
|
|
|
/**
|
|
|
|
|
* @module converse-chatview
|
2020-01-26 16:21:20 +01:00
|
|
|
|
* @copyright 2020, the Converse.js contributors
|
|
|
|
|
* @license Mozilla Public License (MPLv2)
|
2019-07-11 10:48:52 +02:00
|
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
|
import "converse-chatboxviews";
|
|
|
|
|
import "converse-message-view";
|
|
|
|
|
import "converse-modal";
|
2019-10-08 21:29:43 +02:00
|
|
|
|
import { debounce, get, isString } from "lodash";
|
2019-09-19 16:54:55 +02:00
|
|
|
|
import { Overview } from "skeletor.js/src/overview";
|
2018-10-23 03:41:38 +02:00
|
|
|
|
import converse from "@converse/headless/converse-core";
|
2019-11-06 11:01:34 +01:00
|
|
|
|
import log from "@converse/headless/log";
|
2018-10-23 03:41:38 +02:00
|
|
|
|
import tpl_chatbox from "templates/chatbox.html";
|
|
|
|
|
import tpl_chatbox_head from "templates/chatbox_head.html";
|
|
|
|
|
import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
|
|
|
|
|
import tpl_error_message from "templates/error_message.html";
|
|
|
|
|
import tpl_help_message from "templates/help_message.html";
|
|
|
|
|
import tpl_info from "templates/info.html";
|
|
|
|
|
import tpl_new_day from "templates/new_day.html";
|
|
|
|
|
import tpl_spinner from "templates/spinner.html";
|
|
|
|
|
import tpl_spoiler_button from "templates/spoiler_button.html";
|
|
|
|
|
import tpl_status_message from "templates/status_message.html";
|
|
|
|
|
import tpl_toolbar from "templates/toolbar.html";
|
|
|
|
|
import tpl_toolbar_fileupload from "templates/toolbar_fileupload.html";
|
2020-01-23 10:18:41 +01:00
|
|
|
|
import tpl_user_details_modal from "templates/user_details_modal.js";
|
2019-05-13 18:50:25 +02:00
|
|
|
|
import xss from "xss/dist/xss";
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
2019-10-08 21:29:43 +02:00
|
|
|
|
|
|
|
|
|
const { Backbone, Strophe, sizzle, dayjs } = converse.env;
|
2019-07-11 12:30:51 +02:00
|
|
|
|
const u = converse.env.utils;
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
converse.plugins.add('converse-chatview', {
|
|
|
|
|
/* Plugin dependencies are other plugins which might be
|
|
|
|
|
* overridden or relied upon, and therefore need to be loaded before
|
|
|
|
|
* this plugin.
|
|
|
|
|
*
|
|
|
|
|
* If the setting "strict_plugin_dependencies" is set to true,
|
|
|
|
|
* an error will be raised if the plugin is not found. By default it's
|
|
|
|
|
* false, which means these plugins are only loaded opportunistically.
|
|
|
|
|
*
|
|
|
|
|
* NB: These plugins need to have already been loaded via require.js.
|
|
|
|
|
*/
|
2019-07-11 12:30:51 +02:00
|
|
|
|
dependencies: [
|
|
|
|
|
"converse-chatboxviews",
|
2019-11-01 16:04:55 +01:00
|
|
|
|
"converse-chat",
|
2019-07-11 12:30:51 +02:00
|
|
|
|
"converse-disco",
|
|
|
|
|
"converse-message-view",
|
|
|
|
|
"converse-modal"
|
|
|
|
|
],
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
|
/* The initialize function gets called as soon as the plugin is
|
|
|
|
|
* loaded by converse.js's plugin machinery.
|
2018-01-03 17:08:30 +01:00
|
|
|
|
*/
|
2019-07-11 12:30:51 +02:00
|
|
|
|
const { _converse } = this;
|
|
|
|
|
const { __ } = _converse;
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
|
_converse.api.settings.update({
|
2019-06-18 14:04:26 +02:00
|
|
|
|
'auto_focus': true,
|
2019-06-16 14:16:35 +02:00
|
|
|
|
'message_limit': 0,
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'show_send_button': false,
|
2019-09-24 15:33:41 +02:00
|
|
|
|
'show_retraction_warning': true,
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'show_toolbar': true,
|
|
|
|
|
'time_format': 'HH:mm',
|
|
|
|
|
'visible_toolbar_buttons': {
|
|
|
|
|
'call': false,
|
|
|
|
|
'clear': true,
|
|
|
|
|
'spoiler': true
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
2016-03-13 17:16:53 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
_converse.ChatBoxHeading = _converse.ViewWithAvatar.extend({
|
|
|
|
|
initialize () {
|
2019-09-06 14:34:59 +02:00
|
|
|
|
this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
|
2019-04-09 17:10:50 +02:00
|
|
|
|
|
2019-10-08 21:29:43 +02:00
|
|
|
|
this.debouncedRender = debounce(this.render, 50);
|
2019-12-18 12:42:40 +01:00
|
|
|
|
this.listenTo(this.model, 'vcard:change', this.debouncedRender);
|
|
|
|
|
|
2019-11-01 16:04:55 +01:00
|
|
|
|
if (this.model.contact) {
|
|
|
|
|
this.listenTo(this.model.contact, 'destroy', this.debouncedRender);
|
|
|
|
|
}
|
2019-07-01 10:44:59 +02:00
|
|
|
|
if (this.model.rosterContactAdded) {
|
|
|
|
|
this.model.rosterContactAdded.then(() => {
|
2019-09-06 14:34:59 +02:00
|
|
|
|
this.listenTo(this.model.contact, 'change:nickname', this.debouncedRender);
|
2019-07-01 10:44:59 +02:00
|
|
|
|
this.debouncedRender();
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2017-06-16 11:31:57 +02:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
render () {
|
2019-11-01 16:04:55 +01:00
|
|
|
|
const vcard = get(this.model, 'vcard');
|
|
|
|
|
const vcard_json = vcard ? vcard.toJSON() : {};
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.el.innerHTML = tpl_chatbox_head(
|
2019-04-29 09:07:15 +02:00
|
|
|
|
Object.assign(
|
2019-04-17 11:52:41 +02:00
|
|
|
|
vcard_json,
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.model.toJSON(),
|
|
|
|
|
{ '_converse': _converse,
|
2019-04-09 17:10:50 +02:00
|
|
|
|
'info_close': __('Close this chat box'),
|
|
|
|
|
'display_name': this.model.getDisplayName()
|
2017-07-16 12:14:56 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
this.renderAvatar();
|
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onStatusMessageChanged (item) {
|
2019-04-09 17:10:50 +02:00
|
|
|
|
this.debouncedRender();
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* 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 => { ... });
|
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('contactStatusMessageChanged', {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'contact': item.attributes,
|
|
|
|
|
'message': item.get('status')
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_converse.UserDetailsModal = _converse.BootstrapModal.extend({
|
2020-01-23 10:18:41 +01:00
|
|
|
|
id: "user-details-modal",
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
|
events: {
|
|
|
|
|
'click button.remove-contact': 'removeContact',
|
|
|
|
|
'click button.refresh-contact': 'refreshContact',
|
|
|
|
|
'click .fingerprint-trust .btn input': 'toggleDeviceTrust'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
|
_converse.BootstrapModal.prototype.initialize.apply(this, arguments);
|
2019-07-01 10:44:59 +02:00
|
|
|
|
this.model.rosterContactAdded.then(() => this.registerContactEventHandlers());
|
2019-09-06 14:34:59 +02:00
|
|
|
|
this.listenTo(this.model, 'change', this.render);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.registerContactEventHandlers();
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* Triggered once the _converse.UserDetailsModal has been initialized
|
|
|
|
|
* @event _converse#userDetailsModalInitialized
|
|
|
|
|
* @type { _converse.ChatBox }
|
|
|
|
|
* @example _converse.api.listen.on('userDetailsModalInitialized', chatbox => { ... });
|
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('userDetailsModalInitialized', this.model);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toHTML () {
|
2019-10-08 21:29:43 +02:00
|
|
|
|
const vcard = get(this.model, 'vcard'),
|
2019-04-17 11:52:41 +02:00
|
|
|
|
vcard_json = vcard ? vcard.toJSON() : {};
|
2019-04-29 09:07:15 +02:00
|
|
|
|
return tpl_user_details_modal(Object.assign(
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.model.toJSON(),
|
2019-04-17 11:52:41 +02:00
|
|
|
|
vcard_json, {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'view': this,
|
|
|
|
|
'_converse': _converse,
|
|
|
|
|
'allow_contact_removal': _converse.allow_contact_removal,
|
|
|
|
|
'display_name': this.model.getDisplayName(),
|
2019-07-29 10:19:05 +02:00
|
|
|
|
'is_roster_contact': this.model.contact !== undefined,
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'utils': u
|
|
|
|
|
}));
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
registerContactEventHandlers () {
|
2019-07-29 10:19:05 +02:00
|
|
|
|
if (this.model.contact !== undefined) {
|
2019-09-06 14:34:59 +02:00
|
|
|
|
this.listenTo(this.model.contact, 'change', this.render);
|
|
|
|
|
this.listenTo(this.model.contact.vcard, 'change', this.render);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.model.contact.on('destroy', () => {
|
|
|
|
|
delete this.model.contact;
|
|
|
|
|
this.render();
|
2017-07-16 11:36:31 +02:00
|
|
|
|
});
|
2017-06-16 11:31:57 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2018-10-24 18:28:28 +02:00
|
|
|
|
async refreshContact (ev) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
|
const refresh_icon = this.el.querySelector('.fa-refresh');
|
|
|
|
|
u.addClass('fa-spin', refresh_icon);
|
2018-10-25 22:25:54 +02:00
|
|
|
|
try {
|
|
|
|
|
await _converse.api.vcard.update(this.model.contact.vcard, true);
|
|
|
|
|
} catch (e) {
|
2019-11-06 11:01:34 +01:00
|
|
|
|
log.fatal(e);
|
2019-07-04 14:12:12 +02:00
|
|
|
|
this.alert(__('Sorry, something went wrong while trying to refresh'), 'danger');
|
2018-10-25 22:25:54 +02:00
|
|
|
|
}
|
2018-10-24 18:28:28 +02:00
|
|
|
|
u.removeClass('fa-spin', refresh_icon);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
removeContact (ev) {
|
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
|
if (!_converse.allow_contact_removal) { return; }
|
|
|
|
|
const result = confirm(__("Are you sure you want to remove this contact?"));
|
|
|
|
|
if (result === true) {
|
|
|
|
|
this.modal.hide();
|
|
|
|
|
this.model.contact.removeFromRoster(
|
2019-10-08 21:29:43 +02:00
|
|
|
|
() => this.model.contact.destroy(),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
(err) => {
|
2019-11-06 11:01:34 +01:00
|
|
|
|
log.error(err);
|
2019-10-31 14:42:28 +01:00
|
|
|
|
_converse.api.alert('error', __('Error'), [
|
|
|
|
|
__('Sorry, there was an error while trying to remove %1$s as a contact.',
|
|
|
|
|
this.model.contact.getDisplayName())
|
|
|
|
|
]);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
2017-11-17 12:50:16 +01:00
|
|
|
|
);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* The View of an open/ongoing chat conversation.
|
|
|
|
|
* @class
|
|
|
|
|
* @namespace _converse.ChatBoxView
|
|
|
|
|
* @memberOf _converse
|
|
|
|
|
*/
|
2019-05-23 14:26:20 +02:00
|
|
|
|
_converse.ChatBoxView = Overview.extend({
|
2018-10-23 03:41:38 +02:00
|
|
|
|
length: 200,
|
|
|
|
|
className: 'chatbox hidden',
|
|
|
|
|
is_chatroom: false, // Leaky abstraction from MUC
|
|
|
|
|
|
|
|
|
|
events: {
|
|
|
|
|
'change input.fileupload': 'onFileSelection',
|
|
|
|
|
'click .chat-msg__action-edit': 'onMessageEditButtonClicked',
|
2019-09-24 15:33:41 +02:00
|
|
|
|
'click .chat-msg__action-retract': 'onMessageRetractButtonClicked',
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'click .chatbox-navback': 'showControlBox',
|
|
|
|
|
'click .close-chatbox-button': 'close',
|
|
|
|
|
'click .new-msgs-indicator': 'viewUnreadMessages',
|
|
|
|
|
'click .send-button': 'onFormSubmitted',
|
|
|
|
|
'click .show-user-details-modal': 'showUserDetailsModal',
|
|
|
|
|
'click .spoiler-toggle': 'toggleSpoilerMessage',
|
|
|
|
|
'click .toggle-call': 'toggleCall',
|
|
|
|
|
'click .toggle-clear': 'clearMessages',
|
|
|
|
|
'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
|
|
|
|
|
'click .upload-file': 'toggleFileUpload',
|
|
|
|
|
'input .chat-textarea': 'inputChanged',
|
2019-05-26 10:58:52 +02:00
|
|
|
|
'keydown .chat-textarea': 'onKeyDown',
|
2019-06-16 14:16:35 +02:00
|
|
|
|
'keyup .chat-textarea': 'onKeyUp',
|
|
|
|
|
'paste .chat-textarea': 'onPaste',
|
2018-11-02 04:43:43 +01:00
|
|
|
|
'dragover .chat-textarea': 'onDragOver',
|
|
|
|
|
'drop .chat-textarea': 'onDrop',
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2019-07-11 12:30:51 +02:00
|
|
|
|
async initialize () {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.initDebounced();
|
2019-09-06 14:34:59 +02:00
|
|
|
|
this.listenTo(this.model.messages, 'add', this.onMessageAdded);
|
|
|
|
|
this.listenTo(this.model.messages, 'rendered', this.scrollDown);
|
2019-05-21 09:56:27 +02:00
|
|
|
|
this.model.messages.on('reset', () => {
|
|
|
|
|
this.content.innerHTML = '';
|
|
|
|
|
this.removeAll();
|
|
|
|
|
});
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
2019-09-06 14:34:59 +02:00
|
|
|
|
this.listenTo(this.model, 'show', this.show);
|
|
|
|
|
this.listenTo(this.model, 'destroy', this.remove);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
2019-09-06 14:34:59 +02:00
|
|
|
|
this.listenTo(this.model.presence, 'change:show', this.onPresenceChanged);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.render();
|
2019-07-11 12:30:51 +02:00
|
|
|
|
await this.updateAfterMessagesFetched();
|
|
|
|
|
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
2019-08-05 11:07:38 +02:00
|
|
|
|
* Triggered once the {@link _converse.ChatBoxView} has been initialized
|
2019-12-18 12:42:40 +01:00
|
|
|
|
* @event _converse#chatBoxViewInitialized
|
|
|
|
|
* @type { _converse.HeadlinesBoxView }
|
|
|
|
|
* @example _converse.api.listen.on('chatBoxViewInitialized', view => { ... });
|
2019-03-29 15:47:23 +01:00
|
|
|
|
*/
|
2019-12-18 12:42:40 +01:00
|
|
|
|
_converse.api.trigger('chatBoxViewInitialized', this);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
initDebounced () {
|
2019-12-02 13:59:58 +01:00
|
|
|
|
this.scrollDown = debounce(this._scrollDown, 50);
|
2019-10-08 21:29:43 +02:00
|
|
|
|
this.markScrolled = debounce(this._markScrolled, 100);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
this.el.innerHTML = tpl_chatbox(
|
2019-05-14 15:51:40 +02:00
|
|
|
|
Object.assign(
|
|
|
|
|
this.model.toJSON(),
|
|
|
|
|
{'unread_msgs': __('You have unread messages')}
|
|
|
|
|
)
|
|
|
|
|
);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.content = this.el.querySelector('.chat-content');
|
|
|
|
|
this.renderMessageForm();
|
|
|
|
|
this.insertHeading();
|
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
2019-06-16 14:16:35 +02:00
|
|
|
|
renderToolbar () {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (!_converse.show_toolbar) {
|
2017-11-17 13:19:21 +01:00
|
|
|
|
return this;
|
2017-11-17 12:50:16 +01:00
|
|
|
|
}
|
2019-10-08 21:29:43 +02:00
|
|
|
|
const options = Object.assign(
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.model.toJSON(),
|
2019-06-16 14:16:35 +02:00
|
|
|
|
this.getToolbarOptions()
|
2018-10-23 03:41:38 +02:00
|
|
|
|
);
|
2019-06-16 14:16:35 +02:00
|
|
|
|
this.el.querySelector('.chat-toolbar').innerHTML = tpl_toolbar(options);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.addSpoilerButton(options);
|
|
|
|
|
this.addFileUploadButton();
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* Triggered once the _converse.ChatBoxView's toolbar has been rendered
|
|
|
|
|
* @event _converse#renderToolbar
|
|
|
|
|
* @type { _converse.ChatBoxView }
|
|
|
|
|
* @example _converse.api.listen.on('renderToolbar', view => { ... });
|
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('renderToolbar', this);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
renderMessageForm () {
|
2019-10-29 11:30:31 +01:00
|
|
|
|
const form_container = this.el.querySelector('.message-form-container');
|
2018-10-23 03:41:38 +02:00
|
|
|
|
form_container.innerHTML = tpl_chatbox_message_form(
|
2019-04-29 09:07:15 +02:00
|
|
|
|
Object.assign(this.model.toJSON(), {
|
2020-01-10 13:26:50 +01:00
|
|
|
|
'__': __,
|
2019-06-16 14:16:35 +02:00
|
|
|
|
'message_limit': _converse.message_limit,
|
2019-10-08 21:29:43 +02:00
|
|
|
|
'hint_value': get(this.el.querySelector('.spoiler-hint'), 'value'),
|
2019-05-14 15:51:40 +02:00
|
|
|
|
'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'label_spoiler_hint': __('Optional hint'),
|
2019-10-08 21:29:43 +02:00
|
|
|
|
'message_value': get(this.el.querySelector('.chat-textarea'), 'value'),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'show_send_button': _converse.show_send_button,
|
|
|
|
|
'show_toolbar': _converse.show_toolbar,
|
|
|
|
|
'unread_msgs': __('You have unread messages')
|
2018-05-10 13:43:03 +02:00
|
|
|
|
}));
|
2019-09-12 11:04:11 +02:00
|
|
|
|
const textarea = this.el.querySelector('.chat-textarea');
|
|
|
|
|
textarea.addEventListener('focus', ev => this.emitFocused(ev));
|
|
|
|
|
textarea.addEventListener('blur', ev => this.emitBlurred(ev));
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.renderToolbar();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
showControlBox () {
|
|
|
|
|
// Used in mobile view, to navigate back to the controlbox
|
|
|
|
|
const view = _converse.chatboxviews.get('controlbox');
|
|
|
|
|
view.show();
|
|
|
|
|
this.hide();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
showUserDetailsModal (ev) {
|
|
|
|
|
ev.preventDefault();
|
2019-07-29 10:19:05 +02:00
|
|
|
|
if (this.user_details_modal === undefined) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.user_details_modal = new _converse.UserDetailsModal({model: this.model});
|
|
|
|
|
}
|
|
|
|
|
this.user_details_modal.show(ev);
|
|
|
|
|
},
|
2018-05-10 13:43:03 +02:00
|
|
|
|
|
2019-10-08 21:29:43 +02:00
|
|
|
|
toggleFileUpload () {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.el.querySelector('input.fileupload').click();
|
|
|
|
|
},
|
2018-05-10 13:43:03 +02:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
onFileSelection (evt) {
|
|
|
|
|
this.model.sendFiles(evt.target.files);
|
|
|
|
|
},
|
2017-11-17 12:50:16 +01:00
|
|
|
|
|
2018-11-02 04:43:43 +01:00
|
|
|
|
onDragOver (evt) {
|
|
|
|
|
evt.preventDefault();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onDrop (evt) {
|
2019-03-07 08:38:06 +01:00
|
|
|
|
if (evt.dataTransfer.files.length == 0) {
|
2018-11-03 12:03:46 +01:00
|
|
|
|
// There are no files to be dropped, so this isn’t a file
|
|
|
|
|
// transfer operation.
|
2018-11-02 04:43:43 +01:00
|
|
|
|
return;
|
2019-03-07 08:38:06 +01:00
|
|
|
|
}
|
2018-11-02 04:43:43 +01:00
|
|
|
|
evt.preventDefault();
|
|
|
|
|
this.model.sendFiles(evt.dataTransfer.files);
|
|
|
|
|
},
|
|
|
|
|
|
2019-06-16 14:16:35 +02:00
|
|
|
|
async addFileUploadButton () {
|
2019-05-07 09:53:36 +02:00
|
|
|
|
if (await _converse.api.disco.supports(Strophe.NS.HTTPUPLOAD, _converse.domain)) {
|
2020-01-09 15:01:37 +01:00
|
|
|
|
if (this.el.querySelector('.chat-toolbar .upload-file')) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2018-10-24 18:28:28 +02:00
|
|
|
|
this.el.querySelector('.chat-toolbar').insertAdjacentHTML(
|
|
|
|
|
'beforeend',
|
|
|
|
|
tpl_toolbar_fileupload({'tooltip_upload_file': __('Choose a file to send')}));
|
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2018-02-07 11:00:35 +01:00
|
|
|
|
|
2019-06-16 14:16:35 +02:00
|
|
|
|
/**
|
|
|
|
|
* Asynchronously adds a button for writing spoiler
|
|
|
|
|
* messages, based on whether the contact's clients support it.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#addSpoilerButton
|
|
|
|
|
*/
|
2018-10-24 18:28:28 +02:00
|
|
|
|
async addSpoilerButton (options) {
|
2018-11-09 11:56:07 +01:00
|
|
|
|
if (!options.show_spoiler_button || this.model.get('type') === _converse.CHATROOMS_TYPE) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const contact_jid = this.model.get('jid');
|
2019-01-28 11:24:46 +01:00
|
|
|
|
if (this.model.presence.resources.length === 0) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
2019-01-28 11:24:46 +01:00
|
|
|
|
const results = await Promise.all(
|
|
|
|
|
this.model.presence.resources.map(
|
2019-05-07 09:53:36 +02:00
|
|
|
|
r => _converse.api.disco.supports(Strophe.NS.SPOILER, `${contact_jid}/${r.get('name')}`)
|
2019-01-28 11:24:46 +01:00
|
|
|
|
)
|
|
|
|
|
);
|
2019-05-07 09:53:36 +02:00
|
|
|
|
const all_resources_support_spolers = results.reduce((acc, val) => (acc && val), true);
|
|
|
|
|
if (all_resources_support_spolers) {
|
2018-10-24 18:28:28 +02:00
|
|
|
|
const html = tpl_spoiler_button(this.model.toJSON());
|
2019-08-16 10:18:35 +02:00
|
|
|
|
this.el.querySelector('.chat-toolbar').insertAdjacentHTML('afterBegin', html);
|
2018-10-24 18:28:28 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2018-02-08 17:06:53 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
insertHeading () {
|
|
|
|
|
this.heading = new _converse.ChatBoxHeading({'model': this.model});
|
|
|
|
|
this.heading.render();
|
|
|
|
|
this.heading.chatview = this;
|
|
|
|
|
const flyout = this.el.querySelector('.flyout');
|
|
|
|
|
flyout.insertBefore(this.heading.el, flyout.querySelector('.chat-body'));
|
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
2019-06-16 14:16:35 +02:00
|
|
|
|
getToolbarOptions () {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
let label_toggle_spoiler;
|
|
|
|
|
if (this.model.get('composing_spoiler')) {
|
2019-08-23 17:09:39 +02:00
|
|
|
|
label_toggle_spoiler = __("Click to write as a normal (non-spoiler) message");
|
2018-10-23 03:41:38 +02:00
|
|
|
|
} else {
|
2019-08-23 17:09:39 +02:00
|
|
|
|
label_toggle_spoiler = __("Click to write your message as a spoiler");
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
2019-06-16 14:16:35 +02:00
|
|
|
|
return {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'label_clear': __('Clear all messages'),
|
2019-06-16 14:16:35 +02:00
|
|
|
|
'label_message_limit': __('Message characters remaining'),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'label_toggle_spoiler': label_toggle_spoiler,
|
2019-06-16 14:16:35 +02:00
|
|
|
|
'message_limit': _converse.message_limit,
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'show_call_button': _converse.visible_toolbar_buttons.call,
|
|
|
|
|
'show_spoiler_button': _converse.visible_toolbar_buttons.spoiler,
|
2019-08-23 17:09:39 +02:00
|
|
|
|
'tooltip_start_call': __('Start a call')
|
2019-06-16 14:16:35 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2019-05-16 09:12:20 +02:00
|
|
|
|
async updateAfterMessagesFetched () {
|
|
|
|
|
await this.model.messages.fetched;
|
|
|
|
|
await Promise.all(this.model.messages.map(m => this.onMessageAdded(m)));
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.insertIntoDOM();
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.scrollDown();
|
2019-12-02 13:59:58 +01:00
|
|
|
|
this.content.addEventListener('scroll', () => this.markScrolled());
|
2019-10-24 14:29:15 +02:00
|
|
|
|
/**
|
|
|
|
|
* Triggered whenever a `_converse.ChatBox` instance has fetched its messages from
|
|
|
|
|
* `sessionStorage` but **NOT** from the server.
|
|
|
|
|
* @event _converse#afterMessagesFetched
|
|
|
|
|
* @type {_converse.ChatBoxView | _converse.ChatRoomView}
|
|
|
|
|
* @example _converse.api.listen.on('afterMessagesFetched', view => { ... });
|
|
|
|
|
*/
|
|
|
|
|
_converse.api.trigger('afterMessagesFetched', this);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2016-03-13 17:16:53 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
insertIntoDOM () {
|
|
|
|
|
_converse.chatboxviews.insertRowColumn(this.el);
|
2019-07-12 12:41:21 +02:00
|
|
|
|
/**
|
|
|
|
|
* Triggered once the _converse.ChatBoxView has been inserted into the DOM
|
|
|
|
|
* @event _converse#chatBoxInsertedIntoDOM
|
|
|
|
|
* @type { _converse.ChatBoxView | _converse.HeadlinesBoxView }
|
|
|
|
|
* @example _converse.api.listen.on('chatBoxInsertedIntoDOM', view => { ... });
|
|
|
|
|
*/
|
|
|
|
|
_converse.api.trigger('chatBoxInsertedIntoDOM', this);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
showChatEvent (message) {
|
2019-05-05 19:05:45 +02:00
|
|
|
|
const isodate = (new Date()).toISOString();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.content.insertAdjacentHTML(
|
|
|
|
|
'beforeend',
|
|
|
|
|
tpl_info({
|
|
|
|
|
'extra_classes': 'chat-event',
|
|
|
|
|
'message': message,
|
|
|
|
|
'isodate': isodate,
|
|
|
|
|
}));
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.insertDayIndicator(this.content.lastElementChild);
|
|
|
|
|
this.scrollDown();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return isodate;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
showErrorMessage (message) {
|
|
|
|
|
this.content.insertAdjacentHTML(
|
2019-06-19 11:04:09 +02:00
|
|
|
|
'beforeend',
|
2019-05-05 19:05:45 +02:00
|
|
|
|
tpl_error_message({'message': message, 'isodate': (new Date()).toISOString() })
|
2018-10-23 03:41:38 +02:00
|
|
|
|
);
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.scrollDown();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
addSpinner (append=false) {
|
2019-08-05 01:39:57 +02:00
|
|
|
|
if (this.el.querySelector('.spinner') === null) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (append) {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.content.insertAdjacentHTML('beforeend', tpl_spinner());
|
|
|
|
|
this.scrollDown();
|
2018-02-07 11:00:35 +01:00
|
|
|
|
} else {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.content.insertAdjacentHTML('afterbegin', tpl_spinner());
|
2017-07-16 14:12:17 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
clearSpinner () {
|
2019-05-14 11:38:41 +02:00
|
|
|
|
this.content.querySelectorAll('.spinner').forEach(u.removeElement);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2019-03-29 23:47:56 +01:00
|
|
|
|
/**
|
|
|
|
|
* Inserts an indicator into the chat area, showing the
|
|
|
|
|
* day as given by the passed in date.
|
|
|
|
|
* The indicator is only inserted if necessary.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#insertDayIndicator
|
|
|
|
|
* @param { HTMLElement } next_msg_el - The message element before
|
|
|
|
|
* which the day indicator element must be inserted.
|
|
|
|
|
* This element must have a "data-isodate" attribute
|
|
|
|
|
* which specifies its creation date.
|
|
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
|
insertDayIndicator (next_msg_el) {
|
2019-08-05 01:39:57 +02:00
|
|
|
|
const prev_msg_el = u.getPreviousElement(next_msg_el, ".message:not(.chat-state-notification)");
|
|
|
|
|
const prev_msg_date = (prev_msg_el === null) ? null : prev_msg_el.getAttribute('data-isodate');
|
|
|
|
|
const next_msg_date = next_msg_el.getAttribute('data-isodate');
|
|
|
|
|
if (prev_msg_date === null && next_msg_date === null) {
|
2018-10-24 22:42:46 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
2019-08-05 01:39:57 +02:00
|
|
|
|
if ((prev_msg_date === null) || dayjs(next_msg_date).isAfter(prev_msg_date, 'day')) {
|
2019-05-06 11:16:56 +02:00
|
|
|
|
const day_date = dayjs(next_msg_date).startOf('day');
|
2019-06-19 11:04:09 +02:00
|
|
|
|
next_msg_el.insertAdjacentHTML('beforeBegin',
|
2018-10-23 03:41:38 +02:00
|
|
|
|
tpl_new_day({
|
2019-05-05 19:05:45 +02:00
|
|
|
|
'isodate': day_date.toISOString(),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'datestring': day_date.format("dddd MMM Do YYYY")
|
|
|
|
|
})
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
},
|
2017-07-16 14:12:17 +02:00
|
|
|
|
|
2019-03-29 23:47:56 +01:00
|
|
|
|
/**
|
|
|
|
|
* Return the ISO8601 format date of the latest message.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#getLastMessageDate
|
2019-05-05 19:05:45 +02:00
|
|
|
|
* @param { Date } cutoff - Moment Date cutoff date. The last
|
2019-03-29 23:47:56 +01:00
|
|
|
|
* message received cutoff this date will be returned.
|
2019-05-05 19:05:45 +02:00
|
|
|
|
* @returns { Date }
|
2019-03-29 23:47:56 +01:00
|
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
|
getLastMessageDate (cutoff) {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
const first_msg = u.getFirstChildElement(this.content, '.message:not(.chat-state-notification)');
|
|
|
|
|
const oldest_date = first_msg ? first_msg.getAttribute('data-isodate') : null;
|
2019-08-05 01:39:57 +02:00
|
|
|
|
if (oldest_date !== null && dayjs(oldest_date).isAfter(cutoff)) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return null;
|
|
|
|
|
}
|
2019-06-19 11:04:09 +02:00
|
|
|
|
const last_msg = u.getLastChildElement(this.content, '.message:not(.chat-state-notification)');
|
|
|
|
|
const most_recent_date = last_msg ? last_msg.getAttribute('data-isodate') : null;
|
2019-08-05 01:39:57 +02:00
|
|
|
|
if (most_recent_date === null) {
|
2019-05-05 19:05:45 +02:00
|
|
|
|
return null;
|
|
|
|
|
}
|
2019-05-06 11:16:56 +02:00
|
|
|
|
if (dayjs(most_recent_date).isBefore(cutoff)) {
|
|
|
|
|
return dayjs(most_recent_date).toDate();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
/* XXX: We avoid .chat-state-notification messages, since they are
|
|
|
|
|
* temporary and get removed once a new element is
|
|
|
|
|
* inserted into the chat area, so we don't query for
|
|
|
|
|
* them here, otherwise we get a null reference later
|
|
|
|
|
* upon element insertion.
|
|
|
|
|
*/
|
2019-10-08 21:29:43 +02:00
|
|
|
|
const sel = '.message:not(.chat-state-notification)';
|
|
|
|
|
const msg_dates = sizzle(sel, this.content).map(e => e.getAttribute('data-isodate'));
|
2019-05-05 19:05:45 +02:00
|
|
|
|
const cutoff_iso = cutoff.toISOString();
|
|
|
|
|
msg_dates.push(cutoff_iso);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
msg_dates.sort();
|
2019-05-05 19:05:45 +02:00
|
|
|
|
const idx = msg_dates.lastIndexOf(cutoff_iso);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (idx === 0) {
|
|
|
|
|
return null;
|
|
|
|
|
} else {
|
2019-05-06 11:16:56 +02:00
|
|
|
|
return dayjs(msg_dates[idx-1]).toDate();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
2016-03-13 17:16:53 +01:00
|
|
|
|
|
2019-06-19 11:04:09 +02:00
|
|
|
|
setScrollPosition (message_el) {
|
|
|
|
|
/* Given a newly inserted message, determine whether we
|
|
|
|
|
* should keep the scrollbar in place (so as to not scroll
|
|
|
|
|
* up when using infinite scroll).
|
|
|
|
|
*/
|
|
|
|
|
if (this.model.get('scrolled')) {
|
|
|
|
|
const next_msg_el = u.getNextElement(message_el, ".chat-msg");
|
|
|
|
|
if (next_msg_el) {
|
|
|
|
|
// The currently received message is not new, there
|
|
|
|
|
// are newer messages after it. So let's see if we
|
|
|
|
|
// should maintain our current scroll position.
|
|
|
|
|
if (this.content.scrollTop === 0 || this.model.get('top_visible_message')) {
|
|
|
|
|
const top_visible_message = this.model.get('top_visible_message') || next_msg_el;
|
|
|
|
|
|
|
|
|
|
this.model.set('top_visible_message', top_visible_message);
|
|
|
|
|
this.content.scrollTop = top_visible_message.offsetTop - 30;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.scrollDown();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2019-10-24 14:29:15 +02:00
|
|
|
|
showHelpMessages (msgs, type='info', spinner) {
|
2019-05-14 11:38:41 +02:00
|
|
|
|
msgs.forEach(msg => {
|
2018-04-06 13:56:14 +02:00
|
|
|
|
this.content.insertAdjacentHTML(
|
|
|
|
|
'beforeend',
|
2018-10-23 03:41:38 +02:00
|
|
|
|
tpl_help_message({
|
2019-05-05 19:05:45 +02:00
|
|
|
|
'isodate': (new Date()).toISOString(),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'type': type,
|
|
|
|
|
'message': xss.filterXSS(msg, {'whiteList': {'strong': []}})
|
|
|
|
|
})
|
2018-04-06 13:56:14 +02:00
|
|
|
|
);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
});
|
|
|
|
|
if (spinner === true) {
|
|
|
|
|
this.addSpinner();
|
|
|
|
|
} else if (spinner === false) {
|
|
|
|
|
this.clearSpinner();
|
|
|
|
|
}
|
2019-06-19 11:04:09 +02:00
|
|
|
|
return this.scrollDown();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2016-03-13 17:16:53 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
shouldShowOnTextMessage () {
|
|
|
|
|
return !u.isVisible(this.el);
|
|
|
|
|
},
|
2018-04-18 10:03:21 +02:00
|
|
|
|
|
2019-03-29 23:47:56 +01:00
|
|
|
|
/**
|
|
|
|
|
* Given a view representing a message, insert it into the
|
|
|
|
|
* content area of the chat box.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#insertMessage
|
2020-01-23 10:18:41 +01:00
|
|
|
|
* @param { View } message - The message View
|
2019-03-29 23:47:56 +01:00
|
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
|
insertMessage (view) {
|
|
|
|
|
if (view.model.get('type') === 'error') {
|
|
|
|
|
const previous_msg_el = this.content.querySelector(`[data-msgid="${view.model.get('msgid')}"]`);
|
|
|
|
|
if (previous_msg_el) {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
previous_msg_el.insertAdjacentElement('afterend', view.el);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return this.trigger('messageInserted', view.el);
|
2018-04-30 12:15:26 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
2019-09-24 15:33:41 +02:00
|
|
|
|
const current_msg_date = dayjs(view.model.get('time')).toDate() || new Date();
|
|
|
|
|
const previous_msg_date = this.getLastMessageDate(current_msg_date);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
2019-08-05 01:39:57 +02:00
|
|
|
|
if (previous_msg_date === null) {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.content.insertAdjacentElement('afterbegin', view.el);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
} else {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
const previous_msg_el = sizzle(`[data-isodate="${previous_msg_date.toISOString()}"]:last`, this.content).pop();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (view.model.get('type') === 'error' &&
|
|
|
|
|
u.hasClass('chat-error', previous_msg_el) &&
|
|
|
|
|
previous_msg_el.textContent === view.model.get('message')) {
|
|
|
|
|
// We don't show a duplicate error message
|
2018-02-06 21:21:21 +01:00
|
|
|
|
return;
|
2016-03-13 17:16:53 +01:00
|
|
|
|
}
|
2019-06-19 11:04:09 +02:00
|
|
|
|
previous_msg_el.insertAdjacentElement('afterend', view.el);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.markFollowups(view.el);
|
|
|
|
|
}
|
|
|
|
|
return this.trigger('messageInserted', view.el);
|
|
|
|
|
},
|
2016-03-13 17:16:53 +01:00
|
|
|
|
|
2019-03-29 23:47:56 +01: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
|
2019-09-24 15:33:41 +02:00
|
|
|
|
* author with no other conversation elements in between and
|
|
|
|
|
* which were posted within 10 minutes of one another.
|
2019-03-29 23:47:56 +01:00
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#markFollowups
|
|
|
|
|
* @param { HTMLElement } el - The message element
|
|
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
|
markFollowups (el) {
|
2019-11-15 17:49:59 +01:00
|
|
|
|
const from = el.getAttribute('data-from');
|
|
|
|
|
const previous_el = el.previousElementSibling;
|
|
|
|
|
const date = dayjs(el.getAttribute('data-isodate'));
|
|
|
|
|
const next_el = el.nextElementSibling;
|
2019-06-19 11:04:09 +02:00
|
|
|
|
|
|
|
|
|
if (!u.hasClass('chat-msg--action', el) && !u.hasClass('chat-msg--action', previous_el) &&
|
2019-11-15 17:49:59 +01:00
|
|
|
|
!u.hasClass('chat-info', el) && !u.hasClass('chat-info', previous_el) &&
|
2019-06-19 11:04:09 +02:00
|
|
|
|
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')) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
u.addClass('chat-msg--followup', el);
|
|
|
|
|
}
|
2019-06-19 11:04:09 +02:00
|
|
|
|
if (!next_el) { return; }
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
2019-11-15 17:49:59 +01:00
|
|
|
|
if (!u.hasClass('chat-msg--action', el) && u.hasClass('chat-info', el) &&
|
2019-06-19 11:04:09 +02:00
|
|
|
|
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')) {
|
|
|
|
|
u.addClass('chat-msg--followup', next_el);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
} else {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
u.removeClass('chat-msg--followup', next_el);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
2018-02-06 17:53:56 +01:00
|
|
|
|
|
2019-03-29 23:47:56 +01:00
|
|
|
|
/**
|
|
|
|
|
* Inserts a chat message into the content area of the chat box.
|
|
|
|
|
* Will also insert a new day indicator if the message is on a different day.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#showMessage
|
|
|
|
|
* @param { _converse.Message } message - The message object
|
|
|
|
|
*/
|
2018-10-23 03:41:38 +02:00
|
|
|
|
async showMessage (message) {
|
2019-10-24 17:55:20 +02:00
|
|
|
|
await message.initialized;
|
2019-05-17 14:43:23 +02:00
|
|
|
|
const view = this.add(message.get('id'), new _converse.MessageView({'model': message}));
|
2018-10-23 03:41:38 +02:00
|
|
|
|
await view.render();
|
2019-05-05 19:05:45 +02:00
|
|
|
|
// Clear chat state notifications
|
|
|
|
|
sizzle(`.chat-state-notification[data-csn="${message.get('from')}"]`, this.content).forEach(u.removeElement);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.insertMessage(view);
|
|
|
|
|
this.insertDayIndicator(view.el);
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.setScrollPosition(view.el);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
|
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.
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.model.set('scrolled', false);
|
|
|
|
|
} else if (this.model.get('scrolled', true) && !u.isOnlyChatStateNotification(message)) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.showNewMessagesIndicator();
|
2018-08-01 18:46:52 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
if (this.shouldShowOnTextMessage()) {
|
|
|
|
|
this.show();
|
|
|
|
|
} else {
|
|
|
|
|
this.scrollDown();
|
|
|
|
|
}
|
2019-06-25 11:15:45 +02:00
|
|
|
|
if (message.get('correcting')) {
|
|
|
|
|
this.insertIntoTextArea(message.get('message'), true, true);
|
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2019-03-29 23:47:56 +01:00
|
|
|
|
/**
|
|
|
|
|
* Handler that gets called when a new message object is created.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#onMessageAdded
|
|
|
|
|
* @param { object } message - The message Backbone object that was added.
|
|
|
|
|
*/
|
2019-05-17 14:43:23 +02:00
|
|
|
|
async onMessageAdded (message) {
|
2019-05-20 17:15:12 +02:00
|
|
|
|
const id = message.get('id');
|
|
|
|
|
if (id && this.get(id)) {
|
2019-05-17 14:43:23 +02:00
|
|
|
|
// We already have a view for this message
|
|
|
|
|
return;
|
|
|
|
|
}
|
2019-09-24 15:33:41 +02:00
|
|
|
|
if (!message.get('dangling_retraction')) {
|
|
|
|
|
await this.showMessage(message);
|
2019-06-28 15:22:08 +02:00
|
|
|
|
}
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* Triggered once a message has been added to a chatbox.
|
|
|
|
|
* @event _converse#messageAdded
|
|
|
|
|
* @type {object}
|
|
|
|
|
* @property { _converse.Message } message - The message instance
|
|
|
|
|
* @property { _converse.ChatBox | _converse.ChatRoom } chatbox - The chat model
|
|
|
|
|
* @example _converse.api.listen.on('messageAdded', data => { ... });
|
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('messageAdded', {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
'message': message,
|
|
|
|
|
'chatbox': this.model
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
parseMessageForCommands (text) {
|
|
|
|
|
const match = text.replace(/^\s*/, "").match(/^\/(.*)\s*$/);
|
|
|
|
|
if (match) {
|
|
|
|
|
if (match[1] === "clear") {
|
|
|
|
|
this.clearMessages();
|
|
|
|
|
return true;
|
2019-11-15 09:41:01 +01:00
|
|
|
|
} else if (match[1] === "close") {
|
|
|
|
|
this.close();
|
|
|
|
|
return true;
|
|
|
|
|
} else if (match[1] === "help") {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
const msgs = [
|
|
|
|
|
`<strong>/clear</strong>: ${__('Remove messages')}`,
|
2019-11-15 09:41:01 +01:00
|
|
|
|
`<strong>/close</strong>: ${__('Close this chat')}`,
|
2018-10-23 03:41:38 +02:00
|
|
|
|
`<strong>/me</strong>: ${__('Write in the third person')}`,
|
|
|
|
|
`<strong>/help</strong>: ${__('Show this menu')}`
|
|
|
|
|
];
|
|
|
|
|
this.showHelpMessages(msgs);
|
|
|
|
|
return true;
|
2018-02-06 17:53:56 +01:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2018-12-20 12:29:55 +01:00
|
|
|
|
async onFormSubmitted (ev) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
ev.preventDefault();
|
2019-06-16 14:16:35 +02:00
|
|
|
|
const textarea = this.el.querySelector('.chat-textarea');
|
2019-07-30 15:50:46 +02:00
|
|
|
|
const message_text = textarea.value.trim();
|
|
|
|
|
if (_converse.message_limit && message_text.length > _converse.message_limit ||
|
|
|
|
|
!message_text.replace(/\s/g, '').length) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
2018-12-20 12:29:55 +01:00
|
|
|
|
if (!_converse.connection.authenticated) {
|
|
|
|
|
this.showHelpMessages(
|
|
|
|
|
['Sorry, the connection has been lost, and your message could not be sent'],
|
|
|
|
|
'error'
|
|
|
|
|
);
|
2019-06-01 19:36:23 +02:00
|
|
|
|
_converse.api.connection.reconnect();
|
2018-12-20 12:29:55 +01:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let spoiler_hint, hint_el = {};
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (this.model.get('composing_spoiler')) {
|
2018-12-20 12:29:55 +01:00
|
|
|
|
hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint');
|
2018-10-23 03:41:38 +02:00
|
|
|
|
spoiler_hint = hint_el.value;
|
|
|
|
|
}
|
2018-12-20 12:29:55 +01:00
|
|
|
|
u.addClass('disabled', textarea);
|
|
|
|
|
textarea.setAttribute('disabled', 'disabled');
|
2019-02-14 13:20:37 +01:00
|
|
|
|
|
2019-07-30 15:50:46 +02:00
|
|
|
|
const is_command = this.parseMessageForCommands(message_text);
|
|
|
|
|
const message = is_command ? null : await this.model.sendMessage(message_text, spoiler_hint);
|
|
|
|
|
if (is_command || message) {
|
2018-12-20 12:29:55 +01:00
|
|
|
|
hint_el.value = '';
|
|
|
|
|
textarea.value = '';
|
|
|
|
|
u.removeClass('correcting', textarea);
|
2020-01-17 12:53:45 +01:00
|
|
|
|
textarea.style.height = 'auto';
|
|
|
|
|
this.updateCharCounter(textarea.value);
|
2019-07-30 15:50:46 +02:00
|
|
|
|
}
|
|
|
|
|
if (message) {
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
2019-07-30 15:50:46 +02:00
|
|
|
|
* Triggered whenever a message is sent by the user
|
2019-03-29 15:47:23 +01:00
|
|
|
|
* @event _converse#messageSend
|
|
|
|
|
* @type { _converse.Message }
|
2019-07-30 15:50:46 +02:00
|
|
|
|
* @example _converse.api.listen.on('messageSend', message => { ... });
|
2019-03-29 15:47:23 +01:00
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('messageSend', message);
|
2018-12-20 12:29:55 +01:00
|
|
|
|
}
|
2020-01-15 14:57:50 +01:00
|
|
|
|
if (_converse.view_mode === 'overlayed') {
|
2020-01-17 12:53:45 +01:00
|
|
|
|
// XXX: Chrome flexbug workaround. The .chat-content area
|
2020-01-15 14:57:50 +01:00
|
|
|
|
// doesn't resize when the textarea is resized to its original size.
|
|
|
|
|
this.content.parentElement.style.display = 'none';
|
|
|
|
|
}
|
2018-12-20 12:29:55 +01:00
|
|
|
|
textarea.removeAttribute('disabled');
|
2019-02-14 13:20:37 +01:00
|
|
|
|
u.removeClass('disabled', textarea);
|
2020-01-15 14:38:48 +01:00
|
|
|
|
|
2020-01-15 14:57:50 +01:00
|
|
|
|
if (_converse.view_mode === 'overlayed') {
|
2020-01-17 12:53:45 +01:00
|
|
|
|
// XXX: Chrome flexbug workaround.
|
2020-01-15 14:57:50 +01:00
|
|
|
|
this.content.parentElement.style.display = '';
|
|
|
|
|
}
|
2020-01-15 14:38:48 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
// Suppress events, otherwise superfluous CSN gets set
|
|
|
|
|
// immediately after the message, causing rate-limiting issues.
|
2019-07-10 09:47:13 +02:00
|
|
|
|
this.model.setChatState(_converse.ACTIVE, {'silent': true});
|
2020-01-17 12:53:45 +01:00
|
|
|
|
textarea.focus();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2019-06-16 14:16:35 +02:00
|
|
|
|
updateCharCounter (chars) {
|
|
|
|
|
if (_converse.message_limit) {
|
|
|
|
|
const message_limit = this.el.querySelector('.message-limit');
|
|
|
|
|
const counter = _converse.message_limit - chars.length;
|
|
|
|
|
message_limit.textContent = counter;
|
|
|
|
|
if (counter < 1) {
|
|
|
|
|
u.addClass('error', message_limit);
|
|
|
|
|
} else {
|
|
|
|
|
u.removeClass('error', message_limit);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onPaste (ev) {
|
2019-07-03 22:26:07 +02:00
|
|
|
|
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;
|
|
|
|
|
}
|
2019-06-16 14:16:35 +02:00
|
|
|
|
this.updateCharCounter(ev.clipboardData.getData('text/plain'));
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Event handler for when a depressed key goes up
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#onKeyUp
|
|
|
|
|
*/
|
|
|
|
|
onKeyUp (ev) {
|
|
|
|
|
this.updateCharCounter(ev.target.value);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Event handler for when a key is pressed down in a chat box textarea.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#onKeyDown
|
|
|
|
|
* @param { Event } ev
|
|
|
|
|
*/
|
2019-05-26 10:58:52 +02:00
|
|
|
|
onKeyDown (ev) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (ev.ctrlKey) {
|
|
|
|
|
// When ctrl is pressed, no chars are entered into the textarea.
|
|
|
|
|
return;
|
|
|
|
|
}
|
2019-06-27 16:09:11 +02:00
|
|
|
|
if (!ev.shiftKey && !ev.altKey && !ev.metaKey) {
|
2019-09-11 15:23:58 +02:00
|
|
|
|
if (ev.keyCode === converse.keycodes.FORWARD_SLASH) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
// Forward slash is used to run commands. Nothing to do here.
|
2018-08-10 11:48:07 +02:00
|
|
|
|
return;
|
2019-09-11 15:23:58 +02:00
|
|
|
|
} else if (ev.keyCode === converse.keycodes.ESCAPE) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return this.onEscapePressed(ev);
|
2019-09-11 15:23:58 +02:00
|
|
|
|
} else if (ev.keyCode === converse.keycodes.ENTER) {
|
2019-08-16 10:18:35 +02:00
|
|
|
|
return this.onEnterPressed(ev);
|
2019-09-11 15:23:58 +02:00
|
|
|
|
} else if (ev.keyCode === converse.keycodes.UP_ARROW && !ev.target.selectionEnd) {
|
2019-06-17 09:00:02 +02:00
|
|
|
|
const textarea = this.el.querySelector('.chat-textarea');
|
|
|
|
|
if (!textarea.value || u.hasClass('correcting', textarea)) {
|
|
|
|
|
return this.editEarlierMessage();
|
|
|
|
|
}
|
2019-09-11 15:23:58 +02:00
|
|
|
|
} else if (ev.keyCode === converse.keycodes.DOWN_ARROW &&
|
2019-06-17 09:00:02 +02:00
|
|
|
|
ev.target.selectionEnd === ev.target.value.length &&
|
|
|
|
|
u.hasClass('correcting', this.el.querySelector('.chat-textarea'))) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return this.editLaterMessage();
|
2018-10-08 01:14:32 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
2019-09-11 15:23:58 +02:00
|
|
|
|
if ([converse.keycodes.SHIFT,
|
|
|
|
|
converse.keycodes.META,
|
|
|
|
|
converse.keycodes.META_RIGHT,
|
|
|
|
|
converse.keycodes.ESCAPE,
|
|
|
|
|
converse.keycodes.ALT].includes(ev.keyCode)) {
|
2018-10-23 03:41:38 +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).
|
2019-07-10 09:47:13 +02:00
|
|
|
|
this.model.setChatState(_converse.COMPOSING);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
2017-07-15 15:58:11 +02:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
getOwnMessages () {
|
2019-05-14 11:38:41 +02:00
|
|
|
|
return this.model.messages.filter({'sender': 'me'});
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2018-07-21 08:12:33 +02:00
|
|
|
|
|
2019-08-16 10:18:35 +02:00
|
|
|
|
onEnterPressed (ev) {
|
|
|
|
|
return this.onFormSubmitted(ev);
|
|
|
|
|
},
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
onEscapePressed (ev) {
|
|
|
|
|
ev.preventDefault();
|
2019-10-08 21:29:43 +02:00
|
|
|
|
const idx = this.model.messages.findLastIndex('correcting');
|
|
|
|
|
const message = idx >=0 ? this.model.messages.at(idx) : null;
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (message) {
|
|
|
|
|
message.save('correcting', false);
|
|
|
|
|
}
|
|
|
|
|
this.insertIntoTextArea('', true, false);
|
|
|
|
|
},
|
|
|
|
|
|
2019-09-24 15:33:41 +02:00
|
|
|
|
/**
|
|
|
|
|
* Retract one of your messages in this chat
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#retractOwnMessage
|
|
|
|
|
* @param { _converse.Message } message - The message which we're retracting.
|
|
|
|
|
*/
|
|
|
|
|
retractOwnMessage(message) {
|
|
|
|
|
this.model.sendRetractionMessage(message);
|
|
|
|
|
message.save({
|
|
|
|
|
'retracted': (new Date()).toISOString(),
|
|
|
|
|
'retracted_id': message.get('origin_id'),
|
|
|
|
|
'is_ephemeral': true
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async onMessageRetractButtonClicked (ev) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
const msg_el = u.ancestor(ev.target, '.message');
|
|
|
|
|
const msgid = msg_el.getAttribute('data-msgid');
|
|
|
|
|
const time = msg_el.getAttribute('data-isodate');
|
|
|
|
|
const message = this.model.messages.findWhere({msgid, time});
|
|
|
|
|
if (message.get('sender') !== 'me') {
|
|
|
|
|
return log.error("onMessageEditButtonClicked called for someone else's message!");
|
|
|
|
|
}
|
|
|
|
|
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.");
|
|
|
|
|
|
|
|
|
|
const messages = [__('Are you sure you want to retract this message?')];
|
|
|
|
|
if (_converse.show_retraction_warning) {
|
|
|
|
|
messages[1] = retraction_warning;
|
|
|
|
|
}
|
|
|
|
|
const result = await _converse.api.confirm(__('Confirm'), messages);
|
|
|
|
|
if (result) {
|
|
|
|
|
this.retractOwnMessage(message);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
onMessageEditButtonClicked (ev) {
|
|
|
|
|
ev.preventDefault();
|
2019-06-19 08:03:36 +02:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
const idx = this.model.messages.findLastIndex('correcting'),
|
|
|
|
|
currently_correcting = idx >=0 ? this.model.messages.at(idx) : null,
|
|
|
|
|
message_el = u.ancestor(ev.target, '.chat-msg'),
|
|
|
|
|
message = this.model.messages.findWhere({'msgid': message_el.getAttribute('data-msgid')});
|
|
|
|
|
|
2019-06-19 08:03:36 +02:00
|
|
|
|
const textarea = this.el.querySelector('.chat-textarea');
|
|
|
|
|
if (textarea.value &&
|
2019-08-05 01:39:57 +02:00
|
|
|
|
((currently_correcting === null) || currently_correcting.get('message') !== textarea.value)) {
|
2019-06-19 08:03:36 +02:00
|
|
|
|
if (! confirm(__("You have an unsent message which will be lost if you continue. Are you sure?"))) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (currently_correcting !== message) {
|
2019-08-05 01:39:57 +02:00
|
|
|
|
if (currently_correcting !== null) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
currently_correcting.save('correcting', false);
|
|
|
|
|
}
|
|
|
|
|
message.save('correcting', true);
|
|
|
|
|
this.insertIntoTextArea(u.prefixMentions(message), true, true);
|
|
|
|
|
} else {
|
|
|
|
|
message.save('correcting', false);
|
2018-08-10 11:48:07 +02:00
|
|
|
|
this.insertIntoTextArea('', true, false);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
editLaterMessage () {
|
|
|
|
|
let message;
|
|
|
|
|
let idx = this.model.messages.findLastIndex('correcting');
|
|
|
|
|
if (idx >= 0) {
|
|
|
|
|
this.model.messages.at(idx).save('correcting', false);
|
|
|
|
|
while (idx < this.model.messages.length-1) {
|
|
|
|
|
idx += 1;
|
|
|
|
|
const candidate = this.model.messages.at(idx);
|
2019-10-09 11:32:25 +02:00
|
|
|
|
if (candidate.get('editable')) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
message = candidate;
|
|
|
|
|
break;
|
2018-07-08 15:20:58 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
if (message) {
|
|
|
|
|
this.insertIntoTextArea(message.get('message'), true, true);
|
|
|
|
|
message.save('correcting', true);
|
|
|
|
|
} else {
|
|
|
|
|
this.insertIntoTextArea('', true, false);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
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);
|
2019-09-29 11:40:53 +02:00
|
|
|
|
if (candidate.get('editable')) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
message = candidate;
|
|
|
|
|
break;
|
2018-07-08 10:13:15 +02:00
|
|
|
|
}
|
2016-07-26 11:04:05 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
2019-10-09 11:32:25 +02:00
|
|
|
|
message = message || this.getOwnMessages().reverse().find(m => m.get('editable'));
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (message) {
|
|
|
|
|
this.insertIntoTextArea(message.get('message'), true, true);
|
|
|
|
|
message.save('correcting', true);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
inputChanged (ev) {
|
2019-06-25 17:24:07 +02:00
|
|
|
|
const height = ev.target.scrollHeight + 'px';
|
|
|
|
|
if (ev.target.style.height != height) {
|
|
|
|
|
ev.target.style.height = 'auto';
|
|
|
|
|
ev.target.style.height = height;
|
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2019-10-24 14:29:15 +02:00
|
|
|
|
async clearMessages (ev) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
|
|
const result = confirm(__("Are you sure you want to clear the messages from this conversation?"));
|
|
|
|
|
if (result === true) {
|
2019-10-24 14:29:15 +02:00
|
|
|
|
await this.model.clearMessages();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
2019-08-19 15:02:54 +02:00
|
|
|
|
/**
|
|
|
|
|
* Insert a particular string value into the textarea of this chat box.
|
|
|
|
|
* @private
|
|
|
|
|
* @method _converse.ChatBoxView#insertIntoTextArea
|
|
|
|
|
* @param {string} value - The value to be inserted.
|
|
|
|
|
* @param {(boolean|string)} [replace] - Whether an existing value
|
|
|
|
|
* should be replaced. If set to `true`, the entire textarea will
|
|
|
|
|
* be replaced with the new value. If set to a string, then only
|
|
|
|
|
* that string will be replaced *if* a position is also specified.
|
|
|
|
|
* @param {integer} [position] - The end index of the string to be
|
|
|
|
|
* replaced with the new value.
|
|
|
|
|
*/
|
|
|
|
|
insertIntoTextArea (value, replace=false, correcting=false, position) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
const textarea = this.el.querySelector('.chat-textarea');
|
|
|
|
|
if (correcting) {
|
|
|
|
|
u.addClass('correcting', textarea);
|
|
|
|
|
} else {
|
|
|
|
|
u.removeClass('correcting', textarea);
|
|
|
|
|
}
|
|
|
|
|
if (replace) {
|
2019-08-19 15:02:54 +02:00
|
|
|
|
if (position && typeof replace == 'string') {
|
|
|
|
|
textarea.value = textarea.value.replace(
|
|
|
|
|
new RegExp(replace, 'g'),
|
2019-08-21 16:32:32 +02:00
|
|
|
|
(match, offset) => (offset == position-replace.length ? value+' ' : match)
|
2019-08-19 15:02:54 +02:00
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
textarea.value = value;
|
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
} else {
|
|
|
|
|
let existing = textarea.value;
|
|
|
|
|
if (existing && (existing[existing.length-1] !== ' ')) {
|
|
|
|
|
existing = existing + ' ';
|
2018-02-07 11:00:35 +01:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
textarea.value = existing+value+' ';
|
|
|
|
|
}
|
2019-06-16 14:16:35 +02:00
|
|
|
|
this.updateCharCounter(textarea.value);
|
2019-05-26 11:20:31 +02:00
|
|
|
|
u.placeCaretAtEnd(textarea);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleCall (ev) {
|
|
|
|
|
ev.stopPropagation();
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* When a call button (i.e. with class .toggle-call) on a chatbox has been clicked.
|
|
|
|
|
* @event _converse#callButtonClicked
|
|
|
|
|
* @type { object }
|
|
|
|
|
* @property { Strophe.Connection } _converse.connection - The XMPP Connection object
|
|
|
|
|
* @property { _converse.ChatBox | _converse.ChatRoom } _converse.connection - The XMPP Connection object
|
|
|
|
|
* @example _converse.api.listen.on('callButtonClicked', (connection, model) => { ... });
|
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('callButtonClicked', {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
connection: _converse.connection,
|
|
|
|
|
model: this.model
|
|
|
|
|
});
|
|
|
|
|
},
|
2018-02-07 13:29:54 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
toggleComposeSpoilerMessage () {
|
|
|
|
|
this.model.set('composing_spoiler', !this.model.get('composing_spoiler'));
|
|
|
|
|
this.renderMessageForm();
|
|
|
|
|
this.focus();
|
|
|
|
|
},
|
2016-03-13 17:16:53 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
toggleSpoilerMessage (ev) {
|
|
|
|
|
if (ev && ev.preventDefault) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
}
|
|
|
|
|
const toggle_el = ev.target,
|
|
|
|
|
icon_el = toggle_el.firstElementChild;
|
|
|
|
|
|
|
|
|
|
u.slideToggleElement(
|
|
|
|
|
toggle_el.parentElement.parentElement.querySelector('.spoiler')
|
|
|
|
|
);
|
|
|
|
|
if (toggle_el.getAttribute("data-toggle-state") == "closed") {
|
|
|
|
|
toggle_el.textContent = 'Show less';
|
|
|
|
|
icon_el.classList.remove("fa-eye");
|
|
|
|
|
icon_el.classList.add("fa-eye-slash");
|
|
|
|
|
toggle_el.insertAdjacentElement('afterBegin', icon_el);
|
|
|
|
|
toggle_el.setAttribute("data-toggle-state", "open");
|
|
|
|
|
} else {
|
|
|
|
|
toggle_el.textContent = 'Show more';
|
|
|
|
|
icon_el.classList.remove("fa-eye-slash");
|
|
|
|
|
icon_el.classList.add("fa-eye");
|
|
|
|
|
toggle_el.insertAdjacentElement('afterBegin', icon_el);
|
|
|
|
|
toggle_el.setAttribute("data-toggle-state", "closed");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onPresenceChanged (item) {
|
|
|
|
|
const show = item.get('show'),
|
|
|
|
|
fullname = this.model.getDisplayName();
|
|
|
|
|
|
|
|
|
|
let text;
|
|
|
|
|
if (u.isVisible(this.el)) {
|
|
|
|
|
if (show === 'offline') {
|
|
|
|
|
text = __('%1$s has gone offline', fullname);
|
|
|
|
|
} else if (show === 'away') {
|
|
|
|
|
text = __('%1$s has gone away', fullname);
|
|
|
|
|
} else if ((show === 'dnd')) {
|
|
|
|
|
text = __('%1$s is busy', fullname);
|
|
|
|
|
} else if (show === 'online') {
|
|
|
|
|
text = __('%1$s is online', fullname);
|
|
|
|
|
}
|
|
|
|
|
if (text) {
|
|
|
|
|
this.content.insertAdjacentHTML(
|
|
|
|
|
'beforeend',
|
|
|
|
|
tpl_status_message({
|
|
|
|
|
'message': text,
|
2019-05-05 19:05:45 +02:00
|
|
|
|
'isodate': (new Date()).toISOString(),
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}));
|
2019-06-19 11:04:09 +02:00
|
|
|
|
this.scrollDown();
|
2018-02-07 11:00:35 +01:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
},
|
2016-03-13 17:16:53 +01:00
|
|
|
|
|
2019-10-24 14:29:15 +02:00
|
|
|
|
async close (ev) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (ev && ev.preventDefault) { ev.preventDefault(); }
|
2019-09-19 16:54:55 +02:00
|
|
|
|
if (_converse.router.history.getFragment() === "converse/chat?jid="+this.model.get('jid')) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
_converse.router.navigate('');
|
|
|
|
|
}
|
2018-11-18 19:14:22 +01:00
|
|
|
|
if (_converse.api.connection.connected()) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
// Immediately sending the chat state, because the
|
|
|
|
|
// model is going to be destroyed afterwards.
|
2019-07-10 09:47:13 +02:00
|
|
|
|
this.model.setChatState(_converse.INACTIVE);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.model.sendChatState();
|
|
|
|
|
}
|
2019-10-24 14:29:15 +02:00
|
|
|
|
await this.model.close();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.remove();
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* Triggered once a chatbox has been closed.
|
|
|
|
|
* @event _converse#chatBoxClosed
|
|
|
|
|
* @type { _converse.ChatBoxView | _converse.ChatRoomView }
|
|
|
|
|
* @example _converse.api.listen.on('chatBoxClosed', view => { ... });
|
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('chatBoxClosed', this);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
2019-09-12 11:04:11 +02:00
|
|
|
|
emitBlurred (ev) {
|
|
|
|
|
if (this.el.contains(document.activeElement)) {
|
|
|
|
|
// 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) => { ... });
|
|
|
|
|
*/
|
|
|
|
|
_converse.api.trigger('chatBoxBlurred', this, ev);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
emitFocused (ev) {
|
2019-05-14 15:51:40 +02:00
|
|
|
|
/**
|
|
|
|
|
* Triggered when the focus has been moved to a particular chat.
|
|
|
|
|
* @event _converse#chatBoxFocused
|
|
|
|
|
* @type { _converse.ChatBoxView | _converse.ChatRoomView }
|
2019-09-12 11:04:11 +02:00
|
|
|
|
* @example _converse.api.listen.on('chatBoxFocused', (view, event) => { ... });
|
2019-05-14 15:51:40 +02:00
|
|
|
|
*/
|
2019-09-12 11:04:11 +02:00
|
|
|
|
_converse.api.trigger('chatBoxFocused', this, ev);
|
2019-07-12 00:46:17 +02:00
|
|
|
|
},
|
2019-05-14 15:51:40 +02:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
focus () {
|
2019-07-12 00:46:17 +02:00
|
|
|
|
const textarea_el = this.el.getElementsByClassName('chat-textarea')[0];
|
|
|
|
|
if (textarea_el && document.activeElement !== textarea_el) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
textarea_el.focus();
|
|
|
|
|
}
|
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
2020-01-09 14:28:43 +01:00
|
|
|
|
maybeFocus () {
|
|
|
|
|
_converse.auto_focus && this.focus();
|
|
|
|
|
},
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
hide () {
|
|
|
|
|
this.el.classList.add('hidden');
|
|
|
|
|
return this;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
afterShown () {
|
|
|
|
|
this.model.clearUnreadMsgCounter();
|
2019-07-10 09:47:13 +02:00
|
|
|
|
this.model.setChatState(_converse.ACTIVE);
|
2019-06-18 13:59:55 +02:00
|
|
|
|
this.scrollDown();
|
2020-01-09 14:28:43 +01:00
|
|
|
|
this.maybeFocus();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
2019-07-12 00:46:17 +02:00
|
|
|
|
show () {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (u.isVisible(this.el)) {
|
2020-01-09 14:28:43 +01:00
|
|
|
|
this.maybeFocus();
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
2019-07-12 00:46:17 +02:00
|
|
|
|
/**
|
|
|
|
|
* Triggered just before a {@link _converse.ChatBoxView} or {@link _converse.ChatRoomView}
|
|
|
|
|
* will be shown.
|
|
|
|
|
* @event _converse#beforeShowingChatView
|
|
|
|
|
* @type {object}
|
|
|
|
|
* @property { _converse.ChatBoxView | _converse.ChatRoomView } view
|
|
|
|
|
*/
|
|
|
|
|
_converse.api.trigger('beforeShowingChatView', this);
|
|
|
|
|
|
|
|
|
|
if (_converse.animate) {
|
|
|
|
|
u.fadeIn(this.el, () => this.afterShown());
|
|
|
|
|
} else {
|
|
|
|
|
u.showElement(this.el);
|
|
|
|
|
this.afterShown();
|
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2016-04-01 14:46:19 +02:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
showNewMessagesIndicator () {
|
|
|
|
|
u.showElement(this.el.querySelector('.new-msgs-indicator'));
|
|
|
|
|
},
|
2017-12-25 12:58:30 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
hideNewMessagesIndicator () {
|
|
|
|
|
const new_msgs_indicator = this.el.querySelector('.new-msgs-indicator');
|
2019-08-05 01:39:57 +02:00
|
|
|
|
if (new_msgs_indicator !== null) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
new_msgs_indicator.classList.add('hidden');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2019-12-02 13:59:58 +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: function () {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
let scrolled = true;
|
|
|
|
|
const is_at_bottom =
|
|
|
|
|
(this.content.scrollTop + this.content.clientHeight) >=
|
|
|
|
|
this.content.scrollHeight - 62; // sigh...
|
|
|
|
|
|
|
|
|
|
if (is_at_bottom) {
|
|
|
|
|
scrolled = false;
|
|
|
|
|
this.onScrolledDown();
|
|
|
|
|
}
|
2019-06-19 11:04:09 +02:00
|
|
|
|
u.safeSave(this.model, {
|
|
|
|
|
'scrolled': scrolled,
|
|
|
|
|
'top_visible_message': null
|
|
|
|
|
});
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
2016-05-25 15:14:12 +02:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
viewUnreadMessages () {
|
2019-10-24 14:29:15 +02:00
|
|
|
|
this.model.save({'scrolled': false, 'top_visible_message': null});
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.scrollDown();
|
|
|
|
|
},
|
2016-05-28 14:25:44 +02:00
|
|
|
|
|
2019-06-19 11:04:09 +02:00
|
|
|
|
_scrollDown () {
|
|
|
|
|
/* Inner method that gets debounced */
|
2019-07-29 10:19:05 +02:00
|
|
|
|
if (this.content === undefined) {
|
2019-06-19 11:04:09 +02:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (u.isVisible(this.content) && !this.model.get('scrolled')) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.content.scrollTop = this.content.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
},
|
2017-02-02 16:06:49 +01:00
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
onScrolledDown () {
|
|
|
|
|
this.hideNewMessagesIndicator();
|
|
|
|
|
if (_converse.windowState !== 'hidden') {
|
|
|
|
|
this.model.clearUnreadMsgCounter();
|
|
|
|
|
}
|
2019-03-29 15:47:23 +01:00
|
|
|
|
/**
|
|
|
|
|
* Triggered once the chat's message area has been scrolled down to the bottom.
|
|
|
|
|
* @event _converse#chatBoxScrolledDown
|
|
|
|
|
* @type {object}
|
|
|
|
|
* @property { _converse.ChatBox | _converse.ChatRoom } chatbox - The chat model
|
|
|
|
|
* @example _converse.api.listen.on('chatBoxScrolledDown', obj => { ... });
|
|
|
|
|
*/
|
2019-03-29 21:10:45 +01:00
|
|
|
|
_converse.api.trigger('chatBoxScrolledDown', {'chatbox': this.model}); // TODO: clean up
|
2018-10-23 03:41:38 +02:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
onWindowStateChanged (state) {
|
|
|
|
|
if (state === 'visible') {
|
|
|
|
|
if (!this.model.isHidden()) {
|
2019-07-12 00:46:17 +02:00
|
|
|
|
// this.model.setChatState(_converse.ACTIVE);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
if (this.model.get('num_unread', 0)) {
|
|
|
|
|
this.model.clearUnreadMsgCounter();
|
2018-10-16 13:30:29 +02:00
|
|
|
|
}
|
2017-05-03 09:06:28 +02:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
} else if (state === 'hidden') {
|
2019-07-10 09:47:13 +02:00
|
|
|
|
this.model.setChatState(_converse.INACTIVE, {'silent': true});
|
2018-10-23 03:41:38 +02:00
|
|
|
|
this.model.sendChatState();
|
2016-03-13 17:16:53 +01:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
});
|
2018-08-28 14:58:33 +02:00
|
|
|
|
|
2019-03-29 14:15:03 +01:00
|
|
|
|
_converse.api.listen.on('chatBoxViewsInitialized', () => {
|
2019-04-17 11:52:41 +02:00
|
|
|
|
const views = _converse.chatboxviews;
|
2019-11-01 16:04:55 +01:00
|
|
|
|
_converse.chatboxes.on('add', async item => {
|
2019-04-17 11:52:41 +02:00
|
|
|
|
if (!views.get(item.get('id')) && item.get('type') === _converse.PRIVATE_CHAT_TYPE) {
|
2019-11-01 16:04:55 +01:00
|
|
|
|
await item.initialized;
|
2019-04-17 11:52:41 +02:00
|
|
|
|
views.add(item.get('id'), new _converse.ChatBoxView({model: item}));
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
2018-02-07 17:25:16 +01:00
|
|
|
|
});
|
2018-10-23 03:41:38 +02:00
|
|
|
|
});
|
|
|
|
|
|
2019-11-01 16:04:55 +01:00
|
|
|
|
|
|
|
|
|
/************************ BEGIN Event Handlers ************************/
|
|
|
|
|
function onWindowStateChanged (data) {
|
|
|
|
|
if (_converse.chatboxviews) {
|
|
|
|
|
_converse.chatboxviews.forEach(view => {
|
|
|
|
|
if (view.model.get('id') !== 'controlbox') {
|
|
|
|
|
view.onWindowStateChanged(data.state);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
_converse.api.listen.on('windowStateChanged', onWindowStateChanged);
|
2019-09-10 15:47:30 +02:00
|
|
|
|
_converse.api.listen.on('connected', () => _converse.api.disco.own.features.add(Strophe.NS.SPOILER));
|
2019-11-01 16:04:55 +01:00
|
|
|
|
/************************ END Event Handlers ************************/
|
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
|
|
/************************ BEGIN API ************************/
|
2019-04-29 09:07:15 +02:00
|
|
|
|
Object.assign(_converse.api, {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
/**
|
|
|
|
|
* The "chatview" namespace groups methods pertaining to views
|
|
|
|
|
* for one-on-one chats.
|
|
|
|
|
*
|
|
|
|
|
* @namespace _converse.api.chatviews
|
|
|
|
|
* @memberOf _converse.api
|
|
|
|
|
*/
|
2019-10-24 14:29:15 +02:00
|
|
|
|
chatviews: {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
/**
|
|
|
|
|
* Get the view of an already open chat.
|
|
|
|
|
* @method _converse.api.chatviews.get
|
2019-09-10 15:47:30 +02:00
|
|
|
|
* @param { Array.string | string } jids
|
2020-01-23 10:18:41 +01:00
|
|
|
|
* @returns { _converse.ChatBoxView|undefined } The chat should already be open, otherwise `undefined` will be returned.
|
2018-10-23 03:41:38 +02:00
|
|
|
|
* @example
|
|
|
|
|
* // To return a single view, provide the JID of the contact:
|
|
|
|
|
* _converse.api.chatviews.get('buddy@example.com')
|
|
|
|
|
* @example
|
|
|
|
|
* // To return an array of views, provide an array of JIDs:
|
|
|
|
|
* _converse.api.chatviews.get(['buddy1@example.com', 'buddy2@example.com'])
|
|
|
|
|
*/
|
2019-10-24 14:29:15 +02:00
|
|
|
|
get (jids) {
|
2019-07-29 10:19:05 +02:00
|
|
|
|
if (jids === undefined) {
|
2019-10-24 14:29:15 +02:00
|
|
|
|
return Object.values(_converse.chatboxviews.getAll());
|
2018-03-14 14:03:26 +01:00
|
|
|
|
}
|
2019-10-08 21:29:43 +02:00
|
|
|
|
if (isString(jids)) {
|
2018-10-23 03:41:38 +02:00
|
|
|
|
return _converse.chatboxviews.get(jids);
|
|
|
|
|
}
|
2019-10-08 21:29:43 +02:00
|
|
|
|
return jids.map(jid => _converse.chatboxviews.get(jid));
|
2018-03-14 14:03:26 +01:00
|
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
/************************ END API ************************/
|
|
|
|
|
}
|
|
|
|
|
});
|