Use lit-html to render room description in modal
This commit is contained in:
parent
5e0b05356f
commit
c1847a0b34
|
@ -1,9 +1,9 @@
|
|||
import BootstrapModal from "./base.js";
|
||||
import log from "@converse/headless/log";
|
||||
import tpl_list_chatrooms_modal from "./templates/muc-list.js";
|
||||
import tpl_room_description from "templates/room_description.html";
|
||||
import tpl_room_description from "templates/room_description.js";
|
||||
import tpl_spinner from "templates/spinner.js";
|
||||
import { __ } from '../i18n';
|
||||
import { __ } from 'i18n';
|
||||
import { _converse, api, converse } from "@converse/headless/core";
|
||||
import { getAttributes } from '@converse/headless/shared/parsers';
|
||||
import { head } from "lodash-es";
|
||||
|
@ -23,7 +23,7 @@ function insertRoomInfo (el, stanza) {
|
|||
el.querySelector('a.room-info').classList.add('selected');
|
||||
el.insertAdjacentHTML(
|
||||
'beforeEnd',
|
||||
tpl_room_description({
|
||||
u.getElementFromTemplateResult(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,
|
||||
|
@ -37,23 +37,8 @@ function insertRoomInfo (el, stanza) {
|
|||
'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')
|
||||
}));
|
||||
'unmoderated': sizzle('feature[var="muc_unmoderated"]', stanza).length
|
||||
})));
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -1,43 +0,0 @@
|
|||
<!-- FIXME: check markup in mockup -->
|
||||
<div class="room-info">
|
||||
<p class="room-info"><strong>{{{o.label_jid}}}</strong> {{{o.jid}}}</p>
|
||||
<p class="room-info"><strong>{{{o.label_desc}}}</strong> {{{o.desc}}}</p>
|
||||
<p class="room-info"><strong>{{{o.label_occ}}}</strong> {{{o.occ}}}</p>
|
||||
<p class="room-info"><strong>{{{o.label_features}}}</strong>
|
||||
<ul>
|
||||
{[ if (o.passwordprotected) { ]}
|
||||
<li class="room-info locked">{{{o.label_requires_auth}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.hidden) { ]}
|
||||
<li class="room-info">{{{o.label_hidden}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.membersonly) { ]}
|
||||
<li class="room-info">{{{o.label_requires_invite}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.moderated) { ]}
|
||||
<li class="room-info">{{{o.label_moderated}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.nonanonymous) { ]}
|
||||
<li class="room-info">{{{o.label_non_anon}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.open) { ]}
|
||||
<li class="room-info">{{{o.label_open_room}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.persistent) { ]}
|
||||
<li class="room-info">{{{o.label_permanent_room}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.publicroom) { ]}
|
||||
<li class="room-info">{{{o.label_public}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.semianonymous) { ]}
|
||||
<li class="room-info">{{{o.label_semi_anon}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.temporary) { ]}
|
||||
<li class="room-info">{{{o.label_temp_room}}}</li>
|
||||
{[ } ]}
|
||||
{[ if (o.unmoderated) { ]}
|
||||
<li class="room-info">{{{o.label_unmoderated}}}</li>
|
||||
{[ } ]}
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
|
@ -0,0 +1,41 @@
|
|||
import { html } from "lit-html";
|
||||
import { __ } from 'i18n';
|
||||
|
||||
export default (o) => {
|
||||
const i18n_desc = __('Description:');
|
||||
const i18n_jid = __('Groupchat Address (JID):');
|
||||
const i18n_occ = __('Participants:');
|
||||
const i18n_features = __('Features:');
|
||||
const i18n_requires_auth = __('Requires authentication');
|
||||
const i18n_hidden = __('Hidden');
|
||||
const i18n_requires_invite = __('Requires an invitation');
|
||||
const i18n_moderated = __('Moderated');
|
||||
const i18n_non_anon = __('Non-anonymous');
|
||||
const i18n_open_room = __('Open');
|
||||
const i18n_permanent_room = __('Permanent');
|
||||
const i18n_public = __('Public');
|
||||
const i18n_semi_anon = __('Semi-anonymous');
|
||||
const i18n_temp_room = __('Temporary');
|
||||
const i18n_unmoderated = __('Unmoderated');
|
||||
return html`
|
||||
<div class="room-info">
|
||||
<p class="room-info"><strong>${i18n_jid}</strong> ${o.jid}</p>
|
||||
<p class="room-info"><strong>${i18n_desc}</strong> ${o.desc}</p>
|
||||
<p class="room-info"><strong>${i18n_occ}</strong> ${o.occ}</p>
|
||||
<p class="room-info"><strong>${i18n_features}</strong>
|
||||
<ul>
|
||||
${ o.passwordprotected ? html`<li class="room-info locked">${i18n_requires_auth}</li>` : '' }
|
||||
${ o.hidden ? html`<li class="room-info">${i18n_hidden}</li>` : '' }
|
||||
${ o.membersonly ? html`<li class="room-info">${i18n_requires_invite}</li>` : '' }
|
||||
${ o.moderated ? html`<li class="room-info">${i18n_moderated}</li>` : '' }
|
||||
${ o.nonanonymous ? html`<li class="room-info">${i18n_non_anon}</li>` : '' }
|
||||
${ o.open ? html`<li class="room-info">${i18n_open_room}</li>` : '' }
|
||||
${ o.persistent ? html`<li class="room-info">${i18n_permanent_room}</li>` : '' }
|
||||
${ o.publicroom ? html`<li class="room-info">${i18n_public}</li>` : '' }
|
||||
${ o.semianonymous ? html`<li class="room-info">${i18n_semi_anon}</li>` : '' }
|
||||
${ o.temporary ? html`<li class="room-info">${i18n_temp_room}</li>` : '' }
|
||||
${ o.unmoderated ? html`<li class="room-info">${i18n_unmoderated}</li>` : '' }
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
`};
|
Loading…
Reference in New Issue