1 files changed, 43 insertions, 48 deletions
diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
index 9894dee..012a314 100644
--- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -1,13 +1,50 @@
-import {html, render} from "../../web_modules/lit-html.js";
 import ProgressSpinner from "../web_modules/elix/define/ProgressSpinner.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="/bookmarks/MlkBookmarkSubmissionForm.css" />
+
+  <form class="pure-form" method="post" action="/bookmarks">
+    <fieldset>
+      <legend>New Bookmark</legend>
+
+      <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>
+
+      <label for="title-input">Title:</label>
+      <input name="title" id="title-input" type="text" placeholder="Title" required />
+
+      <label for="description-input">Description:</label>
+      <textarea name="description" id="description-input" placeholder="Description"></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 Bookmark</button>
+      </div>
+    </fieldset>
+  </form>`;
+
 export class MlkBookmarkSubmissionForm extends HTMLElement {
   constructor() {
     super();
 
     this.onUriBlur = this.onUriBlur.bind(this);
 
-    this.attachShadow({mode: "open"});
+    let shadow = this.attachShadow({mode: "open"});
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    this.descriptionInput = shadow.getElementById('description-input');
+    this.titleInput = shadow.getElementById('title-input');
+    this.uriInput = shadow.getElementById('uri-input');
+    this.uriSpinner = shadow.getElementById('uri-spinner');
   }
 
   static get observedAttributes() {
@@ -15,13 +52,10 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
   }
 
   connectedCallback () {
-    this.render();
-
-    let shadow = this.shadowRoot;
-    this.descriptionInput = shadow.getElementById('description-input');
-    this.titleInput = shadow.getElementById('title-input');
-    this.uriInput = shadow.getElementById('uri-input');
-    this.uriSpinner = shadow.getElementById('uri-spinner');
+    this.uriInput.addEventListener('blur', this.onUriBlur);
+    this.uriInput.value = this.uri || "";
+    this.titleInput.value = this.title || "";
+    this.descriptionInput.innerText = this.description || "";
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -72,45 +106,6 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     let pageInfo = await r.json();
     this.titleInput.value = pageInfo.title;
   }
-
-  render() {
-    const template = html`
-      <link rel="stylesheet" type="text/css" href="/cms2/base.css" />
-      <link rel="stylesheet" type="text/css" href="/bookmarks/MlkBookmarkSubmissionForm.css" />
-
-      <form class="pure-form" method="post" action="/bookmarks">
-        <fieldset>
-          <legend>New Bookmark</legend>
-
-          <label for="uri-input">URI:</label>
-          <input name="uri" id="uri-input" type="text" placeholder="URI" required
-                 value=${this.uri || ""}
-                 @blur=${this.onUriBlur} />
-          <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner>
-
-          <label for="title-input">Title:</label>
-          <input name="title" id="title-input" type="text" placeholder="Title" required
-                 value="${this.title || ""}" />
-
-          <label for="description-input">Description:</label>
-          <textarea name="description" id="description-input" placeholder="Description"
-              >${this.description || ""}</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 Bookmark</button>
-          </div>
-        </fieldset>
-      </form>`;
-
-    render(template, this.shadowRoot);
-  }
 }
 
 customElements.define("mlk-bookmark-submission-form", MlkBookmarkSubmissionForm);