diff --git a/spec/minchats.js b/spec/minchats.js index 5a4a28095..7fe23fce2 100644 --- a/spec/minchats.js +++ b/spec/minchats.js @@ -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 () { diff --git a/src/converse-bookmark-views.js b/src/converse-bookmark-views.js index 105813604..5742345ac 100644 --- a/src/converse-bookmark-views.js +++ b/src/converse-bookmark-views.js @@ -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``; + 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') ? diff --git a/src/converse-minimize.js b/src/converse-minimize.js index 214e8d9f5..df29e42cd 100644 --- a/src/converse-minimize.js +++ b/src/converse-minimize.js @@ -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``; + 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]; } } }, diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js index 75fda97f0..2e584d576 100644 --- a/src/converse-muc-views.js +++ b/src/converse-muc-views.js @@ -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``; + template.name = 'signout'; + buttons.push(template); + } + if (this.model.getOwnAffiliation() === 'owner') { + const info_configure = __('Configure this groupchat'); + const template = html`` + template.name = 'configure'; + buttons.push(template); + } + const info_details = __('Show more details about this groupchat'); + const template = html``; + 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': {}})), })); }, diff --git a/src/templates/chatroom_head.html b/src/templates/chatroom_head.html deleted file mode 100644 index 0f71d9c01..000000000 --- a/src/templates/chatroom_head.html +++ /dev/null @@ -1,17 +0,0 @@ -
- {[ if (!o._converse.singleton) { ]} -
- {[ } ]} -
{{{ o.title }}}
-
- {[ if (!o._converse.singleton) { ]} - - {[ } ]} - {[ if (o.isOwner) { ]} - - {[ } ]} - -
-
- -

{{o.subject}}

diff --git a/src/templates/chatroom_head.js b/src/templates/chatroom_head.js new file mode 100644 index 000000000..93c33a3c2 --- /dev/null +++ b/src/templates/chatroom_head.js @@ -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` +
+ ${ (!o._converse.singleton) ? html`
` : '' } +
${ o.title }
+
+ ${ o.buttons.map(b => until(b, '')) } +
+
+

${unsafeHTML(subject)}

+ `; +} diff --git a/src/templates/profile_modal.js b/src/templates/profile_modal.js index 052813687..01c578eaa 100644 --- a/src/templates/profile_modal.js +++ b/src/templates/profile_modal.js @@ -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'); diff --git a/webpack.html b/webpack.html index 9d6fcd3c5..83cabd319 100644 --- a/webpack.html +++ b/webpack.html @@ -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,