@dodlhuat/basix 1.2.1 → 1.2.3

package/js/lightbox.ts

@@ -0,0 +1,331 @@
+interface LightboxImage {
+    src: string;
+    alt?: string;
+    caption?: string;
+}
+
+interface LightboxOptions {
+    src?: string;
+    alt?: string;
+    caption?: string;
+    closeable?: boolean;
+    images?: LightboxImage[];
+    startIndex?: number;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
+class Lightbox {
+    private images: LightboxImage[];
+    private currentIndex: number;
+    private readonly closeable: boolean;
+    private readonly onOpen?: () => void;
+    private readonly onClose?: () => void;
+    private wrapper: HTMLElement | null = null;
+    private imgEl: HTMLImageElement | null = null;
+    private captionEl: HTMLElement | null = null;
+    private counterEl: HTMLElement | null = null;
+    private isZoomed = false;
+    private abortController = new AbortController();
+
+    constructor(options: LightboxOptions) {
+        if (options.images && options.images.length > 0) {
+            this.images = options.images;
+        } else {
+            this.images = [{ src: options.src ?? '', alt: options.alt, caption: options.caption }];
+        }
+        this.currentIndex = options.startIndex ?? 0;
+        this.closeable = options.closeable ?? true;
+        this.onOpen = options.onOpen;
+        this.onClose = options.onClose;
+
+        this.hide = this.hide.bind(this);
+        this.handleKeydown = this.handleKeydown.bind(this);
+        this.handleBackgroundClick = this.handleBackgroundClick.bind(this);
+    }
+
+    public show(): void {
+        this.hide();
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'lightbox-wrapper';
+        wrapper.setAttribute('role', 'dialog');
+        wrapper.setAttribute('aria-modal', 'true');
+        wrapper.setAttribute('aria-label', 'Image lightbox');
+        wrapper.setAttribute('tabindex', '-1');
+        wrapper.innerHTML = this.buildTemplate();
+        document.body.append(wrapper);
+
+        this.wrapper = wrapper;
+        this.imgEl = wrapper.querySelector('.lightbox-img');
+        this.captionEl = wrapper.querySelector('.lightbox-caption');
+        this.counterEl = wrapper.querySelector('.lightbox-counter');
+
+        const sig = { signal: this.abortController.signal };
+
+        if (this.closeable) {
+            wrapper.querySelector('.lightbox-close')?.addEventListener('click', this.hide, sig);
+            wrapper.querySelector('.lightbox-background')?.addEventListener('click', this.handleBackgroundClick, sig);
+        }
+
+        document.addEventListener('keydown', this.handleKeydown, sig);
+
+        if (this.images.length > 1) {
+            wrapper.querySelector('.lightbox-prev')?.addEventListener('click', () => this.prev(), sig);
+            wrapper.querySelector('.lightbox-next')?.addEventListener('click', () => this.next(), sig);
+        }
+
+        wrapper.querySelector('.lightbox-img-wrap')?.addEventListener('click', () => this.toggleZoom(), sig);
+
+        this.addTouchSupport();
+
+        document.body.style.overflow = 'hidden';
+        this.loadImage(this.currentIndex);
+        this.updateNav();
+
+        requestAnimationFrame(() => {
+            wrapper.classList.add('is-visible');
+            wrapper.focus();
+        });
+
+        this.onOpen?.();
+    }
+
+    public hide(): void {
+        const wrapper = this.wrapper;
+        if (!wrapper) return;
+
+        this.abortController.abort();
+        this.abortController = new AbortController();
+
+        document.body.style.overflow = '';
+        wrapper.classList.remove('is-visible');
+
+        setTimeout(() => {
+            wrapper.remove();
+            this.wrapper = null;
+            this.imgEl = null;
+            this.captionEl = null;
+            this.counterEl = null;
+            this.isZoomed = false;
+            this.onClose?.();
+        }, 300);
+    }
+
+    public next(): void {
+        if (this.images.length <= 1) return;
+        this.currentIndex = (this.currentIndex + 1) % this.images.length;
+        this.loadImage(this.currentIndex);
+        this.updateNav();
+    }
+
+    public prev(): void {
+        if (this.images.length <= 1) return;
+        this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
+        this.loadImage(this.currentIndex);
+        this.updateNav();
+    }
+
+    public isVisible(): boolean {
+        return this.wrapper !== null && document.body.contains(this.wrapper);
+    }
+
+    public destroy(): void {
+        this.hide();
+    }
+
+    private loadImage(index: number): void {
+        const wrap = this.wrapper?.querySelector('.lightbox-img-wrap');
+        if (!wrap || !this.imgEl) return;
+
+        this.isZoomed = false;
+        this.imgEl.classList.remove('is-zoomed');
+        wrap.classList.remove('is-zoomed', 'is-error');
+        wrap.classList.add('is-loading');
+        this.imgEl.classList.remove('is-loaded');
+
+        const { src, alt, caption } = this.images[index];
+
+        const tempImg = new Image();
+        tempImg.onload = () => {
+            if (!this.imgEl) return;
+            this.imgEl.src = src;
+            this.imgEl.alt = alt ?? '';
+            wrap.classList.remove('is-loading');
+            this.imgEl.classList.add('is-loaded');
+        };
+        tempImg.onerror = () => {
+            wrap.classList.remove('is-loading');
+            wrap.classList.add('is-error');
+        };
+        tempImg.src = src;
+
+        if (this.captionEl) {
+            if (caption) {
+                this.captionEl.textContent = caption;
+                this.captionEl.hidden = false;
+            } else {
+                this.captionEl.hidden = true;
+            }
+        }
+
+        this.preloadAdjacent(index);
+    }
+
+    private preloadAdjacent(index: number): void {
+        if (this.images.length <= 1) return;
+        const prevIdx = (index - 1 + this.images.length) % this.images.length;
+        const nextIdx = (index + 1) % this.images.length;
+        [prevIdx, nextIdx].forEach(i => {
+            const img = new Image();
+            img.src = this.images[i].src;
+        });
+    }
+
+    private updateNav(): void {
+        if (!this.wrapper) return;
+        const isGallery = this.images.length > 1;
+
+        if (this.counterEl) {
+            this.counterEl.textContent = isGallery ? `${this.currentIndex + 1} / ${this.images.length}` : '';
+            this.counterEl.hidden = !isGallery;
+        }
+
+        const prevBtn = this.wrapper.querySelector<HTMLButtonElement>('.lightbox-prev');
+        const nextBtn = this.wrapper.querySelector<HTMLButtonElement>('.lightbox-next');
+        if (prevBtn) prevBtn.hidden = !isGallery;
+        if (nextBtn) nextBtn.hidden = !isGallery;
+    }
+
+    private toggleZoom(): void {
+        if (!this.imgEl) return;
+        this.isZoomed = !this.isZoomed;
+        this.imgEl.classList.toggle('is-zoomed', this.isZoomed);
+        this.wrapper?.querySelector('.lightbox-img-wrap')?.classList.toggle('is-zoomed', this.isZoomed);
+    }
+
+    private handleKeydown(e: KeyboardEvent): void {
+        switch (e.key) {
+            case 'Escape':
+                if (this.closeable) this.hide();
+                break;
+            case 'ArrowRight':
+                this.next();
+                break;
+            case 'ArrowLeft':
+                this.prev();
+                break;
+            case 'Tab':
+                this.trapFocus(e);
+                break;
+        }
+    }
+
+    private trapFocus(e: KeyboardEvent): void {
+        if (!this.wrapper) return;
+        const focusable = Array.from(
+            this.wrapper.querySelectorAll<HTMLElement>(
+                'button:not([hidden]), [tabindex]:not([tabindex="-1"]):not([hidden])'
+            )
+        ).filter(el => el.offsetParent !== null);
+
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+
+        if (e.shiftKey) {
+            if (document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+        } else {
+            if (document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+            }
+        }
+    }
+
+    private handleBackgroundClick(e: Event): void {
+        if ((e.target as HTMLElement)?.classList.contains('lightbox-background')) {
+            this.hide();
+        }
+    }
+
+    private addTouchSupport(): void {
+        const wrap = this.wrapper?.querySelector('.lightbox-img-wrap');
+        if (!wrap) return;
+        let startX = 0;
+        let isDragging = false;
+
+        wrap.addEventListener('touchstart', (e: Event) => {
+            startX = (e as TouchEvent).touches[0].clientX;
+            isDragging = true;
+        }, { passive: true, signal: this.abortController.signal } as AddEventListenerOptions);
+
+        wrap.addEventListener('touchend', (e: Event) => {
+            if (!isDragging) return;
+            const deltaX = (e as TouchEvent).changedTouches[0].clientX - startX;
+            if (Math.abs(deltaX) > 50) {
+                deltaX < 0 ? this.next() : this.prev();
+            }
+            isDragging = false;
+        }, { signal: this.abortController.signal } as AddEventListenerOptions);
+    }
+
+    private buildTemplate(): string {
+        return `
+            ${this.closeable ? '<button class="lightbox-close" aria-label="Close lightbox"><span class="icon icon-close"></span></button>' : ''}
+            <div class="lightbox" role="document">
+                <div class="lightbox-img-wrap">
+                    <div class="lightbox-spinner"><div class="spinner"></div></div>
+                    <img class="lightbox-img" src="" alt="" draggable="false" />
+                </div>
+                <p class="lightbox-caption" hidden></p>
+                <div class="lightbox-counter" hidden></div>
+            </div>
+            <button class="lightbox-prev" aria-label="Previous image" hidden>
+                <span class="icon icon-navigate_before"></span>
+            </button>
+            <button class="lightbox-next" aria-label="Next image" hidden>
+                <span class="icon icon-navigate_next"></span>
+            </button>
+            <div class="lightbox-background"></div>
+        `;
+    }
+
+    static bind(selector: string = '[data-lightbox]'): void {
+        const elements = document.querySelectorAll<HTMLElement>(selector);
+        const groups = new Map<string, { el: HTMLElement; image: LightboxImage }[]>();
+
+        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 imgChild = el.querySelector<HTMLImageElement>('img');
+            const alt = el instanceof HTMLImageElement ? el.alt : (imgChild?.alt ?? '');
+            const caption = el.dataset.lightboxCaption;
+
+            if (!groups.has(groupKey)) groups.set(groupKey, []);
+            groups.get(groupKey)!.push({ el, image: { src, alt, caption } });
+        });
+
+        groups.forEach(items => {
+            items.forEach(({ el }, idx) => {
+                (el as HTMLElement).style.cursor = 'zoom-in';
+                el.addEventListener('click', e => {
+                    e.preventDefault();
+                    new Lightbox({
+                        images: items.map(i => i.image),
+                        startIndex: idx,
+                    }).show();
+                });
+            });
+        });
+    }
+}
+
+export { Lightbox, type LightboxOptions, type LightboxImage };

package/js/modal.js

@@ -1,3 +1,4 @@
+import { sanitizeHtml } from './utils.js';
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
 class Modal {
     constructor(contentOrOptions, header, footer, closeable = true, type = 'default') {
@@ -45,7 +46,7 @@ class Modal {
         });
     }
     hide() {
-        const wrapper = document.querySelector('.modal-wrapper');
+        const wrapper = this.modalWrapper;
         if (!wrapper)
             return;
         // Remove event listeners
@@ -78,11 +79,11 @@ class Modal {
         }
         if (this.header !== undefined) {
             const headerClass = `header ${this.type}-bg`;
-            parts.push(`<div class="${headerClass}">${this.header}</div>`);
+            parts.push(`<div class="${headerClass}">${sanitizeHtml(this.header)}</div>`);
         }
-        parts.push(this.content);
+        parts.push(sanitizeHtml(this.content));
         if (this.footer !== undefined) {
-            parts.push(`<div class="footer">${this.footer}</div>`);
+            parts.push(`<div class="footer">${sanitizeHtml(this.footer)}</div>`);
         }
         parts.push('</div>');
         parts.push('<div class="modal-background"></div>');

package/js/modal.ts

@@ -1,3 +1,5 @@
+import { sanitizeHtml } from './utils.js';
+
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
 
 type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
@@ -81,7 +83,7 @@ class Modal {
     }
 
     public hide(): void {
-        const wrapper = document.querySelector('.modal-wrapper');
+        const wrapper = this.modalWrapper;
         if (!wrapper) return;
 
         // Remove event listeners
@@ -123,13 +125,13 @@ class Modal {
 
         if (this.header !== undefined) {
             const headerClass = `header ${this.type}-bg`;
-            parts.push(`<div class="${headerClass}">${this.header}</div>`);
+            parts.push(`<div class="${headerClass}">${sanitizeHtml(this.header)}</div>`);
         }
 
-        parts.push(this.content);
+        parts.push(sanitizeHtml(this.content));
 
         if (this.footer !== undefined) {
-            parts.push(`<div class="footer">${this.footer}</div>`);
+            parts.push(`<div class="footer">${sanitizeHtml(this.footer)}</div>`);
         }
 
         parts.push('</div>');

package/js/popover.js

@@ -1,4 +1,5 @@
 import { computePosition } from './position.js';
+import { sanitizeHtml } from './utils.js';
 // Must match $arrow in popover.scss
 const ARROW_SIZE = 6;
 class Popover {
@@ -119,9 +120,10 @@ class Popover {
         // Wrap plain content in .popover-body so it gets proper padding.
         // Skip wrapping when content already uses structured popover elements.
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
+        const safeContent = sanitizeHtml(this.opts.content);
         el.innerHTML = hasStructure
-            ? this.opts.content
-            : `<div class="popover-body">${this.opts.content}</div>`;
+            ? safeContent
+            : `<div class="popover-body">${safeContent}</div>`;
         this.trigger.setAttribute('aria-expanded', 'true');
         this.trigger.setAttribute('aria-controls', id);
         return el;

package/js/popover.ts

@@ -1,5 +1,6 @@
 import { computePosition } from './position.js';
 import type { Placement } from './position.js';
+import { sanitizeHtml } from './utils.js';
 
 type PopoverPlacement = Placement | 'auto';
 type PopoverAlign     = 'start' | 'center' | 'end';
@@ -142,9 +143,10 @@ class Popover {
         // Wrap plain content in .popover-body so it gets proper padding.
         // Skip wrapping when content already uses structured popover elements.
         const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
+        const safeContent = sanitizeHtml(this.opts.content);
         el.innerHTML = hasStructure
-            ? this.opts.content
-            : `<div class="popover-body">${this.opts.content}</div>`;
+            ? safeContent
+            : `<div class="popover-body">${safeContent}</div>`;
 
         this.trigger.setAttribute('aria-expanded', 'true');
         this.trigger.setAttribute('aria-controls', id);

package/js/push-menu.js

@@ -9,7 +9,8 @@ class PushMenu {
             throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
         }
         this.buildPanels();
-        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
+        this.boundHandleNavigationChange = this.handleNavigationChange.bind(this);
+        this.elements.navigation.addEventListener('change', this.boundHandleNavigationChange);
         this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
         this.initialized = true;
     }
@@ -179,7 +180,7 @@ class PushMenu {
     static destroy() {
         if (!this.initialized)
             return;
-        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
+        this.elements.navigation?.removeEventListener('change', this.boundHandleNavigationChange);
         this.elements.content?.removeEventListener('click', this.clickNav);
         this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
         this.close();

package/js/push-menu.ts

@@ -19,6 +19,7 @@ class PushMenu {
 
     private static initialized = false;
     private static panelStack: HTMLElement[] = [];
+    private static boundHandleNavigationChange: () => void;
 
     public static init(): void {
         if (this.initialized) {
@@ -34,7 +35,8 @@ class PushMenu {
 
         this.buildPanels();
 
-        this.elements.navigation.addEventListener('change', this.handleNavigationChange.bind(this));
+        this.boundHandleNavigationChange = this.handleNavigationChange.bind(this);
+        this.elements.navigation.addEventListener('change', this.boundHandleNavigationChange);
         this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
 
         this.initialized = true;
@@ -252,7 +254,7 @@ class PushMenu {
     public static destroy(): void {
         if (!this.initialized) return;
 
-        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
+        this.elements.navigation?.removeEventListener('change', this.boundHandleNavigationChange);
         this.elements.content?.removeEventListener('click', this.clickNav);
         this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
 

package/js/scrollbar.js

@@ -1,20 +1,9 @@
 class Scrollbar {
-    constructor(elementOrSelector) {
+    constructor(container) {
         this.dragging = false;
         this.activePointerId = null;
         this.startPointerY = 0;
         this.startThumbTop = 0;
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
-        if (!container) {
-            throw new Error(`Scrollbar: Element not found for selector "${elementOrSelector}"`);
-        }
-        // Return existing instance if already initialized
-        const existingInstance = Scrollbar.instances.get(container);
-        if (existingInstance) {
-            return existingInstance;
-        }
         this.container = container;
         // Query and validate required elements
         const elements = this.getRequiredElements(container);
@@ -37,7 +26,8 @@ class Scrollbar {
         // Initialize
         this.attachEventListeners();
         Scrollbar.instances.set(container, this);
-        // Install global listeners once for all instances
+        // Track instances and install global listeners once for all
+        Scrollbar.instanceCount++;
         if (!Scrollbar.globalListenersInstalled) {
             Scrollbar.installGlobalListeners();
         }
@@ -64,16 +54,17 @@ class Scrollbar {
         return Math.max(absoluteMin, parsed || defaultMin);
     }
     static installGlobalListeners() {
-        // Route pointer events to the active scrollbar instance
+        const ac = new AbortController();
+        Scrollbar.globalListenerAbortController = ac;
         document.addEventListener('pointermove', (e) => {
             Scrollbar.activeInstance?.boundPointerMove(e);
-        }, { passive: false });
+        }, { passive: false, signal: ac.signal });
         document.addEventListener('pointerup', (e) => {
             Scrollbar.activeInstance?.boundPointerUp(e);
-        });
+        }, { signal: ac.signal });
         document.addEventListener('pointercancel', (e) => {
             Scrollbar.activeInstance?.boundPointerUp(e);
-        });
+        }, { signal: ac.signal });
         Scrollbar.globalListenersInstalled = true;
     }
     attachEventListeners() {
@@ -209,24 +200,41 @@ class Scrollbar {
         if (Scrollbar.activeInstance === this) {
             Scrollbar.activeInstance = null;
         }
+        // Uninstall global listeners when last instance is destroyed
+        Scrollbar.instanceCount--;
+        if (Scrollbar.instanceCount === 0) {
+            Scrollbar.globalListenerAbortController?.abort();
+            Scrollbar.globalListenerAbortController = null;
+            Scrollbar.globalListenersInstalled = false;
+        }
     }
     // Static factory methods
+    static create(elementOrSelector) {
+        const container = typeof elementOrSelector === 'string'
+            ? document.querySelector(elementOrSelector)
+            : elementOrSelector;
+        if (!container) {
+            throw new Error(`Scrollbar: Element not found for selector "${elementOrSelector}"`);
+        }
+        const existing = Scrollbar.instances.get(container);
+        if (existing)
+            return existing;
+        return new Scrollbar(container);
+    }
     static initAll(selector) {
         const containers = document.querySelectorAll(selector);
-        return Array.from(containers).map(container => new Scrollbar(container));
+        return Array.from(containers).map(container => Scrollbar.create(container));
     }
     static initOne(elementOrSelector) {
-        return new Scrollbar(elementOrSelector);
+        return Scrollbar.create(elementOrSelector);
     }
     static getInstance(container) {
         return Scrollbar.instances.get(container);
     }
-    static destroyAll() {
-        // Note: WeakMap doesn't support iteration, so this is a no-op
-        // Individual instances should be destroyed by calling destroy()
-    }
 }
 Scrollbar.instances = new WeakMap();
 Scrollbar.activeInstance = null;
 Scrollbar.globalListenersInstalled = false;
+Scrollbar.instanceCount = 0;
+Scrollbar.globalListenerAbortController = null;
 export { Scrollbar };