Disroot/converse.js
Disroot
/
converse.js
Archived
6
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Turn HeadlinesBox into a custom element

This commit is contained in:
JC Brand 2021-01-26 13:22:04 +01:00
parent fa7443be95
commit 704b50fb3e
6 changed files with 81 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/chatboxviews/templates/chats.js
View File

@ -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`
<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 {
return html`
<converse-chat jid="${m.get('jid')}" class="chatbox ${(m.get('hidden') || m.get('minimized')) ? 'hidden' : ''}"></converse-chat>

9
src/plugins/chatview/view.js
View File

@ -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('');
}

21
src/plugins/headlines-view/templates/chat-head.js Normal file
View 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>` : '' }
`;
}

67
src/plugins/headlines-view/view.js
View File

@ -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);

6
src/plugins/minimize/mixins.js
View File

@ -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();
}

5
src/shared/chatview.js
View File

@ -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 => {