76 lines
2.4 KiB
JavaScript
76 lines
2.4 KiB
JavaScript
![]() |
import tpl_background_logo from '../../templates/background_logo.js';
|
||
|
import tpl_converse from '../../templates/converse.js';
|
||
|
import { Overview } from '@converse/skeletor/src/overview';
|
||
|
import { render } from 'lit-html';
|
||
|
import { result } from 'lodash-es';
|
||
|
import { _converse, api, converse } from '@converse/headless/core';
|
||
|
|
||
|
const u = converse.env.utils;
|
||
|
|
||
|
|
||
|
const ChatBoxViews = Overview.extend({
|
||
|
_ensureElement () {
|
||
|
/* Override method from backbone.js
|
||
|
* If the #conversejs element doesn't exist, create it.
|
||
|
*/
|
||
|
if (this.el) {
|
||
|
this.setElement(result(this, 'el'), false);
|
||
|
} else {
|
||
|
let el = _converse.root.querySelector('#conversejs');
|
||
|
if (el === null) {
|
||
|
el = document.createElement('div');
|
||
|
el.setAttribute('id', 'conversejs');
|
||
|
u.addClass(`theme-${api.settings.get('theme')}`, el);
|
||
|
const body = _converse.root.querySelector('body');
|
||
|
if (body) {
|
||
|
body.appendChild(el);
|
||
|
} else {
|
||
|
// Perhaps inside a web component?
|
||
|
_converse.root.appendChild(el);
|
||
|
}
|
||
|
}
|
||
|
this.setElement(el, false);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
initialize () {
|
||
|
this.listenTo(this.model, 'destroy', this.removeChat);
|
||
|
const bg = document.getElementById('conversejs-bg');
|
||
|
if (bg && !bg.innerHTML.trim()) {
|
||
|
render(tpl_background_logo(), bg);
|
||
|
}
|
||
|
const body = document.querySelector('body');
|
||
|
body.classList.add(`converse-${api.settings.get('view_mode')}`);
|
||
|
this.el.classList.add(`converse-${api.settings.get('view_mode')}`);
|
||
|
if (api.settings.get('singleton')) {
|
||
|
this.el.classList.add(`converse-singleton`);
|
||
|
}
|
||
|
this.render();
|
||
|
},
|
||
|
|
||
|
render () {
|
||
|
this._ensureElement();
|
||
|
render(tpl_converse(), this.el);
|
||
|
this.row_el = this.el.querySelector('.row');
|
||
|
},
|
||
|
|
||
|
/**
|
||
|
* Add a new DOM element (likely a chat box) into the
|
||
|
* the row managed by this overview.
|
||
|
* @param { HTMLElement } el
|
||
|
*/
|
||
|
insertRowColumn (el) {
|
||
|
this.row_el.insertAdjacentElement('afterBegin', el);
|
||
|
},
|
||
|
|
||
|
removeChat (item) {
|
||
|
this.remove(item.get('id'));
|
||
|
},
|
||
|
|
||
|
closeAllChatBoxes () {
|
||
|
return Promise.all(this.map(v => v.close({ 'name': 'closeAllChatBoxes' })));
|
||
|
}
|
||
|
});
|
||
|
|
||
|
export default ChatBoxViews;
|