@dodlhuat/basix 1.4.2 → 1.5.0

package/js/file-uploader.js

@@ -1,4 +1,5 @@
 import { escapeHtml } from './utils.js';
+import { ListenerGroup } from './listeners.js';
 class FileUploader {
     container;
     dropZone;
@@ -9,11 +10,10 @@ class FileUploader {
     uploadUrl;
     maxFileSize;
     allowedTypes;
-    abortControllers = new Map();
+    xhrAborts = new Map();
+    listeners = new ListenerGroup();
     constructor(elementOrSelector, config = {}) {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector(elementOrSelector)
-            : elementOrSelector;
+        const container = typeof elementOrSelector === 'string' ? document.querySelector(elementOrSelector) : elementOrSelector;
         if (!container) {
             throw new Error(`FileUploader: Element not found for selector "${elementOrSelector}"`);
         }
@@ -33,72 +33,57 @@ class FileUploader {
         this.uploadUrl = config.uploadUrl ?? 'https://httpbin.org/post';
         this.maxFileSize = config.maxFileSize;
         this.allowedTypes = config.allowedTypes;
-        this.init();
-    }
-    init() {
         this.setupEventListeners();
     }
     fileKey(file) {
         return `${file.name}-${file.size}-${file.lastModified}`;
     }
     setupEventListeners() {
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
-            this.dropZone.addEventListener(event, this.preventDefaults);
-        });
-        ['dragenter', 'dragover'].forEach(event => {
-            this.dropZone.addEventListener(event, this.handleDragEnter);
-        });
-        ['dragleave', 'drop'].forEach(event => {
-            this.dropZone.addEventListener(event, this.handleDragLeave);
-        });
-        this.dropZone.addEventListener('drop', this.handleDrop);
-        this.dropZone.addEventListener('click', this.handleDropZoneClick);
-        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);
+        const sig = { signal: this.listeners.signal };
+        const prevent = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        for (const event of ['dragenter', 'dragover', 'dragleave', 'drop']) {
+            this.dropZone.addEventListener(event, prevent, sig);
         }
-    };
-    handleDropZoneClick = () => {
-        this.fileInput.click();
-    };
-    handleFileInputChange = (e) => {
-        const target = e.target;
-        if (target.files) {
-            this.handleFiles(target.files);
-            target.value = '';
+        for (const event of ['dragenter', 'dragover']) {
+            this.dropZone.addEventListener(event, () => this.dropZone.classList.add('drag-over'), sig);
         }
-    };
-    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);
-    };
+        for (const event of ['dragleave', 'drop']) {
+            this.dropZone.addEventListener(event, () => this.dropZone.classList.remove('drag-over'), sig);
+        }
+        this.dropZone.addEventListener('drop', (e) => {
+            const droppedFiles = e.dataTransfer?.files;
+            if (droppedFiles)
+                this.handleFiles(droppedFiles);
+        }, sig);
+        this.dropZone.addEventListener('click', () => this.fileInput.click(), sig);
+        this.fileInput.addEventListener('change', (e) => {
+            const target = e.target;
+            if (target.files) {
+                this.handleFiles(target.files);
+                target.value = '';
+            }
+        }, sig);
+        this.uploadBtn.addEventListener('click', 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);
+        }, sig);
+    }
     handleFiles(fileList) {
-        Array.from(fileList).forEach(file => {
+        Array.from(fileList).forEach((file) => {
             const key = this.fileKey(file);
             if (this.validateFile(file) && !this.files.has(key)) {
                 const element = this.addFileToUI(file);
@@ -181,16 +166,16 @@ class FileUploader {
             removeBtn.style.display = 'none';
             const xhr = new XMLHttpRequest();
             const key = this.fileKey(file);
-            this.abortControllers.set(key, () => xhr.abort());
+            this.xhrAborts.set(key, () => xhr.abort());
             xhr.upload.addEventListener('progress', (e) => {
                 if (e.lengthComputable) {
                     const pct = Math.round((e.loaded / e.total) * 100);
-                    progressBar.style.width = pct + '%';
-                    statusText.textContent = pct + '%';
+                    progressBar.style.width = `${pct}%`;
+                    statusText.textContent = `${pct}%`;
                 }
             });
             xhr.addEventListener('load', () => {
-                this.abortControllers.delete(key);
+                this.xhrAborts.delete(key);
                 if (xhr.status >= 200 && xhr.status < 300) {
                     progressBar.style.width = '100%';
                     progressBar.style.backgroundColor = 'var(--success)';
@@ -212,7 +197,7 @@ class FileUploader {
                 }
             });
             xhr.addEventListener('error', () => {
-                this.abortControllers.delete(key);
+                this.xhrAborts.delete(key);
                 progressBar.style.backgroundColor = 'var(--error)';
                 statusText.textContent = 'Network Error';
                 statusText.classList.add('error');
@@ -220,7 +205,7 @@ class FileUploader {
                 reject(new Error('Network error'));
             });
             xhr.addEventListener('abort', () => {
-                this.abortControllers.delete(key);
+                this.xhrAborts.delete(key);
                 statusText.textContent = 'Cancelled';
                 statusText.classList.add('error');
                 removeBtn.style.display = 'flex';
@@ -233,7 +218,7 @@ class FileUploader {
         });
     }
     removeFile(key) {
-        const abort = this.abortControllers.get(key);
+        const abort = this.xhrAborts.get(key);
         if (abort)
             abort();
         const fileData = this.files.get(key);
@@ -245,9 +230,7 @@ class FileUploader {
     }
     updateUploadButton() {
         this.uploadBtn.disabled = this.files.size === 0;
-        this.uploadBtn.textContent = this.files.size > 0
-            ? `Upload ${this.files.size} File${this.files.size === 1 ? '' : 's'}`
-            : 'Upload Files';
+        this.uploadBtn.textContent = this.files.size > 0 ? `Upload ${this.files.size} File${this.files.size === 1 ? '' : 's'}` : 'Upload Files';
     }
     dispatchUploadCompletedEvent(results) {
         const files = Array.from(this.files.values()).map(({ file }) => file);
@@ -265,21 +248,9 @@ class FileUploader {
         return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
     }
     destroy() {
-        this.abortControllers.forEach(abort => abort());
-        this.abortControllers.clear();
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
-            this.dropZone.removeEventListener(event, this.preventDefaults);
-        });
-        ['dragenter', 'dragover'].forEach(event => {
-            this.dropZone.removeEventListener(event, this.handleDragEnter);
-        });
-        ['dragleave', 'drop'].forEach(event => {
-            this.dropZone.removeEventListener(event, this.handleDragLeave);
-        });
-        this.dropZone.removeEventListener('drop', this.handleDrop);
-        this.dropZone.removeEventListener('click', this.handleDropZoneClick);
-        this.fileInput.removeEventListener('change', this.handleFileInputChange);
-        this.uploadBtn.removeEventListener('click', this.handleUploadClick);
+        this.xhrAborts.forEach((abort) => abort());
+        this.xhrAborts.clear();
+        this.listeners.destroy();
         this.files.clear();
         this.fileList.innerHTML = '';
     }

package/js/flyout-menu.d.ts

@@ -19,7 +19,7 @@ declare class FlyoutMenu {
     private closeBtn;
     private submenuToggles;
     private menuLinks;
-    private abortController;
+    private listeners;
     constructor(options?: FlyoutMenuOptions);
     private init;
     private hydrateMenu;
@@ -27,8 +27,8 @@ declare class FlyoutMenu {
     private renderHeader;
     private renderFooter;
     private bindEvents;
-    open: () => void;
-    close: () => void;
+    open(): void;
+    close(): void;
     private handleSubmenu;
     private handleKeydown;
     setDirection(direction: 'left' | 'right'): void;

package/js/flyout-menu.js

@@ -1,3 +1,4 @@
+import { ListenerGroup } from './listeners.js';
 class FlyoutMenu {
     options;
     menuTrigger;
@@ -6,7 +7,7 @@ class FlyoutMenu {
     closeBtn = null;
     submenuToggles = null;
     menuLinks = null;
-    abortController = new AbortController();
+    listeners = new ListenerGroup();
     constructor(options = {}) {
         this.options = {
             triggerSelector: '.menu-trigger',
@@ -20,7 +21,7 @@ class FlyoutMenu {
             footerText: '© 2025 Brand Inc.',
             enableHeader: true,
             enableFooter: true,
-            ...options
+            ...options,
         };
         this.menuTrigger = document.querySelector(this.options.triggerSelector);
         this.flyoutMenu = document.querySelector(this.options.menuSelector);
@@ -58,7 +59,7 @@ class FlyoutMenu {
             if (nestedUl) {
                 li.classList.add('has-submenu');
                 nestedUl.classList.add('submenu');
-                const textNode = Array.from(li.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '');
+                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();
                 const button = document.createElement('button');
@@ -108,30 +109,30 @@ class FlyoutMenu {
         this.flyoutMenu.append(footer);
     }
     bindEvents() {
-        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 sig = { signal: this.listeners.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) => {
             toggle.addEventListener('click', (e) => this.handleSubmenu(e, toggle), sig);
         });
-        this.menuLinks?.forEach(link => {
-            link.addEventListener('click', this.close, sig);
+        this.menuLinks?.forEach((link) => {
+            link.addEventListener('click', () => this.close(), sig);
         });
-        document.addEventListener('keydown', this.handleKeydown, sig);
+        document.addEventListener('keydown', (e) => this.handleKeydown(e), 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();
@@ -141,7 +142,7 @@ class FlyoutMenu {
         if (!parentUl || !parentLi)
             return;
         const siblings = Array.from(parentUl.children);
-        siblings.forEach(sibling => {
+        siblings.forEach((sibling) => {
             if (sibling !== parentLi) {
                 const siblingSubmenu = sibling.querySelector('.submenu');
                 const siblingToggle = sibling.querySelector('.submenu-toggle');
@@ -154,23 +155,20 @@ 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;
-        const validDirections = ['left', 'right'];
-        if (!validDirections.includes(direction))
-            return;
         this.flyoutMenu.classList.remove('flyout-from-right', 'flyout-from-left');
         this.flyoutMenu.classList.add(`flyout-from-${direction}`);
         this.options.direction = direction;
     }
     destroy() {
-        this.abortController.abort();
+        this.listeners.destroy();
         document.body.style.overflow = '';
     }
 }

package/js/gallery.d.ts

@@ -18,11 +18,14 @@ declare class MasonryGallery {
     private columns;
     private allImages;
     private isFetching;
-    private resizeObserver;
-    private abortController;
+    private listeners;
     private reloaded;
+    private showingSkeleton;
+    private static readonly SKELETON_HEIGHTS;
     constructor(containerId: string, options: MasonryGalleryOptions);
     private init;
+    private renderSkeleton;
+    private createSkeletonCard;
     private setupLayout;
     private buildColumns;
     private addEventListeners;
@@ -30,6 +33,7 @@ declare class MasonryGallery {
     private handleScroll;
     private loadMoreImages;
     private toggleLoader;
+    private clearSkeleton;
     private renderImages;
     private createCard;
     private addToShortestColumn;

package/js/gallery.js

@@ -1,5 +1,6 @@
 import { escapeHtml } from './utils.js';
 import { Lightbox } from './lightbox.js';
+import { ListenerGroup } from './listeners.js';
 class MasonryGallery {
     container;
     loader;
@@ -7,9 +8,10 @@ class MasonryGallery {
     columns = [];
     allImages = [];
     isFetching = false;
-    resizeObserver = null;
-    abortController = null;
+    listeners = new ListenerGroup();
     reloaded = 0;
+    showingSkeleton = false;
+    static SKELETON_HEIGHTS = [180, 260, 220, 300, 240, 190];
     constructor(containerId, options) {
         const container = document.getElementById(containerId);
         if (!container) {
@@ -28,9 +30,32 @@ class MasonryGallery {
     }
     init() {
         this.setupLayout();
+        this.renderSkeleton();
         this.loadMoreImages();
         this.addEventListeners();
     }
+    renderSkeleton() {
+        this.showingSkeleton = true;
+        this.columns.forEach((col, colIndex) => {
+            for (let i = 0; i < 2; i++) {
+                const height = MasonryGallery.SKELETON_HEIGHTS[(colIndex + i) % MasonryGallery.SKELETON_HEIGHTS.length];
+                col.appendChild(this.createSkeletonCard(height));
+            }
+        });
+    }
+    createSkeletonCard(height) {
+        const div = document.createElement('div');
+        div.className = 'masonry-item masonry-item--skeleton';
+        div.setAttribute('aria-hidden', 'true');
+        div.innerHTML = `
+            <div class="masonry-item-skeleton-img" style="height:${height}px"></div>
+            <div class="masonry-item-info">
+                <div class="placeholder w-8" style="display: block;"></div>
+                <div class="placeholder w-5" style="display: block; margin-top: 6px;"></div>
+            </div>
+        `;
+        return div;
+    }
     setupLayout() {
         const containerWidth = this.container.getBoundingClientRect().width;
         const numColumns = Math.max(1, Math.floor(containerWidth / this.options.minColumnWidth));
@@ -50,35 +75,36 @@ class MasonryGallery {
         }
     }
     addEventListeners() {
-        this.abortController = new AbortController();
-        const sig = this.abortController.signal;
+        const sig = { signal: this.listeners.signal };
         let resizeTimeout;
         window.addEventListener('resize', () => {
             clearTimeout(resizeTimeout);
             resizeTimeout = setTimeout(() => this.reLayout(), 200);
-        }, { signal: sig });
-        window.addEventListener('scroll', this.handleScroll, { passive: true, signal: sig });
+        }, sig);
+        window.addEventListener('scroll', () => this.handleScroll(), { ...sig, passive: true });
     }
     reLayout() {
-        const items = this.columns.flatMap(col => Array.from(col.children));
+        const items = this.columns.flatMap((col) => Array.from(col.children));
         const availableWidth = Math.min(1200, window.innerWidth - 40);
         const numColumns = Math.max(1, Math.floor(availableWidth / this.options.minColumnWidth));
         if (this.columns.length !== numColumns) {
             this.buildColumns(numColumns);
         }
         else {
-            this.columns.forEach(col => { col.innerHTML = ''; });
+            this.columns.forEach((col) => {
+                col.innerHTML = '';
+            });
         }
-        items.forEach(item => this.addToShortestColumn(item));
+        items.forEach((item) => this.addToShortestColumn(item));
     }
-    handleScroll = () => {
+    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++;
@@ -96,6 +122,7 @@ class MasonryGallery {
         }
         catch (error) {
             console.error('MasonryGallery: error loading images', error);
+            this.clearSkeleton();
         }
         finally {
             this.isFetching = false;
@@ -113,7 +140,16 @@ class MasonryGallery {
             this.loader.classList.toggle('hidden', !show);
         }
     }
+    clearSkeleton() {
+        if (!this.showingSkeleton)
+            return;
+        this.showingSkeleton = false;
+        this.columns.forEach((col) => {
+            col.innerHTML = '';
+        });
+    }
     renderImages(imageDataList) {
+        this.clearSkeleton();
         const startIndex = this.allImages.length;
         this.allImages.push(...imageDataList);
         const sorted = [...this.columns].sort((a, b) => a.offsetHeight - b.offsetHeight);
@@ -123,7 +159,7 @@ class MasonryGallery {
                 const index = startIndex + i;
                 item.addEventListener('click', () => {
                     new Lightbox({
-                        images: this.allImages.map(img => ({
+                        images: this.allImages.map((img) => ({
                             src: img.src,
                             alt: img.title,
                             caption: img.desc,
@@ -174,14 +210,7 @@ class MasonryGallery {
         shortestCol.appendChild(element);
     }
     destroy() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        if (this.abortController) {
-            this.abortController.abort();
-            this.abortController = null;
-        }
+        this.listeners.destroy();
         this.allImages = [];
     }
 }

package/js/group-picker.d.ts

@@ -21,12 +21,13 @@ interface GroupPickerOptions {
     deselectLabel?: string;
     emptyLabel?: string;
     selectionPlaceholder?: string;
+    iconBasePath?: string;
 }
 declare class GroupPicker {
     private container;
     private data;
     private options;
-    private abortController;
+    private listeners;
     private selectedParents;
     private selectedSubs;
     private expandedGroups;