Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Get rid of impperative code to render help messages

Browse Source 
in 1:1 chat
This commit is contained in:
JC Brand 2021-06-04 13:36:29 +02:00
parent ff233a5b1c
commit 06c4ded063
2 changed files with 18 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/plugins/chatview/templates/chat.js
View File

@ -1,4 +1,5 @@
import { html } from "lit";
import { _converse } from '@converse/headless/core';
export default (o) => html`
<div class="flyout box-flyout">
@ -10,7 +11,14 @@ export default (o) => html`
class="chat-content__messages"
jid="${o.jid}"></converse-chat-content>
<div class="chat-content__help"></div>
${o.show_help_messages ? html`<div class="chat-content__help">
<converse-chat-help
.model=${o.model}
.messages=${o.help_messages}
?hidden=${!o.show_help_messages}
type="info"
chat_type="${_converse.CHATROOMS_TYPE}"
></converse-chat-help></div>` : '' }
</div>
<converse-chat-bottom-panel jid="${o.jid}" class="bottom-panel"> </converse-chat-bottom-panel>
</div>

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

@ -1,13 +1,10 @@
import 'plugins/chatview/heading.js';
import 'plugins/chatview/bottom-panel.js';
import { html, render } from 'lit';
import { render } from 'lit';
import BaseChatView from 'shared/chat/baseview.js';
import tpl_chat from './templates/chat.js';
import { __ } from 'i18n';
import { _converse, api, converse } from '@converse/headless/core';
const u = converse.env.utils;
const { dayjs } = converse.env;
import { _converse, api } from '@converse/headless/core';
/**
* The View of an open/ongoing chat conversation.
@ -25,12 +22,10 @@ export default class ChatView extends BaseChatView {
this.model = _converse.chatboxes.get(jid);
this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
this.listenTo(this.model, 'change:hidden', () => !this.model.get('hidden') && this.afterShown());
this.listenTo(this.model, 'change:show_help_messages', this.render);
this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
this.render();
// Need to be registered after render has been called.
this.listenTo(this.model, 'change:show_help_messages', this.renderHelpMessages);
await this.model.messages.fetched;
!this.model.get('hidden') && this.afterShown()
/**
@ -42,26 +37,12 @@ export default class ChatView extends BaseChatView {
api.trigger('chatBoxViewInitialized', this);
}
render () {
const result = tpl_chat(this.model.toJSON());
render(result, this);
this.help_container = this.querySelector('.chat-content__help');
return this;
}
renderHelpMessages () {
render(
html`
<converse-chat-help
.model=${this.model}
.messages=${this.getHelpMessages()}
?hidden=${!this.model.get('show_help_messages')}
type="info"
chat_type="${this.model.get('type')}"
></converse-chat-help>
`,
this.help_container
);
toHTML () {
return tpl_chat(Object.assign({
'model': this.model,
'help_messages': this.getHelpMessages(),
'show_help_messages': this.model.get('show_help_messages'),
}, this.model.toJSON()));
}
getHelpMessages () { // eslint-disable-line class-methods-use-this
@ -79,54 +60,6 @@ export default class ChatView extends BaseChatView {
this.hide();
}
/**
* Given a message element, determine wether it should be
* marked as a followup message to the previous element.
*
* Also determine whether the element following it is a
* followup message or not.
*
* Followup messages are subsequent ones written by the same
* author with no other conversation elements in between and
* which were posted within 10 minutes of one another.
* @private
* @method _converse.ChatBoxView#markFollowups
* @param { HTMLElement } el - The message element
*/
markFollowups (el) { // eslint-disable-line class-methods-use-this
const from = el.getAttribute('data-from');
const previous_el = el.previousElementSibling;
const date = dayjs(el.getAttribute('data-isodate'));
const next_el = el.nextElementSibling;
if (
!u.hasClass('chat-msg--action', el) &&
!u.hasClass('chat-msg--action', previous_el) &&
!u.hasClass('chat-info', el) &&
!u.hasClass('chat-info', previous_el) &&
previous_el.getAttribute('data-from') === from &&
date.isBefore(dayjs(previous_el.getAttribute('data-isodate')).add(10, 'minutes')) &&
el.getAttribute('data-encrypted') === previous_el.getAttribute('data-encrypted')
) {
u.addClass('chat-msg--followup', el);
}
if (!next_el) {
return;
}
if (
!u.hasClass('chat-msg--action', el) &&
u.hasClass('chat-info', el) &&
next_el.getAttribute('data-from') === from &&
dayjs(next_el.getAttribute('data-isodate')).isBefore(date.add(10, 'minutes')) &&
el.getAttribute('data-encrypted') === next_el.getAttribute('data-encrypted')
) {
u.addClass('chat-msg--followup', next_el);
} else {
u.removeClass('chat-msg--followup', next_el);
}
}
/**
* Closes this chat
* @private