tidy web component js code

basher · Apr 4, 2024 · 8ba758e · 8ba758e
1 parent 71f9ddd
commit 8ba758e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 38 deletions.
diff --git a/ui/src/javascript/web-components/webui-disclosure.ts b/ui/src/javascript/web-components/webui-disclosure.ts
@@ -12,15 +12,11 @@ export default class WebUIDisclosure extends HTMLElement {
         this.bindEscapeKey = this.hasAttribute('data-bind-escape-key');
         this.bindClickOutside = this.hasAttribute('data-bind-click-outside');
 
-        this.init();
-
-        this.trigger?.addEventListener('click', this);
-    }
-
-    private init(): void {
         if (!this.trigger || !this.content) return;
 
         this.a11ySetup();
+
+        this.trigger?.addEventListener('click', this);
     }
 
     private a11ySetup(): void {
@@ -77,7 +73,7 @@ export default class WebUIDisclosure extends HTMLElement {
         }
     }
 
-    // Handle web component events from constructor().
+    // Handle constructor() event listeners.
     handleEvent(e: MouseEvent) {
         const target = e.currentTarget as HTMLElement;
         const isExpanded =
@@ -87,7 +83,7 @@ export default class WebUIDisclosure extends HTMLElement {
         this.content?.toggleAttribute('hidden');
     }
 
-    // Add/remove other (global) event listeners which are not part of this web component.
+    // Handle (global) event listeners which are not part of this web component.
     connectedCallback() {
         window.addEventListener('keyup', (e: KeyboardEvent) =>
             this.handleGlobalKeyup(e),

diff --git a/ui/src/javascript/web-components/webui-make-clickable.ts b/ui/src/javascript/web-components/webui-make-clickable.ts
@@ -7,7 +7,7 @@ export default class WebUIMakeClickable extends HTMLElement {
         this.addEventListener('click', this);
     }
 
-    // Handle web component events from constructor().
+    // Handle constructor() event listeners.
     handleEvent(e: MouseEvent) {
         if (e.target !== this.link) {
             this.link?.click();

diff --git a/ui/src/javascript/web-components/webui-modal.ts b/ui/src/javascript/web-components/webui-modal.ts
@@ -14,18 +14,14 @@ export default class WebUIModal extends HTMLElement {
         this.btnsModalClose = this.querySelectorAll('[data-close]');
         this.classNameModalOpen = 'has-modal-open';
 
-        this.init();
+        if (!this.btnModalOpen || !this.dialog) return;
 
         this.btnModalOpen?.addEventListener('click', this);
         this.btnsModalClose.forEach((btnModalClose) => {
             btnModalClose?.addEventListener('click', this);
         });
     }
 
-    private init(): void {
-        if (!this.btnModalOpen || !this.dialog) return;
-    }
-
     private handleOpen(): void {
         if (!this.dialog?.open) {
             this.dialog?.showModal();
@@ -56,7 +52,7 @@ export default class WebUIModal extends HTMLElement {
         }
     }
 
-    // Handle web component events from constructor().
+    // Handle constructor() event listeners.
     handleEvent(e: MouseEvent) {
         const target = e.currentTarget as HTMLButtonElement;
 
@@ -74,7 +70,7 @@ export default class WebUIModal extends HTMLElement {
         }
     }
 
-    // Add/remove other (global) event listeners which are not part of this web component.
+    // Handle (global) event listeners which are not part of this web component.
     connectedCallback() {
         window.addEventListener('click', (e: MouseEvent) =>
             this.handleGlobalClick(e),

diff --git a/ui/src/javascript/web-components/webui-share.ts b/ui/src/javascript/web-components/webui-share.ts
@@ -15,6 +15,7 @@ export default class WebUIShare extends HTMLElement {
         this.shareFallback = this.querySelector('[data-content]');
         this.shareInput = this.querySelector('[data-input]');
 
+        // URL and page title to be shared.
         this.canonical = document.querySelector('link[rel=canonical]');
         this.shareTitle = this.btnShare?.dataset.title || document.title;
         this.shareUrl =
@@ -26,31 +27,20 @@ export default class WebUIShare extends HTMLElement {
         this.btnCopy?.addEventListener('click', this);
     }
 
-    // Handle web component events from constructor().
-    handleEvent(e: MouseEvent) {
-        const target = e.currentTarget as HTMLButtonElement;
+    private handleShare(): void {
+        // Use native Share API, or fallback to <webui-disclosure>.
+        if (navigator.share) {
+            this.shareFallback?.remove();
 
-        // Click 'share' button.
-        if (target?.dataset.trigger === '') {
-            // Use native Share API, or fallback to <webui-disclosure>.
-            if (navigator.share) {
-                this.shareFallback?.remove();
-
-                navigator.share({
-                    title: this.shareTitle,
-                    url: this.shareUrl,
-                });
-            } else {
-                if (this.shareInput) {
-                    this.shareInput.value = this.shareUrl || '';
-                }
+            navigator.share({
+                title: this.shareTitle,
+                url: this.shareUrl,
+            });
+        } else {
+            if (this.shareInput) {
+                this.shareInput.value = this.shareUrl || '';
             }
         }
-
-        // Click 'copy' button.
-        if (target?.dataset.copy === '') {
-            this.shareInput && this.handleCopyUrl(this.shareInput);
-        }
     }
 
     private handleCopyUrl(fallbackInput: HTMLInputElement): void {
@@ -60,4 +50,19 @@ export default class WebUIShare extends HTMLElement {
         fallbackInput.select();
         navigator.clipboard.writeText(fallbackInput.value);
     }
+
+    // Handle constructor() event listeners.
+    handleEvent(e: MouseEvent) {
+        const target = e.currentTarget as HTMLButtonElement;
+
+        // Click 'share' button.
+        if (target?.dataset.trigger === '') {
+            this.handleShare();
+        }
+
+        // Click 'copy' button.
+        if (target?.dataset.copy === '') {
+            this.shareInput && this.handleCopyUrl(this.shareInput);
+        }
+    }
 }