diff --git a/ui/src/javascript/web-components/webui-disclosure.ts b/ui/src/javascript/web-components/webui-disclosure.ts index 70f3d10..3487676 100644 --- 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 index 6a37e04..71666b3 100644 --- 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 index 0ebcec0..c31e33b 100644 --- a/ui/src/javascript/web-components/webui-modal.ts +++ b/ui/src/javascript/web-components/webui-modal.ts @@ -14,7 +14,7 @@ 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) => { @@ -22,10 +22,6 @@ export default class WebUIModal extends HTMLElement { }); } - 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 index f0e74ac..c72278c 100644 --- 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 . + if (navigator.share) { + this.shareFallback?.remove(); - // Click 'share' button. - if (target?.dataset.trigger === '') { - // Use native Share API, or fallback to . - 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); + } + } }