Skip to content

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

muc-views: Update ListChatRoomsModal to make better use of lit-html

parent 590bb8e3
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 82 deletions
src/converse-muc-views.js
View file @ f68f577b
......@@ -14,25 +14,24 @@ import { render } from "lit-html";
import { __ } from '@converse/headless/i18n';
import converse from "@converse/headless/converse-core";
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_chatroom from "templates/chatroom.js";
import tpl_chatroom_bottom_panel from "templates/chatroom_bottom_panel.html";
import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html";
import tpl_chatroom_details_modal from "templates/chatroom_details_modal.js";
import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html";
import tpl_muc_config_form from "templates/muc_config_form.js";
import tpl_chatroom_head from "templates/chatroom_head.js";
import tpl_muc_invite_modal from "templates/muc_invite_modal.js";
import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html";
import tpl_muc_password_form from "templates/muc_password_form.js";
import tpl_muc_sidebar from "templates/muc_sidebar.js";
import tpl_info from "templates/info.html";
import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
import tpl_moderator_tools_modal from "templates/moderator_tools_modal.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_password_form from "templates/muc_password_form.js";
import tpl_muc_sidebar from "templates/muc_sidebar.js";
import tpl_room_description from "templates/room_description.html";
import tpl_room_item from "templates/room_item.html";
import tpl_room_panel from "templates/room_panel.html";
import tpl_rooms_results from "templates/rooms_results.html";
import tpl_spinner from "templates/spinner.html";
import xss from "xss/dist/xss";
......@@ -408,15 +407,10 @@ converse.plugins.add('converse-muc-views', {
_converse.ListChatRoomsModal = BootstrapModal.extend({
id: "list-chatrooms-modal",
events: {
'submit form': 'showRooms',
'click a.room-info': 'toggleRoomInfo',
'change input[name=nick]': 'setNick',
'change input[name=server]': 'setDomainFromEvent',
'click .open-room': 'openRoom'
},
initialize () {
this.items = [];
this.loading_items = false;
BootstrapModal.prototype.initialize.apply(this, arguments);
if (_converse.muc_domain && !this.model.get('muc_domain')) {
this.model.save('muc_domain', _converse.muc_domain);
......@@ -426,10 +420,17 @@ converse.plugins.add('converse-muc-views', {
toHTML () {
const muc_domain = this.model.get('muc_domain') || _converse.muc_domain;
return tpl_list_chatrooms_modal(Object.assign(this.model.toJSON(), {
'show_form': !_converse.locked_muc_domain,
'server_placeholder': muc_domain ? muc_domain : __('conference.example.org')
}));
return tpl_list_chatrooms_modal(
Object.assign(this.model.toJSON(), {
'show_form': !_converse.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 () {
......@@ -457,59 +458,35 @@ converse.plugins.add('converse-muc-views', {
},
onDomainChange () {
if (_converse.auto_list_rooms) {
this.updateRoomsList();
}
},
roomStanzaItemToHTMLElement (groupchat) {
const name = Strophe.unescapeNode(groupchat.getAttribute('name') || groupchat.getAttribute('jid'));
const div = document.createElement('div');
div.innerHTML = tpl_room_item({
'name': Strophe.xmlunescape(name),
'jid': groupchat.getAttribute('jid'),
'open_title': __('Click to open this groupchat'),
'info_title': __('Show more information on this groupchat')
});
return div.firstElementChild;
},
removeSpinner () {
sizzle('.spinner', this.el).forEach(u.removeElement);
},
informNoRoomsFound () {
const chatrooms_el = this.el.querySelector('.available-chatrooms');
chatrooms_el.innerHTML = tpl_rooms_results({'feedback_text': __('No groupchats found')});
const input_el = this.el.querySelector('input[name="server"]');
input_el.classList.remove('hidden')
this.removeSpinner();
_converse.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) {
/* Handle the IQ stanza returned from the server, containing
* all its public groupchats.
*/
const available_chatrooms = this.el.querySelector('.available-chatrooms');
const rooms = sizzle('query item', iq);
const rooms = iq ? sizzle('query item', iq) : [];
if (rooms.length) {
available_chatrooms.innerHTML = tpl_rooms_results({'feedback_text': __('Groupchats found:')});
const fragment = document.createDocumentFragment();
rooms.map(this.roomStanzaItemToHTMLElement)
.filter(r => r)
.forEach(child => fragment.appendChild(child));
available_chatrooms.appendChild(fragment);
this.removeSpinner();
this.model.set({'feedback_text': __('Groupchats found')}, {'silent': true});
this.items = rooms.map(st.getAttributes);
this.loading_items = false;
this.render();
} else {
this.informNoRoomsFound();
this.model.set('feedback_text', __('No groupchats found'));
}
return true;
},
/**
* Send an IQ stanza to the server asking for all groupchats
* @private
* @method _converse.ChatRoomView#updateRoomsList
*/
updateRoomsList () {
/* Send an IQ stanza to the server asking for all groupchats
*/
const iq = $iq({
'to': this.model.get('muc_domain'),
'from': _converse.connection.jid,
......@@ -517,11 +494,14 @@ converse.plugins.add('converse-muc-views', {
}).c("query", {xmlns: Strophe.NS.DISCO_ITEMS});
api.sendIQ(iq)
.then(iq => this.onRoomsFound(iq))
.catch(() => this.informNoRoomsFound())
.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();
......
src/headless/utils/stanza.js
View file @ f68f577b
......@@ -128,6 +128,20 @@ const stanza_utils = {
return !!sizzle(`result[xmlns="${Strophe.NS.MAM}"]`, original_stanza).pop();
},
/**
* Returns an object containing all attribute names and values for a particular element.
* @private
* @method stanza_utils#getAttributes
* @param { XMLElement } stanza
* @returns { Object }
*/
getAttributes (stanza) {
return stanza.getAttributeNames().reduce((acc, name) => {
acc[name] = Strophe.xmlunescape(stanza.getAttribute(name))
return acc;
}, {});
},
/**
* Extract the XEP-0359 stanza IDs from the passed in stanza
* and return a map containing them.
......
src/templates/bookmarks_list.js
View file @ f68f577b
......@@ -12,7 +12,7 @@ const bookmark_item = (o) => html`
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ (o.is_hidden(o.bm)) ? 'hidden' : ''}" data-room-jid="${o.bm.get('jid')}">
<a class="list-item-link open-room w-100" data-room-jid="${o.bm.get('jid')}"
title="${open_title}"
@click=${o.openRoom}>${o.bm.getDisplayName()}</a>
@click=${o.openRoom}>${o.bm.getDisplayName()}</a>
<a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ${ o.bm.get('bookmarked') ? 'button-on' : '' }"
data-room-jid="${o.bm.get('jid')}"
......
src/templates/list_chatrooms_modal.js
View file @ f68f577b
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import { html } from "lit-html";
import { repeat } from 'lit-html/directives/repeat.js';
import { modal_close_button, modal_header_close_button } from "./buttons"
import spinner from "./spinner.js";
const i18n_info_title = __('Show more information on this groupchat');
const i18n_list_chatrooms = __('Query for Groupchats');
const i18n_server_address = __('Server address');
const i18n_open_title = __('Click to open this groupchat');
const i18n_query = __('Show groupchats');
const i18n_server_address = __('Server address');
const form = (o) => html`
<form class="converse-form list-chatrooms">
<form class="converse-form list-chatrooms"
@submit=${o.submitForm}>
<div class="form-group">
<label for="chatroom">${i18n_server_address}:</label>
<input type="text" value="${o.muc_domain}" required="required" name="server" class="form-control" placeholder="${o.server_placeholder}"/>
<input type="text"
@change=${o.setDomainFromEvent}
value="${o.muc_domain}"
required="required"
name="server"
class="form-control"
placeholder="${o.server_placeholder}"/>
</div>
<input type="submit" class="btn btn-primary" name="list" value="${i18n_query}"/>
</form>
`;
const tpl_item = (o, item) => html`
<li class="room-item list-group-item">
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100"
@click=${o.openRoom}
data-room-jid="${item.jid}"
data-room-name="${item.name}"
title="${i18n_open_title}"
href="#">${item.name || item.jid}</a>
<a class="right room-info icon-room-info"
@click=${o.toggleRoomInfo}
data-room-jid="${item.jid}"
title="${i18n_info_title}"
href="#"></a>
</div>
</li>
`;
export default (o) => html`
<div class="modal-dialog" role="document">
<div class="modal-content">
......@@ -28,7 +57,11 @@ export default (o) => html`
<div class="modal-body d-flex flex-column">
<span class="modal-alert"></span>
${o.show_form ? form(o) : '' }
<ul class="available-chatrooms list-group"></ul>
<ul class="available-chatrooms list-group">
${ o.loading_items ? html`<li class="list-group-item"> ${spinner()} </li>` : '' }
${ o.items.length ? html`<li class="list-group-item active">${ o.feedback_text }:</li>` : '' }
${repeat(o.items, item => item.jid, item => tpl_item(o, item))}
</ul>
</div>
<div class="modal-footer">${modal_close_button}</div>
</div>
......
src/templates/room_item.html deleted 100644 → 0
View file @ 590bb8e3
<li class="room-item list-group-item">
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100"
data-room-jid="{{{o.jid}}}"
data-room-name="{{{o.name}}}"
title="{{{o.open_title}}}"
href="#">{{{o.name}}}</a>
<a class="right room-info icon-room-info"
data-room-jid="{{{o.jid}}}"
title="{{{o.info_title}}}" href="#"></a>
</div>
</li>
src/templates/rooms_results.html deleted 100644 → 0
View file @ 590bb8e3
<li class="list-group-item active">{{{ o.feedback_text }}}</li>
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