2023-02-15 14:19:48 +01:00
|
|
|
import tplControlbox from './templates/controlbox.js';
|
2022-04-23 12:01:41 +02:00
|
|
|
import { CustomElement } from 'shared/components/element.js';
|
|
|
|
import { _converse, api, converse } from '@converse/headless/core.js';
|
2023-03-02 12:18:26 +01:00
|
|
|
import { LOGOUT } from '@converse/headless/shared/constants.js';
|
2020-12-04 22:05:43 +01:00
|
|
|
|
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The ControlBox is the section of the chat that contains the open groupchats,
|
|
|
|
* bookmarks and roster.
|
|
|
|
*
|
|
|
|
* In `overlayed` `view_mode` it's a box like the chat boxes, in `fullscreen`
|
|
|
|
* `view_mode` it's a left-aligned sidebar.
|
|
|
|
*/
|
2022-04-23 12:01:41 +02:00
|
|
|
class ControlBox extends CustomElement {
|
2020-12-04 22:05:43 +01:00
|
|
|
|
|
|
|
initialize () {
|
2021-01-25 16:07:42 +01:00
|
|
|
this.setModel();
|
2021-01-22 15:31:59 +01:00
|
|
|
_converse.chatboxviews.add('controlbox', this);
|
2022-04-23 12:01:41 +02:00
|
|
|
if (this.model.get('connected') && this.model.get('closed') === undefined) {
|
|
|
|
this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
|
|
|
|
}
|
|
|
|
this.requestUpdate();
|
|
|
|
|
2020-12-04 22:05:43 +01:00
|
|
|
/**
|
|
|
|
* Triggered when the _converse.ControlBoxView has been initialized and therefore
|
|
|
|
* exists. The controlbox contains the login and register forms when the user is
|
|
|
|
* logged out and a list of the user's contacts and group chats when logged in.
|
|
|
|
* @event _converse#controlBoxInitialized
|
|
|
|
* @type { _converse.ControlBoxView }
|
|
|
|
* @example _converse.api.listen.on('controlBoxInitialized', view => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('controlBoxInitialized', this);
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-12-04 22:05:43 +01:00
|
|
|
|
2021-01-25 16:07:42 +01:00
|
|
|
setModel () {
|
|
|
|
this.model = _converse.chatboxes.get('controlbox');
|
2022-04-23 13:31:51 +02:00
|
|
|
this.listenTo(_converse.connfeedback, 'change:connection_status', () => this.requestUpdate());
|
2022-04-23 12:01:41 +02:00
|
|
|
this.listenTo(this.model, 'change:active-form', () => this.requestUpdate());
|
|
|
|
this.listenTo(this.model, 'change:connected', () => this.requestUpdate());
|
2021-01-29 15:27:54 +01:00
|
|
|
this.listenTo(this.model, 'change:closed', () => !this.model.get('closed') && this.afterShown());
|
2022-04-23 12:01:41 +02:00
|
|
|
this.requestUpdate();
|
2021-01-25 16:07:42 +01:00
|
|
|
}
|
|
|
|
|
2020-12-04 22:05:43 +01:00
|
|
|
render () {
|
2023-02-15 14:19:48 +01:00
|
|
|
return this.model ? tplControlbox(this) : '';
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-12-04 22:05:43 +01:00
|
|
|
|
2021-01-28 22:50:53 +01:00
|
|
|
close (ev) {
|
|
|
|
ev?.preventDefault?.();
|
2020-12-04 22:05:43 +01:00
|
|
|
if (
|
|
|
|
ev?.name === 'closeAllChatBoxes' &&
|
2023-03-02 12:18:26 +01:00
|
|
|
(_converse.disconnection_cause !== LOGOUT ||
|
2020-12-04 22:05:43 +01:00
|
|
|
api.settings.get('show_controlbox_by_default'))
|
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (api.settings.get('sticky_controlbox')) {
|
|
|
|
return;
|
|
|
|
}
|
2021-01-28 22:50:53 +01:00
|
|
|
u.safeSave(this.model, { 'closed': true });
|
2020-12-04 22:05:43 +01:00
|
|
|
api.trigger('controlBoxClosed', this);
|
|
|
|
return this;
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
2020-12-04 22:05:43 +01:00
|
|
|
|
2021-01-29 15:27:54 +01:00
|
|
|
afterShown () {
|
2020-12-04 22:05:43 +01:00
|
|
|
/**
|
|
|
|
* Triggered once the controlbox has been opened
|
|
|
|
* @event _converse#controlBoxOpened
|
|
|
|
* @type {_converse.ControlBox}
|
|
|
|
*/
|
|
|
|
api.trigger('controlBoxOpened', this);
|
|
|
|
return this;
|
2020-12-08 12:54:14 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-22 20:53:59 +01:00
|
|
|
api.elements.define('converse-controlbox', ControlBox);
|
2020-12-04 22:05:43 +01:00
|
|
|
|
2021-02-22 20:53:59 +01:00
|
|
|
export default ControlBox;
|