Use lit-html to render MUC heading

spec/minchats.js

@@ -4,7 +4,6 @@
     const _ = converse.env._;
     const  $msg = converse.env.$msg;
     const u = converse.env.utils;
-    const Strophe = converse.env.Strophe;
 
     describe("The Minimized Chats Widget", function () {
 

src/converse-bookmark-views.js

@@ -7,6 +7,7 @@
 import "@converse/headless/converse-muc";
 import { Model } from 'skeletor.js/src/model.js';
 import { View } from 'skeletor.js/src/view.js';
+import { html } from "lit-html";
 import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import tpl_bookmarks_list from "templates/bookmarks_list.js"
@@ -39,15 +40,21 @@ converse.plugins.add('converse-bookmark-views', {
             events: {
                 'click .toggle-bookmark': 'toggleBookmark'
             },
-            async renderHeading () {
-                this.__super__.renderHeading.apply(this, arguments);
+            getHeadingButtons () {
                 const { _converse } = this.__super__;
+                const buttons = this.__super__.getHeadingButtons.call(this);
                 if (_converse.allow_bookmarks) {
-                    const supported = await _converse.checkBookmarksSupport();
-                    if (supported) {
-                        this.renderBookmarkToggle();
-                    }
+                    const supported = _converse.checkBookmarksSupport();
+                    const info_minimize = __('Minimize this chat box');
+                    const info_toggle_bookmark = this.model.get('bookmarked') ? __('Unbookmark this groupchat') : __('Bookmark this groupchat');
+                    const bookmarked = this.model.get('bookmarked');
+                    const template = html`<a class="chatbox-btn toggle-bookmark fa fa-bookmark ${bookmarked ? 'button-on' : ''}" title="${info_toggle_bookmark}"></a>`;
+                    const names = buttons.map(t => t.name);
+                    const idx = names.indexOf('configure');
+                    const template_promise = supported.then(s => s ? template : '');
+                    return idx > -1 ? [...buttons.slice(0, idx), template_promise, ...buttons.slice(idx)] : [template_promise, ...buttons];
                 }
+                return buttons;
             }
         }
     },
@@ -96,9 +103,6 @@ converse.plugins.add('converse-bookmark-views', {
         const bookmarkableChatRoomView = {
 
             renderBookmarkToggle () {
-                if (this.el.querySelector('.chat-head .toggle-bookmark')) {
-                    return;
-                }
                 const bookmark_button = tpl_chatroom_bookmark_toggle(
                     _.assignIn(this.model.toJSON(), {
                         'info_toggle_bookmark': this.model.get('bookmarked') ?

src/converse-minimize.js

@@ -7,6 +7,8 @@ import "converse-chatview";
 import { Model } from 'skeletor.js/src/model.js';
 import { Overview } from "skeletor.js/src/overview";
 import { View } from "skeletor.js/src/view";
+import { __ } from '@converse/headless/i18n';
+import { html } from "lit-html";
 import converse from "@converse/headless/converse-core";
 import tpl_chatbox_minimize from "templates/chatbox_minimize.html";
 import tpl_chats_panel from "templates/chats_panel.html";
@@ -148,21 +150,13 @@ converse.plugins.add('converse-minimize', {
                 return result;
             },
 
-            generateHeadingHTML () {
-                const { _converse } = this.__super__,
-                    { __ } = _converse;
-                const html = this.__super__.generateHeadingHTML.apply(this, arguments);
-                const div = document.createElement('div');
-                div.innerHTML = html;
-                const buttons_row = div.querySelector('.chatbox-title__buttons')
-                const button = buttons_row.querySelector('.close-chatbox-button');
-                const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')})
-                if (button) {
-                    button.insertAdjacentHTML('afterend', minimize_el);
-                } else {
-                    buttons_row.insertAdjacentHTML('beforeEnd', minimize_el);
-                }
-                return div.innerHTML;
+            getHeadingButtons () {
+                const buttons = this.__super__.getHeadingButtons.call(this);
+                const info_minimize = __('Minimize this chat box');
+                const template = html`<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="${info_minimize}"></a>`;
+                const names = buttons.map(t => t.name);
+                const idx = names.indexOf('signout');
+                return idx > -1 ? [...buttons.slice(0, idx+1), template, ...buttons.slice(idx+1)] : [template, ...buttons];
             }
         }
     },

src/converse-muc-views.js

@@ -6,9 +6,10 @@
  */
 import "converse-modal";
 import "@converse/headless/utils/muc";
-import { get, head, isString, isUndefined } from "lodash";
-import { View } from 'skeletor.js/src/view.js';
 import { Model } from 'skeletor.js/src/model.js';
+import { View } from 'skeletor.js/src/view.js';
+import { get, head, isString, isUndefined } from "lodash";
+import { html, render } from "lit-html";
 import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
@@ -20,7 +21,7 @@ import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html";
 import tpl_chatroom_details_modal from "templates/chatroom_details_modal.js";
 import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html";
 import tpl_muc_config_form from "templates/muc_config_form.js";
-import tpl_chatroom_head from "templates/chatroom_head.html";
+import tpl_chatroom_head from "templates/chatroom_head.js";
 import tpl_muc_invite_modal from "templates/muc_invite_modal.js";
 import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html";
 import tpl_muc_password_form from "templates/muc_password_form.js";
@@ -737,7 +738,7 @@ converse.plugins.add('converse-muc-views', {
                 const changed = item === null ? [] : Object.keys(item.changed);
                 const keys = ['affiliation', 'bookmarked', 'jid', 'name', 'description', 'subject'];
                 if (item === null || changed.filter(v => keys.includes(v)).length) {
-                    this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();
+                    render(this.generateHeadingTemplate(), this.el.querySelector('.chat-head-chatroom'));
                 }
             },
 
@@ -1112,22 +1113,38 @@ converse.plugins.add('converse-muc-views', {
                 }
             },
 
+            getHeadingButtons () {
+                const buttons = [];
+                if (!_converse.singleton) {
+                    const info_close = __('Close and leave this groupchat');
+                    const template = html`<a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="${info_close}"></a>`;
+                    template.name = 'signout';
+                    buttons.push(template);
+                }
+                if (this.model.getOwnAffiliation() === 'owner') {
+                    const info_configure = __('Configure this groupchat');
+                    const template = html`<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="${info_configure} "></a>`
+                    template.name = 'configure';
+                    buttons.push(template);
+                }
+                const info_details = __('Show more details about this groupchat');
+                const template = html`<a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="${info_details}"></a>`;
+                template.name = 'details';
+                buttons.push(template);
+                return buttons;
+            },
+
             /**
              * Returns the groupchat heading HTML to be rendered.
              * @private
-             * @method _converse.ChatRoomView#generateHeadingHTML
+             * @method _converse.ChatRoomView#generateHeadingTemplate
              */
-            generateHeadingHTML () {
+            generateHeadingTemplate () {
                 return tpl_chatroom_head(
                     Object.assign(this.model.toJSON(), {
-                        'isOwner': this.model.getOwnAffiliation() === 'owner',
+                        _converse,
+                        'buttons': this.getHeadingButtons(),
                         'title': this.model.getDisplayName(),
-                        'Strophe': Strophe,
-                        '_converse': _converse,
-                        'info_close': __('Close and leave this groupchat'),
-                        'info_configure': __('Configure this groupchat'),
-                        'info_details': __('Show more details about this groupchat'),
-                        'subject': u.addHyperlinks(xss.filterXSS(get(this.model.get('subject'), 'text'), {'whiteList': {}})),
                 }));
             },
 

src/templates/chatroom_head.html

-<div class="chatbox-title">
-    {[ if (!o._converse.singleton) { ]}
-        <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
-    {[ } ]}
-    <div class="chatbox-title__text" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >{{{ o.title }}}</div>
-    <div class="chatbox-title__buttons row no-gutters">
-        {[ if (!o._converse.singleton) { ]}
-            <a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a>
-        {[ } ]}
-        {[ if (o.isOwner) { ]}
-            <a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
-        {[ } ]}
-        <a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a>
-    </div>
-</div>
-<!-- Sanitized in converse-muc-views. We want to render links. -->
-<p class="chat-head__desc">{{o.subject}}</p>

src/templates/chatroom_head.js

+import { html } from "lit-html";
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { until } from 'lit-html/directives/until.js';
+import converse from "@converse/headless/converse-core";
+import xss from "xss/dist/xss";
+
+const u = converse.env.utils;
+
+
+export default (o) => {
+    const subject = o.subject ? u.addHyperlinks(xss.filterXSS(o.subject.text, {'whiteList': {}})) : '';
+    return html`
+        <div class="chatbox-title">
+            ${ (!o._converse.singleton) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
+            <div class="chatbox-title__text" title="${ (o._converse.locked_muc_domain !== 'hidden') ? o.jid : '' }">${ o.title }</div>
+            <div class="chatbox-title__buttons row no-gutters">
+                ${ o.buttons.map(b => until(b, '')) }
+            </div>
+        </div>
+        <p class="chat-head__desc">${unsafeHTML(subject)}</p>
+    `;
+}

src/templates/profile_modal.js

@@ -7,7 +7,6 @@ import { modal_close_button, modal_header_close_button } from "./buttons"
 
 const alt_avatar = __('Your avatar image');
 const heading_profile = __('Your Profile');
-const i18n_close = __('Close');
 const i18n_fingerprint_checkbox_label = __('Checkbox for selecting the following fingerprint');
 const i18n_device_without_fingerprint = __('Device without a fingerprint');
 const i18n_email = __('Email');

webpack.html

@@ -29,7 +29,7 @@
         persistent_store: 'IndexedDB',
         muc_domain: 'conference.chat.example.org',
         muc_respect_autojoin: true,
-        view_mode: 'fullscreen',
+        view_mode: 'overlayed',
         websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         // bosh_service_url: 'http://chat.example.org:5280/http-bind',
         muc_show_logs_before_join: true,