Turn BookmarksView into a custom element

CHANGES.md

@@ -26,6 +26,7 @@ OMEMO messages are gone and cannot be recovered on that device. See [muc_clear_m
 
 Removed events:
 * `chatBoxInsertedIntoDOM`
+* `bookmarkViewsInitialized`
 
 ## 7.0.2 (2020-11-23)
 

src/plugins/bookmark-views/bookmarks-list.js

@@ -1,14 +1,16 @@
 import tpl_bookmarks_list from './templates/list.js';
-import { View } from '@converse/skeletor/src/view.js';
+import { ElementView } from '@converse/skeletor/src/element.js';
 import { _converse, api, converse } from '@converse/headless/core';
 
 const { Strophe } = converse.env;
 const u = converse.env.utils;
 
-const BookmarksView = View.extend({
-    tagName: 'span',
+export default class BookmarksView extends ElementView {
+
+    async initialize () {
+        await api.waitUntil('bookmarksInitialized');
+        this.model = _converse.bookmarks;
 
-    initialize () {
         this.listenTo(this.model, 'add', this.render);
         this.listenTo(this.model, 'remove', this.render);
 
@@ -24,7 +26,7 @@ const BookmarksView = View.extend({
             this.insertIntoControlBox();
         };
         this.list_model.fetch({ 'success': render, 'error': render });
-    },
+    }
 
     toHTML () {
         const is_hidden = b => !!(api.settings.get('hide_open_bookmarks') && _converse.chatboxes.get(b.get('jid')));
@@ -38,7 +40,7 @@ const BookmarksView = View.extend({
             'toggleBookmarksList': ev => this.toggleBookmarksList(ev),
             'toggle_state': this.list_model.get('toggle-state')
         });
-    },
+    }
 
     insertIntoControlBox () {
         const controlboxview = _converse.chatboxviews.get('controlbox');
@@ -46,9 +48,9 @@ const BookmarksView = View.extend({
             const el = controlboxview.el.querySelector('.list-container--bookmarks');
             el && el.parentNode.replaceChild(this.el, el);
         }
-    },
+    }
 
-    openRoom (ev) {
+    openRoom (ev) { // eslint-disable-line class-methods-use-this
         ev.preventDefault();
         const name = ev.target.textContent;
         const jid = ev.target.getAttribute('data-room-jid');
@@ -56,11 +58,11 @@ const BookmarksView = View.extend({
             'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
         };
         api.rooms.open(jid, data, true);
-    },
+    }
 
-    removeBookmark (ev) {
+    removeBookmark (ev) { // eslint-disable-line class-methods-use-this
         _converse.removeBookmarkViaEvent(ev);
-    },
+    }
 
     toggleBookmarksList (ev) {
         if (ev && ev.preventDefault) {
@@ -79,6 +81,6 @@ const BookmarksView = View.extend({
             this.list_model.save({ 'toggle-state': _converse.OPENED });
         }
     }
-});
+}
 
-export default BookmarksView;
+api.elements.define('converse-bookmarks', BookmarksView);

src/plugins/bookmark-views/index.js

@@ -12,17 +12,6 @@ import { _converse, api, converse } from '@converse/headless/core';
 import { bookmarkableChatRoomView, eventMethods } from './mixins.js';
 import { checkBookmarksSupport } from '@converse/headless/plugins/bookmarks/utils';
 
-const initBookmarkViews = async function () {
-    await api.waitUntil('roomsPanelRendered');
-    _converse.bookmarksview = new _converse.BookmarksView({ 'model': _converse.bookmarks });
-    /**
-     * Triggered once the _converse.Bookmarks collection and _converse.BookmarksView view
-     * has been created and cached bookmarks have been fetched.
-     * @event _converse#bookmarkViewsInitialized
-     * @example _converse.api.listen.on('bookmarkViewsInitialized', () => { ... });
-     */
-    api.trigger('bookmarkViewsInitialized');
-};
 
 converse.plugins.add('converse-bookmark-views', {
     /* Plugin dependencies are other plugins which might be
@@ -74,8 +63,6 @@ converse.plugins.add('converse-bookmark-views', {
             return buttons;
         });
 
-        api.listen.on('bookmarksInitialized', initBookmarkViews);
         api.listen.on('chatRoomViewInitialized', view => view.setBookmarkState());
-        /************************ END Event Handlers ************************/
     }
 });

src/plugins/controlbox/templates/controlbox.js

@@ -1,4 +1,5 @@
 import { html } from 'lit-html';
+import { api } from '@converse/headless/core';
 
 export default (o) => html`
     <div class="flyout box-flyout">
@@ -7,8 +8,10 @@ export default (o) => html`
             ${o.sticky_controlbox ? '' : html`<a class="chatbox-btn close-chatbox-button fa fa-times"></a>` }
         </div>
         <div class="controlbox-panes">
+            ${ api.connection.connected() ? html`
                 <converse-headlines-panel></converse-headlines-panel>
                 <converse-rooms-list></converse-rooms-list>
+                <converse-bookmarks></converse-bookmarks>` : '' }
         </div>
     </div>
 `;