Move converse-chatboxviews plugin into folder
This commit is contained in:
parent
4c1813d6d4
commit
ecfaba0781
@ -1,4 +1,4 @@
|
|||||||
import { converse } from "../../core.js";
|
import { api, converse } from "../../core.js";
|
||||||
import { Model } from '@converse/skeletor/src/model.js';
|
import { Model } from '@converse/skeletor/src/model.js';
|
||||||
|
|
||||||
const u = converse.env.utils;
|
const u = converse.env.utils;
|
||||||
|
@ -3,22 +3,20 @@
|
|||||||
* @copyright 2020, the Converse.js contributors
|
* @copyright 2020, the Converse.js contributors
|
||||||
* @license Mozilla Public License (MPLv2)
|
* @license Mozilla Public License (MPLv2)
|
||||||
*/
|
*/
|
||||||
import '../components/converse.js';
|
import '../../components/converse.js';
|
||||||
import "@converse/headless/plugins/chatboxes";
|
import '@converse/headless/plugins/chatboxes';
|
||||||
import tpl_avatar from "../templates/avatar.js";
|
import tpl_avatar from '../../templates/avatar.js';
|
||||||
import tpl_background_logo from "../templates/background_logo.js";
|
import tpl_background_logo from '../../templates/background_logo.js';
|
||||||
import tpl_converse from "../templates/converse.js";
|
import tpl_converse from '../../templates/converse.js';
|
||||||
import { Overview } from "@converse/skeletor/src/overview";
|
import { Overview } from '@converse/skeletor/src/overview';
|
||||||
import { View } from "@converse/skeletor/src/view";
|
import { View } from '@converse/skeletor/src/view';
|
||||||
import { _converse, api, converse } from "@converse/headless/core";
|
import { _converse, api, converse } from '@converse/headless/core';
|
||||||
import { render } from "lit-html";
|
import { render } from 'lit-html';
|
||||||
import { result } from "lodash-es";
|
import { result } from 'lodash-es';
|
||||||
|
|
||||||
const u = converse.env.utils;
|
const u = converse.env.utils;
|
||||||
|
|
||||||
|
|
||||||
const AvatarMixin = {
|
const AvatarMixin = {
|
||||||
|
|
||||||
renderAvatar (el) {
|
renderAvatar (el) {
|
||||||
el = el || this.el;
|
el = el || this.el;
|
||||||
const avatar_el = el.querySelector('canvas.avatar, svg.avatar');
|
const avatar_el = el.querySelector('canvas.avatar, svg.avatar');
|
||||||
@ -30,24 +28,21 @@ const AvatarMixin = {
|
|||||||
'classes': avatar_el.getAttribute('class'),
|
'classes': avatar_el.getAttribute('class'),
|
||||||
'width': avatar_el.getAttribute('width'),
|
'width': avatar_el.getAttribute('width'),
|
||||||
'height': avatar_el.getAttribute('height'),
|
'height': avatar_el.getAttribute('height'),
|
||||||
'image_type': this.model.vcard.get('image_type'),
|
'image_type': this.model.vcard.get('image_type'),
|
||||||
'image': this.model.vcard.get('image')
|
'image': this.model.vcard.get('image')
|
||||||
}
|
};
|
||||||
avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
|
avatar_el.outerHTML = u.getElementFromTemplateResult(tpl_avatar(data)).outerHTML;
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const ViewWithAvatar = View.extend(AvatarMixin);
|
const ViewWithAvatar = View.extend(AvatarMixin);
|
||||||
|
|
||||||
|
|
||||||
const ChatBoxViews = Overview.extend({
|
const ChatBoxViews = Overview.extend({
|
||||||
|
|
||||||
_ensureElement () {
|
_ensureElement () {
|
||||||
/* Override method from backbone.js
|
/* Override method from backbone.js
|
||||||
* If the #conversejs element doesn't exist, create it.
|
* If the #conversejs element doesn't exist, create it.
|
||||||
*/
|
*/
|
||||||
if (this.el) {
|
if (this.el) {
|
||||||
this.setElement(result(this, 'el'), false);
|
this.setElement(result(this, 'el'), false);
|
||||||
} else {
|
} else {
|
||||||
@ -69,15 +64,15 @@ const ChatBoxViews = Overview.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
initialize () {
|
initialize () {
|
||||||
this.listenTo(this.model, "destroy", this.removeChat)
|
this.listenTo(this.model, 'destroy', this.removeChat);
|
||||||
const bg = document.getElementById('conversejs-bg');
|
const bg = document.getElementById('conversejs-bg');
|
||||||
if (bg && !bg.innerHTML.trim()) {
|
if (bg && !bg.innerHTML.trim()) {
|
||||||
render(tpl_background_logo(), bg);
|
render(tpl_background_logo(), bg);
|
||||||
}
|
}
|
||||||
const body = document.querySelector('body');
|
const body = document.querySelector('body');
|
||||||
body.classList.add(`converse-${api.settings.get("view_mode")}`);
|
body.classList.add(`converse-${api.settings.get('view_mode')}`);
|
||||||
this.el.classList.add(`converse-${api.settings.get("view_mode")}`);
|
this.el.classList.add(`converse-${api.settings.get('view_mode')}`);
|
||||||
if (api.settings.get("singleton")) {
|
if (api.settings.get('singleton')) {
|
||||||
this.el.classList.add(`converse-singleton`);
|
this.el.classList.add(`converse-singleton`);
|
||||||
}
|
}
|
||||||
this.render();
|
this.render();
|
||||||
@ -89,7 +84,7 @@ const ChatBoxViews = Overview.extend({
|
|||||||
this.row_el = this.el.querySelector('.row');
|
this.row_el = this.el.querySelector('.row');
|
||||||
},
|
},
|
||||||
|
|
||||||
/*(
|
/**
|
||||||
* Add a new DOM element (likely a chat box) into the
|
* Add a new DOM element (likely a chat box) into the
|
||||||
* the row managed by this overview.
|
* the row managed by this overview.
|
||||||
* @param { HTMLElement } el
|
* @param { HTMLElement } el
|
||||||
@ -103,11 +98,10 @@ const ChatBoxViews = Overview.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
closeAllChatBoxes () {
|
closeAllChatBoxes () {
|
||||||
return Promise.all(this.map(v => v.close({'name': 'closeAllChatBoxes'})));
|
return Promise.all(this.map(v => v.close({ 'name': 'closeAllChatBoxes' })));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
function onChatBoxViewsInitialized () {
|
function onChatBoxViewsInitialized () {
|
||||||
_converse.chatboxviews = new _converse.ChatBoxViews({
|
_converse.chatboxviews = new _converse.ChatBoxViews({
|
||||||
'model': _converse.chatboxes
|
'model': _converse.chatboxes
|
||||||
@ -120,17 +114,13 @@ function onChatBoxViewsInitialized () {
|
|||||||
api.trigger('chatBoxViewsInitialized');
|
api.trigger('chatBoxViewsInitialized');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function calculateViewportHeightUnit () {
|
function calculateViewportHeightUnit () {
|
||||||
const vh = window.innerHeight * 0.01;
|
const vh = window.innerHeight * 0.01;
|
||||||
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
converse.plugins.add('converse-chatboxviews', {
|
converse.plugins.add('converse-chatboxviews', {
|
||||||
|
dependencies: ['converse-chatboxes', 'converse-vcard'],
|
||||||
dependencies: ["converse-chatboxes", "converse-vcard"],
|
|
||||||
|
|
||||||
|
|
||||||
initialize () {
|
initialize () {
|
||||||
/* The initialize function gets called as soon as the plugin is
|
/* The initialize function gets called as soon as the plugin is
|
||||||
@ -154,13 +144,12 @@ converse.plugins.add('converse-chatboxviews', {
|
|||||||
|
|
||||||
/************************ BEGIN Event Handlers ************************/
|
/************************ BEGIN Event Handlers ************************/
|
||||||
api.listen.on('chatBoxesInitialized', onChatBoxViewsInitialized);
|
api.listen.on('chatBoxesInitialized', onChatBoxViewsInitialized);
|
||||||
api.listen.on('cleanup', () => (delete _converse.chatboxviews));
|
api.listen.on('cleanup', () => delete _converse.chatboxviews);
|
||||||
api.listen.on('clearSession', () => _converse.chatboxviews.closeAllChatBoxes());
|
api.listen.on('clearSession', () => _converse.chatboxviews.closeAllChatBoxes());
|
||||||
api.listen.on('chatBoxViewsInitialized', calculateViewportHeightUnit);
|
api.listen.on('chatBoxViewsInitialized', calculateViewportHeightUnit);
|
||||||
window.addEventListener('resize', calculateViewportHeightUnit);
|
window.addEventListener('resize', calculateViewportHeightUnit);
|
||||||
/************************ END Event Handlers ************************/
|
/************************ END Event Handlers ************************/
|
||||||
|
|
||||||
|
|
||||||
Object.assign(converse, {
|
Object.assign(converse, {
|
||||||
/**
|
/**
|
||||||
* Public API method which will ensure that the #conversejs element
|
* Public API method which will ensure that the #conversejs element
|
||||||
@ -178,12 +167,12 @@ converse.plugins.add('converse-chatboxviews', {
|
|||||||
const el = _converse.chatboxviews?.el;
|
const el = _converse.chatboxviews?.el;
|
||||||
if (el && !container.contains(el)) {
|
if (el && !container.contains(el)) {
|
||||||
container.insertAdjacentElement('afterBegin', el);
|
container.insertAdjacentElement('afterBegin', el);
|
||||||
api.chatviews.get()
|
api.chatviews
|
||||||
|
.get()
|
||||||
.filter(v => v.model.get('id') !== 'controlbox')
|
.filter(v => v.model.get('id') !== 'controlbox')
|
||||||
.forEach(v => v.maintainScrollTop());
|
.forEach(v => v.maintainScrollTop());
|
||||||
|
|
||||||
} else if (!el) {
|
} else if (!el) {
|
||||||
throw new Error("Cannot insert non-existing #conversejs element into the DOM");
|
throw new Error('Cannot insert non-existing #conversejs element into the DOM');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
@ -6,7 +6,7 @@
|
|||||||
import '../components/chat_content.js';
|
import '../components/chat_content.js';
|
||||||
import '../components/help_messages.js';
|
import '../components/help_messages.js';
|
||||||
import '../components/toolbar.js';
|
import '../components/toolbar.js';
|
||||||
import './chatboxviews';
|
import './chatboxviews/index.js';
|
||||||
import './modal.js';
|
import './modal.js';
|
||||||
import log from '@converse/headless/log';
|
import log from '@converse/headless/log';
|
||||||
import tpl_chatbox from 'templates/chatbox.js';
|
import tpl_chatbox from 'templates/chatbox.js';
|
||||||
|
Loading…
Reference in New Issue
Block a user