Turn HeadlinesBox into a custom element

src/plugins/chatboxviews/templates/chats.js

@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 import { _converse, api } from '@converse/headless/core';
 
 export default () => {
-    const { chatboxes, CONTROLBOX_TYPE, CHATROOMS_TYPE } = _converse;
+    const { chatboxes, CONTROLBOX_TYPE, CHATROOMS_TYPE, HEADLINES_TYPE } = _converse;
     const view_mode = api.settings.get('view_mode');
 
     return html`
@@ -20,6 +20,10 @@ export default () => {
                 return html`
                     <converse-muc jid="${m.get('jid')}" class="chatbox chatroom ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-muc>
                 `;
+            } else if (m.get('type') === HEADLINES_TYPE) {
+                return html`
+                    <converse-headlines jid="${m.get('jid')}" class="chatbox headlines ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-headlines>
+                `;
             } else {
                 return html`
                     <converse-chat jid="${m.get('jid')}" class="chatbox ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-chat>

src/plugins/chatview/view.js

@@ -188,11 +188,6 @@ export default class ChatView extends BaseChatView {
         this.model.sendFiles(evt.dataTransfer.files);
     }
 
-    async renderHeading () {
-        const tpl = await this.generateHeadingTemplate();
-        render(tpl, this.querySelector('.chat-head-chatbox'));
-    }
-
     async generateHeadingTemplate () {
         const vcard = this.model?.vcard;
         const vcard_json = vcard ? vcard.toJSON() : {};
@@ -616,9 +611,7 @@ export default class ChatView extends BaseChatView {
     }
 
     async close (ev) {
-        if (ev && ev.preventDefault) {
-            ev.preventDefault();
-        }
+        ev?.preventDefault?.();
         if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) {
             _converse.router.navigate('');
         }

src/plugins/headlines-view/templates/chat-head.js

@@ -0,0 +1,21 @@
+import { _converse } from '@converse/headless/core';
+import { html } from "lit-html";
+import { until } from 'lit-html/directives/until.js';
+
+
+export default (o) => {
+    const tpl_standalone_btns = (o) => o.standalone_btns.reverse().map(b => until(b, ''));
+    return html`
+        <div class="chatbox-title ${ o.status ? '' :  "chatbox-title--no-desc"}">
+            <div class="chatbox-title--row">
+                ${ (!_converse.api.settings.get("singleton")) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
+                <div class="chatbox-title__text" title="${o.jid}">${ o.display_name }</div>
+            </div>
+            <div class="chatbox-title__buttons row no-gutters">
+                ${ o.dropdown_btns.length ? html`<converse-dropdown .items=${o.dropdown_btns}></converse-dropdown>` : '' }
+                ${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }
+            </div>
+        </div>
+        ${ o.status ? html`<p class="chat-head__desc">${ o.status }</p>` : '' }
+    `;
+}

src/plugins/headlines-view/view.js

@@ -1,16 +1,17 @@
+import BaseChatView from 'shared/chatview.js';
 import tpl_chatbox from 'templates/chatbox.js';
+import tpl_chat_head from './templates/chat-head.js';
 import { __ } from 'i18n';
 import { _converse, api } from '@converse/headless/core';
 import { render } from 'lit-html';
 
-const HeadlinesBoxViewMixin = {
-    className: 'chatbox headlines hidden',
 
-    events: {
+class HeadlinesView extends BaseChatView {
+    events = {
         'click .close-chatbox-button': 'close',
         'click .toggle-chatbox-button': 'minimize',
         'keypress textarea.chat-textarea': 'onKeyDown'
-    },
+    }
 
     async initialize () {
         const jid = this.getAttribute('jid');
@@ -22,7 +23,7 @@ const HeadlinesBoxViewMixin = {
         api.listen.on('windowStateChanged', this.onWindowStateChanged);
 
         this.model.disable_mam = true; // Don't do MAM queries for this box
-        this.listenTo(this.model, 'change:hidden', m => (m.get('hidden') ? this.hide() : this.show()));
+        this.listenTo(this.model, 'change:hidden', () => this.afterShown());
         this.listenTo(this.model, 'destroy', this.remove);
         this.listenTo(this.model, 'show', this.show);
 
@@ -35,7 +36,6 @@ const HeadlinesBoxViewMixin = {
         this.listenTo(this.model.messages, 'reset', this.renderChatHistory);
 
         await this.model.messages.fetched;
-        this.insertIntoDOM();
         this.model.maybeShow();
         this.scrollDown();
         /**
@@ -45,10 +45,10 @@ const HeadlinesBoxViewMixin = {
          * @example _converse.api.listen.on('headlinesBoxViewInitialized', view => { ... });
          */
         api.trigger('headlinesBoxViewInitialized', this);
-    },
+    }
 
     render () {
-        this.el.setAttribute('id', this.model.get('box_id'));
+        this.setAttribute('id', this.model.get('box_id'));
         const result = tpl_chatbox(
             Object.assign(this.model.toJSON(), {
                 info_close: '',
@@ -58,19 +58,43 @@ const HeadlinesBoxViewMixin = {
                 unread_msgs: ''
             })
         );
-        render(result, this.el);
-        this.content = this.el.querySelector('.chat-content');
-        this.msgs_container = this.el.querySelector('.chat-content__messages');
+        render(result, this);
+        this.content = this.querySelector('.chat-content');
+        this.msgs_container = this.querySelector('.chat-content__messages');
         this.renderChatContent();
         this.renderHeading();
         return this;
-    },
+    }
 
-    getNotifications () {
+    async close (ev) {
+        ev?.preventDefault?.();
+        if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) {
+            _converse.router.navigate('');
+        }
+        await this.model.close(ev);
+        api.trigger('chatBoxClosed', this);
+        return this;
+    }
+
+
+    getNotifications () { // eslint-disable-line class-methods-use-this
         // Override method in ChatBox. We don't show notifications for
         // headlines boxes.
         return [];
-    },
+    }
+
+    async generateHeadingTemplate () {
+        const heading_btns = await this.getHeadingButtons();
+        const standalone_btns = heading_btns.filter(b => b.standalone);
+        const dropdown_btns = heading_btns.filter(b => !b.standalone);
+        return tpl_chat_head(
+            Object.assign(this.model.toJSON(), {
+                'display_name': this.model.getDisplayName(),
+                'dropdown_btns': dropdown_btns.map(b => this.getHeadingDropdownItem(b)),
+                'standalone_btns': standalone_btns.map(b => this.getHeadingStandaloneButton(b))
+            })
+        );
+    }
 
     /**
      * Returns a list of objects which represent buttons for the headlines header.
@@ -93,11 +117,16 @@ const HeadlinesBoxViewMixin = {
             });
         }
         return _converse.api.hook('getHeadingButtons', this, buttons);
-    },
+    }
 
     // Override to avoid the methods in converse-chatview
-    'renderMessageForm': function renderMessageForm () {},
-    'afterShown': function afterShown () {}
-};
+    renderMessageForm () { // eslint-disable-line class-methods-use-this
+        return;
+    }
+
+    afterShown () { // eslint-disable-line class-methods-use-this
+        return;
+    }
+}
 
-export default HeadlinesBoxViewMixin;
+api.elements.define('converse-headlines', HeadlinesView);

src/plugins/minimize/mixins.js

@@ -1,4 +1,4 @@
-import { api, converse } from '@converse/headless/core';
+import { _converse, api, converse } from '@converse/headless/core';
 
 const u = converse.env.utils;
 
@@ -28,9 +28,6 @@ export const minimizableChatBoxView = {
      * @returns {_converse.ChatBoxView|_converse.ChatRoomView}
      */
     onMaximized () {
-        const { _converse } = this.__super__;
-        this.insertIntoDOM();
-
         if (!this.model.isScrolledUp()) {
             this.model.clearUnreadMsgCounter();
         }
@@ -55,7 +52,6 @@ export const minimizableChatBoxView = {
      * @returns {_converse.ChatBoxView|_converse.ChatRoomView}
      */
     onMinimized (ev) {
-        const { _converse } = this.__super__;
         if (ev && ev.preventDefault) {
             ev.preventDefault();
         }

src/shared/chatview.js

@@ -26,6 +26,11 @@ export default class BaseChatView extends ElementView {
         }
     }
 
+    async renderHeading () {
+        const tpl = await this.generateHeadingTemplate();
+        render(tpl, this.querySelector('.chat-head-chatbox'));
+    }
+
     renderChatContent (msgs_by_ref = false) {
         if (!this.tpl_chat_content) {
             this.tpl_chat_content = o => {