From fe365a6561ab9d6fa4c38b097ab4ce37fd186724 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Wed, 16 Dec 2020 14:05:34 +0100 Subject: [PATCH] Move converse-roomslist plugin into folder --- spec/rai.js | 5 +- src/converse.js | 2 +- src/plugins/roomslist.js | 182 ------------------ src/plugins/roomslist/index.js | 62 ++++++ src/plugins/roomslist/model.js | 9 + .../roomslist/templates/roomslist.js} | 2 +- src/plugins/roomslist/view.js | 115 +++++++++++ 7 files changed, 191 insertions(+), 186 deletions(-) delete mode 100644 src/plugins/roomslist.js create mode 100644 src/plugins/roomslist/index.js create mode 100644 src/plugins/roomslist/model.js rename src/{templates/rooms_list.js => plugins/roomslist/templates/roomslist.js} (99%) create mode 100644 src/plugins/roomslist/view.js diff --git a/spec/rai.js b/spec/rai.js index 808b6af6e..38c74a5b4 100644 --- a/spec/rai.js +++ b/spec/rai.js @@ -1,4 +1,3 @@ - /*global mock, converse */ const { Strophe } = converse.env; @@ -10,7 +9,7 @@ fdescribe("XEP-0437 Room Activity Indicators", function () { it("will be activated for a MUC that becomes hidden", mock.initConverse( - ['rosterGroupsFetched'], {'muc_subscribe_to_rai': true}, + ['rosterGroupsFetched'], {'muc_subscribe_to_rai': true, 'view_mode': 'fullscreen'}, async function (done, _converse) { expect(_converse.session.get('rai_enabled_domains')).toBe(undefined); @@ -90,6 +89,8 @@ fdescribe("XEP-0437 Room Activity Indicators", function () { ``+ `` ); + + view.model.save({'hidden': false}); done(); })); diff --git a/src/converse.js b/src/converse.js index 105c1d3fd..91186ba48 100644 --- a/src/converse.js +++ b/src/converse.js @@ -28,7 +28,7 @@ import "./plugins/omemo.js"; import "./plugins/profile.js"; import "./plugins/push.js"; // XEP-0357 Push Notifications import "./plugins/register.js"; // XEP-0077 In-band registration -import "./plugins/roomslist.js"; // Show currently open chat rooms +import "./plugins/roomslist/index.js"; // Show currently open chat rooms import "./plugins/rosterview.js"; import "./plugins/singleton.js"; /* END: Removable components */ diff --git a/src/plugins/roomslist.js b/src/plugins/roomslist.js deleted file mode 100644 index b6a837cdf..000000000 --- a/src/plugins/roomslist.js +++ /dev/null @@ -1,182 +0,0 @@ -/** - * @module converse-roomslist - * @description - * 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/plugins/muc/index.js"; -import RoomDetailsModal from 'modals/muc-details.js'; -import { _converse, api, converse } from "@converse/headless/core"; -import tpl_rooms_list from "../templates/rooms_list.js"; -import { Model } from '@converse/skeletor/src/model.js'; -import { View } from '@converse/skeletor/src/view.js'; -import { __ } from '../i18n'; - - -const { Strophe } = converse.env; -const u = converse.env.utils; - - -converse.plugins.add('converse-roomslist', { - - /* Optional dependencies are other plugins which might be - * overridden or relied upon, and therefore need to be loaded before - * this plugin. They are called "optional" because they might not be - * available, in which case any overrides applicable to them will be - * ignored. - * - * It's possible however to make optional dependencies non-optional. - * If the setting "strict_plugin_dependencies" is set to true, - * an error will be raised if the plugin is not found. - * - * NB: These plugins need to have already been loaded via require.js. - */ - dependencies: ["converse-singleton", "converse-controlbox", "converse-muc", "converse-bookmarks"], - - initialize () { - /* The initialize function gets called as soon as the plugin is - * loaded by converse.js's plugin machinery. - */ - - // Promises exposed by this plugin - api.promises.add('roomsListInitialized'); - - - _converse.RoomsList = Model.extend({ - defaults: { - "toggle-state": _converse.OPENED - } - }); - - - _converse.RoomsListView = View.extend({ - tagName: 'span', - - initialize () { - this.listenTo(this.model, 'add', this.renderIfChatRoom) - this.listenTo(this.model, 'remove', this.renderIfChatRoom) - this.listenTo(this.model, 'destroy', this.renderIfChatRoom) - this.listenTo(this.model, 'change', this.renderIfRelevantChange) - - const id = `converse.roomslist${_converse.bare_jid}`; - this.list_model = new _converse.RoomsList({id}); - this.list_model.browserStorage = _converse.createStore(id); - this.list_model.fetch(); - this.render(); - this.insertIntoControlBox(); - }, - - renderIfChatRoom (model) { - u.isChatRoom(model) && this.render(); - }, - - renderIfRelevantChange (model) { - const attrs = ['bookmarked', 'hidden', 'name', 'num_unread', 'num_unread_general']; - const changed = model.changed || {}; - if (u.isChatRoom(model) && Object.keys(changed).filter(m => attrs.includes(m)).length) { - this.render(); - } - }, - - toHTML () { - return tpl_rooms_list({ - '_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') - }); - }, - - insertIntoControlBox () { - const controlboxview = _converse.chatboxviews.get('controlbox'); - if (controlboxview !== undefined && !u.rootContains(_converse.root, this.el)) { - const el = controlboxview.el.querySelector('.list-container--openrooms'); - el && el.parentNode.replaceChild(this.el, el); - } - }, - - showRoomDetailsModal (ev) { - const jid = ev.target.getAttribute('data-room-jid'); - const room = _converse.chatboxes.get(jid); - ev.preventDefault(); - api.modal.show(RoomDetailsModal, {'model': room}, ev); - }, - - async openRoom (ev) { - ev.preventDefault(); - const name = ev.target.textContent; - const jid = ev.target.getAttribute('data-room-jid'); - const data = { - 'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid - } - await api.rooms.open(jid, data, true); - api.chatviews.get(jid).maybeFocus(); - }, - - closeRoom (ev) { - ev.preventDefault(); - const name = ev.target.getAttribute('data-room-name'); - const jid = ev.target.getAttribute('data-room-jid'); - if (confirm(__("Are you sure you want to leave the groupchat %1$s?", name))) { - // TODO: replace with API call - _converse.chatboxviews.get(jid).close(); - } - }, - - removeBookmark: _converse.removeBookmarkViaEvent, - addBookmark: _converse.addBookmarkViaEvent, - - toggleRoomsList (ev) { - if (ev && ev.preventDefault) { ev.preventDefault(); } - const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa'); - if (icon_el.classList.contains("fa-caret-down")) { - u.slideIn(this.el.querySelector('.open-rooms-list')).then(() => { - this.list_model.save({'toggle-state': _converse.CLOSED}); - icon_el.classList.remove("fa-caret-down"); - icon_el.classList.add("fa-caret-right"); - }); - } else { - u.slideOut(this.el.querySelector('.open-rooms-list')).then(() => { - this.list_model.save({'toggle-state': _converse.OPENED}); - icon_el.classList.remove("fa-caret-right"); - icon_el.classList.add("fa-caret-down"); - }); - } - } - }); - - const initRoomsListView = function () { - _converse.rooms_list_view = new _converse.RoomsListView({'model': _converse.chatboxes}); - /** - * Triggered once the _converse.RoomsListView has been created and initialized. - * @event _converse#roomsListInitialized - * @example _converse.api.listen.on('roomsListInitialized', status => { ... }); - */ - api.trigger('roomsListInitialized'); - }; - - api.listen.on('connected', async () => { - if (_converse.allow_bookmarks) { - await api.waitUntil('bookmarksInitialized'); - } else { - await Promise.all([ - api.waitUntil('chatBoxesFetched'), - api.waitUntil('roomsPanelRendered') - ]); - } - initRoomsListView(); - }); - - api.listen.on('reconnected', initRoomsListView); - } -}); diff --git a/src/plugins/roomslist/index.js b/src/plugins/roomslist/index.js new file mode 100644 index 000000000..42443aada --- /dev/null +++ b/src/plugins/roomslist/index.js @@ -0,0 +1,62 @@ +/** + * @description + * 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/plugins/muc/index.js"; +import RoomsList from './model.js'; +import RoomsListView from './view.js'; +import { _converse, api, converse } from "@converse/headless/core"; + + +const initRoomsListView = function () { + _converse.rooms_list_view = new _converse.RoomsListView({'model': _converse.chatboxes}); + /** + * Triggered once the _converse.RoomsListView has been created and initialized. + * @event _converse#roomsListInitialized + * @example _converse.api.listen.on('roomsListInitialized', status => { ... }); + */ + api.trigger('roomsListInitialized'); +}; + + +converse.plugins.add('converse-roomslist', { + /* Dependencies are other plugins which might be + * overridden or relied upon, and therefore need to be loaded before + * this plugin. They are called "optional" because they might not be + * available, in which case any overrides applicable to them will be + * ignored. + * + * It's possible however to make optional dependencies non-optional. + * If the setting "strict_plugin_dependencies" is set to true, + * an error will be raised if the plugin is not found. + * + * NB: These plugins need to have already been loaded via require.js. + */ + dependencies: ["converse-singleton", "converse-controlbox", "converse-muc", "converse-bookmarks"], + + initialize () { + // Promises exposed by this plugin + api.promises.add('roomsListInitialized'); + + _converse.RoomsList= RoomsList; + _converse.RoomsListView = RoomsListView; + + // Event handlers + api.listen.on('connected', async () => { + if (_converse.allow_bookmarks) { + await api.waitUntil('bookmarksInitialized'); + } else { + await Promise.all([ + api.waitUntil('chatBoxesFetched'), + api.waitUntil('roomsPanelRendered') + ]); + } + initRoomsListView(); + }); + + api.listen.on('reconnected', initRoomsListView); + } +}); diff --git a/src/plugins/roomslist/model.js b/src/plugins/roomslist/model.js new file mode 100644 index 000000000..1b7664257 --- /dev/null +++ b/src/plugins/roomslist/model.js @@ -0,0 +1,9 @@ +import { _converse } from "@converse/headless/core"; +import { Model } from '@converse/skeletor/src/model.js'; + + +export default Model.extend({ + defaults: { + "toggle-state": _converse.OPENED + } +}); diff --git a/src/templates/rooms_list.js b/src/plugins/roomslist/templates/roomslist.js similarity index 99% rename from src/templates/rooms_list.js rename to src/plugins/roomslist/templates/roomslist.js index 7490f3aeb..00bc42d60 100644 --- a/src/templates/rooms_list.js +++ b/src/plugins/roomslist/templates/roomslist.js @@ -1,5 +1,5 @@ import { html } from "lit-html"; -import { __ } from '../i18n'; +import { __ } from 'i18n'; const bookmark = (o) => { diff --git a/src/plugins/roomslist/view.js b/src/plugins/roomslist/view.js new file mode 100644 index 000000000..60443e31d --- /dev/null +++ b/src/plugins/roomslist/view.js @@ -0,0 +1,115 @@ +import RoomDetailsModal from 'modals/muc-details.js'; +import tpl_rooms_list from "./templates/roomslist.js"; +import { View } from '@converse/skeletor/src/view.js'; +import { __ } from 'i18n'; +import { _converse, api, converse } from "@converse/headless/core"; + +const { Strophe } = converse.env; +const u = converse.env.utils; + + +const RoomsListView = View.extend({ + tagName: 'span', + + initialize () { + this.listenTo(this.model, 'add', this.renderIfChatRoom) + this.listenTo(this.model, 'remove', this.renderIfChatRoom) + this.listenTo(this.model, 'destroy', this.renderIfChatRoom) + this.listenTo(this.model, 'change', this.renderIfRelevantChange) + + const id = `converse.roomslist${_converse.bare_jid}`; + this.list_model = new _converse.RoomsList({id}); + this.list_model.browserStorage = _converse.createStore(id); + this.list_model.fetch(); + this.render(); + this.insertIntoControlBox(); + }, + + renderIfChatRoom (model) { + u.isChatRoom(model) && this.render(); + }, + + renderIfRelevantChange (model) { + const attrs = ['bookmarked', 'hidden', 'name', 'num_unread', 'num_unread_general']; + const changed = model.changed || {}; + if (u.isChatRoom(model) && Object.keys(changed).filter(m => attrs.includes(m)).length) { + this.render(); + } + }, + + toHTML () { + return tpl_rooms_list({ + '_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') + }); + }, + + insertIntoControlBox () { + const controlboxview = _converse.chatboxviews.get('controlbox'); + if (controlboxview !== undefined && !u.rootContains(_converse.root, this.el)) { + const el = controlboxview.el.querySelector('.list-container--openrooms'); + el && el.parentNode.replaceChild(this.el, el); + } + }, + + showRoomDetailsModal (ev) { + const jid = ev.target.getAttribute('data-room-jid'); + const room = _converse.chatboxes.get(jid); + ev.preventDefault(); + api.modal.show(RoomDetailsModal, {'model': room}, ev); + }, + + async openRoom (ev) { + ev.preventDefault(); + const name = ev.target.textContent; + const jid = ev.target.getAttribute('data-room-jid'); + const data = { + 'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid + } + await api.rooms.open(jid, data, true); + api.chatviews.get(jid).maybeFocus(); + }, + + closeRoom (ev) { + ev.preventDefault(); + const name = ev.target.getAttribute('data-room-name'); + const jid = ev.target.getAttribute('data-room-jid'); + if (confirm(__("Are you sure you want to leave the groupchat %1$s?", name))) { + // TODO: replace with API call + _converse.chatboxviews.get(jid).close(); + } + }, + + removeBookmark: _converse.removeBookmarkViaEvent, + addBookmark: _converse.addBookmarkViaEvent, + + toggleRoomsList (ev) { + if (ev && ev.preventDefault) { ev.preventDefault(); } + const icon_el = ev.target.matches('.fa') ? ev.target : ev.target.querySelector('.fa'); + if (icon_el.classList.contains("fa-caret-down")) { + u.slideIn(this.el.querySelector('.open-rooms-list')).then(() => { + this.list_model.save({'toggle-state': _converse.CLOSED}); + icon_el.classList.remove("fa-caret-down"); + icon_el.classList.add("fa-caret-right"); + }); + } else { + u.slideOut(this.el.querySelector('.open-rooms-list')).then(() => { + this.list_model.save({'toggle-state': _converse.OPENED}); + icon_el.classList.remove("fa-caret-right"); + icon_el.classList.add("fa-caret-down"); + }); + } + } +}); + +export default RoomsListView;