Enable lazy chat message submission.
Change-Id: I9e9060e29bb63a78591f618cc54acdfb5b49575f
diff --git a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
deleted file mode 100644
index a6f78e6..0000000
--- a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
+++ /dev/null
@@ -1,9 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
- let bookmarkSubmissionPane = document.getElementById(
- 'bookmark-submission-pane');
- let bookmarkSubmissionForm = document.getElementById(
- 'bookmark-submission-form');
-
- bookmarkSubmissionPane.addEventListener('opened', () => bookmarkSubmissionForm.focus());
-});
-
diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.css b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.css
new file mode 100644
index 0000000..007a172
--- /dev/null
+++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.css
@@ -0,0 +1,30 @@
+fieldset {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-gap: 5px;
+}
+
+label,
+input,
+button,
+textarea {
+ grid-column: 1 / 2;
+}
+
+@media (min-width: 30em) {
+ fieldset {
+ display: grid;
+ grid-template-columns: 1fr 5fr;
+ grid-gap: 0;
+ }
+
+ label {
+ grid-column: 1 / 2;
+ }
+
+ input,
+ button,
+ textarea {
+ grid-column: 2 / 3;
+ }
+}
diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
new file mode 100644
index 0000000..8c85d72
--- /dev/null
+++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
@@ -0,0 +1,61 @@
+// @flow
+
+import /*:: ProgressSpinner from */ "../web_modules/elix/define/ProgressSpinner.js";
+import { cast } from "../cms2/types.js";
+
+const template = document.createElement('template');
+template.innerHTML = `
+ <link rel="stylesheet" type="text/css" href="/cms2/base.css" />
+ <link rel="stylesheet" type="text/css" href="/lazychat/MlkLazychatSubmissionForm.css" />
+
+ <form class="pure-form" method="post" action="/lazychat">
+ <fieldset>
+ <legend>New Message</legend>
+
+ <label for="text-input">Text:</label>
+ <textarea name="text" id="text-input" placeholder="Text"></textarea>
+
+ <label for="visibility-input">Visibility:</label>
+ <select id="visibility-input" name="visibility" required>
+ <option value="public" selected>Public</option>
+ <option value="semiprivate">Semiprivate</option>
+ <option value="private">Private</option>
+ </select>
+
+ <div class="controls">
+ <button type="submit" class="pure-button pure-button-primary">Submit Message</button>
+ </div>
+ </fieldset>
+ </form>`;
+
+export class MlkLazychatSubmissionForm extends HTMLElement {
+ /*::
+ textInput: HTMLTextAreaElement;
+ */
+
+ constructor() {
+ super();
+
+ let shadow = this.attachShadow({mode: "open"});
+ shadow.appendChild(template.content.cloneNode(true));
+
+ this.textInput =
+ cast(shadow.getElementById('text-input'));
+ }
+
+ static get observedAttributes() {
+ return [];
+ }
+
+ connectedCallback () {}
+
+ disconnectedCallback () {}
+
+ attributeChangedCallback(name /*:string*/, oldValue /*:string*/, newValue /*:string*/) {}
+
+ focus() {
+ this.textInput.focus();
+ }
+}
+
+customElements.define("mlk-lazychat-submission-form", MlkLazychatSubmissionForm);
diff --git a/src/main/resources/META-INF/resources/lazychat/newLazychatMessage.js b/src/main/resources/META-INF/resources/lazychat/newLazychatMessage.js
new file mode 100644
index 0000000..ed5072f
--- /dev/null
+++ b/src/main/resources/META-INF/resources/lazychat/newLazychatMessage.js
@@ -0,0 +1,4 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let bookmarkSubmissionForm = document.getElementById('lazychat-submission-form');
+ bookmarkSubmissionForm.focus();
+});
diff --git a/src/main/resources/META-INF/resources/posts/postList.js b/src/main/resources/META-INF/resources/posts/postList.js
new file mode 100644
index 0000000..0578d7b
--- /dev/null
+++ b/src/main/resources/META-INF/resources/posts/postList.js
@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let bookmarkSubmissionPane = document.getElementById('bookmark-submission-pane');
+ if (bookmarkSubmissionPane) {
+ let bookmarkSubmissionForm = document.getElementById('bookmark-submission-form');
+ bookmarkSubmissionPane.addEventListener('opened',() => bookmarkSubmissionForm.focus());
+ }
+
+ let lazychatSubmissionPane = document.getElementById('lazychat-submission-pane');
+ if (lazychatSubmissionPane) {
+ let lazychatSubmissionForm = document.getElementById('lazychat-submission-form');
+ lazychatSubmissionPane.addEventListener('opened',() => lazychatSubmissionForm.focus());
+ }
+});
diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html
index b68f796..a29d886 100644
--- a/src/main/resources/templates/benki/posts/postList.html
+++ b/src/main/resources/templates/benki/posts/postList.html
@@ -19,7 +19,8 @@
<script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
<script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js"></script>
- <script type="module" src="/bookmarks/bookmarkList.js" defer></script>
+ <script type="module" src="/lazychat/MlkLazychatSubmissionForm.js"></script>
+ <script type="module" src="/posts/postList.js" defer></script>
{/head}
{#body}
@@ -33,6 +34,15 @@
</elix-expandable-section>
{/if}
+{#if showLazychatForm}
+ <elix-expandable-section id="lazychat-submission-pane">
+ <h2 slot="header" class="small-title expandable-section-title"><button class="pure-button">Post Message</button></h2>
+ <section id="lazychat-submission">
+ <mlk-lazychat-submission-form id="lazychat-submission-form"></mlk-lazychat-submission-form>
+ </section>
+ </elix-expandable-section>
+{/if}
+
<div class="paging">
{#if hasPreviousPage}<a href="?i={previousCursor}&n={pageSize}" class="pure-button">⇠ previous page</a>{/if}
<span class="filler"></span>