2020-12-04 22:05:43 +01:00
|
|
|
import log from "@converse/headless/log";
|
2020-12-29 12:23:39 +01:00
|
|
|
import tpl_controlbox_toggle from "./templates/toggle.js";
|
2020-12-04 22:05:43 +01:00
|
|
|
import { View } from "@converse/skeletor/src/view";
|
|
|
|
import { _converse, api, converse } from "@converse/headless/core";
|
|
|
|
import { addControlBox } from './utils.js';
|
2020-12-29 12:23:39 +01:00
|
|
|
import { render } from 'lit-html';
|
2020-12-04 22:05:43 +01:00
|
|
|
|
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
|
|
|
|
const ControlBoxToggle = View.extend({
|
|
|
|
tagName: 'a',
|
|
|
|
className: 'toggle-controlbox hidden',
|
|
|
|
id: 'toggle-controlbox',
|
|
|
|
events: {
|
|
|
|
'click': 'onClick'
|
|
|
|
},
|
|
|
|
attributes: {
|
|
|
|
'href': "#"
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
_converse.chatboxviews.insertRowColumn(this.render().el);
|
|
|
|
api.waitUntil('initialized')
|
|
|
|
.then(this.render.bind(this))
|
|
|
|
.catch(e => log.fatal(e));
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
// We let the render method of ControlBoxView decide whether
|
|
|
|
// the ControlBox or the Toggle must be shown. This prevents
|
|
|
|
// artifacts (i.e. on page load the toggle is shown only to then
|
|
|
|
// seconds later be hidden in favor of the controlbox).
|
2020-12-29 12:23:39 +01:00
|
|
|
render(tpl_controlbox_toggle(), this.el);
|
2020-12-04 22:05:43 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
hide (callback) {
|
|
|
|
if (u.isVisible(this.el)) {
|
|
|
|
u.hideElement(this.el);
|
|
|
|
callback();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
show (callback) {
|
|
|
|
if (!u.isVisible(this.el)) {
|
|
|
|
u.fadeIn(this.el, callback);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
showControlBox () {
|
|
|
|
let controlbox = _converse.chatboxes.get('controlbox');
|
|
|
|
if (!controlbox) {
|
|
|
|
controlbox = addControlBox();
|
|
|
|
}
|
|
|
|
if (api.connection.connected()) {
|
|
|
|
controlbox.save({'closed': false});
|
|
|
|
} else {
|
|
|
|
controlbox.trigger('show');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onClick (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
if (u.isVisible(_converse.root.querySelector("#controlbox"))) {
|
|
|
|
const controlbox = _converse.chatboxes.get('controlbox');
|
|
|
|
if (api.connection.connected) {
|
|
|
|
controlbox.save({closed: true});
|
|
|
|
} else {
|
|
|
|
controlbox.trigger('hide');
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.showControlBox();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
export default ControlBoxToggle;
|