roomslist: remove Backbone

src/converse-bookmark-views.js

@@ -13,7 +13,7 @@ import tpl_bookmarks_list from "templates/bookmarks_list.js"
 import tpl_muc_bookmark_form from "templates/muc_bookmark_form.js";
 import tpl_chatroom_bookmark_toggle from "templates/chatroom_bookmark_toggle.html";
 
-const { Backbone, Strophe, _ } = converse.env;
+const { Strophe, _ } = converse.env;
 const u = converse.env.utils;
 
 

src/converse-roomslist.js

@@ -1,17 +1,18 @@
 /**
  * @module converse-roomslist
  * @description
- * Converse.js plugin which shows a list of currently open
- * rooms in the "Rooms Panel" of the ControlBox.
+ *  Converse.js plugin which shows a list of currently open
+ *  rooms in the "Rooms Panel" of the ControlBox.
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
 import "@converse/headless/converse-muc";
 import { Model } from 'skeletor.js/src/model.js';
+import { HTMLView } from 'skeletor.js/src/htmlview.js';
 import converse from "@converse/headless/converse-core";
-import tpl_rooms_list from "templates/rooms_list.html";
+import tpl_rooms_list from "templates/rooms_list.js";
 
-const { Backbone, Strophe, } = converse.env;
+const { Strophe, } = converse.env;
 const u = converse.env.utils;
 
 
@@ -36,7 +37,6 @@ converse.plugins.add('converse-roomslist', {
          * loaded by converse.js's plugin machinery.
          */
         const { _converse } = this;
-        const { __ } = _converse;
 
         // Promises exposed by this plugin
         _converse.api.promises.add('roomsListInitialized');
@@ -49,17 +49,8 @@ converse.plugins.add('converse-roomslist', {
         });
 
 
-        _converse.RoomsListView = Backbone.VDOMView.extend({
-            tagName: 'div',
-            className: 'list-container list-container--openrooms',
-            events: {
-                'click .add-bookmark': 'addBookmark',
-                'click .close-room': 'closeRoom',
-                'click .list-toggle': 'toggleRoomsList',
-                'click .remove-bookmark': 'removeBookmark',
-                'click .open-room': 'openRoom',
-                'click .room-info': 'showRoomDetailsModal'
-            },
+        _converse.RoomsListView = HTMLView.extend({
+            tagName: 'span',
 
             initialize () {
                 this.listenTo(this.model, 'add', this.renderIfChatRoom)
@@ -89,20 +80,18 @@ converse.plugins.add('converse-roomslist', {
 
             toHTML () {
                 return tpl_rooms_list({
-                    'rooms': this.model.filter(m => m.get('type') === _converse.CHATROOMS_TYPE),
+                    '_converse': _converse,
+                    'addBookmark': ev => this.addBookmark(ev),
                     'allow_bookmarks': _converse.allow_bookmarks && _converse.bookmarks,
+                    'closeRoom': ev => this.closeRoom(ev),
                     'collapsed': this.list_model.get('toggle-state') !== _converse.OPENED,
-                    'desc_rooms': __('Click to toggle the list of open groupchats'),
-                    'info_add_bookmark': __('Bookmark this groupchat'),
-                    'info_leave_room': __('Leave this groupchat'),
-                    'info_remove_bookmark': __('Unbookmark this groupchat'),
-                    'info_title': __('Show more information on this groupchat'),
-                    'open_title': __('Click to open this groupchat'),
                     'currently_open': room => _converse.isUniView() && !room.get('hidden'),
-                    'toggle_state': this.list_model.get('toggle-state'),
-                    // Note to translators, "Open Groupchats" refers to groupchats that are open, NOT a command.
-                    'label_rooms': __('Open Groupchats'),
-                    '_converse': _converse,
+                    'openRoom': ev => this.openRoom(ev),
+                    'removeBookmark': ev => this.removeBookmark(ev),
+                    'rooms': this.model.filter(m => m.get('type') === _converse.CHATROOMS_TYPE),
+                    'showRoomDetailsModal': ev => this.showRoomDetailsModal(ev),
+                    'toggleRoomsList': ev => this.toggleRoomsList(ev),
+                    'toggle_state': this.list_model.get('toggle-state')
                 });
             },
 

src/templates/rooms_list.html

@@ -1,40 +0,0 @@
-<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 {{{ 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.js

@@ -0,0 +1,72 @@
+import { html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+
+
+const i18n_desc_rooms = __('Click to toggle the list of open groupchats');
+const i18n_add_bookmark = __('Bookmark this groupchat');
+const i18n_leave_room = __('Leave this groupchat');
+const i18n_remove_bookmark = __('Unbookmark this groupchat');
+const i18n_title = __('Show more information on this groupchat');
+const i18n_open = __('Click to open this groupchat');
+// Note to translators, "Open Groupchats" refers to groupchats that are open, NOT a command.
+const i18n_rooms = __('Open Groupchats');
+
+
+const unread_indicator = (o) => html`<span class="list-item-badge badge badge-room-color msgs-indicator">${ o.room.get('num_unread') }</span>`;
+
+
+const bookmark = (o) => {
+    if (o.bookmarked) {
+        return html`
+            <a class="list-item-action fa fa-bookmark remove-bookmark button-on"
+               data-room-jid="${o.room.get('jid')}"
+               data-bookmark-name="${o.room.getDisplayName()}"
+               @click=${o.removeBookmark}
+               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`;
+    } else {
+        return html`
+            <a class="list-item-action fa fa-bookmark add-bookmark"
+               data-room-jid="${o.room.get('jid')}"
+               data-bookmark-name="${o.room.getDisplayName()}"
+               @click=${o.addBookmark}
+               title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`;
+    }
+}
+
+
+const room_item = (o) => html`
+    <div class="list-item controlbox-padded available-chatroom d-flex flex-row ${ o.currently_open(o.room) ? 'open' : '' } ${ o.room.get('num_unread_general') ? 'unread-msgs' : '' }"
+         data-room-jid="${o.room.get('jid')}">
+
+        ${ o.room.get('num_unread') ? unread_indicator(o) : '' }
+        <a class="list-item-link open-room available-room w-100"
+           data-room-jid="${o.room.get('jid')}"
+           title="${i18n_open}"
+           @click=${o.openRoom}>${o.room.getDisplayName()}</a>
+
+        ${ o.allow_bookmarks ? bookmark(o) : '' }
+
+        <a class="list-item-action room-info fa fa-info-circle"
+           data-room-jid="${o.room.get('jid')}"
+           title="${i18n_title}"
+           @click=${o.showRoomDetailsModal}></a>
+
+        <a class="list-item-action fa fa-sign-out-alt close-room"
+           data-room-jid="${o.room.get('jid')}"
+           data-room-name="${o.room.getDisplayName()}"
+           title="${i18n_leave_room}"
+           @click=${o.closeRoom}></a>
+    </div>
+`;
+
+export default (o) => html`
+    <div class="list-container list-container--openrooms ${ !o.rooms.length && 'hidden' || '' }">
+
+    <a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
+    <span class="fa ${ (o.toggle_state === o._converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span>${i18n_rooms}</a>
+
+    <div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
+        ${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
+    </div>
+    </div>
+`;