Skip to content

C
converse.js
Commit 1898e786 authored by JC Brand's avatar JC Brand
Browse files
Options

Move the MUC list modal to its own file

parent 16ca8044
Show whitespace changes
Inline Side-by-side
Showing with 205 additions and 194 deletions
karma.conf.js
View file @ 1898e786
...@@ -26,7 +26,7 @@ module.exports = function(config) { ...@@ -26,7 +26,7 @@ module.exports = function(config) {
{ pattern: "spec/spoilers.js", type: 'module' }, { pattern: "spec/spoilers.js", type: 'module' },
{ pattern: "spec/emojis.js", type: 'module' }, { pattern: "spec/emojis.js", type: 'module' },
{ pattern: "spec/roomslist.js", type: 'module' }, { pattern: "spec/muclist.js", type: 'module' },
{ pattern: "spec/utils.js", type: 'module' }, { pattern: "spec/utils.js", type: 'module' },
{ pattern: "spec/converse.js", type: 'module' }, { pattern: "spec/converse.js", type: 'module' },
{ pattern: "spec/bookmarks.js", type: 'module' }, { pattern: "spec/bookmarks.js", type: 'module' },
......
spec/muc.js
View file @ 1898e786
...@@ -12,7 +12,6 @@ const u = converse.env.utils; ...@@ -12,7 +12,6 @@ const u = converse.env.utils;
describe("Groupchats", function () { describe("Groupchats", function () {
describe("The \"rooms\" API", function () { describe("The \"rooms\" API", function () {
it("has a method 'close' which closes rooms by JID or all rooms when called with no arguments", it("has a method 'close' which closes rooms by JID or all rooms when called with no arguments",
...@@ -4862,7 +4861,7 @@ describe("Groupchats", function () { ...@@ -4862,7 +4861,7 @@ describe("Groupchats", function () {
const roomspanel = _converse.chatboxviews.get('controlbox').roomspanel; const roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
roomspanel.el.querySelector('.show-list-muc-modal').click(); roomspanel.el.querySelector('.show-list-muc-modal').click();
mock.closeControlBox(_converse); mock.closeControlBox(_converse);
const modal = roomspanel.list_rooms_modal; const modal = roomspanel.muc_list_modal;
await u.waitUntil(() => u.isVisible(modal.el), 1000); await u.waitUntil(() => u.isVisible(modal.el), 1000);
spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve()); spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
roomspanel.delegateEvents(); // We need to rebind all events otherwise our spy won't be called roomspanel.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
...@@ -4939,7 +4938,7 @@ describe("Groupchats", function () { ...@@ -4939,7 +4938,7 @@ describe("Groupchats", function () {
const roomspanel = _converse.chatboxviews.get('controlbox').roomspanel; const roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
roomspanel.el.querySelector('.show-list-muc-modal').click(); roomspanel.el.querySelector('.show-list-muc-modal').click();
mock.closeControlBox(_converse); mock.closeControlBox(_converse);
const modal = roomspanel.list_rooms_modal; const modal = roomspanel.muc_list_modal;
await u.waitUntil(() => u.isVisible(modal.el), 1000); await u.waitUntil(() => u.isVisible(modal.el), 1000);
const server_input = modal.el.querySelector('input[name="server"]'); const server_input = modal.el.querySelector('input[name="server"]');
expect(server_input.value).toBe('muc.example.org'); expect(server_input.value).toBe('muc.example.org');
...@@ -4956,7 +4955,7 @@ describe("Groupchats", function () { ...@@ -4956,7 +4955,7 @@ describe("Groupchats", function () {
const roomspanel = _converse.chatboxviews.get('controlbox').roomspanel; const roomspanel = _converse.chatboxviews.get('controlbox').roomspanel;
roomspanel.el.querySelector('.show-list-muc-modal').click(); roomspanel.el.querySelector('.show-list-muc-modal').click();
mock.closeControlBox(_converse); mock.closeControlBox(_converse);
const modal = roomspanel.list_rooms_modal; const modal = roomspanel.muc_list_modal;
await u.waitUntil(() => u.isVisible(modal.el), 1000); await u.waitUntil(() => u.isVisible(modal.el), 1000);
spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve()); spyOn(_converse.ChatRoom.prototype, 'getDiscoInfo').and.callFake(() => Promise.resolve());
roomspanel.delegateEvents(); // We need to rebind all events otherwise our spy won't be called roomspanel.delegateEvents(); // We need to rebind all events otherwise our spy won't be called
......
spec/roomslist.js → spec/muclist.js
View file @ 1898e786
/* global mock */ /* global mock, converse */
describe("A list of open groupchats", function () { describe("A list of open groupchats", function () {
......
src/converse-muc-views.js
View file @ 1898e786
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
*/ */
import "@converse/headless/utils/muc"; import "@converse/headless/utils/muc";
import "converse-modal"; import "converse-modal";
import MUCListModal from 'modals/muc-list.js';
import ModeratorToolsModal from "./modals/moderator-tools.js"; import ModeratorToolsModal from "./modals/moderator-tools.js";
import RoomDetailsModal from 'modals/muc-details.js'; import RoomDetailsModal from 'modals/muc-details.js';
import log from "@converse/headless/log"; import log from "@converse/headless/log";
import st from "@converse/headless/utils/stanza";
import tpl_add_chatroom_modal from "templates/add_chatroom_modal.js"; import tpl_add_chatroom_modal from "templates/add_chatroom_modal.js";
import tpl_chatroom from "templates/chatroom.js"; import tpl_chatroom from "templates/chatroom.js";
import tpl_chatroom_bottom_panel from "templates/chatroom_bottom_panel.html"; import tpl_chatroom_bottom_panel from "templates/chatroom_bottom_panel.html";
...@@ -17,12 +17,10 @@ import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html"; ...@@ -17,12 +17,10 @@ import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html";
import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html"; import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html";
import tpl_chatroom_head from "templates/chatroom_head.js"; import tpl_chatroom_head from "templates/chatroom_head.js";
import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html"; import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html";
import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
import tpl_muc_config_form from "templates/muc_config_form.js"; import tpl_muc_config_form from "templates/muc_config_form.js";
import tpl_muc_invite_modal from "templates/muc_invite_modal.js"; import tpl_muc_invite_modal from "templates/muc_invite_modal.js";
import tpl_muc_password_form from "templates/muc_password_form.js"; import tpl_muc_password_form from "templates/muc_password_form.js";
import tpl_muc_sidebar from "templates/muc_sidebar.js"; import tpl_muc_sidebar from "templates/muc_sidebar.js";
import tpl_room_description from "templates/room_description.html";
import tpl_room_panel from "templates/room_panel.html"; import tpl_room_panel from "templates/room_panel.html";
import tpl_spinner from "templates/spinner.html"; import tpl_spinner from "templates/spinner.html";
import { BootstrapModal } from "./converse-modal.js"; import { BootstrapModal } from "./converse-modal.js";
...@@ -30,10 +28,10 @@ import { Model } from '@converse/skeletor/src/model.js'; ...@@ -30,10 +28,10 @@ import { Model } from '@converse/skeletor/src/model.js';
import { View } from '@converse/skeletor/src/view.js'; import { View } from '@converse/skeletor/src/view.js';
import { __ } from '@converse/headless/i18n'; import { __ } from '@converse/headless/i18n';
import { api, converse } from "@converse/headless/converse-core"; import { api, converse } from "@converse/headless/converse-core";
import { debounce, head, isString, isUndefined } from "lodash-es"; import { debounce, isString, isUndefined } from "lodash-es";
import { render } from "lit-html"; import { render } from "lit-html";
const { Strophe, sizzle, $iq, $pres } = converse.env; const { Strophe, sizzle, $pres } = converse.env;
const u = converse.env.utils; const u = converse.env.utils;
const OWNER_COMMANDS = ['owner']; const OWNER_COMMANDS = ['owner'];
...@@ -151,184 +149,6 @@ converse.plugins.add('converse-muc-views', { ...@@ -151,184 +149,6 @@ converse.plugins.add('converse-muc-views', {
Object.assign(_converse.ControlBoxView.prototype, viewWithRoomsPanel); Object.assign(_converse.ControlBoxView.prototype, viewWithRoomsPanel);
} }
/* Insert groupchat info (based on returned #disco IQ stanza)
* @function insertRoomInfo
* @param { HTMLElement } el - The HTML DOM element that contains the info.
* @param { XMLElement } stanza - The IQ stanza containing the groupchat info.
*/
function insertRoomInfo (el, stanza) {
// All MUC features found here: https://xmpp.org/registrar/disco-features.html
el.querySelector('span.spinner').remove();
el.querySelector('a.room-info').classList.add('selected');
el.insertAdjacentHTML(
'beforeEnd',
tpl_room_description({
'jid': stanza.getAttribute('from'),
'desc': head(sizzle('field[var="muc#roominfo_description"] value', stanza))?.textContent,
'occ': head(sizzle('field[var="muc#roominfo_occupants"] value', stanza))?.textContent,
'hidden': sizzle('feature[var="muc_hidden"]', stanza).length,
'membersonly': sizzle('feature[var="muc_membersonly"]', stanza).length,
'moderated': sizzle('feature[var="muc_moderated"]', stanza).length,
'nonanonymous': sizzle('feature[var="muc_nonanonymous"]', stanza).length,
'open': sizzle('feature[var="muc_open"]', stanza).length,
'passwordprotected': sizzle('feature[var="muc_passwordprotected"]', stanza).length,
'persistent': sizzle('feature[var="muc_persistent"]', stanza).length,
'publicroom': sizzle('feature[var="muc_publicroom"]', stanza).length,
'semianonymous': sizzle('feature[var="muc_semianonymous"]', stanza).length,
'temporary': sizzle('feature[var="muc_temporary"]', stanza).length,
'unmoderated': sizzle('feature[var="muc_unmoderated"]', stanza).length,
'label_desc': __('Description:'),
'label_jid': __('Groupchat Address (JID):'),
'label_occ': __('Participants:'),
'label_features': __('Features:'),
'label_requires_auth': __('Requires authentication'),
'label_hidden': __('Hidden'),
'label_requires_invite': __('Requires an invitation'),
'label_moderated': __('Moderated'),
'label_non_anon': __('Non-anonymous'),
'label_open_room': __('Open'),
'label_permanent_room': __('Permanent'),
'label_public': __('Public'),
'label_semi_anon': __('Semi-anonymous'),
'label_temp_room': __('Temporary'),
'label_unmoderated': __('Unmoderated')
}));
}
/**
* Show/hide extra information about a groupchat in a listing.
* @function toggleRoomInfo
* @param { Event }
*/
function toggleRoomInfo (ev) {
const parent_el = u.ancestor(ev.target, '.room-item');
const div_el = parent_el.querySelector('div.room-info');
if (div_el) {
u.slideIn(div_el).then(u.removeElement)
parent_el.querySelector('a.room-info').classList.remove('selected');
} else {
parent_el.insertAdjacentHTML('beforeend', tpl_spinner());
api.disco.info(ev.target.getAttribute('data-room-jid'), null)
.then(stanza => insertRoomInfo(parent_el, stanza))
.catch(e => log.error(e));
}
}
_converse.ListChatRoomsModal = BootstrapModal.extend({
id: "list-chatrooms-modal",
initialize () {
this.items = [];
this.loading_items = false;
BootstrapModal.prototype.initialize.apply(this, arguments);
if (api.settings.get('muc_domain') && !this.model.get('muc_domain')) {
this.model.save('muc_domain', api.settings.get('muc_domain'));
}
this.listenTo(this.model, 'change:muc_domain', this.onDomainChange);
},
toHTML () {
const muc_domain = this.model.get('muc_domain') || api.settings.get('muc_domain');
return tpl_list_chatrooms_modal(
Object.assign(this.model.toJSON(), {
'show_form': !api.settings.get('locked_muc_domain'),
'server_placeholder': muc_domain ? muc_domain : __('conference.example.org'),
'items': this.items,
'loading_items': this.loading_items,
'openRoom': ev => this.openRoom(ev),
'setDomainFromEvent': ev => this.setDomainFromEvent(ev),
'submitForm': ev => this.showRooms(ev),
'toggleRoomInfo': ev => this.toggleRoomInfo(ev)
}));
},
afterRender () {
if (api.settings.get('locked_muc_domain')) {
this.updateRoomsList();
} else {
this.el.addEventListener('shown.bs.modal',
() => this.el.querySelector('input[name="server"]').focus(),
false
);
}
},
openRoom (ev) {
ev.preventDefault();
const jid = ev.target.getAttribute('data-room-jid');
const name = ev.target.getAttribute('data-room-name');
this.modal.hide();
api.rooms.open(jid, {'name': name}, true);
},
toggleRoomInfo (ev) {
ev.preventDefault();
toggleRoomInfo(ev);
},
onDomainChange () {
api.settings.get('auto_list_rooms') && this.updateRoomsList();
},
/**
* Handle the IQ stanza returned from the server, containing
* all its public groupchats.
* @private
* @method _converse.ChatRoomView#onRoomsFound
* @param { HTMLElement } iq
*/
onRoomsFound (iq) {
this.loading_items = false;
const rooms = iq ? sizzle('query item', iq) : [];
if (rooms.length) {
this.model.set({'feedback_text': __('Groupchats found')}, {'silent': true});
this.items = rooms.map(st.getAttributes);
} else {
this.items = [];
this.model.set({'feedback_text': __('No groupchats found')}, {'silent': true});
}
this.render();
return true;
},
/**
* Send an IQ stanza to the server asking for all groupchats
* @private
* @method _converse.ChatRoomView#updateRoomsList
*/
updateRoomsList () {
const iq = $iq({
'to': this.model.get('muc_domain'),
'from': _converse.connection.jid,
'type': "get"
}).c("query", {xmlns: Strophe.NS.DISCO_ITEMS});
api.sendIQ(iq)
.then(iq => this.onRoomsFound(iq))
.catch(() => this.onRoomsFound())
},
showRooms (ev) {
ev.preventDefault();
this.loading_items = true;
this.render();
const data = new FormData(ev.target);
this.model.setDomain(data.get('server'));
this.updateRoomsList();
},
setDomainFromEvent (ev) {
this.model.setDomain(ev.target.value);
},
setNick (ev) {
this.model.save({nick: ev.target.value});
}
});
_converse.AddChatRoomModal = BootstrapModal.extend({ _converse.AddChatRoomModal = BootstrapModal.extend({
id: 'add-chatroom-modal', id: 'add-chatroom-modal',
...@@ -1716,7 +1536,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -1716,7 +1536,7 @@ converse.plugins.add('converse-muc-views', {
id: 'chatrooms', id: 'chatrooms',
events: { events: {
'click a.controlbox-heading__btn.show-add-muc-modal': 'showAddRoomModal', 'click a.controlbox-heading__btn.show-add-muc-modal': 'showAddRoomModal',
'click a.controlbox-heading__btn.show-list-muc-modal': 'showListRoomsModal' 'click a.controlbox-heading__btn.show-list-muc-modal': 'showMUCListModal'
}, },
render () { render () {
...@@ -1735,11 +1555,11 @@ converse.plugins.add('converse-muc-views', { ...@@ -1735,11 +1555,11 @@ converse.plugins.add('converse-muc-views', {
this.add_room_modal.show(ev); this.add_room_modal.show(ev);
}, },
showListRoomsModal(ev) { showMUCListModal(ev) {
if (this.list_rooms_modal === undefined) { if (this.muc_list_modal === undefined) {
this.list_rooms_modal = new _converse.ListChatRoomsModal({'model': this.model}); this.muc_list_modal = new MUCListModal({'model': this.model});
} }
this.list_rooms_modal.show(ev); this.muc_list_modal.show(ev);
} }
}); });
......
src/modals/muc-list.js 0 → 100644
View file @ 1898e786
import log from "@converse/headless/log";
import sizzle from 'sizzle';
import st from "@converse/headless/utils/stanza";
import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
import tpl_room_description from "templates/room_description.html";
import tpl_spinner from "templates/spinner.html";
import { BootstrapModal } from "../converse-modal.js";
import { Strophe, $iq } from 'strophe.js/src/strophe';
import { __ } from '@converse/headless/i18n';
import { _converse, api, converse } from "@converse/headless/converse-core";
import { head } from "lodash-es";
const u = converse.env.utils;
/* Insert groupchat info (based on returned #disco IQ stanza)
* @function insertRoomInfo
* @param { HTMLElement } el - The HTML DOM element that contains the info.
* @param { XMLElement } stanza - The IQ stanza containing the groupchat info.
*/
function insertRoomInfo (el, stanza) {
// All MUC features found here: https://xmpp.org/registrar/disco-features.html
el.querySelector('span.spinner').remove();
el.querySelector('a.room-info').classList.add('selected');
el.insertAdjacentHTML(
'beforeEnd',
tpl_room_description({
'jid': stanza.getAttribute('from'),
'desc': head(sizzle('field[var="muc#roominfo_description"] value', stanza))?.textContent,
'occ': head(sizzle('field[var="muc#roominfo_occupants"] value', stanza))?.textContent,
'hidden': sizzle('feature[var="muc_hidden"]', stanza).length,
'membersonly': sizzle('feature[var="muc_membersonly"]', stanza).length,
'moderated': sizzle('feature[var="muc_moderated"]', stanza).length,
'nonanonymous': sizzle('feature[var="muc_nonanonymous"]', stanza).length,
'open': sizzle('feature[var="muc_open"]', stanza).length,
'passwordprotected': sizzle('feature[var="muc_passwordprotected"]', stanza).length,
'persistent': sizzle('feature[var="muc_persistent"]', stanza).length,
'publicroom': sizzle('feature[var="muc_publicroom"]', stanza).length,
'semianonymous': sizzle('feature[var="muc_semianonymous"]', stanza).length,
'temporary': sizzle('feature[var="muc_temporary"]', stanza).length,
'unmoderated': sizzle('feature[var="muc_unmoderated"]', stanza).length,
'label_desc': __('Description:'),
'label_jid': __('Groupchat Address (JID):'),
'label_occ': __('Participants:'),
'label_features': __('Features:'),
'label_requires_auth': __('Requires authentication'),
'label_hidden': __('Hidden'),
'label_requires_invite': __('Requires an invitation'),
'label_moderated': __('Moderated'),
'label_non_anon': __('Non-anonymous'),
'label_open_room': __('Open'),
'label_permanent_room': __('Permanent'),
'label_public': __('Public'),
'label_semi_anon': __('Semi-anonymous'),
'label_temp_room': __('Temporary'),
'label_unmoderated': __('Unmoderated')
}));
}
/**
* Show/hide extra information about a groupchat in a listing.
* @function toggleRoomInfo
* @param { Event }
*/
function toggleRoomInfo (ev) {
const parent_el = u.ancestor(ev.target, '.room-item');
const div_el = parent_el.querySelector('div.room-info');
if (div_el) {
u.slideIn(div_el).then(u.removeElement)
parent_el.querySelector('a.room-info').classList.remove('selected');
} else {
parent_el.insertAdjacentHTML('beforeend', tpl_spinner());
api.disco.info(ev.target.getAttribute('data-room-jid'), null)
.then(stanza => insertRoomInfo(parent_el, stanza))
.catch(e => log.error(e));
}
}
export default BootstrapModal.extend({
id: "list-chatrooms-modal",
initialize () {
this.items = [];
this.loading_items = false;
BootstrapModal.prototype.initialize.apply(this, arguments);
if (api.settings.get('muc_domain') && !this.model.get('muc_domain')) {
this.model.save('muc_domain', api.settings.get('muc_domain'));
}
this.listenTo(this.model, 'change:muc_domain', this.onDomainChange);
},
toHTML () {
const muc_domain = this.model.get('muc_domain') || api.settings.get('muc_domain');
return tpl_list_chatrooms_modal(
Object.assign(this.model.toJSON(), {
'show_form': !api.settings.get('locked_muc_domain'),
'server_placeholder': muc_domain ? muc_domain : __('conference.example.org'),
'items': this.items,
'loading_items': this.loading_items,
'openRoom': ev => this.openRoom(ev),
'setDomainFromEvent': ev => this.setDomainFromEvent(ev),
'submitForm': ev => this.showRooms(ev),
'toggleRoomInfo': ev => this.toggleRoomInfo(ev)
}));
},
afterRender () {
if (api.settings.get('locked_muc_domain')) {
this.updateRoomsList();
} else {
this.el.addEventListener('shown.bs.modal',
() => this.el.querySelector('input[name="server"]').focus(),
false
);
}
},
openRoom (ev) {
ev.preventDefault();
const jid = ev.target.getAttribute('data-room-jid');
const name = ev.target.getAttribute('data-room-name');
this.modal.hide();
api.rooms.open(jid, {'name': name}, true);
},
toggleRoomInfo (ev) {
ev.preventDefault();
toggleRoomInfo(ev);
},
onDomainChange () {
api.settings.get('auto_list_rooms') && this.updateRoomsList();
},
/**
* Handle the IQ stanza returned from the server, containing
* all its public groupchats.
* @private
* @method _converse.ChatRoomView#onRoomsFound
* @param { HTMLElement } iq
*/
onRoomsFound (iq) {
this.loading_items = false;
const rooms = iq ? sizzle('query item', iq) : [];
if (rooms.length) {
this.model.set({'feedback_text': __('Groupchats found')}, {'silent': true});
this.items = rooms.map(st.getAttributes);
} else {
this.items = [];
this.model.set({'feedback_text': __('No groupchats found')}, {'silent': true});
}
this.render();
return true;
},
/**
* Send an IQ stanza to the server asking for all groupchats
* @private
* @method _converse.ChatRoomView#updateRoomsList
*/
updateRoomsList () {
const iq = $iq({
'to': this.model.get('muc_domain'),
'from': _converse.connection.jid,
'type': "get"
}).c("query", {xmlns: Strophe.NS.DISCO_ITEMS});
api.sendIQ(iq)
.then(iq => this.onRoomsFound(iq))
.catch(() => this.onRoomsFound())
},
showRooms (ev) {
ev.preventDefault();
this.loading_items = true;
this.render();
const data = new FormData(ev.target);
this.model.setDomain(data.get('server'));
this.updateRoomsList();
},
setDomainFromEvent (ev) {
this.model.setDomain(ev.target.value);
},
setNick (ev) {
this.model.save({nick: ev.target.value});
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7