Ver código fonte

Render chatbox message form via lit-html

JC Brand 5 anos atrás
pai
commit
9026062a32

+ 11 - 11
spec/spoilers.js

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

+ 3 - 3
src/converse-chatview.js

@@ -10,7 +10,7 @@ import "converse-modal";
 import log from "@converse/headless/log";
 import tpl_chatbox from "templates/chatbox.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_spinner from "templates/spinner.html";
 import tpl_spoiler_button from "templates/spoiler_button.html";
@@ -355,7 +355,7 @@ converse.plugins.add('converse-chatview', {
 
             renderMessageForm () {
                 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(), {
                         '__': __,
                         '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_toolbar': api.settings.get('show_toolbar'),
                         'unread_msgs': __('You have unread messages')
-                    }));
+                    })), form_container);
                 this.el.addEventListener('focusin', ev => this.emitFocused(ev));
                 this.el.addEventListener('focusout', ev => this.emitBlurred(ev));
                 this.renderToolbar();

+ 0 - 29
src/templates/chatbox_message_form.html

@@ -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 - 0
src/templates/chatbox_message_form.js

@@ -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>
+`;