bookmarks: refactor to use VDOMView instead of OrderedListView

src/converse-bookmark-views.js

@@ -11,9 +11,7 @@
  */
 import "backbone.nativeview";
 import "@converse/headless/converse-muc";
-import { OrderedListView } from "backbone.overview";
 import converse from "@converse/headless/converse-core";
-import tpl_bookmark from "templates/bookmark.html";
 import tpl_bookmarks_list from "templates/bookmarks_list.html"
 import tpl_chatroom_bookmark_form from "templates/chatroom_bookmark_form.html";
 import tpl_chatroom_bookmark_toggle from "templates/chatroom_bookmark_toggle.html";
@@ -211,25 +209,7 @@ converse.plugins.add('converse-bookmark-views', {
         });
 
 
-        _converse.BookmarkView = Backbone.VDOMView.extend({
-            toHTML () {
-                return tpl_bookmark({
-                    'hidden': _converse.hide_open_bookmarks &&
-                              _converse.chatboxes.where({'jid': this.model.get('jid')}).length,
-                    'bookmarked': true,
-                    'info_leave_room': __('Leave this groupchat'),
-                    'info_remove': __('Remove this bookmark'),
-                    'info_remove_bookmark': __('Unbookmark this groupchat'),
-                    'info_title': __('Show more information on this groupchat'),
-                    'jid': this.model.get('jid'),
-                    'name': Strophe.xmlunescape(this.model.get('name')),
-                    'open_title': __('Click to open this groupchat')
-                });
-            }
-        });
-
-
-        _converse.BookmarksView = OrderedListView.extend({
+        _converse.BookmarksView = Backbone.VDOMView.extend({
             tagName: 'div',
             className: 'bookmarks-list list-container rooms-list-container',
             events: {
@@ -238,41 +218,42 @@ converse.plugins.add('converse-bookmark-views', {
                 'click .remove-bookmark': 'removeBookmark',
                 'click .open-room': 'openRoom',
             },
-            listSelector: '.rooms-list',
-            ItemView: _converse.BookmarkView,
-            subviewIndex: 'jid',
 
             initialize () {
-                OrderedListView.prototype.initialize.apply(this, arguments);
+                this.listenTo(this.model, 'add', this.render);
+                this.listenTo(this.model, 'remove', this.render);
 
-                this.listenTo(this.model, 'add', this.showOrHide);
-                this.listenTo(this.model, 'remove', this.showOrHide);
+                this.listenTo(_converse.chatboxes, 'add', this.render);
+                this.listenTo(_converse.chatboxes, 'remove', this.render);
 
-                this.listenTo(_converse.chatboxes, 'add', this.renderBookmarkListElement);
-                this.listenTo(_converse.chatboxes, 'remove', this.renderBookmarkListElement);
-
-                const storage = _converse.config.get('storage'),
-                      id = `converse.room-bookmarks${_converse.bare_jid}-list-model`;
-                this.list_model = new _converse.BookmarksList({'id': id});
-                this.list_model.browserStorage = _converse.createStore(id, storage);
+                const id = `converse.room-bookmarks${_converse.bare_jid}-list-model`;
+                this.list_model = new _converse.BookmarksList({id});
+                this.list_model.browserStorage = _converse.createStore(id);
 
                 const render = () => {
                     this.render();
-                    this.sortAndPositionAllItems();
+                    this.insertIntoControlBox();
                 }
                 this.list_model.fetch({'success': render, 'error': render});
             },
 
-            render () {
-                this.el.innerHTML = tpl_bookmarks_list({
-                    'toggle_state': this.list_model.get('toggle-state'),
+            toHTML () {
+                return tpl_bookmarks_list({
+                    '_converse': _converse,
+                    'bookmarks': this.model,
                     'desc_bookmarks': __('Click to toggle the bookmarks list'),
+                    'info_leave_room': __('Leave this groupchat'),
+                    'info_remove': __('Remove this bookmark'),
+                    'info_remove_bookmark': __('Unbookmark this groupchat'),
+                    'info_title': __('Show more information on this groupchat'),
                     'label_bookmarks': __('Bookmarks'),
-                    '_converse': _converse
+                    'open_title': __('Click to open this groupchat'),
+                    '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
                 });
-                this.showOrHide();
-                this.insertIntoControlBox();
-                return this;
             },
 
             insertIntoControlBox () {
@@ -298,28 +279,6 @@ converse.plugins.add('converse-bookmark-views', {
             removeBookmark: _converse.removeBookmarkViaEvent,
             addBookmark: _converse.addBookmarkViaEvent,
 
-            renderBookmarkListElement (chatbox) {
-                const bookmarkview = this.get(chatbox.get('jid'));
-                if (bookmarkview) {
-                    bookmarkview.render();
-                    this.showOrHide();
-                }
-            },
-
-            showOrHide () {
-                if (_converse.hide_open_bookmarks) {
-                    const bookmarks = this.model.filter((bookmark) =>
-                            !_converse.chatboxes.get(bookmark.get('jid')));
-                    if (!bookmarks.length) {
-                        u.hideElement(this.el);
-                        return;
-                    }
-                }
-                if (this.model.models.length) {
-                    u.showElement(this.el);
-                }
-            },
-
             toggleBookmarksList (ev) {
                 if (ev && ev.preventDefault) { ev.preventDefault(); }
                 const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa');

src/headless/converse-bookmarks.js

@@ -11,8 +11,9 @@
  */
 import "@converse/headless/converse-muc";
 import converse from "@converse/headless/converse-core";
+import { get } from "lodash";
 
-const { Backbone, Strophe, $iq, sizzle, _ } = converse.env;
+const { Backbone, Strophe, $iq, sizzle } = converse.env;
 const u = converse.env.utils;
 
 
@@ -91,7 +92,11 @@ converse.plugins.add('converse-bookmarks', {
             }
         }
 
-        _converse.Bookmark = Backbone.Model;
+        _converse.Bookmark = Backbone.Model.extend({
+            getDisplayName () {
+                return Strophe.xmlunescape(this.get('name'));
+            }
+        });
 
         _converse.Bookmarks = _converse.Collection.extend({
             model: _converse.Bookmark,
@@ -213,13 +218,13 @@ converse.plugins.add('converse-bookmarks', {
                     `items[node="storage:bookmarks"] item storage[xmlns="storage:bookmarks"] conference`,
                     stanza
                 );
-                _.forEach(bookmarks, (bookmark) => {
+                bookmarks.forEach(bookmark => {
                     const jid = bookmark.getAttribute('jid');
                     this.create({
                         'jid': jid,
                         'name': bookmark.getAttribute('name') || jid,
                         'autojoin': bookmark.getAttribute('autojoin') === 'true',
-                        'nick': _.get(bookmark.querySelector('nick'), 'textContent')
+                        'nick': get(bookmark.querySelector('nick'), 'textContent')
                     });
                 });
             },
@@ -243,6 +248,10 @@ converse.plugins.add('converse-bookmarks', {
                         return deferred.reject(new Error("Could not fetch bookmarks"));
                     }
                 }
+            },
+
+            getUnopenedBookmarks () {
+                return this.filter(b => !_converse.chatboxes.get(b.get('jid')));
             }
         });
 

src/templates/bookmark.html

@@ -1,6 +0,0 @@
-<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
-    <a class="list-item-link open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
-    <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
-        data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
-        title="{{{o.info_remove_bookmark}}}" href="#"></a>
-</div>

src/templates/bookmarks_list.html

@@ -1,4 +1,16 @@
-<a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
-    <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
-    </span> {{{o.label_bookmarks}}}</a>
-<div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>
+<div class="list-container list-container--bookmarks {{{ !o.hidden && 'hidden' || '' }}}">
+    <a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
+        <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
+        </span> {{{o.label_bookmarks}}}</a>
+
+    <div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}">
+    {[o.bookmarks.forEach(function (bm) { ]}
+        <div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.is_bookmark_hidden(bm)) { ]} hidden {[ } ]}" data-room-jid="{{{bm.get('jid')}}}">
+            <a class="list-item-link open-room w-100" data-room-jid="{{{bm.get('jid')}}}" title="{{{o.open_title}}}" href="#">{{{bm.getDisplayName()}}}</a>
+            <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (bm.get('bookmarked')) { ]} button-on {[ } ]}"
+                data-room-jid="{{{bm.get('jid')}}}" data-bookmark-name="{{{bm.getDisplayName()}}}"
+                title="{{{o.info_remove_bookmark}}}" href="#"></a>
+        </div>
+    {[ }) ]}
+    </div>
+</div>