From 12c7cac4bd9abf55f379cbe7d9cf59b518052e51 Mon Sep 17 00:00:00 2001
From: Matthias Andreas Benkard <code@mail.matthias.benkard.de>
Date: Thu, 26 Mar 2020 07:19:45 +0100
Subject: Enable lazy chat message submission.

Change-Id: I9e9060e29bb63a78591f618cc54acdfb5b49575f
---
 .../META-INF/resources/bookmarks/bookmarkList.js   |  9 ----
 .../lazychat/MlkLazychatSubmissionForm.css         | 30 +++++++++++
 .../lazychat/MlkLazychatSubmissionForm.js          | 61 ++++++++++++++++++++++
 .../resources/lazychat/newLazychatMessage.js       |  4 ++
 .../resources/META-INF/resources/posts/postList.js | 13 +++++
 5 files changed, 108 insertions(+), 9 deletions(-)
 delete mode 100644 src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
 create mode 100644 src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.css
 create mode 100644 src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
 create mode 100644 src/main/resources/META-INF/resources/lazychat/newLazychatMessage.js
 create mode 100644 src/main/resources/META-INF/resources/posts/postList.js

(limited to 'src/main/resources/META-INF')

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());
+  }
+});
-- 
cgit v1.2.3