more passes at a consistent web component lifecycle

Author: thehabes

components/gui/alert/Alert.js

@@ -1,6 +1,16 @@
 import { eventDispatcher } from '../../../api/events.js'
 
+/**
+ * Alert - A modal alert dialog that requires user acknowledgement.
+ * Takes over the screen until dismissed.
+ * @element tpen-alert
+ */
 class Alert extends HTMLElement {
+    /** @type {number|null} Timer ID for show animation */
+    _showTimer = null
+    /** @type {number|null} Timer ID for removal animation */
+    _removeTimer = null
+
     constructor() {
         super()
         this.attachShadow({ mode: 'open' })
@@ -17,7 +27,7 @@ class Alert extends HTMLElement {
      */
     show() {
         this.closest(".alert-area").style.display = "grid"
-        setTimeout(() => {
+        this._showTimer = setTimeout(() => {
             this.closest(".alert-area").classList.add("show")
             this.classList.add('show')
             document.querySelector("body").style.overflow = "hidden"
@@ -33,12 +43,16 @@ class Alert extends HTMLElement {
         this.classList.remove('show')
         this.closest(".alert-area").classList.remove("show")
         document.querySelector("body").style.overflow = "auto"
-        setTimeout(() => {
+        this._removeTimer = setTimeout(() => {
             this.remove()
         }, 500)
         eventDispatcher.dispatch("tpen-alert-acknowledged")
     }
 
+    disconnectedCallback() {
+        if (this._showTimer) clearTimeout(this._showTimer)
+        if (this._removeTimer) clearTimeout(this._removeTimer)
+    }
 }
 
 customElements.define('tpen-alert', Alert)

components/gui/alert/AlertContainer.js

@@ -1,5 +1,6 @@
 import './Alert.js'
 import { eventDispatcher } from '../../../api/events.js'
+import { CleanupRegistry } from '../../../utilities/CleanupRegistry.js'
 
 /**
  * AlertContainer - Global container for displaying alert dialogs.
@@ -8,8 +9,8 @@ import { eventDispatcher } from '../../../api/events.js'
  */
 class AlertContainer extends HTMLElement {
     #screenLockingSection
-    /** @type {Function|null} Handler for alert events */
-    _alertHandler = null
+    /** @type {CleanupRegistry} Registry for cleanup handlers */
+    cleanup = new CleanupRegistry()
 
     constructor() {
         super()
@@ -18,14 +19,12 @@ class AlertContainer extends HTMLElement {
     }
 
     connectedCallback() {
-        this._alertHandler = ({ detail }) => this.addAlert(detail?.message, detail?.buttonText)
-        eventDispatcher.on('tpen-alert', this._alertHandler)
+        const alertHandler = ({ detail }) => this.addAlert(detail?.message, detail?.buttonText)
+        this.cleanup.onEvent(eventDispatcher, 'tpen-alert', alertHandler)
     }
 
     disconnectedCallback() {
-        if (this._alertHandler) {
-            eventDispatcher.off('tpen-alert', this._alertHandler)
-        }
+        this.cleanup.run()
     }
 
     /**

components/gui/confirm/Confirm.js

@@ -1,6 +1,16 @@
 import { eventDispatcher } from '../../../api/events.js'
 
+/**
+ * Confirm - A modal confirmation dialog with positive/negative options.
+ * Takes over the screen until user makes a choice.
+ * @element tpen-confirm
+ */
 class Confirm extends HTMLElement {
+    /** @type {number|null} Timer ID for show animation */
+    _showTimer = null
+    /** @type {number|null} Timer ID for removal animation */
+    _removeTimer = null
+
     constructor() {
         super()
         this.attachShadow({ mode: 'open' })
@@ -17,7 +27,7 @@ class Confirm extends HTMLElement {
      */
     show() {
         this.closest(".confirm-area").style.display = "grid"
-        setTimeout(() => {
+        this._showTimer = setTimeout(() => {
             this.closest(".confirm-area").classList.add("show")
             this.classList.add('show')
             document.querySelector("body").style.overflow = "hidden"
@@ -33,11 +43,15 @@ class Confirm extends HTMLElement {
         this.classList.remove('show')
         this.closest(".confirm-area").classList.remove("show")
         document.querySelector("body").style.overflow = "auto"
-        setTimeout(() => {
+        this._removeTimer = setTimeout(() => {
             this.remove()
         }, 500)
     }
 
+    disconnectedCallback() {
+        if (this._showTimer) clearTimeout(this._showTimer)
+        if (this._removeTimer) clearTimeout(this._removeTimer)
+    }
 }
 
 customElements.define('tpen-confirm', Confirm)

components/gui/confirm/ConfirmContainer.js

@@ -1,5 +1,6 @@
 import './Confirm.js'
 import { eventDispatcher } from '../../../api/events.js'
+import { CleanupRegistry } from '../../../utilities/CleanupRegistry.js'
 
 /**
  * ConfirmContainer - Global container for displaying confirmation dialogs.
@@ -9,12 +10,8 @@ import { eventDispatcher } from '../../../api/events.js'
 class ConfirmContainer extends HTMLElement {
     #screenLockingSection
     #confirmElem
-    /** @type {Function|null} Handler for confirm events */
-    _confirmHandler = null
-    /** @type {Function|null} Handler for positive button events */
-    _positiveHandler = null
-    /** @type {Function|null} Handler for negative button events */
-    _negativeHandler = null
+    /** @type {CleanupRegistry} Registry for cleanup handlers */
+    cleanup = new CleanupRegistry()
 
     constructor() {
         super()
@@ -23,19 +20,17 @@ class ConfirmContainer extends HTMLElement {
     }
 
     connectedCallback() {
-        this._confirmHandler = ({ detail }) => this.addConfirm(detail?.message, detail?.positiveButtonText, detail.negativeButtonText)
-        this._positiveHandler = () => this.#confirmElem?.dismiss()
-        this._negativeHandler = () => this.#confirmElem?.dismiss()
+        const confirmHandler = ({ detail }) => this.addConfirm(detail?.message, detail?.positiveButtonText, detail.negativeButtonText)
+        const positiveHandler = () => this.#confirmElem?.dismiss()
+        const negativeHandler = () => this.#confirmElem?.dismiss()
 
-        eventDispatcher.on('tpen-confirm', this._confirmHandler)
-        eventDispatcher.on('tpen-confirm-positive', this._positiveHandler)
-        eventDispatcher.on('tpen-confirm-negative', this._negativeHandler)
+        this.cleanup.onEvent(eventDispatcher, 'tpen-confirm', confirmHandler)
+        this.cleanup.onEvent(eventDispatcher, 'tpen-confirm-positive', positiveHandler)
+        this.cleanup.onEvent(eventDispatcher, 'tpen-confirm-negative', negativeHandler)
     }
 
     disconnectedCallback() {
-        if (this._confirmHandler) eventDispatcher.off('tpen-confirm', this._confirmHandler)
-        if (this._positiveHandler) eventDispatcher.off('tpen-confirm-positive', this._positiveHandler)
-        if (this._negativeHandler) eventDispatcher.off('tpen-confirm-negative', this._negativeHandler)
+        this.cleanup.run()
     }
 
     /**

components/gui/site/Header.js

@@ -1,16 +1,21 @@
 import TPEN from "../../../api/TPEN.js"
+import { CleanupRegistry } from '../../../utilities/CleanupRegistry.js'
 
 /**
  * TpenHeader - Main site header with navigation, title, and action button.
  * @element tpen-header
  */
 class TpenHeader extends HTMLElement {
+    /** @type {CleanupRegistry} Registry for cleanup handlers */
+    cleanup = new CleanupRegistry()
     /** @type {Function|null} Handler for title events */
     _titleHandler = null
     /** @type {Function|null} Handler for action link events */
     _actionLinkHandler = null
     /** @type {Function|null} Handler for action link remove events */
     _actionLinkRemoveHandler = null
+    /** @type {Function|null} Handler for logout button */
+    _logoutHandler = null
 
     constructor() {
         super();
@@ -60,6 +65,8 @@ class TpenHeader extends HTMLElement {
         `;
     }
     connectedCallback() {
+        TPEN.attachAuthentication(this)
+
         this._titleHandler = ev => {
             const title = this.shadowRoot.querySelector('.banner')
             if (!ev.detail) {
@@ -82,23 +89,18 @@ class TpenHeader extends HTMLElement {
             btn.removeEventListener('click', ev.detail.callback)
         }
 
-        TPEN.eventDispatcher.on('tpen-gui-title', this._titleHandler)
-        TPEN.eventDispatcher.on('tpen-gui-action-link', this._actionLinkHandler)
-        TPEN.eventDispatcher.on('tpen-gui-action-link-remove', this._actionLinkRemoveHandler)
+        this.cleanup.onEvent(TPEN.eventDispatcher, 'tpen-gui-title', this._titleHandler)
+        this.cleanup.onEvent(TPEN.eventDispatcher, 'tpen-gui-action-link', this._actionLinkHandler)
+        this.cleanup.onEvent(TPEN.eventDispatcher, 'tpen-gui-action-link-remove', this._actionLinkRemoveHandler)
 
         this._logoutHandler = () => TPEN.logout()
-        this.shadowRoot.querySelector('.logout-btn').addEventListener('click', this._logoutHandler)
+        const logoutBtn = this.shadowRoot.querySelector('.logout-btn')
+        this.cleanup.onElement(logoutBtn, 'click', this._logoutHandler)
         this.setupDraggableButton()
     }
 
     disconnectedCallback() {
-        if (this._titleHandler) TPEN.eventDispatcher.off('tpen-gui-title', this._titleHandler)
-        if (this._actionLinkHandler) TPEN.eventDispatcher.off('tpen-gui-action-link', this._actionLinkHandler)
-        if (this._actionLinkRemoveHandler) TPEN.eventDispatcher.off('tpen-gui-action-link-remove', this._actionLinkRemoveHandler)
-        const logoutBtn = this.shadowRoot?.querySelector('.logout-btn')
-        if (logoutBtn && this._logoutHandler) {
-            logoutBtn.removeEventListener('click', this._logoutHandler)
-        }
+        this.cleanup.run()
     }
 
     setupDraggableButton() {
@@ -126,23 +128,23 @@ class TpenHeader extends HTMLElement {
                 btn.style.left = '0px'
                 initialRect = btn.getBoundingClientRect()
             }
-            
+
             const header = this.shadowRoot.querySelector('header')
             const headerRect = header.getBoundingClientRect()
             const btnWidth = initialRect.width
-            
+
             // Calculate bounds relative to initial position
             const maxLeft = headerRect.right - initialRect.right - 20 // Space to right edge
             const maxRight = headerRect.left - initialRect.left + 20 // Space to left edge
-            
+
             return { maxLeft, maxRight }
         }
 
         const animate = () => {
             if (Math.abs(velocityX) > MIN_VELOCITY) {
                 currentX += velocityX
                 velocityX *= FRICTION
-                
+
                 // Check boundaries and bounce
                 const bounds = getBounds()
                 if (currentX > bounds.maxLeft) {
@@ -152,7 +154,7 @@ class TpenHeader extends HTMLElement {
                     currentX = bounds.maxRight
                     velocityX = Math.abs(velocityX) * BOUNCE_DAMPING // Bounce back with damping
                 }
-                
+
                 btn.style.left = `${currentX}px`
                 animationFrame = requestAnimationFrame(animate)
             } else {
@@ -166,7 +168,7 @@ class TpenHeader extends HTMLElement {
                 cancelAnimationFrame(animationFrame)
                 animationFrame = null
             }
-            
+
             isDragging = true
             hasMoved = false
             dragStartTime = Date.now()
@@ -182,24 +184,24 @@ class TpenHeader extends HTMLElement {
 
         const onPointerMove = (e) => {
             if (!isDragging) return
-            
+
             const now = Date.now()
             const deltaTime = now - lastTime
             const deltaX = e.clientX - startX
-            
+
             if (Math.abs(deltaX - currentX) > DRAG_THRESHOLD) {
                 hasMoved = true
             }
-            
+
             // Calculate velocity for momentum
             if (deltaTime > 0) {
                 velocityX = (e.clientX - lastX) / deltaTime * 16 // Normalize to ~60fps
             }
-            
+
             // Constrain to viewport bounds while dragging
             const bounds = getBounds()
             currentX = Math.max(bounds.maxRight, Math.min(bounds.maxLeft, deltaX))
-            
+
             lastX = e.clientX
             lastTime = now
             btn.style.position = 'relative'
@@ -208,39 +210,48 @@ class TpenHeader extends HTMLElement {
 
         const onPointerUp = (e) => {
             if (!isDragging) return
-            
+
             isDragging = false
             btn.style.cursor = 'grab'
             btn.releasePointerCapture(e.pointerId)
-            
+
             const dragDuration = Date.now() - dragStartTime
-            
+
             // If the button was dragged significantly (distance or time), prevent the click
             if (hasMoved || dragDuration > TIME_THRESHOLD) {
                 e.preventDefault()
                 e.stopPropagation()
             }
-            
+
             // Apply momentum if there's velocity
             if (Math.abs(velocityX) > MIN_VELOCITY && hasMoved) {
                 animationFrame = requestAnimationFrame(animate)
             }
         }
 
         // Prevent click if drag occurred
-        btn.addEventListener('click', (e) => {
+        const clickHandler = (e) => {
             if (hasMoved) {
                 e.preventDefault()
                 e.stopPropagation()
             }
-        }, true)
+        }
 
-        btn.addEventListener('pointerdown', onPointerDown)
-        btn.addEventListener('pointermove', onPointerMove)
-        btn.addEventListener('pointerup', onPointerUp)
-        btn.addEventListener('pointercancel', onPointerUp)
+        // Register all button event listeners with cleanup registry
+        this.cleanup.onElement(btn, 'click', clickHandler, true)
+        this.cleanup.onElement(btn, 'pointerdown', onPointerDown)
+        this.cleanup.onElement(btn, 'pointermove', onPointerMove)
+        this.cleanup.onElement(btn, 'pointerup', onPointerUp)
+        this.cleanup.onElement(btn, 'pointercancel', onPointerUp)
         btn.style.cursor = 'grab'
         btn.style.touchAction = 'none'
+
+        // Track animation frame for cleanup
+        this.cleanup.add(() => {
+            if (animationFrame) {
+                cancelAnimationFrame(animationFrame)
+            }
+        })
     }
 }