Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use lit-html to render MUC heading

Browse Source
This commit is contained in:
JC Brand 2020-02-07 14:58:26 +01:00
parent 64e8291eaf
commit 2235d4c432
8 changed files with 75 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spec/minchats.js
View File

@ -4,7 +4,6 @@
const _ = converse.env._;
const $msg = converse.env.$msg;
const u = converse.env.utils;
const Strophe = converse.env.Strophe;
describe("The Minimized Chats Widget", function () {

22
src/converse-bookmark-views.js
View File

@ -7,6 +7,7 @@
import "@converse/headless/converse-muc";
import { Model } from 'skeletor.js/src/model.js';
import { View } from 'skeletor.js/src/view.js';
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
import converse from "@converse/headless/converse-core";
import tpl_bookmarks_list from "templates/bookmarks_list.js"
@ -39,15 +40,21 @@ converse.plugins.add('converse-bookmark-views', {
events: {
'click .toggle-bookmark': 'toggleBookmark'
},
async renderHeading () {
this.__super__.renderHeading.apply(this, arguments);
getHeadingButtons () {
const { _converse } = this.__super__;
const buttons = this.__super__.getHeadingButtons.call(this);
if (_converse.allow_bookmarks) {
const supported = await _converse.checkBookmarksSupport();
if (supported) {
this.renderBookmarkToggle();
}
const supported = _converse.checkBookmarksSupport();
const info_minimize = __('Minimize this chat box');
const info_toggle_bookmark = this.model.get('bookmarked') ? __('Unbookmark this groupchat') : __('Bookmark this groupchat');
const bookmarked = this.model.get('bookmarked');
const template = html`<a class="chatbox-btn toggle-bookmark fa fa-bookmark ${bookmarked ? 'button-on' : ''}" title="${info_toggle_bookmark}"></a>`;
const names = buttons.map(t => t.name);
const idx = names.indexOf('configure');
const template_promise = supported.then(s => s ? template : '');
return idx > -1 ? [...buttons.slice(0, idx), template_promise, ...buttons.slice(idx)] : [template_promise, ...buttons];
}
return buttons;
}
}
},
@ -96,9 +103,6 @@ converse.plugins.add('converse-bookmark-views', {
const bookmarkableChatRoomView = {
renderBookmarkToggle () {
if (this.el.querySelector('.chat-head .toggle-bookmark')) {
return;
}
const bookmark_button = tpl_chatroom_bookmark_toggle(
_.assignIn(this.model.toJSON(), {
'info_toggle_bookmark': this.model.get('bookmarked') ?

24
src/converse-minimize.js
View File

@ -7,6 +7,8 @@ import "converse-chatview";
import { Model } from 'skeletor.js/src/model.js';
import { Overview } from "skeletor.js/src/overview";
import { View } from "skeletor.js/src/view";
import { __ } from '@converse/headless/i18n';
import { html } from "lit-html";
import converse from "@converse/headless/converse-core";
import tpl_chatbox_minimize from "templates/chatbox_minimize.html";
import tpl_chats_panel from "templates/chats_panel.html";
@ -148,21 +150,13 @@ converse.plugins.add('converse-minimize', {
return result;
},
generateHeadingHTML () {
const { _converse } = this.__super__,
{ __ } = _converse;
const html = this.__super__.generateHeadingHTML.apply(this, arguments);
const div = document.createElement('div');
div.innerHTML = html;
const buttons_row = div.querySelector('.chatbox-title__buttons')
const button = buttons_row.querySelector('.close-chatbox-button');
const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')})
if (button) {
button.insertAdjacentHTML('afterend', minimize_el);
} else {
buttons_row.insertAdjacentHTML('beforeEnd', minimize_el);
}
return div.innerHTML;
getHeadingButtons () {
const buttons = this.__super__.getHeadingButtons.call(this);
const info_minimize = __('Minimize this chat box');
const template = html`<a class="chatbox-btn toggle-chatbox-button fa fa-minus" title="${info_minimize}"></a>`;
const names = buttons.map(t => t.name);
const idx = names.indexOf('signout');
return idx > -1 ? [...buttons.slice(0, idx+1), template, ...buttons.slice(idx+1)] : [template, ...buttons];
}
}
},

43
src/converse-muc-views.js
View File

@ -6,9 +6,10 @@
*/
import "converse-modal";
import "@converse/headless/utils/muc";
import { get, head, isString, isUndefined } from "lodash";
import { View } from 'skeletor.js/src/view.js';
import { Model } from 'skeletor.js/src/model.js';
import { View } from 'skeletor.js/src/view.js';
import { get, head, isString, isUndefined } from "lodash";
import { html, render } from "lit-html";
import { __ } from '@converse/headless/i18n';
import converse from "@converse/headless/converse-core";
import log from "@converse/headless/log";
@ -20,7 +21,7 @@ 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.html";
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";
@ -737,7 +738,7 @@ converse.plugins.add('converse-muc-views', {
const changed = item === null ? [] : Object.keys(item.changed);
const keys = ['affiliation', 'bookmarked', 'jid', 'name', 'description', 'subject'];
if (item === null || changed.filter(v => keys.includes(v)).length) {
this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();
render(this.generateHeadingTemplate(), this.el.querySelector('.chat-head-chatroom'));
}
},
@ -1112,22 +1113,38 @@ converse.plugins.add('converse-muc-views', {
}
},
getHeadingButtons () {
const buttons = [];
if (!_converse.singleton) {
const info_close = __('Close and leave this groupchat');
const template = html`<a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="${info_close}"></a>`;
template.name = 'signout';
buttons.push(template);
}
if (this.model.getOwnAffiliation() === 'owner') {
const info_configure = __('Configure this groupchat');
const template = html`<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="${info_configure} "></a>`
template.name = 'configure';
buttons.push(template);
}
const info_details = __('Show more details about this groupchat');
const template = html`<a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="${info_details}"></a>`;
template.name = 'details';
buttons.push(template);
return buttons;
},
/**
* Returns the groupchat heading HTML to be rendered.
* @private
* @method _converse.ChatRoomView#generateHeadingHTML
* @method _converse.ChatRoomView#generateHeadingTemplate
*/
generateHeadingHTML () {
generateHeadingTemplate () {
return tpl_chatroom_head(
Object.assign(this.model.toJSON(), {
'isOwner': this.model.getOwnAffiliation() === 'owner',
_converse,
'buttons': this.getHeadingButtons(),
'title': this.model.getDisplayName(),
'Strophe': Strophe,
'_converse': _converse,
'info_close': __('Close and leave this groupchat'),
'info_configure': __('Configure this groupchat'),
'info_details': __('Show more details about this groupchat'),
'subject': u.addHyperlinks(xss.filterXSS(get(this.model.get('subject'), 'text'), {'whiteList': {}})),
}));
},

17
src/templates/chatroom_head.html
View File

@ -1,17 +0,0 @@
<div class="chatbox-title">
{[ if (!o._converse.singleton) { ]}
<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
{[ } ]}
<div class="chatbox-title__text" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >{{{ o.title }}}</div>
<div class="chatbox-title__buttons row no-gutters">
{[ if (!o._converse.singleton) { ]}
<a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a>
{[ } ]}
{[ if (o.isOwner) { ]}
<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
{[ } ]}
<a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a>
</div>
</div>
<!-- Sanitized in converse-muc-views. We want to render links. -->
<p class="chat-head__desc">{{o.subject}}</p>

22
src/templates/chatroom_head.js Normal file
View File

@ -0,0 +1,22 @@
import { html } from "lit-html";
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
import { until } from 'lit-html/directives/until.js';
import converse from "@converse/headless/converse-core";
import xss from "xss/dist/xss";
const u = converse.env.utils;
export default (o) => {
const subject = o.subject ? u.addHyperlinks(xss.filterXSS(o.subject.text, {'whiteList': {}})) : '';
return html`
<div class="chatbox-title">
${ (!o._converse.singleton) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
<div class="chatbox-title__text" title="${ (o._converse.locked_muc_domain !== 'hidden') ? o.jid : '' }">${ o.title }</div>
<div class="chatbox-title__buttons row no-gutters">
${ o.buttons.map(b => until(b, '')) }
</div>
</div>
<p class="chat-head__desc">${unsafeHTML(subject)}</p>
`;
}

1
src/templates/profile_modal.js
View File

@ -7,7 +7,6 @@ import { modal_close_button, modal_header_close_button } from "./buttons"
const alt_avatar = __('Your avatar image');
const heading_profile = __('Your Profile');
const i18n_close = __('Close');
const i18n_fingerprint_checkbox_label = __('Checkbox for selecting the following fingerprint');
const i18n_device_without_fingerprint = __('Device without a fingerprint');
const i18n_email = __('Email');

2
webpack.html
View File

@ -29,7 +29,7 @@
persistent_store: 'IndexedDB',
muc_domain: 'conference.chat.example.org',
muc_respect_autojoin: true,
view_mode: 'fullscreen',
view_mode: 'overlayed',
websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
// bosh_service_url: 'http://chat.example.org:5280/http-bind',
muc_show_logs_before_join: true,