Replace VDOMView with HTMLView

src/converse-bookmark-views.js

@@ -197,12 +197,6 @@ converse.plugins.add('converse-bookmark-views', {
 
         _converse.BookmarksView = HTMLView.extend({
             tagName: 'span',
-            events: {
-                'click .add-bookmark': 'addBookmark',
-                'click .bookmarks-toggle': 'toggleBookmarksList',
-                'click .remove-bookmark': 'removeBookmark',
-                'click .open-room': 'openRoom',
-            },
 
             initialize () {
                 this.listenTo(this.model, 'add', this.render);
@@ -223,14 +217,16 @@ converse.plugins.add('converse-bookmark-views', {
             },
 
             toHTML () {
+                const is_hidden = b => !!(_converse.hide_open_bookmarks && _converse.chatboxes.get(b.get('jid')));
                 return tpl_bookmarks_list({
                     '_converse': _converse,
                     'bookmarks': this.model,
-                    'toggle_state': this.list_model.get('toggle-state'),
-                    'is_bookmark_hidden': b => {
-                        return !!(_converse.hide_open_bookmarks && _converse.chatboxes.get(b.get('jid')))
-                    },
-                    'hidden': this.model.getUnopenedBookmarks().length && true
+                    'hidden': this.model.getUnopenedBookmarks().length && true,
+                    'is_hidden': is_hidden,
+                    'openRoom': ev => this.openRoom(ev),
+                    'removeBookmark': ev => this.removeBookmark(ev),
+                    'toggleBookmarksList': ev => this.toggleBookmarksList(ev),
+                    'toggle_state': this.list_model.get('toggle-state')
                 });
             },
 
@@ -253,7 +249,6 @@ converse.plugins.add('converse-bookmark-views', {
             },
 
             removeBookmark: _converse.removeBookmarkViaEvent,
-            addBookmark: _converse.addBookmarkViaEvent,
 
             toggleBookmarksList (ev) {
                 if (ev && ev.preventDefault) { ev.preventDefault(); }

src/converse-muc-views.js

@@ -12,6 +12,7 @@ import { get, head, isString, isUndefined, pick } from "lodash";
 import { Model } from 'skeletor.js/src/model.js';
 import { OrderedListView } from "skeletor.js/src/overview";
 import { View } from "skeletor.js/src/view";
+import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
 import tpl_add_chatroom_modal from "templates/add_chatroom_modal.js";
@@ -92,8 +93,7 @@ converse.plugins.add('converse-muc-views', {
     },
 
     initialize () {
-        const { _converse } = this,
-              { __ } = _converse;
+        const { _converse } = this;
 
         _converse.api.promises.add(['roomsPanelRendered']);
 

src/converse-roomslist.js

@@ -9,10 +9,11 @@
 import "@converse/headless/converse-muc";
 import { Model } from 'skeletor.js/src/model.js';
 import { HTMLView } from 'skeletor.js/src/htmlview.js';
+import { __ } from '@converse/headless/i18n';
 import converse from "@converse/headless/converse-core";
 import tpl_rooms_list from "templates/rooms_list.js";
 
-const { Strophe, } = converse.env;
+const { Strophe } = converse.env;
 const u = converse.env.utils;
 
 

src/templates/bookmarks_list.js

@@ -9,17 +9,25 @@ const open_title = __('Click to open this groupchat');
 
 
 const bookmark_item = (o) => html`
-    <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ (o.is_bookmark_hidden(o.bm)) ? 'hidden' : ''}" data-room-jid="${o.bm.get('jid')}">
-        <a class="list-item-link open-room w-100" data-room-jid="${o.bm.get('jid')}" title="${open_title}" href="#">${o.bm.getDisplayName()}</a>
+    <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ (o.is_hidden(o.bm)) ? 'hidden' : ''}" data-room-jid="${o.bm.get('jid')}">
+        <a class="list-item-link open-room w-100" data-room-jid="${o.bm.get('jid')}"
+           title="${open_title}"
+          @click=${o.openRoom}>${o.bm.getDisplayName()}</a>
+
         <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ${ o.bm.get('bookmarked') ? 'button-on' : '' }"
-            data-room-jid="${o.bm.get('jid')}" data-bookmark-name="${o.bm.getDisplayName()}"
-            title="${info_remove_bookmark}" href="#"></a>
+           data-room-jid="${o.bm.get('jid')}"
+           data-bookmark-name="${o.bm.getDisplayName()}"
+           title="${info_remove_bookmark}"
+           @click=${o.removeBookmark}></a>
     </div>
 `;
 
 export default (o) => html`
     <div class="list-container list-container--bookmarks ${ !o.hidden && 'hidden' || '' }">
-        <a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="${desc_bookmarks}">
+        <a class="list-toggle bookmarks-toggle controlbox-padded"
+           title="${desc_bookmarks}"
+           @click=${o.toggleBookmarksList}>
+
             <span class="fa ${(o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }">
             </span> ${label_bookmarks}</a>
         <div class="items-list bookmarks rooms-list ${ (o.toggle_state !== o._converse.OPENED) ? 'hidden' : '' }">