2021-06-03 19:11:32 +02:00
|
|
|
|
import './message-form.js';
|
|
|
|
|
import debounce from 'lodash-es/debounce';
|
|
|
|
|
import tpl_bottom_panel from './templates/bottom-panel.js';
|
2020-12-08 12:54:14 +01:00
|
|
|
|
import { ElementView } from '@converse/skeletor/src/element.js';
|
2021-06-03 19:11:32 +02:00
|
|
|
|
import { _converse, api } from '@converse/headless/core';
|
|
|
|
|
import { clearMessages } from './utils.js';
|
|
|
|
|
import { render } from 'lit';
|
2020-12-08 12:54:14 +01:00
|
|
|
|
|
2021-04-29 15:18:17 +02:00
|
|
|
|
import './styles/chat-bottom-panel.scss';
|
|
|
|
|
|
2020-12-08 12:54:14 +01:00
|
|
|
|
|
2021-02-11 15:05:04 +01:00
|
|
|
|
export default class ChatBottomPanel extends ElementView {
|
|
|
|
|
events = {
|
2021-06-03 19:11:32 +02:00
|
|
|
|
'click .send-button': 'sendButtonClicked',
|
2021-06-03 12:10:30 +02:00
|
|
|
|
'click .toggle-clear': 'clearMessages'
|
|
|
|
|
};
|
2020-12-08 12:54:14 +01:00
|
|
|
|
|
2021-03-04 15:53:04 +01:00
|
|
|
|
async connectedCallback () {
|
2021-02-11 15:05:04 +01:00
|
|
|
|
super.connectedCallback();
|
2021-06-03 19:11:32 +02:00
|
|
|
|
this.debouncedRender = debounce(this.render, 100);
|
2021-02-11 15:05:04 +01:00
|
|
|
|
this.model = _converse.chatboxes.get(this.getAttribute('jid'));
|
2021-03-04 15:53:04 +01:00
|
|
|
|
await this.model.initialized;
|
2021-06-03 19:11:32 +02:00
|
|
|
|
this.listenTo(this.model, 'change:num_unread', this.debouncedRender)
|
|
|
|
|
this.listenTo(this.model, 'emoji-picker-autocomplete', this.autocompleteInPicker);
|
2021-06-03 12:10:30 +02:00
|
|
|
|
|
2021-06-03 19:11:32 +02:00
|
|
|
|
this.addEventListener('focusin', ev => this.emitFocused(ev));
|
|
|
|
|
this.addEventListener('focusout', ev => this.emitBlurred(ev));
|
|
|
|
|
this.render();
|
2021-01-26 13:22:04 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-11 15:05:04 +01:00
|
|
|
|
render () {
|
2021-06-03 19:11:32 +02:00
|
|
|
|
render(tpl_bottom_panel({
|
|
|
|
|
'model': this.model,
|
|
|
|
|
'viewUnreadMessages': ev => this.viewUnreadMessages(ev)
|
|
|
|
|
}), this);
|
2021-02-11 15:05:04 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-06-03 19:11:32 +02:00
|
|
|
|
sendButtonClicked (ev) {
|
|
|
|
|
this.querySelector('converse-message-form')?.onFormSubmitted(ev);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-03-17 11:20:13 +01:00
|
|
|
|
viewUnreadMessages (ev) {
|
|
|
|
|
ev?.preventDefault?.();
|
2021-06-03 16:29:31 +02:00
|
|
|
|
this.model.save({ 'scrolled': false });
|
2021-03-10 12:17:23 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-11 15:05:04 +01:00
|
|
|
|
emitFocused (ev) {
|
2021-02-11 22:32:55 +01:00
|
|
|
|
_converse.chatboxviews.get(this.getAttribute('jid'))?.emitFocused(ev);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-11 15:05:04 +01:00
|
|
|
|
emitBlurred (ev) {
|
2021-02-11 22:32:55 +01:00
|
|
|
|
_converse.chatboxviews.get(this.getAttribute('jid'))?.emitBlurred(ev);
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-11 15:05:04 +01:00
|
|
|
|
getToolbarOptions () { // eslint-disable-line class-methods-use-this
|
|
|
|
|
return {};
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-11 15:05:04 +01: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;
|
2021-01-28 22:50:53 +01:00
|
|
|
|
}
|
2021-02-11 15:05:04 +01:00
|
|
|
|
evt.preventDefault();
|
|
|
|
|
this.model.sendFiles(evt.dataTransfer.files);
|
2021-01-28 22:50:53 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-11 15:05:04 +01:00
|
|
|
|
onDragOver (ev) { // eslint-disable-line class-methods-use-this
|
|
|
|
|
ev.preventDefault();
|
2021-01-28 22:50:53 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-24 15:06:20 +01:00
|
|
|
|
clearMessages (ev) {
|
2021-02-11 15:05:04 +01:00
|
|
|
|
ev?.preventDefault?.();
|
2021-02-24 15:06:20 +01:00
|
|
|
|
clearMessages(this.model);
|
2021-01-28 22:50:53 +01:00
|
|
|
|
}
|
|
|
|
|
|
2021-06-03 18:36:26 +02:00
|
|
|
|
async autocompleteInPicker (input, value) {
|
|
|
|
|
await api.emojis.initialize();
|
2020-12-08 12:54:14 +01:00
|
|
|
|
const emoji_picker = this.querySelector('converse-emoji-picker');
|
2021-06-03 19:11:32 +02:00
|
|
|
|
if (emoji_picker) {
|
2020-12-08 12:54:14 +01:00
|
|
|
|
emoji_picker.model.set({
|
|
|
|
|
'ac_position': input.selectionStart,
|
|
|
|
|
'autocompleting': value,
|
|
|
|
|
'query': value
|
|
|
|
|
});
|
2021-06-03 19:11:32 +02:00
|
|
|
|
const emoji_dropdown = this.querySelector('converse-emoji-dropdown');
|
|
|
|
|
emoji_dropdown?.showMenu();
|
2021-02-11 15:05:04 +01:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-12-08 12:54:14 +01:00
|
|
|
|
}
|
2021-02-11 15:05:04 +01:00
|
|
|
|
|
|
|
|
|
api.elements.define('converse-chat-bottom-panel', ChatBottomPanel);
|