Turn HeadlinesBox into a custom element
This commit is contained in:
parent
fa7443be95
commit
704b50fb3e
|
@ -2,7 +2,7 @@ import { html } from 'lit-html';
|
||||||
import { _converse, api } from '@converse/headless/core';
|
import { _converse, api } from '@converse/headless/core';
|
||||||
|
|
||||||
export default () => {
|
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');
|
const view_mode = api.settings.get('view_mode');
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
|
@ -20,6 +20,10 @@ export default () => {
|
||||||
return html`
|
return html`
|
||||||
<converse-muc jid="${m.get('jid')}" class="chatbox chatroom ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-muc>
|
<converse-muc jid="${m.get('jid')}" class="chatbox chatroom ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-muc>
|
||||||
`;
|
`;
|
||||||
|
} else if (m.get('type') === HEADLINES_TYPE) {
|
||||||
|
return html`
|
||||||
|
<converse-headlines jid="${m.get('jid')}" class="chatbox headlines ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-headlines>
|
||||||
|
`;
|
||||||
} else {
|
} else {
|
||||||
return html`
|
return html`
|
||||||
<converse-chat jid="${m.get('jid')}" class="chatbox ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-chat>
|
<converse-chat jid="${m.get('jid')}" class="chatbox ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-chat>
|
||||||
|
|
|
@ -188,11 +188,6 @@ export default class ChatView extends BaseChatView {
|
||||||
this.model.sendFiles(evt.dataTransfer.files);
|
this.model.sendFiles(evt.dataTransfer.files);
|
||||||
}
|
}
|
||||||
|
|
||||||
async renderHeading () {
|
|
||||||
const tpl = await this.generateHeadingTemplate();
|
|
||||||
render(tpl, this.querySelector('.chat-head-chatbox'));
|
|
||||||
}
|
|
||||||
|
|
||||||
async generateHeadingTemplate () {
|
async generateHeadingTemplate () {
|
||||||
const vcard = this.model?.vcard;
|
const vcard = this.model?.vcard;
|
||||||
const vcard_json = vcard ? vcard.toJSON() : {};
|
const vcard_json = vcard ? vcard.toJSON() : {};
|
||||||
|
@ -616,9 +611,7 @@ export default class ChatView extends BaseChatView {
|
||||||
}
|
}
|
||||||
|
|
||||||
async close (ev) {
|
async close (ev) {
|
||||||
if (ev && ev.preventDefault) {
|
ev?.preventDefault?.();
|
||||||
ev.preventDefault();
|
|
||||||
}
|
|
||||||
if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) {
|
if (_converse.router.history.getFragment() === 'converse/chat?jid=' + this.model.get('jid')) {
|
||||||
_converse.router.navigate('');
|
_converse.router.navigate('');
|
||||||
}
|
}
|
||||||
|
|
21
src/plugins/headlines-view/templates/chat-head.js
Normal file
21
src/plugins/headlines-view/templates/chat-head.js
Normal file
|
@ -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`
|
||||||
|
<div class="chatbox-title ${ o.status ? '' : "chatbox-title--no-desc"}">
|
||||||
|
<div class="chatbox-title--row">
|
||||||
|
${ (!_converse.api.settings.get("singleton")) ? html`<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>` : '' }
|
||||||
|
<div class="chatbox-title__text" title="${o.jid}">${ o.display_name }</div>
|
||||||
|
</div>
|
||||||
|
<div class="chatbox-title__buttons row no-gutters">
|
||||||
|
${ o.dropdown_btns.length ? html`<converse-dropdown .items=${o.dropdown_btns}></converse-dropdown>` : '' }
|
||||||
|
${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
${ o.status ? html`<p class="chat-head__desc">${ o.status }</p>` : '' }
|
||||||
|
`;
|
||||||
|
}
|
|
@ -1,16 +1,17 @@
|
||||||
|
import BaseChatView from 'shared/chatview.js';
|
||||||
import tpl_chatbox from 'templates/chatbox.js';
|
import tpl_chatbox from 'templates/chatbox.js';
|
||||||
|
import tpl_chat_head from './templates/chat-head.js';
|
||||||
import { __ } from 'i18n';
|
import { __ } from 'i18n';
|
||||||
import { _converse, api } from '@converse/headless/core';
|
import { _converse, api } from '@converse/headless/core';
|
||||||
import { render } from 'lit-html';
|
import { render } from 'lit-html';
|
||||||
|
|
||||||
const HeadlinesBoxViewMixin = {
|
|
||||||
className: 'chatbox headlines hidden',
|
|
||||||
|
|
||||||
events: {
|
class HeadlinesView extends BaseChatView {
|
||||||
|
events = {
|
||||||
'click .close-chatbox-button': 'close',
|
'click .close-chatbox-button': 'close',
|
||||||
'click .toggle-chatbox-button': 'minimize',
|
'click .toggle-chatbox-button': 'minimize',
|
||||||
'keypress textarea.chat-textarea': 'onKeyDown'
|
'keypress textarea.chat-textarea': 'onKeyDown'
|
||||||
},
|
}
|
||||||
|
|
||||||
async initialize () {
|
async initialize () {
|
||||||
const jid = this.getAttribute('jid');
|
const jid = this.getAttribute('jid');
|
||||||
|
@ -22,7 +23,7 @@ const HeadlinesBoxViewMixin = {
|
||||||
api.listen.on('windowStateChanged', this.onWindowStateChanged);
|
api.listen.on('windowStateChanged', this.onWindowStateChanged);
|
||||||
|
|
||||||
this.model.disable_mam = true; // Don't do MAM queries for this box
|
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, 'destroy', this.remove);
|
||||||
this.listenTo(this.model, 'show', this.show);
|
this.listenTo(this.model, 'show', this.show);
|
||||||
|
|
||||||
|
@ -35,7 +36,6 @@ const HeadlinesBoxViewMixin = {
|
||||||
this.listenTo(this.model.messages, 'reset', this.renderChatHistory);
|
this.listenTo(this.model.messages, 'reset', this.renderChatHistory);
|
||||||
|
|
||||||
await this.model.messages.fetched;
|
await this.model.messages.fetched;
|
||||||
this.insertIntoDOM();
|
|
||||||
this.model.maybeShow();
|
this.model.maybeShow();
|
||||||
this.scrollDown();
|
this.scrollDown();
|
||||||
/**
|
/**
|
||||||
|
@ -45,10 +45,10 @@ const HeadlinesBoxViewMixin = {
|
||||||
* @example _converse.api.listen.on('headlinesBoxViewInitialized', view => { ... });
|
* @example _converse.api.listen.on('headlinesBoxViewInitialized', view => { ... });
|
||||||
*/
|
*/
|
||||||
api.trigger('headlinesBoxViewInitialized', this);
|
api.trigger('headlinesBoxViewInitialized', this);
|
||||||
},
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
this.el.setAttribute('id', this.model.get('box_id'));
|
this.setAttribute('id', this.model.get('box_id'));
|
||||||
const result = tpl_chatbox(
|
const result = tpl_chatbox(
|
||||||
Object.assign(this.model.toJSON(), {
|
Object.assign(this.model.toJSON(), {
|
||||||
info_close: '',
|
info_close: '',
|
||||||
|
@ -58,19 +58,43 @@ const HeadlinesBoxViewMixin = {
|
||||||
unread_msgs: ''
|
unread_msgs: ''
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
render(result, this.el);
|
render(result, this);
|
||||||
this.content = this.el.querySelector('.chat-content');
|
this.content = this.querySelector('.chat-content');
|
||||||
this.msgs_container = this.el.querySelector('.chat-content__messages');
|
this.msgs_container = this.querySelector('.chat-content__messages');
|
||||||
this.renderChatContent();
|
this.renderChatContent();
|
||||||
this.renderHeading();
|
this.renderHeading();
|
||||||
return this;
|
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
|
// Override method in ChatBox. We don't show notifications for
|
||||||
// headlines boxes.
|
// headlines boxes.
|
||||||
return [];
|
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.
|
* 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);
|
return _converse.api.hook('getHeadingButtons', this, buttons);
|
||||||
},
|
}
|
||||||
|
|
||||||
// Override to avoid the methods in converse-chatview
|
// Override to avoid the methods in converse-chatview
|
||||||
'renderMessageForm': function renderMessageForm () {},
|
renderMessageForm () { // eslint-disable-line class-methods-use-this
|
||||||
'afterShown': function afterShown () {}
|
return;
|
||||||
};
|
}
|
||||||
|
|
||||||
export default HeadlinesBoxViewMixin;
|
afterShown () { // eslint-disable-line class-methods-use-this
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
api.elements.define('converse-headlines', HeadlinesView);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { api, converse } from '@converse/headless/core';
|
import { _converse, api, converse } from '@converse/headless/core';
|
||||||
|
|
||||||
const u = converse.env.utils;
|
const u = converse.env.utils;
|
||||||
|
|
||||||
|
@ -28,9 +28,6 @@ export const minimizableChatBoxView = {
|
||||||
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
||||||
*/
|
*/
|
||||||
onMaximized () {
|
onMaximized () {
|
||||||
const { _converse } = this.__super__;
|
|
||||||
this.insertIntoDOM();
|
|
||||||
|
|
||||||
if (!this.model.isScrolledUp()) {
|
if (!this.model.isScrolledUp()) {
|
||||||
this.model.clearUnreadMsgCounter();
|
this.model.clearUnreadMsgCounter();
|
||||||
}
|
}
|
||||||
|
@ -55,7 +52,6 @@ export const minimizableChatBoxView = {
|
||||||
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
* @returns {_converse.ChatBoxView|_converse.ChatRoomView}
|
||||||
*/
|
*/
|
||||||
onMinimized (ev) {
|
onMinimized (ev) {
|
||||||
const { _converse } = this.__super__;
|
|
||||||
if (ev && ev.preventDefault) {
|
if (ev && ev.preventDefault) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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) {
|
renderChatContent (msgs_by_ref = false) {
|
||||||
if (!this.tpl_chat_content) {
|
if (!this.tpl_chat_content) {
|
||||||
this.tpl_chat_content = o => {
|
this.tpl_chat_content = o => {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user