Bookmark submission: Make bookmark submission form a reusable WebComponent.

Change-Id: I723d98208040db5b0d2d56d8c5e727c68399f843

3 files changed, 102 insertions, 58 deletions

diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
new file mode 100644
index 0000000..25de54b
--- /dev/null
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -0,0 +1,97 @@
+import {html, render} from "../../web_modules/lit-html.js";
+import ProgressSpinner from "../web_modules/elix/define/ProgressSpinner.js";
+
+export class MlkBookmarkSubmissionForm extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({mode: "open"});
+  }
+
+  static get observedAttributes() {
+    return ["greetee"];
+  }
+
+  connectedCallback () {
+    this.render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.render();
+  }
+
+  focus() {
+    let uriInput = this.shadowRoot.getElementById('uri-input');
+    uriInput.focus();
+  }
+
+  async onUriBlur() {
+    let titleInput = this.shadowRoot.getElementById('title-input');
+    let uriInput = this.shadowRoot.getElementById('uri-input');
+    let uriSpinner = this.shadowRoot.getElementById('uri-spinner');
+
+    if (!uriInput.value) {
+      return;
+    }
+
+    uriSpinner.hidden = false;
+    uriSpinner.playing = true;
+    let searchParams = new URLSearchParams({'uri': uriInput.value});
+    console.log(`/bookmarks/page-info?${searchParams}`);
+    let fetchUrl = new URL(`/bookmarks/page-info?${searchParams}`, document.URL);
+    let r = await fetch(fetchUrl);
+    uriSpinner.hidden = true;
+    uriSpinner.playing = false;
+
+    if (!r.ok) {
+      return;
+    }
+
+    let pageInfo = await r.json();
+    titleInput.value = pageInfo.title;
+  }
+
+  render() {
+    const template = html`
+      <link rel="stylesheet" type="text/css" href="/cms2/base.css" />
+
+      <form class="pure-form pure-form-aligned" method="post">
+        <fieldset>
+          <legend>New Bookmark</legend>
+
+          <div class="pure-control-group">
+            <label for="uri-input">URI:</label>
+            <input name="uri" id="uri-input" type="text" placeholder="URI" required
+                   @blur=${this.onUriBlur.bind(this)}/>
+            <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner>
+          </div>
+
+          <div class="pure-control-group">
+            <label for="title-input">Title:</label>
+            <input name="title" id="title-input" type="text" placeholder="Title" required/>
+          </div>
+
+          <div class="pure-control-group">
+            <label for="description-input">Description:</label>
+            <textarea name="description" id="description-input" placeholder="Description"></textarea>
+          </div>
+
+          <div class="pure-control-group">
+            <label for="visibility-input">Visibility:</label>
+            <select id="visibility-input" name="visibility" required>
+              <option value="public">Public</option>
+              <option value="semiprivate" selected>Semiprivate</option>
+              <option value="private">Private</option>
+            </select>
+          </div>
+
+          <div class="pure-controls">
+            <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button>
+          </div>
+        </fieldset>
+      </form>`;
+
+    render(template, this.shadowRoot);
+  }
+}
+
+customElements.define("mlk-bookmark-submission-form", MlkBookmarkSubmissionForm);
diff --git a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
index 4c8287a..a6f78e6 100644
--- a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
+++ b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
@@ -1,28 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
   let bookmarkSubmissionPane = document.getElementById(
       'bookmark-submission-pane');
-  let titleInput = document.getElementById('title-input');
-  let uriInput = document.getElementById('uri-input');
-  let uriSpinner = document.getElementById('uri-spinner');
+  let bookmarkSubmissionForm = document.getElementById(
+      'bookmark-submission-form');
 
-  bookmarkSubmissionPane.addEventListener('opened', () => uriInput.focus());
-
-  uriInput.addEventListener('blur', async () => {
-    uriSpinner.hidden = false;
-    uriSpinner.playing = true;
-    let searchParams = new URLSearchParams({'uri': uriInput.value});
-    console.log(`/bookmarks/page-info?${searchParams}`);
-    let fetchUrl = new URL(`/bookmarks/page-info?${searchParams}`, document.URL);
-    let r = await fetch(fetchUrl);
-    uriSpinner.hidden = true;
-    uriSpinner.playing = false;
-
-    if (!r.ok) {
-      return;
-    }
-
-    let pageInfo = await r.json();
-    titleInput.value = pageInfo.title;
-  });
+  bookmarkSubmissionPane.addEventListener('opened', () => bookmarkSubmissionForm.focus());
 });
 
diff --git a/src/main/resources/templates/benki/bookmarks/bookmarkList.html b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
index 2c35249..566bfb2 100644
--- a/src/main/resources/templates/benki/bookmarks/bookmarkList.html
+++ b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
@@ -13,47 +13,13 @@
 
 {! #if authenticated !}
   <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
-  <script type="module" src="/web_modules/elix/define/ProgressSpinner.js"></script>
-
+  <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js" defer></script>
   <script type="module" src="/bookmarks/bookmarkList.js" defer></script>
 
   <elix-expandable-section id="bookmark-submission-pane">
     <h2 slot="header" class="small-title"><button class="pure-button">Create New Bookmark</button></h2>
     <section id="bookmark-submission">
-      <form class="pure-form pure-form-aligned" method="post">
-        <fieldset>
-          <legend>New Bookmark</legend>
-
-          <div class="pure-control-group">
-            <label for="uri-input">URI:</label>
-            <input name="uri" id="uri-input" type="text" placeholder="URI" required/>
-            <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner>
-          </div>
-
-          <div class="pure-control-group">
-            <label for="title-input">Title:</label>
-            <input name="title" id="title-input" type="text" placeholder="Title" required/>
-          </div>
-
-          <div class="pure-control-group">
-            <label for="description-input">Description:</label>
-            <textarea name="description" id="description-input" placeholder="Description"></textarea>
-          </div>
-
-          <div class="pure-control-group">
-            <label for="visibility-input">Visibility:</label>
-            <select id="visibility-input" name="visibility" required>
-              <option value="public">Public</option>
-              <option value="semiprivate" selected>Semiprivate</option>
-              <option value="private">Private</option>
-            </select>
-          </div>
-
-          <div class="pure-controls">
-            <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button>
-          </div>
-        </fieldset>
-      </form>
+      <mlk-bookmark-submission-form id="bookmark-submission-form"></mlk-bookmark-submission-form>
     </section>
   </elix-expandable-section>
 {! /if !}