191 lines
5.9 KiB
JavaScript
191 lines
5.9 KiB
JavaScript
import tpl_controlbox from './templates/controlbox.js';
|
|
import { render } from 'lit-html';
|
|
import { _converse, api, converse } from '@converse/headless/core';
|
|
|
|
const u = converse.env.utils;
|
|
|
|
/**
|
|
* Mixin which turns a ChatBoxView into a ControlBoxView.
|
|
*
|
|
* 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.
|
|
* @mixin
|
|
*/
|
|
const ControlBoxViewMixin = {
|
|
tagName: 'div',
|
|
className: 'chatbox',
|
|
id: 'controlbox',
|
|
events: {
|
|
'click a.close-chatbox-button': 'close'
|
|
},
|
|
|
|
initialize () {
|
|
if (_converse.controlboxtoggle === undefined) {
|
|
_converse.controlboxtoggle = new _converse.ControlBoxToggle();
|
|
}
|
|
_converse.controlboxtoggle.el.insertAdjacentElement('afterend', this.el);
|
|
|
|
this.listenTo(this.model, 'change:connected', this.onConnected);
|
|
this.listenTo(this.model, 'destroy', this.hide);
|
|
this.listenTo(this.model, 'hide', this.hide);
|
|
this.listenTo(this.model, 'show', this.show);
|
|
this.listenTo(this.model, 'change:closed', this.ensureClosedState);
|
|
this.render();
|
|
/**
|
|
* 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);
|
|
},
|
|
|
|
render () {
|
|
if (this.model.get('connected')) {
|
|
if (this.model.get('closed') === undefined) {
|
|
this.model.set('closed', !api.settings.get('show_controlbox_by_default'));
|
|
}
|
|
}
|
|
|
|
const tpl_result = tpl_controlbox({
|
|
'sticky_controlbox': api.settings.get('sticky_controlbox'),
|
|
...this.model.toJSON()
|
|
});
|
|
render(tpl_result, this.el);
|
|
|
|
if (!this.model.get('closed')) {
|
|
this.show();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
|
|
const connection = _converse?.connection || {};
|
|
if (!connection.connected || !connection.authenticated || connection.disconnecting) {
|
|
this.renderLoginPanel();
|
|
} else if (this.model.get('connected')) {
|
|
this.renderControlBoxPane();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
onConnected () {
|
|
if (this.model.get('connected')) {
|
|
this.render();
|
|
}
|
|
},
|
|
|
|
renderLoginPanel () {
|
|
this.el.classList.add('logged-out');
|
|
if (this.loginpanel) {
|
|
this.loginpanel.render();
|
|
} else {
|
|
this.loginpanel = new _converse.LoginPanel({
|
|
'model': new _converse.LoginPanelModel()
|
|
});
|
|
const panes = this.el.querySelector('.controlbox-panes');
|
|
panes.innerHTML = '';
|
|
panes.appendChild(this.loginpanel.render().el);
|
|
}
|
|
this.loginpanel.initPopovers();
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Renders the "Contacts" panel of the controlbox.
|
|
* This will only be called after the user has already been logged in.
|
|
* @private
|
|
* @method _converse.ControlBoxView.renderControlBoxPane
|
|
*/
|
|
renderControlBoxPane () {
|
|
if (this.loginpanel) {
|
|
this.loginpanel.remove();
|
|
delete this.loginpanel;
|
|
}
|
|
if (this.controlbox_pane && u.isVisible(this.controlbox_pane.el)) {
|
|
return;
|
|
}
|
|
this.el.classList.remove('logged-out');
|
|
this.controlbox_pane = new _converse.ControlBoxPane();
|
|
this.el
|
|
.querySelector('.controlbox-panes')
|
|
.insertAdjacentElement('afterBegin', this.controlbox_pane.el);
|
|
},
|
|
|
|
async close (ev) {
|
|
if (ev && ev.preventDefault) {
|
|
ev.preventDefault();
|
|
}
|
|
if (
|
|
ev?.name === 'closeAllChatBoxes' &&
|
|
(_converse.disconnection_cause !== _converse.LOGOUT ||
|
|
api.settings.get('show_controlbox_by_default'))
|
|
) {
|
|
return;
|
|
}
|
|
if (api.settings.get('sticky_controlbox')) {
|
|
return;
|
|
}
|
|
const connection = _converse?.connection || {};
|
|
if (connection.connected && !connection.disconnecting) {
|
|
await new Promise((resolve, reject) => {
|
|
return this.model.save(
|
|
{ 'closed': true },
|
|
{ 'success': resolve, 'error': reject, 'wait': true }
|
|
);
|
|
});
|
|
} else {
|
|
this.model.trigger('hide');
|
|
}
|
|
api.trigger('controlBoxClosed', this);
|
|
return this;
|
|
},
|
|
|
|
ensureClosedState () {
|
|
if (this.model.get('closed')) {
|
|
this.hide();
|
|
} else {
|
|
this.show();
|
|
}
|
|
},
|
|
|
|
hide (callback) {
|
|
if (api.settings.get('sticky_controlbox')) {
|
|
return;
|
|
}
|
|
u.addClass('hidden', this.el);
|
|
api.trigger('chatBoxClosed', this);
|
|
if (!api.connection.connected()) {
|
|
_converse.controlboxtoggle.render();
|
|
}
|
|
_converse.controlboxtoggle.show(callback);
|
|
return this;
|
|
},
|
|
|
|
onControlBoxToggleHidden () {
|
|
this.model.set('closed', false);
|
|
this.el.classList.remove('hidden');
|
|
/**
|
|
* Triggered once the controlbox has been opened
|
|
* @event _converse#controlBoxOpened
|
|
* @type {_converse.ControlBox}
|
|
*/
|
|
api.trigger('controlBoxOpened', this);
|
|
},
|
|
|
|
show () {
|
|
_converse.controlboxtoggle.hide(() => this.onControlBoxToggleHidden());
|
|
return this;
|
|
},
|
|
|
|
showHelpMessages () {
|
|
return;
|
|
}
|
|
};
|
|
|
|
export default ControlBoxViewMixin;
|