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

Render chatbox message form via lit-html

Browse Source
This commit is contained in:
JC Brand 2020-06-26 15:47:32 +02:00
parent 694e7abe9c
commit 9026062a32
4 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
spec/spoilers.js
View File

@ -126,17 +126,17 @@ describe("A spoiler message", function () {
await new Promise(resolve => view.model.messages.once('rendered', resolve)); await new Promise(resolve => view.model.messages.once('rendered', resolve));
/* Test the XML stanza /* Test the XML stanza
* *
* <message from="romeo@montague.lit/orchard" * <message from="romeo@montague.lit/orchard"
* to="max.frankfurter@montague.lit" * to="max.frankfurter@montague.lit"
* type="chat" * type="chat"
* id="4547c38b-d98b-45a5-8f44-b4004dbc335e" * id="4547c38b-d98b-45a5-8f44-b4004dbc335e"
* xmlns="jabber:client"> * xmlns="jabber:client">
* <body>This is the spoiler</body> * <body>This is the spoiler</body>
* <active xmlns="http://jabber.org/protocol/chatstates"/> * <active xmlns="http://jabber.org/protocol/chatstates"/>
* <spoiler xmlns="urn:xmpp:spoiler:0"/> * <spoiler xmlns="urn:xmpp:spoiler:0"/>
* </message>" * </message>"
*/ */
const stanza = _converse.connection.send.calls.argsFor(0)[0].tree(); const stanza = _converse.connection.send.calls.argsFor(0)[0].tree();
const spoiler_el = stanza.querySelector('spoiler[xmlns="urn:xmpp:spoiler:0"]'); const spoiler_el = stanza.querySelector('spoiler[xmlns="urn:xmpp:spoiler:0"]');
expect(spoiler_el === null).toBeFalsy(); expect(spoiler_el === null).toBeFalsy();

6
src/converse-chatview.js
View File

@ -10,7 +10,7 @@ import "converse-modal";
import log from "@converse/headless/log"; import log from "@converse/headless/log";
import tpl_chatbox from "templates/chatbox.js"; import tpl_chatbox from "templates/chatbox.js";
import tpl_chatbox_head from "templates/chatbox_head.js"; import tpl_chatbox_head from "templates/chatbox_head.js";
import tpl_chatbox_message_form from "templates/chatbox_message_form.html"; import tpl_chatbox_message_form from "templates/chatbox_message_form.js";
import tpl_new_day from "templates/new_day.html"; import tpl_new_day from "templates/new_day.html";
import tpl_spinner from "templates/spinner.html"; import tpl_spinner from "templates/spinner.html";
import tpl_spoiler_button from "templates/spoiler_button.html"; import tpl_spoiler_button from "templates/spoiler_button.html";
@ -355,7 +355,7 @@ converse.plugins.add('converse-chatview', {
renderMessageForm () { renderMessageForm () {
const form_container = this.el.querySelector('.message-form-container'); const form_container = this.el.querySelector('.message-form-container');
form_container.innerHTML = tpl_chatbox_message_form( render(tpl_chatbox_message_form(
Object.assign(this.model.toJSON(), { Object.assign(this.model.toJSON(), {
'__': __, '__': __,
'message_limit': api.settings.get('message_limit'), 'message_limit': api.settings.get('message_limit'),
@ -366,7 +366,7 @@ converse.plugins.add('converse-chatview', {
'show_send_button': api.settings.get('show_send_button'), 'show_send_button': api.settings.get('show_send_button'),
'show_toolbar': api.settings.get('show_toolbar'), 'show_toolbar': api.settings.get('show_toolbar'),
'unread_msgs': __('You have unread messages') 'unread_msgs': __('You have unread messages')
})); })), form_container);
this.el.addEventListener('focusin', ev => this.emitFocused(ev)); this.el.addEventListener('focusin', ev => this.emitFocused(ev));
this.el.addEventListener('focusout', ev => this.emitBlurred(ev)); this.el.addEventListener('focusout', ev => this.emitBlurred(ev));
this.renderToolbar(); this.renderToolbar();

29
src/templates/chatbox_message_form.html
View File

@ -1,29 +0,0 @@
<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
<form class="setNicknameButtonForm hidden">
<input type="submit" class="btn btn-primary" name="join" value="Join"/>
</form>
<form class="sendXMPPMessage">
{[ if (o.show_toolbar || o.show_send_button) { ]}
<div class="chat-toolbar--container">
{[ if (o.show_toolbar) { ]}
<ul class="chat-toolbar no-text-select"></ul>
{[ } ]}
{[ if (o.show_send_button) { ]}
<button type="submit" class="btn send-button fa fa-paper-plane" title="{{{ o.__('Send the message') }}}"></button>
{[ } ]}
</div>
{[ } ]}
<input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
class="{[ if (!o.composing_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
<div class="suggestion-box">
<ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
<textarea
type="text"
class="chat-textarea suggestion-box__input
{[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
{[ if (o.composing_spoiler) { ]} spoiler {[ } ]}"
placeholder="{{{o.label_message}}}">{{ o.message_value }}</textarea>
<span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
</div>
</form>

32
src/templates/chatbox_message_form.js Normal file
View File

@ -0,0 +1,32 @@
import { html } from "lit-html";
import { __ } from '@converse/headless/i18n';
const i18n_send_message = __('Send the message');
export default (o) => html`
<div class="new-msgs-indicator hidden">▼ ${ o.unread_msgs } ▼</div>
<form class="setNicknameButtonForm hidden">
<input type="submit" class="btn btn-primary" name="join" value="Join"/>
</form>
<form class="sendXMPPMessage">
${ (o.show_toolbar || o.show_send_button) ? html`
<div class="chat-toolbar--container">
${ o.show_toolbar ? html`<ul class="chat-toolbar no-text-select"></ul>` : '' }
${ o.show_send_button ? html`<button type="submit" class="btn send-button fa fa-paper-plane" title="${ i18n_send_message }"></button>` : '' }
</div>` : ''
}
<input type="text" placeholder="${o.label_spoiler_hint || ''}" value="${o.hint_value || ''}" class="${o.composing_spoiler ? '' : 'hidden'} spoiler-hint"/>
<div class="suggestion-box">
<ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
<textarea
type="text"
class="chat-textarea suggestion-box__input
${ o.show_send_button ? 'chat-textarea-send-button' : '' }
${ o.composing_spoile ? 'spoiler' : '' }"
placeholder="${o.label_message}">${ o.message_value || '' }</textarea>
<span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
</div>
</form>
`;