Make the headlines panel an ElementView

Don't manually insert HeadlinesBoxView
we'll have to convert it to an ElementView

src/plugins/headlines-view/index.js

@@ -4,18 +4,10 @@
  * @license Mozilla Public License (MPLv2)
  */
 import '../chatview/index.js';
-import HeadlinesBoxViewMixin from './view.js';
-import { HeadlinesPanelMixin, HeadlinesPanel} from './panel.js';
-import { _converse, api, converse } from '@converse/headless/core';
+import './view.js';
+import { HeadlinesPanelMixin, HeadlinesPanel } from './panel.js';
+import { _converse, converse } from '@converse/headless/core';
 
-function onChatBoxViewsInitialized () {
-    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 }));
-        }
-    });
-}
 
 converse.plugins.add('converse-headlines-view', {
     /* Plugin dependencies are other plugins which might be
@@ -30,23 +22,8 @@ converse.plugins.add('converse-headlines-view', {
      */
     dependencies: ['converse-headlines', 'converse-chatview'],
 
-    overrides: {
-        ControlBoxView: {
-            renderControlBoxPane () {
-                this.__super__.renderControlBoxPane.apply(this, arguments);
-                this.renderHeadlinesPanel();
-            }
-        }
-    },
-
     initialize () {
-        /* The initialize function gets called as soon as the plugin is
-         * loaded by converse.js's plugin machinery.
-         */
         _converse.ControlBoxView && Object.assign(_converse.ControlBoxView.prototype, HeadlinesPanelMixin);
-        _converse.HeadlinesBoxView = _converse.ChatBoxView.extend(HeadlinesBoxViewMixin);
         _converse.HeadlinesPanel = HeadlinesPanel;
-
-        api.listen.on('chatBoxViewsInitialized', onChatBoxViewsInitialized);
     }
 });

src/plugins/headlines-view/panel.js

@@ -1,9 +1,7 @@
 import tpl_headline_panel from './templates/panel.js';
 import { ElementView } from '@converse/skeletor/src/element.js';
 import { __ } from 'i18n';
-import { _converse, api, converse } from '@converse/headless/core';
-
-const u = converse.env.utils;
+import { _converse, api } from '@converse/headless/core';
 
 /**
  * View which renders headlines section of the control box.
@@ -12,14 +10,12 @@ const u = converse.env.utils;
  * @memberOf _converse
  */
 export class HeadlinesPanel extends ElementView {
-    tagName = 'div'
-    className = 'controlbox-section'
-    id = 'headline'
     events = {
         'click .open-headline': 'openHeadline'
     }
 
     initialize () {
+        this.model = _converse.chatboxes;
         this.listenTo(this.model, 'add', this.renderIfHeadline);
         this.listenTo(this.model, 'remove', this.renderIfHeadline);
         this.listenTo(this.model, 'destroy', this.renderIfHeadline);
@@ -47,25 +43,3 @@ export class HeadlinesPanel extends ElementView {
 }
 
 api.elements.define('converse-headlines-panel', HeadlinesPanel);
-
-/**
- * Mixin for the {@link _converse.ControlBoxView } which add support for
- * rendering a list of headline chats.
- * @mixin
- */
-export const HeadlinesPanelMixin = {
-    renderHeadlinesPanel () {
-        if (this.headlinepanel && u.isInDOM(this.headlinepanel.el)) {
-            return this.headlinepanel;
-        }
-        this.headlinepanel = new _converse.HeadlinesPanel({ 'model': _converse.chatboxes });
-        /**
-         * Triggered once the section of the { @link _converse.ControlBoxView }
-         * which shows announcements has been rendered.
-         * @event _converse#headlinesPanelRendered
-         * @example _converse.api.listen.on('headlinesPanelRendered', () => { ... });
-         */
-        api.trigger('headlinesPanelRendered');
-        return this.headlinepanel;
-    }
-};

src/plugins/headlines-view/templates/panel.js

@@ -3,8 +3,10 @@ import tpl_headline_list from "templates/headline_list.js";
 
 
 export default (o) => html`
-    <div class="d-flex controlbox-padded ${ o.headlineboxes.length ? '' : 'hidden' }">
-        <span class="w-100 controlbox-heading controlbox-heading--headline">${o.heading_headline}</span>
+    <div class="controlbox-section" id="headline">
+        <div class="d-flex controlbox-padded ${ o.headlineboxes.length ? '' : 'hidden' }">
+            <span class="w-100 controlbox-heading controlbox-heading--headline">${o.heading_headline}</span>
+        </div>
     </div>
     ${ tpl_headline_list(o) }
 `;