${o.version_name}
+Open Source XMPP chat client brought to you by Opkode
+Translate it into your own language
` : '' } + `; +} + +api.elements.define('converse-brand-heading', component(ConverseBrandHeading, {'useShadowDOM': false})); diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js index 51d39cf91..a1c2d9b58 100644 --- a/src/converse-controlbox.js +++ b/src/converse-controlbox.js @@ -4,16 +4,17 @@ * @license Mozilla Public License (MPLv2) */ import "converse-chatview"; +import "./components/brand-heading"; import bootstrap from "bootstrap.native"; import log from "@converse/headless/log"; -import tpl_brand_heading from "templates/converse_brand_heading.html"; -import tpl_controlbox from "templates/controlbox.html"; +import tpl_controlbox from "templates/controlbox.js"; import tpl_controlbox_toggle from "templates/controlbox_toggle.html"; import tpl_login_panel from "templates/login_panel.js"; import { Model } from '@converse/skeletor/src/model.js'; import { View } from "@converse/skeletor/src/view"; import { __ } from './i18n'; import { _converse, api, converse } from "@converse/headless/converse-core"; +import { render } from 'lit-html'; const { Strophe, dayjs } = converse.env; const u = converse.env.utils; @@ -198,7 +199,12 @@ converse.plugins.add('converse-controlbox', { this.model.set('closed', !api.settings.get('show_controlbox_by_default')); } } - this.el.innerHTML = tpl_controlbox(Object.assign(this.model.toJSON())); + + const tpl_result = tpl_controlbox({ + 'sticky_controlbox': api.settings.get('sticky_controlbox'), + ...this.model.toJSON() + }); + render(tpl_result, this.el); if (!this.model.get('closed')) { this.show(); @@ -221,22 +227,6 @@ converse.plugins.add('converse-controlbox', { } }, - createBrandHeadingHTML () { - return tpl_brand_heading({ - 'sticky_controlbox': api.settings.get('sticky_controlbox') - }); - }, - - insertBrandHeading () { - const heading_el = this.el.querySelector('.brand-heading-container'); - if (heading_el === null) { - const el = this.el.querySelector('.controlbox-head'); - el.insertAdjacentHTML('beforeend', this.createBrandHeadingHTML()); - } else { - heading_el.outerHTML = this.createBrandHeadingHTML(); - } - }, - renderLoginPanel () { this.el.classList.add("logged-out"); if (this.loginpanel) { @@ -248,7 +238,6 @@ converse.plugins.add('converse-controlbox', { const panes = this.el.querySelector('.controlbox-panes'); panes.innerHTML = ''; panes.appendChild(this.loginpanel.render().el); - this.insertBrandHeading(); } this.loginpanel.initPopovers(); return this; diff --git a/src/converse-fullscreen.js b/src/converse-fullscreen.js index 0cc5ca86b..0e6c64045 100644 --- a/src/converse-fullscreen.js +++ b/src/converse-fullscreen.js @@ -7,8 +7,7 @@ import "@converse/headless/converse-muc"; import "converse-chatview"; import "converse-controlbox"; import "converse-singleton"; -import { _converse, api, converse } from "@converse/headless/converse-core"; -import tpl_brand_heading from "templates/inverse_brand_heading.html"; +import { api, converse } from "@converse/headless/converse-core"; converse.plugins.add('converse-fullscreen', { @@ -17,30 +16,6 @@ converse.plugins.add('converse-fullscreen', { return _converse.isUniView(); }, - 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. - // - // new functions which don't exist yet can also be added. - - ControlBoxView: { - createBrandHeadingHTML() { - return tpl_brand_heading({ - 'version_name': _converse.VERSION_NAME - }); - }, - - insertBrandHeading () { - const el = _converse.root.getElementById('converse-login-panel'); - el.parentNode.insertAdjacentHTML( - 'afterbegin', - this.createBrandHeadingHTML() - ); - } - } - }, - initialize () { api.settings.extend({ chatview_avatar_height: 50, diff --git a/src/templates/controlbox.html b/src/templates/controlbox.html deleted file mode 100644 index fe0dceb37..000000000 --- a/src/templates/controlbox.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/src/templates/controlbox.js b/src/templates/controlbox.js new file mode 100644 index 000000000..e4e79ab33 --- /dev/null +++ b/src/templates/controlbox.js @@ -0,0 +1,9 @@ +import { html } from 'lit-html'; + +export default (o) => html` + `; diff --git a/src/templates/converse_brand_heading.html b/src/templates/converse_brand_heading.html deleted file mode 100644 index 65cbef222..000000000 --- a/src/templates/converse_brand_heading.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - converse.js - - - diff --git a/src/templates/inverse_brand_heading.html b/src/templates/inverse_brand_heading.html deleted file mode 100644 index 5c96b2c9c..000000000 --- a/src/templates/inverse_brand_heading.html +++ /dev/null @@ -1,32 +0,0 @@ -{{{o.version_name}}}
-Open Source XMPP chat client brought to you by Opkode
-Translate it into your own language
-