2019-07-11 10:48:52 +02:00
|
|
|
/**
|
|
|
|
* @module converse-chatboxviews
|
2020-01-26 16:21:20 +01:00
|
|
|
* @copyright 2020, the Converse.js contributors
|
|
|
|
* @license Mozilla Public License (MPLv2)
|
2019-07-11 10:48:52 +02:00
|
|
|
*/
|
2020-12-04 23:06:42 +01:00
|
|
|
import '../../components/converse.js';
|
|
|
|
import '@converse/headless/plugins/chatboxes';
|
|
|
|
import tpl_avatar from '../../templates/avatar.js';
|
|
|
|
import tpl_background_logo from '../../templates/background_logo.js';
|
|
|
|
import tpl_converse from '../../templates/converse.js';
|
|
|
|
import { Overview } from '@converse/skeletor/src/overview';
|
|
|
|
import { View } from '@converse/skeletor/src/view';
|
|
|
|
import { _converse, api, converse } from '@converse/headless/core';
|
|
|
|
import { render } from 'lit-html';
|
|
|
|
import { result } from 'lodash-es';
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2020-01-23 10:18:41 +01:00
|
|
|
const u = converse.env.utils;
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
const AvatarMixin = {
|
|
|
|
renderAvatar (el) {
|
|
|
|
el = el || this.el;
|
2019-06-26 10:24:27 +02:00
|
|
|
const avatar_el = el.querySelector('canvas.avatar, svg.avatar');
|
2019-08-05 01:39:57 +02:00
|
|
|
if (avatar_el === null) {
|
2018-10-23 03:41:38 +02:00
|
|
|
return;
|
|
|
|
}
|
2019-04-09 20:34:23 +02:00
|
|
|
if (this.model.vcard) {
|
2019-04-17 11:52:41 +02:00
|
|
|
const data = {
|
2019-06-26 10:24:27 +02:00
|
|
|
'classes': avatar_el.getAttribute('class'),
|
|
|
|
'width': avatar_el.getAttribute('width'),
|
|
|
|
'height': avatar_el.getAttribute('height'),
|
2020-12-04 23:06:42 +01:00
|
|
|
'image_type': this.model.vcard.get('image_type'),
|
|
|
|
'image': this.model.vcard.get('image')
|
|
|
|
};
|
2020-09-26 21:07:46 +02:00
|
|
|
avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
|
2019-04-09 20:34:23 +02:00
|
|
|
}
|
2020-12-04 23:06:42 +01:00
|
|
|
}
|
2018-10-23 03:41:38 +02:00
|
|
|
};
|
2018-09-06 15:22:14 +02:00
|
|
|
|
2020-09-09 14:37:43 +02:00
|
|
|
const ViewWithAvatar = View.extend(AvatarMixin);
|
|
|
|
|
|
|
|
const ChatBoxViews = Overview.extend({
|
|
|
|
_ensureElement () {
|
|
|
|
/* Override method from backbone.js
|
2020-12-04 23:06:42 +01:00
|
|
|
* If the #conversejs element doesn't exist, create it.
|
|
|
|
*/
|
2020-09-09 14:37:43 +02:00
|
|
|
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 () {
|
2020-12-04 23:06:42 +01:00
|
|
|
this.listenTo(this.model, 'destroy', this.removeChat);
|
2020-09-09 14:37:43 +02:00
|
|
|
const bg = document.getElementById('conversejs-bg');
|
|
|
|
if (bg && !bg.innerHTML.trim()) {
|
2020-09-26 13:13:50 +02:00
|
|
|
render(tpl_background_logo(), bg);
|
2020-09-09 14:37:43 +02:00
|
|
|
}
|
|
|
|
const body = document.querySelector('body');
|
2020-12-04 23:06:42 +01:00
|
|
|
body.classList.add(`converse-${api.settings.get('view_mode')}`);
|
|
|
|
this.el.classList.add(`converse-${api.settings.get('view_mode')}`);
|
|
|
|
if (api.settings.get('singleton')) {
|
2020-09-09 14:37:43 +02:00
|
|
|
this.el.classList.add(`converse-singleton`);
|
|
|
|
}
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
this._ensureElement();
|
|
|
|
render(tpl_converse(), this.el);
|
|
|
|
this.row_el = this.el.querySelector('.row');
|
|
|
|
},
|
|
|
|
|
2020-12-04 23:06:42 +01:00
|
|
|
/**
|
2020-09-09 14:37:43 +02:00
|
|
|
* 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 () {
|
2020-12-04 23:06:42 +01:00
|
|
|
return Promise.all(this.map(v => v.close({ 'name': 'closeAllChatBoxes' })));
|
2020-09-09 14:37:43 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2020-09-21 17:52:00 +02:00
|
|
|
function onChatBoxViewsInitialized () {
|
|
|
|
_converse.chatboxviews = new _converse.ChatBoxViews({
|
|
|
|
'model': _converse.chatboxes
|
|
|
|
});
|
|
|
|
/**
|
|
|
|
* Triggered once the _converse.ChatBoxViews view-colleciton has been initialized
|
|
|
|
* @event _converse#chatBoxViewsInitialized
|
|
|
|
* @example _converse.api.listen.on('chatBoxViewsInitialized', () => { ... });
|
|
|
|
*/
|
|
|
|
api.trigger('chatBoxViewsInitialized');
|
|
|
|
}
|
|
|
|
|
|
|
|
function calculateViewportHeightUnit () {
|
|
|
|
const vh = window.innerHeight * 0.01;
|
|
|
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|
|
|
}
|
|
|
|
|
2018-10-23 03:41:38 +02:00
|
|
|
converse.plugins.add('converse-chatboxviews', {
|
2020-12-04 23:06:42 +01:00
|
|
|
dependencies: ['converse-chatboxes', 'converse-vcard'],
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
initialize () {
|
|
|
|
/* The initialize function gets called as soon as the plugin is
|
|
|
|
* loaded by converse.js's plugin machinery.
|
|
|
|
*/
|
2020-07-01 21:45:18 +02:00
|
|
|
api.elements.register();
|
|
|
|
|
2020-03-31 13:15:57 +02:00
|
|
|
api.promises.add(['chatBoxViewsInitialized']);
|
2018-10-23 03:41:38 +02:00
|
|
|
|
2018-11-14 15:56:28 +01:00
|
|
|
// Configuration values for this plugin
|
|
|
|
// ====================================
|
|
|
|
// Refer to docs/source/configuration.rst for explanations of these
|
|
|
|
// configuration settings.
|
2020-06-03 09:17:13 +02:00
|
|
|
api.settings.extend({
|
2019-06-12 06:56:20 +02:00
|
|
|
'animate': true,
|
|
|
|
'theme': 'default'
|
2018-11-14 15:56:28 +01:00
|
|
|
});
|
|
|
|
|
2020-09-09 14:37:43 +02:00
|
|
|
_converse.ViewWithAvatar = ViewWithAvatar;
|
|
|
|
_converse.ChatBoxViews = ChatBoxViews;
|
2018-10-23 03:41:38 +02:00
|
|
|
|
|
|
|
/************************ BEGIN Event Handlers ************************/
|
2020-09-21 17:52:00 +02:00
|
|
|
api.listen.on('chatBoxesInitialized', onChatBoxViewsInitialized);
|
2020-12-04 23:06:42 +01:00
|
|
|
api.listen.on('cleanup', () => delete _converse.chatboxviews);
|
2020-03-31 13:15:57 +02:00
|
|
|
api.listen.on('clearSession', () => _converse.chatboxviews.closeAllChatBoxes());
|
2020-09-21 17:52:00 +02:00
|
|
|
api.listen.on('chatBoxViewsInitialized', calculateViewportHeightUnit);
|
|
|
|
window.addEventListener('resize', calculateViewportHeightUnit);
|
2018-10-23 03:41:38 +02:00
|
|
|
/************************ END Event Handlers ************************/
|
2020-06-10 12:30:52 +02:00
|
|
|
|
|
|
|
Object.assign(converse, {
|
|
|
|
/**
|
|
|
|
* Public API method which will ensure that the #conversejs element
|
|
|
|
* is inserted into a container element.
|
|
|
|
*
|
|
|
|
* This method is useful when the #conversejs element has been
|
|
|
|
* detached from the DOM somehow.
|
|
|
|
* @async
|
|
|
|
* @memberOf converse
|
|
|
|
* @method insertInto
|
|
|
|
* @example
|
|
|
|
* converse.insertInto(document.querySelector('#converse-container'));
|
|
|
|
*/
|
|
|
|
insertInto (container) {
|
|
|
|
const el = _converse.chatboxviews?.el;
|
|
|
|
if (el && !container.contains(el)) {
|
|
|
|
container.insertAdjacentElement('afterBegin', el);
|
2020-12-04 23:06:42 +01:00
|
|
|
api.chatviews
|
|
|
|
.get()
|
2020-07-28 10:41:07 +02:00
|
|
|
.filter(v => v.model.get('id') !== 'controlbox')
|
|
|
|
.forEach(v => v.maintainScrollTop());
|
2020-06-10 12:30:52 +02:00
|
|
|
} else if (!el) {
|
2020-12-04 23:06:42 +01:00
|
|
|
throw new Error('Cannot insert non-existing #conversejs element into the DOM');
|
2020-06-10 12:30:52 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2018-10-23 03:41:38 +02:00
|
|
|
}
|
|
|
|
});
|