diff --git a/src/plugins/chatview/heading.js b/src/plugins/chatview/heading.js index 24ccee197..a58ee828a 100644 --- a/src/plugins/chatview/heading.js +++ b/src/plugins/chatview/heading.js @@ -9,8 +9,14 @@ import './styles/chat-head.scss'; export default class ChatHeading extends CustomElement { + static get properties () { + return { + 'jid': { type: String }, + } + } + initialize () { - this.model = _converse.chatboxes.get(this.getAttribute('jid')); + this.model = _converse.chatboxes.get(this.jid); this.listenTo(this.model, 'change:status', this.requestUpdate); this.listenTo(this.model, 'vcard:add', this.requestUpdate); this.listenTo(this.model, 'vcard:change', this.requestUpdate); diff --git a/src/plugins/headlines-view/heading.js b/src/plugins/headlines-view/heading.js index 262f63d7e..227cfa56a 100644 --- a/src/plugins/headlines-view/heading.js +++ b/src/plugins/headlines-view/heading.js @@ -1,36 +1,31 @@ import tpl_chat_head from './templates/chat-head.js'; -import { ElementView } from '@converse/skeletor/src/element.js'; +import { CustomElement } from 'shared/components/element.js'; import { __ } from 'i18n'; -import { _converse, api } from "@converse/headless/core"; -import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js'; -import { render } from 'lit'; +import { _converse, api } from "@converse/headless/core.js"; -export default class HeadlinesHeading extends ElementView { +export default class HeadlinesHeading extends CustomElement { - async connectedCallback () { - super.connectedCallback(); - this.model = _converse.chatboxes.get(this.getAttribute('jid')); + static get properties () { + return { + 'jid': { type: String }, + } + } + + async initialize () { + this.model = _converse.chatboxes.get(this.jid); await this.model.initialized; - this.render(); + this.requestUpdate(); } - async render () { - const tpl = await this.generateHeadingTemplate(); - render(tpl, this); - } - - async generateHeadingTemplate () { - const heading_btns = await this.getHeadingButtons(); - const standalone_btns = heading_btns.filter(b => b.standalone); - const dropdown_btns = heading_btns.filter(b => !b.standalone); - return tpl_chat_head( - Object.assign(this.model.toJSON(), { + render () { + return tpl_chat_head({ + ...this.model.toJSON(), + ...{ 'display_name': this.model.getDisplayName(), - 'dropdown_btns': dropdown_btns.map(b => getHeadingDropdownItem(b)), - 'standalone_btns': standalone_btns.map(b => getHeadingStandaloneButton(b)) - }) - ); + 'heading_buttons_promise': this.getHeadingButtons() + } + }); } /** diff --git a/src/plugins/headlines-view/templates/chat-head.js b/src/plugins/headlines-view/templates/chat-head.js index 896f3e51f..a33a355a0 100644 --- a/src/plugins/headlines-view/templates/chat-head.js +++ b/src/plugins/headlines-view/templates/chat-head.js @@ -1,10 +1,26 @@ import { _converse } from '@converse/headless/core'; import { html } from "lit"; import { until } from 'lit/directives/until.js'; +import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js'; export default (o) => { - const tpl_standalone_btns = (o) => o.standalone_btns.reverse().map(b => until(b, '')); + const standalone_btns_promise = o.heading_buttons_promise.then( + btns => btns + .filter(b => b.standalone) + .map(b => getHeadingStandaloneButton(b)) + .reverse() + .map(b => until(b, ''))); + + const dropdown_btns_promise = o.heading_buttons_promise.then( + btns => { + const dropdown_btns = btns + .filter(b => !b.standalone) + .map(b => getHeadingDropdownItem(b)); + return dropdown_btns.length ? html`` : ''; + } + ); + return html`
@@ -12,8 +28,8 @@ export default (o) => {
${ o.display_name }
- ${ o.dropdown_btns.length ? html`` : '' } - ${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' } + ${ until(dropdown_btns_promise, '') } + ${ until(standalone_btns_promise, '') }
${ o.status ? html`

${ o.status }

` : '' } diff --git a/src/plugins/headlines-view/tests/headline.js b/src/plugins/headlines-view/tests/headline.js index 6b6711eb6..beb4a4cce 100644 --- a/src/plugins/headlines-view/tests/headline.js +++ b/src/plugins/headlines-view/tests/headline.js @@ -26,7 +26,9 @@ describe("A headlines box", function () { .c('nick', {'xmlns': "http://jabber.org/protocol/nick"}).t("-wwdmz").up() .c('body').t('SORRY FOR THIS ADVERT'); _converse.connection._dataRecv(mock.createRequest(stanza)); - expect(_converse.api.headlines.get().length === 0); + await new Promise(resolve => setTimeout(resolve, 100)); + const headlines = await _converse.api.headlines.get(); + expect(headlines.length).toBe(0); })); it("will open and display headline messages", mock.initConverse( @@ -71,8 +73,8 @@ describe("A headlines box", function () { await mock.waitForRoster(_converse, 'current', 1); await mock.openControlBox(_converse); - const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; - await mock.openChatBoxFor(_converse, sender_jid); + const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; + await mock.openChatBoxFor(_converse, sender_jid); const { u, $msg} = converse.env; /* { const i18n_tooltip = __('Click to restore this chat'); - const close_color = o.type === 'chatroom' ? "var(--chatroom-head-color)" : "var(--chat-head-text-color)"; + let close_color; + if (o.type === 'chatroom') { + close_color = "var(--chatroom-head-color)"; + } else if (o.type === 'headline') { + close_color = "var(--headline-head-text-color)"; + } else { + close_color = "var(--chat-head-text-color)"; + } + return html`
diff --git a/src/shared/components/dropdown.js b/src/shared/components/dropdown.js index b13140525..a12256975 100644 --- a/src/shared/components/dropdown.js +++ b/src/shared/components/dropdown.js @@ -2,7 +2,7 @@ import 'shared/components/icons.js'; import DOMNavigator from "shared/dom-navigator.js"; import DropdownBase from 'shared/components/dropdownbase.js'; import { KEYCODES } from '@converse/headless/shared/constants.js'; -import { api } from "@converse/headless/core"; +import { api } from "@converse/headless/core.js"; import { html } from 'lit'; import { until } from 'lit/directives/until.js';