@dodlhuat/basix 1.3.2 → 1.3.4

package/js/file-uploader.js

@@ -1,49 +1,17 @@
 import { escapeHtml } from './utils.js';
+/** Drag-and-drop file uploader with progress tracking and XHR-based uploads. */
 class FileUploader {
+    container;
+    dropZone;
+    fileInput;
+    fileList;
+    uploadBtn;
+    files = new Map();
+    uploadUrl;
+    maxFileSize;
+    allowedTypes;
+    abortControllers = new Map();
     constructor(elementOrSelector, config = {}) {
-        this.files = new Map();
-        this.abortControllers = new Map();
-        this.preventDefaults = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        };
-        this.handleDragEnter = () => {
-            this.dropZone.classList.add('drag-over');
-        };
-        this.handleDragLeave = () => {
-            this.dropZone.classList.remove('drag-over');
-        };
-        this.handleDrop = (e) => {
-            const droppedFiles = e.dataTransfer?.files;
-            if (droppedFiles) {
-                this.handleFiles(droppedFiles);
-            }
-        };
-        this.handleDropZoneClick = () => {
-            this.fileInput.click();
-        };
-        this.handleFileInputChange = (e) => {
-            const target = e.target;
-            if (target.files) {
-                this.handleFiles(target.files);
-                target.value = '';
-            }
-        };
-        this.handleUploadClick = async () => {
-            if (this.files.size === 0)
-                return;
-            this.uploadBtn.disabled = true;
-            this.uploadBtn.textContent = 'Uploading...';
-            const uploadPromises = Array.from(this.files.values()).map(({ file, element }) => this.uploadFile(file, element));
-            const results = await Promise.allSettled(uploadPromises);
-            this.uploadBtn.textContent = 'Upload Complete';
-            setTimeout(() => {
-                this.dispatchUploadCompletedEvent(results);
-                this.fileList.innerHTML = '';
-                this.files.clear();
-                this.updateUploadButton();
-            }, 1500);
-        };
         const container = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -89,6 +57,47 @@ class FileUploader {
         this.fileInput.addEventListener('change', this.handleFileInputChange);
         this.uploadBtn.addEventListener('click', this.handleUploadClick);
     }
+    preventDefaults = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    handleDragEnter = () => {
+        this.dropZone.classList.add('drag-over');
+    };
+    handleDragLeave = () => {
+        this.dropZone.classList.remove('drag-over');
+    };
+    handleDrop = (e) => {
+        const droppedFiles = e.dataTransfer?.files;
+        if (droppedFiles) {
+            this.handleFiles(droppedFiles);
+        }
+    };
+    handleDropZoneClick = () => {
+        this.fileInput.click();
+    };
+    handleFileInputChange = (e) => {
+        const target = e.target;
+        if (target.files) {
+            this.handleFiles(target.files);
+            target.value = '';
+        }
+    };
+    handleUploadClick = async () => {
+        if (this.files.size === 0)
+            return;
+        this.uploadBtn.disabled = true;
+        this.uploadBtn.textContent = 'Uploading...';
+        const uploadPromises = Array.from(this.files.values()).map(({ file, element }) => this.uploadFile(file, element));
+        const results = await Promise.allSettled(uploadPromises);
+        this.uploadBtn.textContent = 'Upload Complete';
+        setTimeout(() => {
+            this.dispatchUploadCompletedEvent(results);
+            this.fileList.innerHTML = '';
+            this.files.clear();
+            this.updateUploadButton();
+        }, 1500);
+    };
     handleFiles(fileList) {
         Array.from(fileList).forEach(file => {
             const key = this.fileKey(file);

package/js/flyout-menu.d.ts

@@ -1,3 +1,4 @@
+/** Configuration options for the FlyoutMenu. */
 interface FlyoutMenuOptions {
     triggerSelector?: string;
     menuSelector?: string;
@@ -11,6 +12,7 @@ interface FlyoutMenuOptions {
     enableHeader?: boolean;
     enableFooter?: boolean;
 }
+/** Off-canvas flyout navigation with nested submenu support. */
 declare class FlyoutMenu {
     private options;
     private menuTrigger;
@@ -19,7 +21,7 @@ declare class FlyoutMenu {
     private closeBtn;
     private submenuToggles;
     private menuLinks;
-    private submenuHandlers;
+    private abortController;
     constructor(options?: FlyoutMenuOptions);
     private init;
     private hydrateMenu;
@@ -27,8 +29,8 @@ declare class FlyoutMenu {
     private renderHeader;
     private renderFooter;
     private bindEvents;
-    private open;
-    private close;
+    open: () => void;
+    close: () => void;
     private handleSubmenu;
     private handleKeydown;
     setDirection(direction: 'left' | 'right'): void;

package/js/flyout-menu.js

@@ -1,9 +1,14 @@
+/** Off-canvas flyout navigation with nested submenu support. */
 class FlyoutMenu {
+    options;
+    menuTrigger;
+    flyoutMenu;
+    flyoutOverlay;
+    closeBtn = null;
+    submenuToggles = null;
+    menuLinks = null;
+    abortController = new AbortController();
     constructor(options = {}) {
-        this.closeBtn = null;
-        this.submenuToggles = null;
-        this.menuLinks = null;
-        this.submenuHandlers = new Map();
         this.options = {
             triggerSelector: '.menu-trigger',
             menuSelector: '#flyoutMenu',
@@ -21,10 +26,6 @@ class FlyoutMenu {
         this.menuTrigger = document.querySelector(this.options.triggerSelector);
         this.flyoutMenu = document.querySelector(this.options.menuSelector);
         this.flyoutOverlay = document.querySelector(this.options.overlaySelector);
-        this.open = this.open.bind(this);
-        this.close = this.close.bind(this);
-        this.handleSubmenu = this.handleSubmenu.bind(this);
-        this.handleKeydown = this.handleKeydown.bind(this);
         this.init();
     }
     init() {
@@ -54,16 +55,13 @@ class FlyoutMenu {
     processListItems(ul) {
         const items = Array.from(ul.children);
         items.forEach((li, index) => {
-            // Check if it has a nested UL
             const nestedUl = li.querySelector('ul');
             if (nestedUl) {
                 li.classList.add('has-submenu');
                 nestedUl.classList.add('submenu');
-                // Get text content (excluding nested UL text)
                 const textNode = Array.from(li.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '');
                 const text = textNode?.textContent?.trim() || 'Menu Item';
                 textNode?.remove();
-                // Create Toggle Button
                 const button = document.createElement('button');
                 button.className = 'submenu-toggle';
                 button.style.setProperty('--delay', `${(index + 1) * 0.1}s`);
@@ -74,11 +72,9 @@ class FlyoutMenu {
                     </svg>
                 `;
                 li.insertBefore(button, nestedUl);
-                // Recursively process nested UL
                 this.processListItems(nestedUl);
             }
             else {
-                // Leaf node - ensure it has a link
                 const link = li.querySelector('a');
                 if (link) {
                     link.style.setProperty('--delay', `${(index + 1) * 0.1}s`);
@@ -113,36 +109,30 @@ class FlyoutMenu {
         this.flyoutMenu.append(footer);
     }
     bindEvents() {
-        // Open
-        this.menuTrigger?.addEventListener('click', this.open);
-        // Close
-        this.closeBtn?.addEventListener('click', this.close);
-        this.flyoutOverlay?.addEventListener('click', this.close);
-        // Submenus
+        const sig = { signal: this.abortController.signal };
+        this.menuTrigger?.addEventListener('click', this.open, sig);
+        this.closeBtn?.addEventListener('click', this.close, sig);
+        this.flyoutOverlay?.addEventListener('click', this.close, sig);
         this.submenuToggles?.forEach(toggle => {
-            const handler = (e) => this.handleSubmenu(e, toggle);
-            this.submenuHandlers.set(toggle, handler);
-            toggle.addEventListener('click', handler);
+            toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle), sig);
         });
-        // Close on Link Click
         this.menuLinks?.forEach(link => {
-            link.addEventListener('click', this.close);
+            link.addEventListener('click', this.close, sig);
         });
-        // Keyboard navigation
-        document.addEventListener('keydown', this.handleKeydown);
+        document.addEventListener('keydown', this.handleKeydown, sig);
     }
-    open() {
+    open = () => {
         this.flyoutMenu?.classList.add('is-open');
         this.flyoutOverlay?.classList.add('is-visible');
         document.body.style.overflow = 'hidden';
         this.menuTrigger?.setAttribute('aria-expanded', 'true');
-    }
-    close() {
+    };
+    close = () => {
         this.flyoutMenu?.classList.remove('is-open');
         this.flyoutOverlay?.classList.remove('is-visible');
         document.body.style.overflow = '';
         this.menuTrigger?.setAttribute('aria-expanded', 'false');
-    }
+    };
     handleSubmenu(e, toggle) {
         e.preventDefault();
         e.stopPropagation();
@@ -151,7 +141,6 @@ class FlyoutMenu {
         const parentUl = parentLi?.parentElement;
         if (!parentUl || !parentLi)
             return;
-        // Close other submenus at the same level
         const siblings = Array.from(parentUl.children);
         siblings.forEach(sibling => {
             if (sibling !== parentLi) {
@@ -166,11 +155,11 @@ class FlyoutMenu {
         toggle.classList.toggle('active');
         submenu?.classList.toggle('is-open');
     }
-    handleKeydown(e) {
+    handleKeydown = (e) => {
         if (e.key === 'Escape' && this.flyoutMenu?.classList.contains('is-open')) {
             this.close();
         }
-    }
+    };
     setDirection(direction) {
         if (!this.flyoutMenu)
             return;
@@ -182,19 +171,7 @@ class FlyoutMenu {
         this.options.direction = direction;
     }
     destroy() {
-        this.menuTrigger?.removeEventListener('click', this.open);
-        this.closeBtn?.removeEventListener('click', this.close);
-        this.flyoutOverlay?.removeEventListener('click', this.close);
-        this.submenuToggles?.forEach(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);
-        });
-        document.removeEventListener('keydown', this.handleKeydown);
+        this.abortController.abort();
         document.body.style.overflow = '';
     }
 }

package/js/gallery.d.ts

@@ -1,20 +1,25 @@
+/** A single image record for MasonryGallery. */
 interface ImageData {
     src: string;
     title: string;
     desc: string;
 }
+/** Configuration options for MasonryGallery. */
 interface MasonryGalleryOptions {
     fetchFunction: () => Promise<ImageData[]>;
     minColumnWidth?: number;
     scrollThreshold?: number;
     loaderSelector?: string;
     reload?: number;
+    enableLightbox?: boolean;
 }
+/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 declare class MasonryGallery {
     private container;
     private readonly loader;
     private options;
     private columns;
+    private allImages;
     private isFetching;
     private resizeObserver;
     private abortController;

package/js/gallery.js

@@ -1,19 +1,17 @@
 import { escapeHtml } from './utils.js';
+import { Lightbox } from './lightbox.js';
+/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 class MasonryGallery {
+    container;
+    loader;
+    options;
+    columns = [];
+    allImages = [];
+    isFetching = false;
+    resizeObserver = null;
+    abortController = null;
+    reloaded = 0;
     constructor(containerId, options) {
-        this.columns = [];
-        this.isFetching = false;
-        this.resizeObserver = null;
-        this.abortController = null;
-        this.reloaded = 0;
-        this.handleScroll = () => {
-            if (this.isFetching)
-                return;
-            const rect = this.container.getBoundingClientRect();
-            if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
-                this.loadMoreImages();
-            }
-        };
         const container = document.getElementById(containerId);
         if (!container) {
             throw new Error(`Container with id "${containerId}" not found`);
@@ -25,6 +23,7 @@ class MasonryGallery {
             scrollThreshold: options.scrollThreshold ?? 100,
             reload: 2,
             fetchFunction: options.fetchFunction,
+            enableLightbox: options.enableLightbox ?? true,
         };
         this.init();
     }
@@ -42,6 +41,7 @@ class MasonryGallery {
     }
     buildColumns(count) {
         this.container.innerHTML = '';
+        this.container.classList.add('masonry-container');
         this.columns = [];
         for (let i = 0; i < count; i++) {
             const col = document.createElement('div');
@@ -51,18 +51,14 @@ class MasonryGallery {
         }
     }
     addEventListeners() {
+        this.abortController = new AbortController();
+        const sig = this.abortController.signal;
         let resizeTimeout;
         window.addEventListener("resize", () => {
             clearTimeout(resizeTimeout);
-            resizeTimeout = setTimeout(() => {
-                this.reLayout();
-            }, 200);
-        });
-        this.abortController = new AbortController();
-        window.addEventListener("scroll", this.handleScroll, {
-            passive: true,
-            signal: this.abortController.signal,
-        });
+            resizeTimeout = setTimeout(() => this.reLayout(), 200);
+        }, { signal: sig });
+        window.addEventListener("scroll", this.handleScroll, { passive: true, signal: sig });
     }
     reLayout() {
         const items = this.columns.flatMap(col => Array.from(col.children));
@@ -76,6 +72,14 @@ class MasonryGallery {
         }
         items.forEach(item => this.addToShortestColumn(item));
     }
+    handleScroll = () => {
+        if (this.isFetching)
+            return;
+        const rect = this.container.getBoundingClientRect();
+        if (rect.bottom > 0 && rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
+            this.loadMoreImages();
+        }
+    };
     async loadMoreImages(isAutoFill = false) {
         if (!isAutoFill)
             this.reloaded++;
@@ -97,8 +101,6 @@ class MasonryGallery {
         finally {
             this.isFetching = false;
             this.toggleLoader(false);
-            // If the rendered content doesn't fill the viewport, auto-load the next
-            // batch without waiting for a scroll event (multi-column layout is shorter)
             requestAnimationFrame(() => {
                 const rect = this.container.getBoundingClientRect();
                 if (rect.bottom <= window.innerHeight + this.options.scrollThreshold) {
@@ -113,14 +115,29 @@ class MasonryGallery {
         }
     }
     renderImages(imageDataList) {
+        const startIndex = this.allImages.length;
+        this.allImages.push(...imageDataList);
         // Sort columns by current height so we start filling from the shortest.
         // Then round-robin across them — this avoids the problem where unloaded
         // images (0 height) cause offsetHeight-based distribution to pile all
         // new items into a single column.
         const sorted = [...this.columns].sort((a, b) => a.offsetHeight - b.offsetHeight);
-        imageDataList.forEach((data, index) => {
+        imageDataList.forEach((data, i) => {
             const item = this.createCard(data);
-            const col = sorted[index % sorted.length];
+            if (this.options.enableLightbox) {
+                const index = startIndex + i;
+                item.addEventListener('click', () => {
+                    new Lightbox({
+                        images: this.allImages.map(img => ({
+                            src: img.src,
+                            alt: img.title,
+                            caption: img.desc,
+                        })),
+                        startIndex: index,
+                    }).show();
+                });
+            }
+            const col = sorted[i % sorted.length];
             col.appendChild(item);
             requestAnimationFrame(() => {
                 const img = item.querySelector("img");
@@ -170,6 +187,7 @@ class MasonryGallery {
             this.abortController.abort();
             this.abortController = null;
         }
+        this.allImages = [];
     }
 }
 export { MasonryGallery };

package/js/group-picker.d.ts

@@ -1,12 +1,15 @@
+/** A single subgroup item within a GroupPicker group. */
 interface SubgroupData {
     id: string;
     label: string;
 }
+/** A group with an optional list of subgroups for GroupPicker. */
 interface GroupData {
     id: string;
     label: string;
     subgroups?: SubgroupData[];
 }
+/** The current selection state returned by GroupPicker. */
 interface GroupPickerSelection {
     parentGroups: string[];
     subgroups: {
@@ -14,6 +17,7 @@ interface GroupPickerSelection {
         subgroupId: string;
     }[];
 }
+/** Configuration options for the GroupPicker component. */
 interface GroupPickerOptions {
     onSelectionChange?: (selection: GroupPickerSelection) => void;
     searchPlaceholder?: string;
@@ -22,6 +26,7 @@ interface GroupPickerOptions {
     emptyLabel?: string;
     selectionPlaceholder?: string;
 }
+/** Searchable picker for selecting groups and their subgroups. */
 declare class GroupPicker {
     private container;
     private data;

package/js/group-picker.js

@@ -1,11 +1,18 @@
 import { escapeHtml } from './utils.js';
+/** Searchable picker for selecting groups and their subgroups. */
 class GroupPicker {
+    container;
+    data;
+    options;
+    abortController;
+    selectedParents = new Set();
+    selectedSubs = new Map();
+    expandedGroups = new Set();
+    searchQuery = '';
+    searchInput;
+    listEl;
+    selectionEl;
     constructor(selector, data, options = {}) {
-        // State
-        this.selectedParents = new Set();
-        this.selectedSubs = new Map();
-        this.expandedGroups = new Set();
-        this.searchQuery = '';
         const el = typeof selector === 'string'
             ? document.querySelector(selector)
             : selector;
@@ -31,11 +38,9 @@ class GroupPicker {
     }
     render() {
         this.container.innerHTML = '';
-        // Selection summary — Basix .chips container
         this.selectionEl = document.createElement('div');
         this.selectionEl.className = 'chips group-picker__selection';
         this.selectionEl.dataset.placeholder = this.options.selectionPlaceholder;
-        // Search — Basix form input with font icon overlay
         const searchWrap = document.createElement('div');
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
@@ -44,7 +49,6 @@ class GroupPicker {
     `;
         this.searchInput = searchWrap.querySelector('input');
         this.searchInput.placeholder = this.options.searchPlaceholder;
-        // List
         this.listEl = document.createElement('div');
         this.listEl.className = 'group-picker__list';
         this.container.append(this.selectionEl, searchWrap, this.listEl);
@@ -99,15 +103,12 @@ class GroupPicker {
             ? this.highlightText(group.label, query)
             : escapeHtml(group.label);
         if (hasChildren) {
-            // Chevron — Basix font icon
             const chevron = document.createElement('span');
             chevron.className = 'icon icon-navigate_next group-picker__chevron';
             chevron.setAttribute('aria-hidden', 'true');
-            // Count — Basix badge
             const count = document.createElement('span');
             count.className = 'badge badge-sm';
             count.textContent = `${subs.length}`;
-            // Action button — Basix button, button-primary when selected
             const actionBtn = document.createElement('button');
             actionBtn.className = 'group-picker__group-action';
             if (isParentSelected) {
@@ -125,14 +126,12 @@ class GroupPicker {
             header.addEventListener('click', () => {
                 this.toggleExpand(group.id);
             }, { signal: this.abortController.signal });
-            // Subgroups — Basix .chips container
             const subsContainer = document.createElement('div');
             subsContainer.className = 'group-picker__subgroups';
             const subsList = document.createElement('div');
             subsList.className = 'chips group-picker__subgroup-list';
             const displaySubs = query && !groupMatches ? matchingSubs : subs;
             for (const sub of displaySubs) {
-                // Subgroup chip — Basix .chip.clickable
                 const subEl = document.createElement('span');
                 subEl.className = 'chip clickable group-picker__subgroup';
                 subEl.dataset.subId = sub.id;
@@ -162,7 +161,6 @@ class GroupPicker {
             }
         }
         else {
-            // Leaf group — Basix font icon check mark
             const checkEl = document.createElement('span');
             checkEl.className = 'icon icon-check group-picker__leaf-check';
             checkEl.setAttribute('aria-hidden', 'true');
@@ -194,7 +192,6 @@ class GroupPicker {
             }
         }
     }
-    // Basix .chip.closeable structure
     createChip(label, isParent, onRemove) {
         const chip = document.createElement('span');
         chip.className = isParent
@@ -210,7 +207,6 @@ class GroupPicker {
         chip.append(document.createTextNode(label), btn);
         return chip;
     }
-    // State management
     toggleParentGroup(groupId) {
         if (this.selectedParents.has(groupId)) {
             this.selectedParents.delete(groupId);
@@ -299,7 +295,6 @@ class GroupPicker {
         const regex = new RegExp(`(${escapedQuery})`, 'gi');
         return safeText.replace(regex, '<mark>$1</mark>');
     }
-    // Public API
     getSelection() {
         const parentGroups = [...this.selectedParents];
         const subgroups = [];

package/js/lightbox.d.ts

@@ -1,8 +1,10 @@
+/** A single image entry for the Lightbox gallery. */
 interface LightboxImage {
     src: string;
     alt?: string;
     caption?: string;
 }
+/** Configuration options for a Lightbox instance. */
 interface LightboxOptions {
     src?: string;
     alt?: string;
@@ -13,6 +15,7 @@ interface LightboxOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
+/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 declare class Lightbox {
     private images;
     private currentIndex;

package/js/lightbox.js

@@ -1,11 +1,17 @@
+/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 class Lightbox {
+    images;
+    currentIndex;
+    closeable;
+    onOpen;
+    onClose;
+    wrapper = null;
+    imgEl = null;
+    captionEl = null;
+    counterEl = null;
+    isZoomed = false;
+    abortController = new AbortController();
     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;
         }

package/js/modal.d.ts

@@ -1,4 +1,5 @@
 type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
+/** Configuration options for a Modal dialog. */
 interface ModalOptions {
     content: string;
     header?: string;
@@ -6,6 +7,7 @@ interface ModalOptions {
     closeable?: boolean;
     type?: ModalType;
 }
+/** Overlay dialog with optional header, footer, close button, and type variants. */
 declare class Modal {
     private content;
     private readonly header?;
@@ -17,7 +19,7 @@ declare class Modal {
     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;