Enable lazy chat message submission.

Change-Id: I9e9060e29bb63a78591f618cc54acdfb5b49575f

6 files changed, 119 insertions, 10 deletions

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>