Turn rooms list into a custom element

src/plugins/roomslist/index.js

@@ -6,22 +6,11 @@
  * @license Mozilla Public License (MPLv2)
  */
 import "@converse/headless/plugins/muc/index.js";
+import './view.js';
 import RoomsList from './model.js';
-import RoomsListView from './view.js';
 import { _converse, api, converse } from "@converse/headless/core";
 
 
-const initRoomsListView = function () {
-    _converse.rooms_list_view = new _converse.RoomsListView({'model': _converse.chatboxes});
-    /**
-     * Triggered once the _converse.RoomsListView has been created and initialized.
-     * @event _converse#roomsListInitialized
-     * @example _converse.api.listen.on('roomsListInitialized', status => { ... });
-     */
-    api.trigger('roomsListInitialized');
-};
-
-
 converse.plugins.add('converse-roomslist', {
     /* Dependencies are other plugins which might be
      * overridden or relied upon, and therefore need to be loaded before
@@ -38,11 +27,7 @@ converse.plugins.add('converse-roomslist', {
     dependencies: ["converse-singleton", "converse-controlbox", "converse-muc", "converse-bookmarks"],
 
     initialize () {
-        // Promises exposed by this plugin
-        api.promises.add('roomsListInitialized');
-
         _converse.RoomsList= RoomsList;
-        _converse.RoomsListView = RoomsListView;
 
         // Event handlers
         api.listen.on('connected', async () =>  {
@@ -54,9 +39,6 @@ converse.plugins.add('converse-roomslist', {
                     api.waitUntil('roomsPanelRendered')
                 ]);
             }
-            initRoomsListView();
         });
-
-        api.listen.on('reconnected', initRoomsListView);
     }
 });

src/plugins/roomslist/view.js

@@ -1,6 +1,6 @@
 import RoomDetailsModal from 'modals/muc-details.js';
 import tpl_rooms_list from "./templates/roomslist.js";
-import { View } from '@converse/skeletor/src/view.js';
+import { ElementView } from '@converse/skeletor/src/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from "@converse/headless/core";
 
@@ -8,10 +8,10 @@ const { Strophe } = converse.env;
 const u = converse.env.utils;
 
 
-const RoomsListView = View.extend({
-    tagName: 'span',
+export class RoomsList extends ElementView {
 
     initialize () {
+        this.model = _converse.chatboxes;
         this.listenTo(this.model, 'add', this.renderIfChatRoom)
         this.listenTo(this.model, 'remove', this.renderIfChatRoom)
         this.listenTo(this.model, 'destroy', this.renderIfChatRoom)
@@ -22,12 +22,11 @@ const RoomsListView = View.extend({
         this.list_model.browserStorage = _converse.createStore(id);
         this.list_model.fetch();
         this.render();
-        this.insertIntoControlBox();
-    },
+    }
 
     renderIfChatRoom (model) {
         u.isChatRoom(model) && this.render();
-    },
+    }
 
     renderIfRelevantChange (model) {
         const attrs = ['bookmarked', 'hidden', 'name', 'num_unread', 'num_unread_general', 'has_activity'];
@@ -35,7 +34,7 @@ const RoomsListView = View.extend({
         if (u.isChatRoom(model) && Object.keys(changed).filter(m => attrs.includes(m)).length) {
             this.render();
         }
-    },
+    }
 
     toHTML () {
         return tpl_rooms_list({
@@ -52,24 +51,16 @@ const RoomsListView = View.extend({
             'toggleRoomsList': ev => this.toggleRoomsList(ev),
             'toggle_state': this.list_model.get('toggle-state')
         });
-    },
+    }
 
-    insertIntoControlBox () {
-        const controlboxview = _converse.chatboxviews.get('controlbox');
-        if (controlboxview !== undefined && !u.rootContains(_converse.root, this.el)) {
-            const el = controlboxview.el.querySelector('.list-container--openrooms');
-            el && el.parentNode.replaceChild(this.el, el);
-        }
-    },
-
-    showRoomDetailsModal (ev) {
+    showRoomDetailsModal (ev) { // eslint-disable-line class-methods-use-this
         const jid = ev.target.getAttribute('data-room-jid');
         const room = _converse.chatboxes.get(jid);
         ev.preventDefault();
         api.modal.show(RoomDetailsModal, {'model': room}, ev);
-    },
+    }
 
-    async openRoom (ev) {
+    async openRoom (ev) { // eslint-disable-line class-methods-use-this
         ev.preventDefault();
         const name = ev.target.textContent;
         const jid = ev.target.getAttribute('data-room-jid');
@@ -78,9 +69,9 @@ const RoomsListView = View.extend({
         }
         await api.rooms.open(jid, data, true);
         api.chatviews.get(jid).maybeFocus();
-    },
+    }
 
-    closeRoom (ev) {
+    closeRoom (ev) { // eslint-disable-line class-methods-use-this
         ev.preventDefault();
         const name = ev.target.getAttribute('data-room-name');
         const jid = ev.target.getAttribute('data-room-jid');
@@ -88,15 +79,15 @@ const RoomsListView = View.extend({
             // TODO: replace with API call
             _converse.chatboxviews.get(jid).close();
         }
-    },
+    }
 
-    removeBookmark (ev) {
+    removeBookmark (ev) { // eslint-disable-line class-methods-use-this
         _converse.removeBookmarkViaEvent(ev);
-    },
+    }
 
-    addBookmark (ev) {
+    addBookmark (ev) { // eslint-disable-line class-methods-use-this
         _converse.addBookmarkViaEvent(ev);
-    },
+    }
 
     toggleRoomsList (ev) {
         if (ev && ev.preventDefault) { ev.preventDefault(); }
@@ -115,6 +106,6 @@ const RoomsListView = View.extend({
             });
         }
     }
-});
+}
 
-export default RoomsListView;
+api.elements.define('converse-rooms-list', RoomsList);