From 704b50fb3e9203c1f9188b6f23978f1a37880f94 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 26 Jan 2021 13:22:04 +0100 Subject: [PATCH] Turn HeadlinesBox into a custom element --- src/plugins/chatboxviews/templates/chats.js | 6 +- src/plugins/chatview/view.js | 9 +-- .../headlines-view/templates/chat-head.js | 21 ++++++ src/plugins/headlines-view/view.js | 67 +++++++++++++------ src/plugins/minimize/mixins.js | 6 +- src/shared/chatview.js | 5 ++ 6 files changed, 81 insertions(+), 33 deletions(-) create mode 100644 src/plugins/headlines-view/templates/chat-head.js diff --git a/src/plugins/chatboxviews/templates/chats.js b/src/plugins/chatboxviews/templates/chats.js index 98fd9ba1e..2be673ce1 100644 --- a/src/plugins/chatboxviews/templates/chats.js +++ b/src/plugins/chatboxviews/templates/chats.js @@ -2,7 +2,7 @@ import { html } from 'lit-html'; import { _converse, api } from '@converse/headless/core'; export default () => { - const { chatboxes, CONTROLBOX_TYPE, CHATROOMS_TYPE } = _converse; + const { chatboxes, CONTROLBOX_TYPE, CHATROOMS_TYPE, HEADLINES_TYPE } = _converse; const view_mode = api.settings.get('view_mode'); return html` @@ -20,6 +20,10 @@ export default () => { return html` `; + } else if (m.get('type') === HEADLINES_TYPE) { + return html` + + `; } else { return html` diff --git a/src/plugins/chatview/view.js b/src/plugins/chatview/view.js index 7282ce765..ddb175da2 100644 --- a/src/plugins/chatview/view.js +++ b/src/plugins/chatview/view.js @@ -188,11 +188,6 @@ export default class ChatView extends BaseChatView { this.model.sendFiles(evt.dataTransfer.files); } - async renderHeading () { - const tpl = await this.generateHeadingTemplate(); - render(tpl, this.querySelector('.chat-head-chatbox')); - } - async generateHeadingTemplate () { const vcard = this.model?.vcard; const vcard_json = vcard ? vcard.toJSON() : {}; @@ -616,9 +611,7 @@ export default class ChatView extends BaseChatView { } async close (ev) { - if (ev && ev.preventDefault) { - ev.preventDefault(); - } + ev?.preventDefault?.(); if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) { _converse.router.navigate(''); } diff --git a/src/plugins/headlines-view/templates/chat-head.js b/src/plugins/headlines-view/templates/chat-head.js new file mode 100644 index 000000000..fd89bc2fd --- /dev/null +++ b/src/plugins/headlines-view/templates/chat-head.js @@ -0,0 +1,21 @@ +import { _converse } from '@converse/headless/core'; +import { html } from "lit-html"; +import { until } from 'lit-html/directives/until.js'; + + +export default (o) => { + const tpl_standalone_btns = (o) => o.standalone_btns.reverse().map(b => until(b, '')); + return html` +
+
+ ${ (!_converse.api.settings.get("singleton")) ? html`
` : '' } +
${ o.display_name }
+
+
+ ${ o.dropdown_btns.length ? html`` : '' } + ${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' } +
+
+ ${ o.status ? html`

${ o.status }

` : '' } + `; +} diff --git a/src/plugins/headlines-view/view.js b/src/plugins/headlines-view/view.js index b09a7777b..16a82c84b 100644 --- a/src/plugins/headlines-view/view.js +++ b/src/plugins/headlines-view/view.js @@ -1,16 +1,17 @@ +import BaseChatView from 'shared/chatview.js'; import tpl_chatbox from 'templates/chatbox.js'; +import tpl_chat_head from './templates/chat-head.js'; import { __ } from 'i18n'; import { _converse, api } from '@converse/headless/core'; import { render } from 'lit-html'; -const HeadlinesBoxViewMixin = { - className: 'chatbox headlines hidden', - events: { +class HeadlinesView extends BaseChatView { + events = { 'click .close-chatbox-button': 'close', 'click .toggle-chatbox-button': 'minimize', 'keypress textarea.chat-textarea': 'onKeyDown' - }, + } async initialize () { const jid = this.getAttribute('jid'); @@ -22,7 +23,7 @@ const HeadlinesBoxViewMixin = { api.listen.on('windowStateChanged', this.onWindowStateChanged); this.model.disable_mam = true; // Don't do MAM queries for this box - this.listenTo(this.model, 'change:hidden', m => (m.get('hidden') ? this.hide() : this.show())); + this.listenTo(this.model, 'change:hidden', () => this.afterShown()); this.listenTo(this.model, 'destroy', this.remove); this.listenTo(this.model, 'show', this.show); @@ -35,7 +36,6 @@ const HeadlinesBoxViewMixin = { this.listenTo(this.model.messages, 'reset', this.renderChatHistory); await this.model.messages.fetched; - this.insertIntoDOM(); this.model.maybeShow(); this.scrollDown(); /** @@ -45,10 +45,10 @@ const HeadlinesBoxViewMixin = { * @example _converse.api.listen.on('headlinesBoxViewInitialized', view => { ... }); */ api.trigger('headlinesBoxViewInitialized', this); - }, + } render () { - this.el.setAttribute('id', this.model.get('box_id')); + this.setAttribute('id', this.model.get('box_id')); const result = tpl_chatbox( Object.assign(this.model.toJSON(), { info_close: '', @@ -58,19 +58,43 @@ const HeadlinesBoxViewMixin = { unread_msgs: '' }) ); - render(result, this.el); - this.content = this.el.querySelector('.chat-content'); - this.msgs_container = this.el.querySelector('.chat-content__messages'); + render(result, this); + this.content = this.querySelector('.chat-content'); + this.msgs_container = this.querySelector('.chat-content__messages'); this.renderChatContent(); this.renderHeading(); return this; - }, + } - getNotifications () { + async close (ev) { + ev?.preventDefault?.(); + if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) { + _converse.router.navigate(''); + } + await this.model.close(ev); + api.trigger('chatBoxClosed', this); + return this; + } + + + getNotifications () { // eslint-disable-line class-methods-use-this // Override method in ChatBox. We don't show notifications for // headlines boxes. return []; - }, + } + + 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(), { + 'display_name': this.model.getDisplayName(), + 'dropdown_btns': dropdown_btns.map(b => this.getHeadingDropdownItem(b)), + 'standalone_btns': standalone_btns.map(b => this.getHeadingStandaloneButton(b)) + }) + ); + } /** * Returns a list of objects which represent buttons for the headlines header. @@ -93,11 +117,16 @@ const HeadlinesBoxViewMixin = { }); } return _converse.api.hook('getHeadingButtons', this, buttons); - }, + } // Override to avoid the methods in converse-chatview - 'renderMessageForm': function renderMessageForm () {}, - 'afterShown': function afterShown () {} -}; + renderMessageForm () { // eslint-disable-line class-methods-use-this + return; + } -export default HeadlinesBoxViewMixin; + afterShown () { // eslint-disable-line class-methods-use-this + return; + } +} + +api.elements.define('converse-headlines', HeadlinesView); diff --git a/src/plugins/minimize/mixins.js b/src/plugins/minimize/mixins.js index 3b70930c5..2473ea13a 100644 --- a/src/plugins/minimize/mixins.js +++ b/src/plugins/minimize/mixins.js @@ -1,4 +1,4 @@ -import { api, converse } from '@converse/headless/core'; +import { _converse, api, converse } from '@converse/headless/core'; const u = converse.env.utils; @@ -28,9 +28,6 @@ export const minimizableChatBoxView = { * @returns {_converse.ChatBoxView|_converse.ChatRoomView} */ onMaximized () { - const { _converse } = this.__super__; - this.insertIntoDOM(); - if (!this.model.isScrolledUp()) { this.model.clearUnreadMsgCounter(); } @@ -55,7 +52,6 @@ export const minimizableChatBoxView = { * @returns {_converse.ChatBoxView|_converse.ChatRoomView} */ onMinimized (ev) { - const { _converse } = this.__super__; if (ev && ev.preventDefault) { ev.preventDefault(); } diff --git a/src/shared/chatview.js b/src/shared/chatview.js index 38d2ea17f..74589c113 100644 --- a/src/shared/chatview.js +++ b/src/shared/chatview.js @@ -26,6 +26,11 @@ export default class BaseChatView extends ElementView { } } + async renderHeading () { + const tpl = await this.generateHeadingTemplate(); + render(tpl, this.querySelector('.chat-head-chatbox')); + } + renderChatContent (msgs_by_ref = false) { if (!this.tpl_chat_content) { this.tpl_chat_content = o => {