@dodlhuat/basix 1.2.1 → 1.2.3

package/js/flyout-menu.js

@@ -3,6 +3,7 @@ class FlyoutMenu {
         this.closeBtn = null;
         this.submenuToggles = null;
         this.menuLinks = null;
+        this.submenuHandlers = new Map();
         this.options = {
             triggerSelector: '.menu-trigger',
             menuSelector: '#flyoutMenu',
@@ -119,7 +120,9 @@ class FlyoutMenu {
         this.flyoutOverlay?.addEventListener('click', this.close);
         // Submenus
         this.submenuToggles?.forEach(toggle => {
-            toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = (e) => this.handleSubmenu(e, toggle);
+            this.submenuHandlers.set(toggle, handler);
+            toggle.addEventListener('click', handler);
         });
         // Close on Link Click
         this.menuLinks?.forEach(link => {
@@ -183,8 +186,11 @@ class FlyoutMenu {
         this.closeBtn?.removeEventListener('click', this.close);
         this.flyoutOverlay?.removeEventListener('click', this.close);
         this.submenuToggles?.forEach(toggle => {
-            toggle.removeEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = this.submenuHandlers.get(toggle);
+            if (handler)
+                toggle.removeEventListener('click', handler);
         });
+        this.submenuHandlers.clear();
         this.menuLinks?.forEach(link => {
             link.removeEventListener('click', this.close);
         });

package/js/flyout-menu.ts

@@ -20,6 +20,7 @@ class FlyoutMenu {
     private closeBtn: HTMLElement | null = null;
     private submenuToggles: NodeListOf<HTMLElement> | null = null;
     private menuLinks: NodeListOf<HTMLAnchorElement> | null = null;
+    private submenuHandlers = new Map<HTMLElement, (e: Event) => void>();
 
     constructor(options: FlyoutMenuOptions = {}) {
         this.options = {
@@ -157,7 +158,9 @@ class FlyoutMenu {
 
         // Submenus
         this.submenuToggles?.forEach(toggle => {
-            toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = (e: Event) => this.handleSubmenu(e, toggle);
+            this.submenuHandlers.set(toggle, handler);
+            toggle.addEventListener('click', handler);
         });
 
         // Close on Link Click
@@ -234,8 +237,10 @@ class FlyoutMenu {
         this.flyoutOverlay?.removeEventListener('click', this.close);
 
         this.submenuToggles?.forEach(toggle => {
-            toggle.removeEventListener('click', (e) => this.handleSubmenu(e, toggle));
+            const handler = this.submenuHandlers.get(toggle);
+            if (handler) toggle.removeEventListener('click', handler);
         });
+        this.submenuHandlers.clear();
 
         this.menuLinks?.forEach(link => {
             link.removeEventListener('click', this.close);

package/js/gallery.js

@@ -1,5 +1,6 @@
+import { escapeHtml } from './utils.js';
 class MasonryGallery {
-    constructor(containerId, options = {}) {
+    constructor(containerId, options) {
         this.columns = [];
         this.isFetching = false;
         this.resizeObserver = null;
@@ -13,9 +14,6 @@ class MasonryGallery {
                 this.loadMoreImages();
             }
         };
-        this.fetchMockImages = () => {
-            throw Error("Method not implemented.");
-        };
         const container = document.getElementById(containerId);
         if (!container) {
             throw new Error(`Container with id "${containerId}" not found`);
@@ -26,7 +24,7 @@ class MasonryGallery {
             minColumnWidth: options.minColumnWidth ?? 250,
             scrollThreshold: options.scrollThreshold ?? 100,
             reload: 2,
-            fetchFunction: options.fetchFunction ?? this.fetchMockImages,
+            fetchFunction: options.fetchFunction,
         };
         this.init();
     }
@@ -150,19 +148,14 @@ class MasonryGallery {
         const div = document.createElement("div");
         div.className = "masonry-item";
         div.innerHTML = `
-      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
+      <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
       <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
+        <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
+        <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
       </div>
     `;
         return div;
     }
-    escapeHtml(text) {
-        const div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
-    }
     addToShortestColumn(element) {
         if (this.columns.length === 0)
             return;

package/js/gallery.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 interface ImageData {
   src: string;
   title: string;
@@ -5,11 +7,11 @@ interface ImageData {
 }
 
 interface MasonryGalleryOptions {
+  fetchFunction: () => Promise<ImageData[]>;
   minColumnWidth?: number;
   scrollThreshold?: number;
   loaderSelector?: string;
   reload?: number;
-  fetchFunction?: () => Promise<ImageData[]>;
 }
 
 class MasonryGallery {
@@ -22,7 +24,7 @@ class MasonryGallery {
   private abortController: AbortController | null = null;
   private reloaded = 0;
 
-  constructor(containerId: string, options: MasonryGalleryOptions = {}) {
+  constructor(containerId: string, options: MasonryGalleryOptions) {
     const container = document.getElementById(containerId);
     if (!container) {
       throw new Error(`Container with id "${containerId}" not found`);
@@ -34,7 +36,7 @@ class MasonryGallery {
       minColumnWidth: options.minColumnWidth ?? 250,
       scrollThreshold: options.scrollThreshold ?? 100,
       reload: 2,
-      fetchFunction: options.fetchFunction ?? this.fetchMockImages,
+      fetchFunction: options.fetchFunction,
     };
 
     this.init();
@@ -159,10 +161,6 @@ class MasonryGallery {
     }
   }
 
-  private fetchMockImages = (): Promise<ImageData[]> => {
-    throw Error("Method not implemented.");
-  };
-
   private renderImages(imageDataList: ImageData[]): void {
     // Sort columns by current height so we start filling from the shortest.
     // Then round-robin across them — this avoids the problem where unloaded
@@ -196,22 +194,16 @@ class MasonryGallery {
     div.className = "masonry-item";
 
     div.innerHTML = `
-      <img src="${this.escapeHtml(data.src)}" alt="${this.escapeHtml(data.title)}" loading="lazy">
+      <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
       <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${this.escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${this.escapeHtml(data.desc)}</p>
+        <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
+        <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
       </div>
     `;
 
     return div;
   }
 
-  private escapeHtml(text: string): string {
-    const div = document.createElement("div");
-    div.textContent = text;
-    return div.innerHTML;
-  }
-
   private addToShortestColumn(element: HTMLElement): void {
     if (this.columns.length === 0) return;
 

package/js/group-picker.js

@@ -1,3 +1,4 @@
+import { escapeHtml } from './utils.js';
 class GroupPicker {
     constructor(selector, data, options = {}) {
         // State
@@ -39,9 +40,10 @@ class GroupPicker {
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
       <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
-      <input type="text" placeholder="${this.options.searchPlaceholder}" />
+      <input type="text" />
     `;
         this.searchInput = searchWrap.querySelector('input');
+        this.searchInput.placeholder = this.options.searchPlaceholder;
         // List
         this.listEl = document.createElement('div');
         this.listEl.className = 'group-picker__list';
@@ -95,7 +97,7 @@ class GroupPicker {
         label.className = 'group-picker__group-label';
         label.innerHTML = query && groupMatches
             ? this.highlightText(group.label, query)
-            : group.label;
+            : escapeHtml(group.label);
         if (hasChildren) {
             // Chevron — Basix font icon
             const chevron = document.createElement('span');
@@ -134,7 +136,7 @@ class GroupPicker {
                 const subEl = document.createElement('span');
                 subEl.className = 'chip clickable group-picker__subgroup';
                 subEl.dataset.subId = sub.id;
-                subEl.innerHTML = query ? this.highlightText(sub.label, query) : sub.label;
+                subEl.innerHTML = query ? this.highlightText(sub.label, query) : escapeHtml(sub.label);
                 const isSubSelected = this.selectedSubs.get(group.id)?.has(sub.id) ?? false;
                 if (isSubSelected)
                     subEl.classList.add('is-selected');
@@ -290,11 +292,12 @@ class GroupPicker {
         }));
     }
     highlightText(text, query) {
+        const safeText = escapeHtml(text);
         if (!query)
-            return text;
-        const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const regex = new RegExp(`(${escaped})`, 'gi');
-        return text.replace(regex, '<mark>$1</mark>');
+            return safeText;
+        const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(`(${escapedQuery})`, 'gi');
+        return safeText.replace(regex, '<mark>$1</mark>');
     }
     // Public API
     getSelection() {

package/js/group-picker.ts

@@ -1,3 +1,5 @@
+import { escapeHtml } from './utils.js';
+
 interface SubgroupData {
   id: string;
   label: string;
@@ -86,9 +88,10 @@ class GroupPicker {
     searchWrap.className = 'group-picker__search';
     searchWrap.innerHTML = `
       <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
-      <input type="text" placeholder="${this.options.searchPlaceholder}" />
+      <input type="text" />
     `;
     this.searchInput = searchWrap.querySelector('input')!;
+    this.searchInput.placeholder = this.options.searchPlaceholder;
 
     // List
     this.listEl = document.createElement('div');
@@ -160,7 +163,7 @@ class GroupPicker {
     label.className = 'group-picker__group-label';
     label.innerHTML = query && groupMatches
       ? this.highlightText(group.label, query)
-      : group.label;
+      : escapeHtml(group.label);
 
     if (hasChildren) {
       // Chevron — Basix font icon
@@ -208,7 +211,7 @@ class GroupPicker {
         const subEl = document.createElement('span');
         subEl.className = 'chip clickable group-picker__subgroup';
         subEl.dataset.subId = sub.id;
-        subEl.innerHTML = query ? this.highlightText(sub.label, query) : sub.label;
+        subEl.innerHTML = query ? this.highlightText(sub.label, query) : escapeHtml(sub.label);
 
         const isSubSelected = this.selectedSubs.get(group.id)?.has(sub.id) ?? false;
         if (isSubSelected) subEl.classList.add('is-selected');
@@ -387,10 +390,11 @@ class GroupPicker {
   }
 
   private highlightText(text: string, query: string): string {
-    if (!query) return text;
-    const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const regex = new RegExp(`(${escaped})`, 'gi');
-    return text.replace(regex, '<mark>$1</mark>');
+    const safeText = escapeHtml(text);
+    if (!query) return safeText;
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    return safeText.replace(regex, '<mark>$1</mark>');
   }
 
   // Public API

package/js/lightbox.js

@@ -0,0 +1,277 @@
+class Lightbox {
+    constructor(options) {
+        this.wrapper = null;
+        this.imgEl = null;
+        this.captionEl = null;
+        this.counterEl = null;
+        this.isZoomed = false;
+        this.abortController = new AbortController();
+        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);
+    }
+    show() {
+        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?.();
+    }
+    hide() {
+        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);
+    }
+    next() {
+        if (this.images.length <= 1)
+            return;
+        this.currentIndex = (this.currentIndex + 1) % this.images.length;
+        this.loadImage(this.currentIndex);
+        this.updateNav();
+    }
+    prev() {
+        if (this.images.length <= 1)
+            return;
+        this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
+        this.loadImage(this.currentIndex);
+        this.updateNav();
+    }
+    isVisible() {
+        return this.wrapper !== null && document.body.contains(this.wrapper);
+    }
+    destroy() {
+        this.hide();
+    }
+    loadImage(index) {
+        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);
+    }
+    preloadAdjacent(index) {
+        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;
+        });
+    }
+    updateNav() {
+        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('.lightbox-prev');
+        const nextBtn = this.wrapper.querySelector('.lightbox-next');
+        if (prevBtn)
+            prevBtn.hidden = !isGallery;
+        if (nextBtn)
+            nextBtn.hidden = !isGallery;
+    }
+    toggleZoom() {
+        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);
+    }
+    handleKeydown(e) {
+        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;
+        }
+    }
+    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);
+        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();
+            }
+        }
+    }
+    handleBackgroundClick(e) {
+        if (e.target?.classList.contains('lightbox-background')) {
+            this.hide();
+        }
+    }
+    addTouchSupport() {
+        const wrap = this.wrapper?.querySelector('.lightbox-img-wrap');
+        if (!wrap)
+            return;
+        let startX = 0;
+        let isDragging = false;
+        wrap.addEventListener('touchstart', (e) => {
+            startX = e.touches[0].clientX;
+            isDragging = true;
+        }, { passive: true, signal: this.abortController.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();
+            }
+            isDragging = false;
+        }, { signal: this.abortController.signal });
+    }
+    buildTemplate() {
+        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 = '[data-lightbox]') {
+        const elements = document.querySelectorAll(selector);
+        const groups = new Map();
+        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('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.style.cursor = 'zoom-in';
+                el.addEventListener('click', e => {
+                    e.preventDefault();
+                    new Lightbox({
+                        images: items.map(i => i.image),
+                        startIndex: idx,
+                    }).show();
+                });
+            });
+        });
+    }
+}
+export { Lightbox };