diff --git a/src/converse-bookmark-views.js b/src/converse-bookmark-views.js index 6bc31e784..a93cef7f0 100644 --- a/src/converse-bookmark-views.js +++ b/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; diff --git a/src/converse-roomslist.js b/src/converse-roomslist.js index 38a0284c8..30ef3dd97 100644 --- a/src/converse-roomslist.js +++ b/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), - 'allow_bookmarks': _converse.allow_bookmarks && _converse.bookmarks, - '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, + '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, + 'currently_open': room => _converse.isUniView() && !room.get('hidden'), + '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') }); }, diff --git a/src/templates/rooms_list.html b/src/templates/rooms_list.html deleted file mode 100644 index 521e525d3..000000000 --- a/src/templates/rooms_list.html +++ /dev/null @@ -1,40 +0,0 @@ -
- - -{{{o.label_rooms}}} - -
- {[o.rooms.forEach(function (room) { ]} -
- - {[ if (room.get('num_unread')) { ]} - {{{ room.get('num_unread') }}} - {[ } ]} - {{{room.getDisplayName()}}} - - {[ if (o.allow_bookmarks) { ]} - - {[ } ]} - - - - - -
- {[ }) ]} -
-
diff --git a/src/templates/rooms_list.js b/src/templates/rooms_list.js new file mode 100644 index 000000000..56cb353a8 --- /dev/null +++ b/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`${ o.room.get('num_unread') }`; + + +const bookmark = (o) => { + if (o.bookmarked) { + return html` + `; + } else { + return html` + `; + } +} + + +const room_item = (o) => html` +
+ + ${ o.room.get('num_unread') ? unread_indicator(o) : '' } + ${o.room.getDisplayName()} + + ${ o.allow_bookmarks ? bookmark(o) : '' } + + + + +
+`; + +export default (o) => html` +
+ + + ${i18n_rooms} + +
+ ${ o.rooms.map(room => room_item(Object.assign({room}, o))) } +
+
+`;