roomslist: remove Backbone
This commit is contained in:
JC Brand
parent
c4b48d701f
commit
393a96cf02
@ -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;
|
||||
|
||||
|
||||
|
||||
@ -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')
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -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>
|
||||
72
src/templates/rooms_list.js
Normal file
72
src/templates/rooms_list.js
Normal file
@ -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>
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user