@dodlhuat/basix 1.4.2 → 1.4.3

package/js/lightbox.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class Lightbox {
     images;
     currentIndex;
@@ -9,7 +10,7 @@ class Lightbox {
     captionEl = null;
     counterEl = null;
     isZoomed = false;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(options) {
         if (options.images && options.images.length > 0) {
             this.images = options.images;
@@ -36,12 +37,12 @@ class Lightbox {
         this.imgEl = wrapper.querySelector('.lightbox-img');
         this.captionEl = wrapper.querySelector('.lightbox-caption');
         this.counterEl = wrapper.querySelector('.lightbox-counter');
-        const sig = { signal: this.abortController.signal };
+        const sig = { signal: this.listeners.signal };
         if (this.closeable) {
-            wrapper.querySelector('.lightbox-close')?.addEventListener('click', this.hide, sig);
-            wrapper.querySelector('.lightbox-background')?.addEventListener('click', this.handleBackgroundClick, sig);
+            wrapper.querySelector('.lightbox-close')?.addEventListener('click', () => this.hide(), sig);
+            wrapper.querySelector('.lightbox-background')?.addEventListener('click', (e) => this.handleBackgroundClick(e), sig);
         }
-        document.addEventListener('keydown', this.handleKeydown, sig);
+        document.addEventListener('keydown', (e) => this.handleKeydown(e), sig);
         if (this.images.length > 1) {
             wrapper.querySelector('.lightbox-prev')?.addEventListener('click', () => this.prev(), sig);
             wrapper.querySelector('.lightbox-next')?.addEventListener('click', () => this.next(), sig);
@@ -57,12 +58,11 @@ class Lightbox {
         });
         this.onOpen?.();
     }
-    hide = () => {
+    hide() {
         const wrapper = this.wrapper;
         if (!wrapper)
             return;
-        this.abortController.abort();
-        this.abortController = new AbortController();
+        this.listeners.reset();
         document.body.style.overflow = '';
         wrapper.classList.remove('is-visible');
         setTimeout(() => {
@@ -76,7 +76,7 @@ class Lightbox {
             }
             this.onClose?.();
         }, 300);
-    };
+    }
     next() {
         if (this.images.length <= 1)
             return;
@@ -137,7 +137,7 @@ class Lightbox {
             return;
         const prevIdx = (index - 1 + this.images.length) % this.images.length;
         const nextIdx = (index + 1) % this.images.length;
-        [prevIdx, nextIdx].forEach(i => {
+        [prevIdx, nextIdx].forEach((i) => {
             const img = new Image();
             img.src = this.images[i].src;
         });
@@ -164,7 +164,7 @@ class Lightbox {
         this.imgEl.classList.toggle('is-zoomed', this.isZoomed);
         this.wrapper?.querySelector('.lightbox-img-wrap')?.classList.toggle('is-zoomed', this.isZoomed);
     }
-    handleKeydown = (e) => {
+    handleKeydown(e) {
         switch (e.key) {
             case 'Escape':
                 if (this.closeable)
@@ -180,11 +180,11 @@ class Lightbox {
                 this.trapFocus(e);
                 break;
         }
-    };
+    }
     trapFocus(e) {
         if (!this.wrapper)
             return;
-        const focusable = Array.from(this.wrapper.querySelectorAll('button:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])')).filter(el => el.offsetParent !== null);
+        const focusable = Array.from(this.wrapper.querySelectorAll('button:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])')).filter((el) => el.offsetParent !== null);
         if (focusable.length === 0)
             return;
         const first = focusable[0];
@@ -202,11 +202,11 @@ class Lightbox {
             }
         }
     }
-    handleBackgroundClick = (e) => {
+    handleBackgroundClick(e) {
         if (e.target?.classList.contains('lightbox-background')) {
             this.hide();
         }
-    };
+    }
     addTouchSupport() {
         const wrap = this.wrapper?.querySelector('.lightbox-img-wrap');
         if (!wrap)
@@ -216,16 +216,21 @@ class Lightbox {
         wrap.addEventListener('touchstart', (e) => {
             startX = e.touches[0].clientX;
             isDragging = true;
-        }, { passive: true, signal: this.abortController.signal });
+        }, { passive: true, signal: this.listeners.signal });
         wrap.addEventListener('touchend', (e) => {
             if (!isDragging)
                 return;
             const deltaX = e.changedTouches[0].clientX - startX;
             if (Math.abs(deltaX) > 50) {
-                deltaX < 0 ? this.next() : this.prev();
+                if (deltaX < 0) {
+                    this.next();
+                }
+                else {
+                    this.prev();
+                }
             }
             isDragging = false;
-        }, { signal: this.abortController.signal });
+        }, { signal: this.listeners.signal });
     }
     buildTemplate() {
         return `
@@ -250,13 +255,9 @@ class Lightbox {
     static bind(selector = '[data-lightbox]') {
         const elements = document.querySelectorAll(selector);
         const groups = new Map();
-        elements.forEach(el => {
+        elements.forEach((el) => {
             const groupKey = el.dataset.lightbox || `__solo__${el.dataset.lightboxId ?? Math.random()}`;
-            const src = el instanceof HTMLAnchorElement
-                ? el.href
-                : el instanceof HTMLImageElement
-                    ? el.src
-                    : (el.dataset.src ?? '');
+            const src = el instanceof HTMLAnchorElement ? el.href : el instanceof HTMLImageElement ? el.src : (el.dataset.src ?? '');
             const imgChild = el.querySelector('img');
             const alt = el instanceof HTMLImageElement ? el.alt : (imgChild?.alt ?? '');
             const caption = el.dataset.lightboxCaption;
@@ -264,13 +265,13 @@ class Lightbox {
                 groups.set(groupKey, []);
             groups.get(groupKey).push({ el, image: { src, alt, caption } });
         });
-        groups.forEach(items => {
+        groups.forEach((items) => {
             items.forEach(({ el }, idx) => {
                 el.style.cursor = 'zoom-in';
-                el.addEventListener('click', e => {
+                el.addEventListener('click', (e) => {
                     e.preventDefault();
                     new Lightbox({
-                        images: items.map(i => i.image),
+                        images: items.map((i) => i.image),
                         startIndex: idx,
                     }).show();
                 });

package/js/listeners.d.ts

@@ -0,0 +1,7 @@
+declare class ListenerGroup {
+    private controller;
+    get signal(): AbortSignal;
+    reset(): void;
+    destroy(): void;
+}
+export { ListenerGroup };

package/js/listeners.js

@@ -0,0 +1,14 @@
+class ListenerGroup {
+    controller = new AbortController();
+    get signal() {
+        return this.controller.signal;
+    }
+    reset() {
+        this.controller.abort();
+        this.controller = new AbortController();
+    }
+    destroy() {
+        this.controller.abort();
+    }
+}
+export { ListenerGroup };

package/js/modal.d.ts

@@ -14,10 +14,11 @@ declare class Modal {
     private readonly type;
     private template;
     private modalWrapper;
+    private listeners;
     constructor(options: ModalOptions);
     constructor(content: string, header?: string, footer?: string, closeable?: boolean, type?: ModalType);
     show(): void;
-    hide: () => void;
+    hide(): void;
     private handleEscape;
     private handleBackgroundClick;
     private buildTemplate;

package/js/modal.js

@@ -1,4 +1,5 @@
 import { sanitizeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
 class Modal {
     content;
@@ -8,6 +9,7 @@ class Modal {
     type;
     template;
     modalWrapper = null;
+    listeners = new ListenerGroup();
     constructor(contentOrOptions, header, footer, closeable = true, type = 'default') {
         if (typeof contentOrOptions === 'object') {
             this.content = contentOrOptions.content;
@@ -32,31 +34,22 @@ class Modal {
         wrapper.innerHTML = this.template;
         document.body.append(wrapper);
         this.modalWrapper = wrapper;
+        const sig = { signal: this.listeners.signal };
         if (this.closeable) {
-            const closeBtn = wrapper.querySelector('.close');
-            closeBtn?.addEventListener('click', this.hide);
-        }
-        const background = wrapper.querySelector('.modal-background');
-        if (this.closeable && background) {
-            background.addEventListener('click', this.handleBackgroundClick);
-        }
-        if (this.closeable) {
-            document.addEventListener('keydown', this.handleEscape);
+            wrapper.querySelector('.close')?.addEventListener('click', () => this.hide(), sig);
+            wrapper.querySelector('.modal-background')?.addEventListener('click', (e) => this.handleBackgroundClick(e), sig);
+            document.addEventListener('keydown', (e) => this.handleEscape(e), sig);
         }
         document.body.style.overflow = 'hidden';
         requestAnimationFrame(() => {
             wrapper.classList.add('is-visible');
         });
     }
-    hide = () => {
+    hide() {
         const wrapper = this.modalWrapper;
         if (!wrapper)
             return;
-        const closeBtn = wrapper.querySelector('.close');
-        closeBtn?.removeEventListener('click', this.hide);
-        const background = wrapper.querySelector('.modal-background');
-        background?.removeEventListener('click', this.handleBackgroundClick);
-        document.removeEventListener('keydown', this.handleEscape);
+        this.listeners.reset();
         document.body.style.overflow = '';
         wrapper.classList.remove('is-visible');
         setTimeout(() => {
@@ -65,17 +58,17 @@ class Modal {
                 this.modalWrapper = null;
             }
         }, 300);
-    };
-    handleEscape = (e) => {
+    }
+    handleEscape(e) {
         if (e.key === 'Escape') {
             this.hide();
         }
-    };
-    handleBackgroundClick = (e) => {
+    }
+    handleBackgroundClick(e) {
         if (e.target?.classList.contains('modal-background')) {
             this.hide();
         }
-    };
+    }
     buildTemplate() {
         const parts = [`<div class="modal modal-${this.type}">`];
         if (this.closeable) {

package/js/popover.d.ts

@@ -21,8 +21,9 @@ declare class Popover {
     private readonly trigger;
     private readonly opts;
     private popoverEl;
-    private _isOpen;
     private hoverTimer;
+    private listeners;
+    private openListeners;
     constructor(triggerEl: HTMLElement | string, options: PopoverOptions);
     get isOpen(): boolean;
     open(): void;
@@ -39,7 +40,6 @@ declare class Popover {
     private onOutsideClick;
     private onEscape;
     private attachTrigger;
-    private detachTrigger;
 }
 export { Popover };
 export type { PopoverOptions, PopoverPlacement, PopoverAlign, PopoverTrigger };

package/js/popover.js

@@ -1,5 +1,6 @@
 import { computePosition } from './position.js';
 import { sanitizeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 const ARROW_SIZE = 6;
 class Popover {
     static openPopovers = new Set();
@@ -7,12 +8,11 @@ class Popover {
     trigger;
     opts;
     popoverEl = null;
-    _isOpen = false;
     hoverTimer = null;
+    listeners = new ListenerGroup();
+    openListeners = null;
     constructor(triggerEl, options) {
-        const el = typeof triggerEl === 'string'
-            ? document.querySelector(triggerEl)
-            : triggerEl;
+        const el = typeof triggerEl === 'string' ? document.querySelector(triggerEl) : triggerEl;
         if (!el)
             throw new Error('Popover: trigger element not found');
         this.trigger = el;
@@ -31,9 +31,11 @@ class Popover {
         };
         this.attachTrigger();
     }
-    get isOpen() { return this._isOpen; }
+    get isOpen() {
+        return this.popoverEl !== null;
+    }
     open() {
-        if (this._isOpen)
+        if (this.popoverEl)
             return;
         if (this.opts.triggerMode === 'click')
             Popover.closeAll();
@@ -42,40 +44,47 @@ class Popover {
         this.reposition();
         requestAnimationFrame(() => {
             this.popoverEl?.classList.add('is-open');
-            this._isOpen = true;
             Popover.openPopovers.add(this);
             this.opts.onOpen();
+            this.openListeners = new ListenerGroup();
+            const openSig = { signal: this.openListeners.signal };
             if (this.opts.closeOnOutsideClick)
-                document.addEventListener('pointerdown', this.onOutsideClick, { capture: true });
+                document.addEventListener('pointerdown', (e) => this.onOutsideClick(e), { ...openSig, capture: true });
             if (this.opts.closeOnEscape)
-                document.addEventListener('keydown', this.onEscape);
+                document.addEventListener('keydown', (e) => this.onEscape(e), openSig);
         });
     }
     close() {
-        if (!this._isOpen || !this.popoverEl)
+        if (!this.popoverEl)
             return;
         this.popoverEl.classList.remove('is-open');
-        this._isOpen = false;
         Popover.openPopovers.delete(this);
         this.opts.onClose();
-        document.removeEventListener('pointerdown', this.onOutsideClick, { capture: true });
-        document.removeEventListener('keydown', this.onEscape);
+        this.openListeners?.destroy();
+        this.openListeners = null;
         this.trigger.removeAttribute('aria-expanded');
         this.trigger.removeAttribute('aria-controls');
         const el = this.popoverEl;
         setTimeout(() => el.remove(), 200);
         this.popoverEl = null;
     }
-    toggle() { this._isOpen ? this.close() : this.open(); }
+    toggle() {
+        if (this.popoverEl) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
     destroy() {
         this.close();
-        this.detachTrigger();
+        this.listeners.destroy();
     }
     static closeAll() {
-        Popover.openPopovers.forEach(p => p.close());
+        Popover.openPopovers.forEach((p) => p.close());
     }
     static initAll() {
-        document.querySelectorAll('[data-popover]').forEach(trigger => {
+        document.querySelectorAll('[data-popover]').forEach((trigger) => {
             const sel = trigger.getAttribute('data-popover');
             if (!sel)
                 return;
@@ -100,9 +109,7 @@ class Popover {
         el.setAttribute('data-arrow', String(this.opts.arrow));
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
         const safeContent = sanitizeHtml(this.opts.content);
-        el.innerHTML = hasStructure
-            ? safeContent
-            : `<div class="popover-body">${safeContent}</div>`;
+        el.innerHTML = hasStructure ? safeContent : `<div class="popover-body">${safeContent}</div>`;
         this.trigger.setAttribute('aria-expanded', 'true');
         this.trigger.setAttribute('aria-controls', id);
         return el;
@@ -123,37 +130,35 @@ class Popover {
         this.popoverEl.style.left = `${left}px`;
         this.popoverEl.style.top = `${top}px`;
     }
-    onClick = () => { this.toggle(); };
-    onMouseEnter = () => {
+    onClick() {
+        this.toggle();
+    }
+    onMouseEnter() {
         if (this.hoverTimer !== null)
             clearTimeout(this.hoverTimer);
         this.open();
-    };
-    onMouseLeave = () => {
+    }
+    onMouseLeave() {
         this.hoverTimer = window.setTimeout(() => this.close(), 120);
-    };
-    onOutsideClick = (e) => {
+    }
+    onOutsideClick(e) {
         const t = e.target;
         if (!this.popoverEl?.contains(t) && !this.trigger.contains(t))
             this.close();
-    };
-    onEscape = (e) => {
+    }
+    onEscape(e) {
         if (e.key === 'Escape')
             this.close();
-    };
+    }
     attachTrigger() {
+        const sig = { signal: this.listeners.signal };
         if (this.opts.triggerMode === 'click') {
-            this.trigger.addEventListener('click', this.onClick);
+            this.trigger.addEventListener('click', () => this.onClick(), sig);
         }
         else {
-            this.trigger.addEventListener('mouseenter', this.onMouseEnter);
-            this.trigger.addEventListener('mouseleave', this.onMouseLeave);
+            this.trigger.addEventListener('mouseenter', () => this.onMouseEnter(), sig);
+            this.trigger.addEventListener('mouseleave', () => this.onMouseLeave(), sig);
         }
     }
-    detachTrigger() {
-        this.trigger.removeEventListener('click', this.onClick);
-        this.trigger.removeEventListener('mouseenter', this.onMouseEnter);
-        this.trigger.removeEventListener('mouseleave', this.onMouseLeave);
-    }
 }
 export { Popover };

package/js/position.js

@@ -13,7 +13,7 @@ function bestPlacement(trigger, floating, offset) {
         return 'right';
     if (space.left >= floating.width)
         return 'left';
-    return (Object.entries(space).sort((a, b) => b[1] - a[1])[0][0]);
+    return Object.entries(space).sort((a, b) => b[1] - a[1])[0][0];
 }
 function maybeFlip(placement, trigger, floating, offset) {
     const fits = {
@@ -23,15 +23,13 @@ function maybeFlip(placement, trigger, floating, offset) {
         right: window.innerWidth - trigger.right - offset >= floating.width,
     };
     const opp = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
-    return (!fits[placement] && fits[opp[placement]]) ? opp[placement] : placement;
+    return !fits[placement] && fits[opp[placement]] ? opp[placement] : placement;
 }
 function computePosition(trigger, floating, opts) {
     const offset = opts.offset ?? 8;
     const margin = opts.margin ?? 8;
     const align = opts.align ?? 'center';
-    const placement = opts.placement === 'auto'
-        ? bestPlacement(trigger, floating, offset)
-        : maybeFlip(opts.placement, trigger, floating, offset);
+    const placement = opts.placement === 'auto' ? bestPlacement(trigger, floating, offset) : maybeFlip(opts.placement, trigger, floating, offset);
     let left = 0, top = 0;
     switch (placement) {
         case 'top':

package/js/push-menu.d.ts

@@ -10,6 +10,8 @@ declare class PushMenu {
     private static elements;
     private static initialized;
     private static panelStack;
+    private static listeners;
+    private static clickNavListeners;
     static init(): void;
     private static buildPanels;
     private static extractSubPanels;

package/js/push-menu.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class PushMenu {
     static elements = {
         navigation: null,
@@ -5,10 +6,12 @@ class PushMenu {
         menu: null,
         header: null,
         controlIcon: null,
-        backdrop: null
+        backdrop: null,
     };
     static initialized = false;
     static panelStack = [];
+    static listeners = new ListenerGroup();
+    static clickNavListeners = null;
     static init() {
         if (this.initialized) {
             console.warn('PushMenu: Already initialized');
@@ -19,8 +22,9 @@ class PushMenu {
             throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
         }
         this.buildPanels();
-        this.elements.navigation.addEventListener('change', this.handleNavigationChange);
-        this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
+        const sig = { signal: this.listeners.signal };
+        this.elements.navigation.addEventListener('change', () => this.handleNavigationChange(), sig);
+        this.elements.backdrop?.addEventListener('click', () => this.handleBackdropClick(), sig);
         this.initialized = true;
     }
     static buildPanels() {
@@ -117,17 +121,19 @@ class PushMenu {
             }
         }, 300);
     }
-    static handleNavigationChange = () => {
+    static handleNavigationChange() {
         const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
         if (!isPushed) {
-            this.elements.content?.addEventListener('click', this.clickNav);
+            this.clickNavListeners = new ListenerGroup();
+            this.elements.content?.addEventListener('click', () => this.clickNav(), { signal: this.clickNavListeners.signal });
         }
         else {
-            this.elements.content?.removeEventListener('click', this.clickNav);
+            this.clickNavListeners?.destroy();
+            this.clickNavListeners = null;
             this.resetPanels();
         }
         this.pushToggle();
-    };
+    }
     static pushToggle() {
         if (!this.elements.content || !this.elements.menu) {
             throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
@@ -148,14 +154,14 @@ class PushMenu {
             }
         }
     }
-    static clickNav = () => {
+    static clickNav() {
         PushMenu.elements.navigation.click();
-    };
-    static handleBackdropClick = () => {
+    }
+    static handleBackdropClick() {
         if (PushMenu.isOpen()) {
             PushMenu.elements.navigation.click();
         }
-    };
+    }
     static open() {
         if (!this.elements.content?.classList.contains('pushed')) {
             this.pushToggle();
@@ -172,9 +178,9 @@ class PushMenu {
     static destroy() {
         if (!this.initialized)
             return;
-        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
-        this.elements.content?.removeEventListener('click', this.clickNav);
-        this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
+        this.listeners.reset();
+        this.clickNavListeners?.destroy();
+        this.clickNavListeners = null;
         this.close();
         this.elements = {
             navigation: null,
@@ -182,7 +188,7 @@ class PushMenu {
             menu: null,
             header: null,
             controlIcon: null,
-            backdrop: null
+            backdrop: null,
         };
         this.panelStack = [];
         this.initialized = false;

package/js/range-slider.d.ts

@@ -1,6 +1,6 @@
 declare class RangeSlider {
     private readonly input;
-    private abortController;
+    private listeners;
     constructor(input: HTMLInputElement);
     static initAll(selector?: string): void;
     private update;
@@ -12,7 +12,7 @@ declare class RangeSliderRange {
     private readonly endInput;
     private readonly fill;
     private readonly fillCreatedByUs;
-    private abortController;
+    private listeners;
     constructor(container: HTMLElement);
     static initAll(selector?: string): void;
     values(): [number, number];

package/js/range-slider.js

@@ -1,10 +1,11 @@
+import { ListenerGroup } from './listeners.js';
 class RangeSlider {
     input;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(input) {
         this.input = input;
         this.update();
-        this.input.addEventListener('input', () => this.update(), { signal: this.abortController.signal });
+        this.input.addEventListener('input', () => this.update(), { signal: this.listeners.signal });
     }
     static initAll(selector = '.range-slider input[type="range"]') {
         document.querySelectorAll(selector).forEach((input) => {
@@ -18,7 +19,7 @@ class RangeSlider {
         this.input.style.setProperty('--range-fill', `${pct}%`);
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.input.style.removeProperty('--range-fill');
     }
 }
@@ -28,7 +29,7 @@ class RangeSliderRange {
     endInput;
     fill;
     fillCreatedByUs;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(container) {
         const inputs = container.querySelectorAll('input[type="range"]');
         if (inputs.length !== 2) {
@@ -45,7 +46,7 @@ class RangeSliderRange {
             container.insertBefore(this.fill, container.firstChild);
         }
         this.update();
-        const signal = this.abortController.signal;
+        const signal = this.listeners.signal;
         this.startInput.addEventListener('input', () => this.handleInput(this.startInput), { signal });
         this.endInput.addEventListener('input', () => this.handleInput(this.endInput), { signal });
     }
@@ -75,7 +76,7 @@ class RangeSliderRange {
         this.container.style.setProperty('--range-end', `${endPct}%`);
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         this.container.style.removeProperty('--range-start');
         this.container.style.removeProperty('--range-end');
         if (this.fillCreatedByUs) {

package/js/scroll.js

@@ -4,14 +4,11 @@ class Scroll {
         const offset = fixedHeader ? fixedHeader.offsetHeight : 0;
         const settings = {
             behavior: 'smooth',
-            offset: offset,
+            offset,
             block: 'start',
-            ...options
+            ...options,
         };
-        let el = target instanceof Element ? target : null;
-        if (typeof target === 'string') {
-            el = document.querySelector(target);
-        }
+        const el = typeof target === 'string' ? document.querySelector(target) : target;
         if (!el)
             return;
         const rect = el.getBoundingClientRect();
@@ -19,7 +16,7 @@ class Scroll {
         const offsetTop = rect.top + scrollTop - settings.offset;
         window.scrollTo({
             top: offsetTop,
-            behavior: settings.behavior
+            behavior: settings.behavior,
         });
     }
 }