From f550d24f4badd85f29d7741d3ab8efe2b81c05ee Mon Sep 17 00:00:00 2001 From: Matthias Andreas Benkard Date: Sat, 15 Feb 2020 18:49:45 +0100 Subject: 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 --- .../bookmarks/MlkBookmarkSubmissionForm.js | 91 ++++++++++------------ 1 file changed, 43 insertions(+), 48 deletions(-) (limited to 'src/main') 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 = ` + + + +
+
+ New Bookmark + + + + + + + + + + + + + + +
+ +
+
+
`; + 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` - - - -
-
- New Bookmark - - - - - - - - - - - - - - -
- -
-
-
`; - - render(template, this.shadowRoot); - } } customElements.define("mlk-bookmark-submission-form", MlkBookmarkSubmissionForm); -- cgit v1.2.3