From 57da5c9338fe381e5ac7e9411ce003ac4d7d05f0 Mon Sep 17 00:00:00 2001
From: Matthias Andreas Benkard <code@mail.matthias.benkard.de>
Date: Sun, 14 Jun 2020 07:24:41 +0200
Subject: Load the shadow DOM of edit forms lazily.

Loads the shadow DOM of an edit form only when it is shown on the
screen (that is when the user clicks the corresponding Edit button).
This keeps the DOM as small as possible at any given point in time.

Change-Id: Icc1f43bfb54bd303a7182a02515c72522068415a
---
 .../bookmarks/MlkBookmarkSubmissionForm.js         | 40 ++++++++++++++--------
 .../lazychat/MlkLazychatSubmissionForm.js          | 32 +++++++++++------
 2 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
index 7c71518..68f5dfd 100644
--- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -48,6 +48,21 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
 
   constructor() {
     super();
+    this.loaded = false;
+  }
+
+  static get observedAttributes() {
+    return [];
+  }
+
+  show() {
+    this.createShadow();
+  }
+
+  createShadow() {
+    if (this.shadowRoot !== null) {
+      return;
+    }
 
     let shadow = this.attachShadow({mode: "open"});
     shadow.appendChild(template.content.cloneNode(true));
@@ -65,11 +80,15 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     this.visibilityInput =
         cast(shadow.getElementById('visibility-input'));
 
-    this.loaded = false;
-  }
+    if (this.editedId !== null) {
+      this.mainForm.method = "post";
+      this.mainForm.action = `/bookmarks/${this.editedId}/edit`;
+    }
 
-  static get observedAttributes() {
-    return [];
+    this.uriInput.addEventListener('blur', this.onUriBlur.bind(this));
+    this.uriInput.value = this.uri || "";
+    this.titleInput.value = this.titleText || "";
+    this.descriptionInput.innerText = this.description || "";
   }
 
   get editedId() /*:number | null*/ {
@@ -85,17 +104,7 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     return this.editedId !== null;
   }
 
-  connectedCallback() {
-    if (this.editedId !== null) {
-      this.mainForm.method = "post";
-      this.mainForm.action = `/bookmarks/${this.editedId}/edit`;
-    }
-
-    this.uriInput.addEventListener('blur', this.onUriBlur.bind(this));
-    this.uriInput.value = this.uri || "";
-    this.titleInput.value = this.titleText || "";
-    this.descriptionInput.innerText = this.description || "";
-  }
+  connectedCallback() {}
 
   disconnectedCallback () {
     this.uriInput.removeEventListener('blur', this.onUriBlur.bind(this));
@@ -117,6 +126,7 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
   }
 
   focus() {
+    this.show();
     if (!this.uriInput.value) {
       this.uriInput.focus();
     } else if (!this.titleInput.value) {
diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
index 7bd6d4d..d4e774a 100644
--- a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
@@ -38,6 +38,21 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
 
   constructor() {
     super();
+    this.loaded = false;
+  }
+
+  static get observedAttributes() {
+    return [];
+  }
+
+  show() {
+    this.createShadow();
+  }
+
+  createShadow() {
+    if (this.shadowRoot !== null) {
+      return;
+    }
 
     let shadow = this.attachShadow({mode: "open"});
     shadow.appendChild(template.content.cloneNode(true));
@@ -49,11 +64,10 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
     this.visibilityInput =
         cast(shadow.getElementById('visibility-input'));
 
-    this.loaded = false;
-  }
-
-  static get observedAttributes() {
-    return [];
+    if (this.editedId !== null) {
+      this.mainForm.method = "post";
+      this.mainForm.action = `/lazychat/${this.editedId}/edit`;
+    }
   }
 
   get editedId() /*:number | null*/ {
@@ -69,18 +83,14 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
     return this.editedId !== null;
   }
 
-  connectedCallback() {
-    if (this.editedId !== null) {
-      this.mainForm.method = "post";
-      this.mainForm.action = `/lazychat/${this.editedId}/edit`;
-    }
-  }
+  connectedCallback() {}
 
   disconnectedCallback() {}
 
   attributeChangedCallback(name /*:string*/, oldValue /*:string*/, newValue /*:string*/) {}
 
   focus() {
+    this.show();
     this.textInput.focus();
     this.load();
   }
-- 
cgit v1.2.3