roomslist: Refactor to use VDOMView instead of OrderedListView

spec/roomslist.js

@@ -15,11 +15,9 @@
 
             test_utils.openControlBox();
             const controlbox = _converse.chatboxviews.get('controlbox');
-            let list = controlbox.el.querySelector('div.rooms-list-container');
+            let list = controlbox.el.querySelector('.list-container--openrooms');
             expect(_.includes(list.classList, 'hidden')).toBeTruthy();
-
             await test_utils.openChatRoom(_converse, 'room', 'conference.shakespeare.lit', 'JC');
-            expect(_converse.rooms_list_view === undefined).toBeFalsy();
 
             const lview = _converse.rooms_list_view
             await u.waitUntil(() => lview.el.querySelectorAll(".open-room").length);
@@ -37,7 +35,7 @@
             room_els = _converse.rooms_list_view.el.querySelectorAll(".open-room");
             expect(room_els.length).toBe(1);
             expect(room_els[0].innerText).toBe('lounge@montague.lit');
-            list = controlbox.el.querySelector('div.rooms-list-container');
+            list = controlbox.el.querySelector('.list-container--openrooms');
             u.waitUntil(() => _.includes(list.classList, 'hidden'));
 
             view = _converse.chatboxviews.get('lounge@montague.lit');
@@ -45,11 +43,10 @@
             room_els = _converse.rooms_list_view.el.querySelectorAll(".open-room");
             expect(room_els.length).toBe(0);
 
-            list = controlbox.el.querySelector('div.rooms-list-container');
+            list = controlbox.el.querySelector('.list-container--openrooms');
             expect(_.includes(list.classList, 'hidden')).toBeTruthy();
             done();
-            }
-        ));
+        }));
 
         it("uses bookmarks to determine groupchat names",
             mock.initConverse(
@@ -100,7 +97,7 @@
 
             await _converse.api.waitUntil('roomsListInitialized');
             const controlbox = _converse.chatboxviews.get('controlbox');
-            const list = controlbox.el.querySelector('div.rooms-list-container');
+            const list = controlbox.el.querySelector('.list-container--openrooms');
             expect(_.includes(list.classList, 'hidden')).toBeFalsy();
             const items = list.querySelectorAll('.list-item');
             expect(items.length).toBe(1);

src/headless/converse-core.js

@@ -355,7 +355,7 @@ _converse.isUniView = function () {
 };
 
 _converse.createStore = function (id, storage) {
-    const s = storage ? storage : _converse.storage[_converse.config.get('storage')];
+    const s = storage ? storage : _converse.config.get('storage');
     return new BrowserStorage[s](id);
 }
 

src/headless/utils/core.js

@@ -169,13 +169,17 @@ u.isOnlyMessageDeliveryReceipt = function (msg) {
     return msg['received'] && u.isEmptyMessage(msg);
 };
 
+u.isChatRoom = function (model) {
+    return model && (model.get('type') === 'chatroom');
+}
+
 u.isHeadlineMessage = function (_converse, message) {
     const from_jid = message.getAttribute('from');
     if (message.getAttribute('type') === 'headline') {
         return true;
     }
     const chatbox = _converse.chatboxes.get(Strophe.getBareJidFromJid(from_jid));
-    if (chatbox && chatbox.get('type') === _converse.CHATROOMS_TYPE) {
+    if (u.isChatRoom(chatbox)) {
         return false;
     }
     if (message.getAttribute('type') !== 'error' && from_jid && !_.includes(from_jid, '@')) {

src/templates/rooms_list.html

+<div class="list-container list-container--openrooms {{{ !o.rooms.length && 'hidden' || '' }}}">
+
 <a href="#" class="list-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
-    <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
-    </span> {{{o.label_rooms}}}</a>
-<div class="items-list rooms-list open-rooms-list"></div>
+<span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
+</span>  {{{o.label_rooms}}}</a>
+
+<div class="items-list rooms-list open-rooms-list {{{ o.collapsed && 'collapsed' }}}">
+    {[o.rooms.forEach(function (room) { ]}
+        <div class="list-item controlbox-padded available-chatroom d-flex flex-row
+            {[ if (o.currently_open(room)) { ]} open {[ } ]}
+            {[ if (room.get('num_unread_general')) { ]} unread-msgs {[ } ]}"
+            data-room-jid="{{{room.get('jid')}}}">
+
+        {[ if (room.get('num_unread')) { ]}
+            <span class="list-item-badge badge badge-room-color msgs-indicator">{{{ room.get('num_unread') }}}</span>
+        {[ } ]}
+        <a class="list-item-link open-room available-room w-100"
+            data-room-jid="{{{room.get('jid')}}}"
+            title="{{{o.open_title}}}" href="#">{{{room.getDisplayName()}}}</a>
+
+        {[ if (o.allow_bookmarks) { ]}
+        <a class="list-item-action fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark {[ } ]}"
+           data-room-jid="{{{room.get('jid')}}}"
+           data-bookmark-name="{{{room.getDisplayName()}}}"
+           title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
+           href="#"></a>
+        {[ } ]}
+
+        <a class="list-item-action room-info fa fa-info-circle"
+           data-room-jid="{{{room.get('jid')}}}"
+           title="{{{o.info_title}}}" href="#"></a>
+
+        <a class="list-item-action fa fa-sign-out-alt close-room"
+           data-room-jid="{{{room.get('jid')}}}"
+           data-room-name="{{{room.getDisplayName()}}}"
+           title="{{{o.info_leave_room}}}" href="#"></a>
+
+        </div>
+    {[ }) ]}
+</div>
+</div>

src/templates/rooms_list_item.html

-<div class="list-item controlbox-padded available-chatroom d-flex flex-row
-    {[ if (o.currently_open) { ]} open {[ } ]}
-    {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}"
-    data-room-jid="{{{o.jid}}}">
-
-{[ if (o.num_unread) { ]}
-    <span class="list-item-badge badge badge-room-color msgs-indicator">{{{ o.num_unread }}}</span>
-{[ } ]}
-<a class="list-item-link open-room available-room w-100"
-    data-room-jid="{{{o.jid}}}"
-    title="{{{o.open_title}}}" href="#">{{{o.name || o.jid}}}</a>
-
-{[ if (o.allow_bookmarks) { ]}
-<a class="list-item-action fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark {[ } ]}"
-   data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
-   title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
-   href="#"></a>
-{[ } ]}
-
-<a class="list-item-action room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
-   title="{{{o.info_title}}}" href="#"></a>
-
-<a class="list-item-action fa fa-sign-out-alt close-room"
-   data-room-jid="{{{o.jid}}}"
-   data-room-name="{{{o.name || o.jid}}}"
-   title="{{{o.info_leave_room}}}" href="#"></a>
-
-</div>