xmpp.chapril.org-conversejs/src/converse-chatboxviews.js

180 lines
6.5 KiB
JavaScript
Raw Normal View History

// Converse.js
// https://conversejs.org
//
2019-02-18 19:17:06 +01:00
// Copyright (c) 2012-2019, the Converse.js developers
// Licensed under the Mozilla Public License (MPLv2)
/**
* @module converse-chatboxviews
*/
2018-10-23 03:41:38 +02:00
import "@converse/headless/converse-chatboxes";
import "backbone.nativeview";
2019-05-23 14:26:20 +02:00
import { Overview } from "backbone.overview";
2018-10-23 03:41:38 +02:00
import converse from "@converse/headless/converse-core";
import tpl_avatar from "templates/avatar.svg";
import tpl_background_logo from "templates/background_logo.html";
2018-10-23 03:41:38 +02:00
import tpl_chatboxes from "templates/chatboxes.html";
const { Backbone, _, utils } = converse.env;
const u = utils;
2018-10-23 03:41:38 +02:00
const AvatarMixin = {
2018-10-23 03:41:38 +02:00
renderAvatar (el) {
el = el || this.el;
const avatar_el = el.querySelector('canvas.avatar, svg.avatar');
if (avatar_el === null) {
2018-10-23 03:41:38 +02:00
return;
}
if (this.model.vcard) {
const data = {
'classes': avatar_el.getAttribute('class'),
'width': avatar_el.getAttribute('width'),
'height': avatar_el.getAttribute('height'),
}
const image_type = this.model.vcard.get('image_type');
const image = this.model.vcard.get('image');
data['image'] = "data:" + image_type + ";base64," + image;
avatar_el.outerHTML = tpl_avatar(data);
}
2018-10-23 03:41:38 +02:00
},
};
2018-10-23 03:41:38 +02:00
converse.plugins.add('converse-chatboxviews', {
dependencies: ["converse-chatboxes", "converse-vcard"],
2018-10-23 03:41:38 +02:00
overrides: {
// Overrides mentioned here will be picked up by converse.js's
// plugin architecture they will replace existing methods on the
// relevant objects or classes.
initStatus: function (reconnecting) {
const { _converse } = this.__super__;
if (!reconnecting && _converse.chatboxviews) {
2018-10-23 03:41:38 +02:00
_converse.chatboxviews.closeAllChatBoxes();
}
2018-10-23 03:41:38 +02:00
return this.__super__.initStatus.apply(this, arguments);
}
},
initialize () {
/* The initialize function gets called as soon as the plugin is
* loaded by converse.js's plugin machinery.
*/
2019-10-09 16:01:38 +02:00
const { _converse } = this;
2018-10-23 03:41:38 +02:00
2019-10-09 16:01:38 +02:00
_converse.api.promises.add(['chatBoxViewsInitialized']);
2018-10-23 03:41:38 +02:00
// Configuration values for this plugin
// ====================================
// Refer to docs/source/configuration.rst for explanations of these
// configuration settings.
_converse.api.settings.update({
2019-06-12 06:56:20 +02:00
'animate': true,
'theme': 'default'
});
2018-10-23 03:41:38 +02:00
_converse.ViewWithAvatar = Backbone.NativeView.extend(AvatarMixin);
_converse.VDOMViewWithAvatar = Backbone.VDOMView.extend(AvatarMixin);
2019-05-23 14:26:20 +02:00
_converse.ChatBoxViews = Overview.extend({
2018-10-23 03:41:38 +02:00
_ensureElement () {
/* Override method from backbone.js
* If the #conversejs element doesn't exist, create it.
*/
if (!this.el) {
let el = _converse.root.querySelector('#conversejs');
if (el === null) {
2018-10-23 03:41:38 +02:00
el = document.createElement('div');
el.setAttribute('id', 'conversejs');
u.addClass(`theme-${_converse.theme}`, el);
2018-10-23 03:41:38 +02:00
const body = _converse.root.querySelector('body');
if (body) {
body.appendChild(el);
} else {
// Perhaps inside a web component?
_converse.root.appendChild(el);
}
}
2018-10-23 03:41:38 +02:00
el.innerHTML = '';
this.setElement(el, false);
} else {
this.setElement(_.result(this, 'el'), false);
}
},
initialize () {
this.listenTo(this.model, "destroy", this.removeChat)
const bg = document.getElementById('conversejs-bg');
if (bg && !bg.innerHTML.trim()) {
bg.innerHTML = tpl_background_logo();
}
const body = document.querySelector('body');
body.classList.add(`converse-${_converse.view_mode}`);
2018-10-23 03:41:38 +02:00
this.el.classList.add(`converse-${_converse.view_mode}`);
if (_converse.singleton) {
this.el.classList.add(`converse-singleton`);
}
2018-10-23 03:41:38 +02:00
this.render();
},
render () {
try {
this.el.innerHTML = tpl_chatboxes();
} catch (e) {
this._ensureElement();
this.el.innerHTML = tpl_chatboxes();
}
this.row_el = this.el.querySelector('.row');
},
insertRowColumn (el) {
/* Add a new DOM element (likely a chat box) into the
* the row managed by this overview.
*/
this.row_el.insertAdjacentElement('afterBegin', el);
},
removeChat (item) {
this.remove(item.get('id'));
},
closeAllChatBoxes () {
/* This method gets overridden in src/converse-controlbox.js if
* the controlbox plugin is active.
*/
return Promise.all(this.map(v => v.close({'name': 'closeAllChatBoxes'})));
2018-10-23 03:41:38 +02:00
}
});
/************************ BEGIN Event Handlers ************************/
_converse.api.listen.on('chatBoxesInitialized', () => {
_converse.chatboxviews = new _converse.ChatBoxViews({
'model': _converse.chatboxes
});
2019-03-29 15:47:23 +01:00
/**
* Triggered once the _converse.ChatBoxViews view-colleciton has been initialized
* @event _converse#chatBoxViewsInitialized
* @example _converse.api.listen.on('chatBoxViewsInitialized', () => { ... });
*/
_converse.api.trigger('chatBoxViewsInitialized');
2018-10-23 03:41:38 +02:00
});
2018-10-23 03:41:38 +02:00
_converse.api.listen.on('clearSession', () => _converse.chatboxviews.closeAllChatBoxes());
function calculateViewportHeightUnit () {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
_converse.api.listen.on('chatBoxViewsInitialized', () => calculateViewportHeightUnit());
window.addEventListener('resize', () => calculateViewportHeightUnit());
2018-10-23 03:41:38 +02:00
/************************ END Event Handlers ************************/
}
});