headlines: move view code into converse-headlines-view.js

spec/headline.js

@@ -125,6 +125,7 @@
         it("will remove headline messages from the controlbox if closed", mock.initConverse(
             ['rosterGroupsFetched'], {}, async function (done, _converse) {
 
+            await test_utils.openControlBox(_converse);
             /* <message from='notify.example.com'
              *          to='romeo@im.example.com'
              *          type='headline'

src/converse-headlines-view.js

@@ -4,8 +4,12 @@
  * @license Mozilla Public License (MPLv2)
  */
 import "converse-chatview";
+import { View } from 'skeletor.js/src/view.js';
+import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import tpl_chatbox from "templates/chatbox.html";
+import tpl_headline_list from "templates/headline_list.html";
+import tpl_headline_panel from "templates/headline_panel.html";
 
 
 converse.plugins.add('converse-headlines-view', {
@@ -21,6 +25,23 @@ converse.plugins.add('converse-headlines-view', {
      */
     dependencies: ["converse-headlines", "converse-chatview"],
 
+    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: {
+            renderControlBoxPane () {
+                this.__super__.renderControlBoxPane.apply(this, arguments);
+                this.renderHeadlinePanel();
+            },
+        },
+    },
+
+
+
 
     initialize () {
         /* The initialize function gets called as soon as the plugin is
@@ -29,6 +50,63 @@ converse.plugins.add('converse-headlines-view', {
         const { _converse } = this;
 
 
+        const viewWithHeadlinePanel = {
+            renderHeadlinePanel () {
+                if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
+                    return this.headlinepanel;
+                }
+                this.headlinepanel = new _converse.HeadlinePanel();
+                this.el.querySelector('.controlbox-pane').insertAdjacentElement(
+                    'beforeEnd', this.headlinepanel.render().el);
+
+                return this.headlinepanel;
+            },
+
+            getHeadlinePanel () {
+                if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
+                    return this.headlinepanel;
+                } else {
+                    return this.renderHeadlinePanel();
+                }
+            }
+        }
+
+        if (_converse.ControlBoxView) {
+            Object.assign(_converse.ControlBoxView.prototype, viewWithHeadlinePanel);
+        }
+
+
+        /**
+         * View which renders headlines section of the control box.
+         * @class
+         * @namespace _converse.HeadlinePanel
+         * @memberOf _converse
+         */
+        _converse.HeadlinePanel = View.extend({
+            tagName: 'div',
+            className: 'controlbox-section',
+            id: 'headline',
+
+            events: {
+                'click .open-headline': 'openHeadline'
+            },
+
+            openHeadline (ev) {
+                ev.preventDefault();
+                const jid = ev.target.getAttribute('data-headline-jid');
+                const chat = _converse.chatboxes.get(jid);
+                chat.maybeShow(true);
+            },
+
+            render () {
+                this.el.innerHTML = tpl_headline_panel({
+                    'heading_headline': __('Announcements')
+                });
+                return this;
+            }
+        });
+
+
         _converse.HeadlinesBoxView = _converse.ChatBoxView.extend({
             className: 'chatbox headlines',
 
@@ -80,13 +158,30 @@ converse.plugins.add('converse-headlines-view', {
         });
 
 
+        async function renderHeadlineList (removedBox=null) {
+            const controlboxview = _converse.chatboxviews.get('controlbox');
+            if (controlboxview !== undefined) {
+                const headlineboxes = await _converse.api.headlines.get();
+                const el = controlboxview.el.querySelector('.list-container--headline');
+                const headline_list = tpl_headline_list({
+                    headlineboxes,
+                    'open_title': __('Click to open this server message'),
+                });
+                el && (el.outerHTML = headline_list);
+            }
+        }
+
+
         _converse.api.listen.on('chatBoxViewsInitialized', () => {
             const views = _converse.chatboxviews;
             _converse.chatboxes.on('add', item => {
                 if (!views.get(item.get('id')) && item.get('type') === _converse.HEADLINES_TYPE) {
                     views.add(item.get('id'), new _converse.HeadlinesBoxView({model: item}));
+                    renderHeadlineList();
                 }
             });
+
+            _converse.chatboxes.on('remove', () => renderHeadlineList());
         });
     }
 });

src/headless/converse-headlines.js

@@ -3,12 +3,8 @@
  * @copyright 2020, the Converse.js contributors
  * @description XEP-0045 Multi-User Chat Views
  */
-import "converse-chatview";
 import converse from "@converse/headless/converse-core";
-import { View } from "skeletor.js/src/view";
 import { isString } from "lodash";
-import tpl_headline_list from "templates/headline_list.html";
-import tpl_headline_panel from "templates/headline_panel.html";
 
 const u = converse.env.utils;
 
@@ -42,13 +38,7 @@ converse.plugins.add('converse-headlines', {
                     return this.__super__.model.apply(this, arguments);
                 }
             },
-        },
-        ControlBoxView: {
-            renderControlBoxPane () {
-                this.__super__.renderControlBoxPane.apply(this, arguments);
-                this.renderHeadlinePanel();
-            },
-        },
+        }
     },
 
 
@@ -56,33 +46,7 @@ converse.plugins.add('converse-headlines', {
         /* The initialize function gets called as soon as the plugin is
          * loaded by converse.js's plugin machinery.
          */
-        const { _converse } = this,
-              { __ } = _converse;
-
-        const viewWithHeadlinePanel = {
-            renderHeadlinePanel () {
-                if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
-                    return this.headlinepanel;
-                }
-                this.headlinepanel = new _converse.HeadlinePanel();
-                this.el.querySelector('.controlbox-pane').insertAdjacentElement(
-                    'beforeEnd', this.headlinepanel.render().el);
-
-                return this.headlinepanel;
-            },
-
-            getHeadlinePanel () {
-                if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
-                    return this.headlinepanel;
-                } else {
-                    return this.renderHeadlinePanel();
-                }
-            }
-        }
-
-        if (_converse.ControlBoxView) {
-            Object.assign(_converse.ControlBoxView.prototype, viewWithHeadlinePanel);
-        }
+        const { _converse } = this;
 
         /**
          * Shows headline messages
@@ -115,27 +79,6 @@ converse.plugins.add('converse-headlines', {
             }
         });
 
-        function getAllHeadlineBoxes (removedBox = null) {
-            const chatboxviews = _converse.chatboxviews.getAll();
-            return Object.keys(chatboxviews)
-                .filter(
-                    id => chatboxviews[id].el.classList.contains('headlines') &&
-                        id !== removedBox
-            );
-        }
-
-        function renderHeadlineList (removedBox = null) {
-            const controlboxview = _converse.chatboxviews.get('controlbox');
-            if (controlboxview !== undefined) {
-                const el = controlboxview.el.querySelector('.list-container--headline');
-                const headline_list = tpl_headline_list({
-                    'headlineboxes': getAllHeadlineBoxes(removedBox),
-                    'open_title': __('Click to open this server message'),
-                });
-                el && (el.outerHTML = headline_list);
-            }
-        }
-
         async function onHeadlineMessage (message) {
             // Handler method for all incoming messages of type "headline".
             if (u.isHeadlineMessage(_converse, message)) {
@@ -158,45 +101,9 @@ converse.plugins.add('converse-headlines', {
                 const attrs = await chatbox.getMessageAttributesFromStanza(message, message);
                 await chatbox.messages.create(attrs);
                 _converse.api.trigger('message', {'chatbox': chatbox, 'stanza': message});
-                renderHeadlineList();
-                _converse.chatboxviews.get(from_jid).el
-                    .querySelector('.close-chatbox-button')
-                    .addEventListener("click",
-                        () => renderHeadlineList(from_jid)
-                );
             }
         }
 
-        /**
-         * View which renders headlines section of the control box.
-         * @class
-         * @namespace _converse.HeadlinePanel
-         * @memberOf _converse
-         */
-        _converse.HeadlinePanel = View.extend({
-            tagName: 'div',
-            className: 'controlbox-section',
-            id: 'headline',
-
-            events: {
-                'click .open-headline': 'openHeadline'
-            },
-
-            openHeadline (ev) {
-                ev.preventDefault();
-                const jid = ev.target.getAttribute('data-headline-jid');
-                const chat = _converse.chatboxes.get(jid);
-                chat.maybeShow(true);
-            },
-
-            render () {
-                this.el.innerHTML = tpl_headline_panel({
-                    'heading_headline': __('Announcements')
-                });
-                return this;
-            }
-        });
-
 
         /************************ BEGIN Event Handlers ************************/
         function registerHeadlineHandler () {

src/templates/headline_list.html

@@ -2,10 +2,10 @@
 <div class="items-list rooms-list headline-list">
     {[o.headlineboxes.forEach(function (headline) { ]}
         <div class="list-item controlbox-padded d-flex flex-row"
-            data-headline-jid="{{{headline}}}">
+            data-headline-jid="{{{headline.get('jid')}}}">
         <a class="list-item-link open-headline available-room w-100"
-            data-headline-jid="{{{headline}}}"
-            title="{{{o.open_title}}}" href="#">{{{headline}}}</a>
+            data-headline-jid="{{{headline.get('jid')}}}"
+            title="{{{o.open_title}}}" href="#">{{{headline.get('jid')}}}</a>
         </div>
     {[ }) ]}
 </div>

src/templates/headline_panel.html

@@ -2,5 +2,5 @@
 <div class="d-flex controlbox-padded">
     <span class="w-100 controlbox-heading controlbox-heading--headline">{{{o.heading_headline}}}</span>
 </div>
-<div class="list-container list-container--headline"></div>
+<div class="list-container list-container--headline hidden"></div>
 <!-- </div> -->

src/templates/room_panel.html

@@ -4,6 +4,6 @@
     <a class="controlbox-heading__btn show-list-muc-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
     <a class="controlbox-heading__btn show-add-muc-modal fa fa-plus" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>
 </div>
-<div class="list-container list-container--openrooms"></div>
-<div class="list-container list-container--bookmarks"></div>
+<div class="list-container list-container--openrooms hidden"></div>
+<div class="list-container list-container--bookmarks hidden"></div>
 <!-- </div> -->

src/templates/rooms_list.js

@@ -60,13 +60,11 @@ const room_item = (o) => html`
 `;
 
 export default (o) => html`
-    <div class="list-container list-container--openrooms ${ !o.rooms.length && 'hidden' || '' }">
-
-    <a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
-    <span class="fa ${ (o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span>${i18n_rooms}</a>
-
-    <div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
-        ${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
-    </div>
+    <div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
+        <a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
+        <span class="fa ${ (o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span>${i18n_rooms}</a>
+        <div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
+            ${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
+        </div>
     </div>
 `;