MlkBookmarkSubmissionForm: Remove lit-html dependency.
For the MlkBookmarkSubmissionForm component, even lit-html is
overkill. This patch removes it and makes the component even simpler.
Change-Id: I5de6ffac4a3177c8fba89a1f897ad6b49f9ae562
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 @@
}
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 @@
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);