@dodlhuat/basix 1.3.4 → 1.4.0

package/js/gallery.d.ts

@@ -1,10 +1,8 @@
-/** 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;
@@ -13,7 +11,6 @@ interface MasonryGalleryOptions {
     reload?: number;
     enableLightbox?: boolean;
 }
-/** Infinite-scroll masonry gallery that distributes images across dynamically sized columns. */
 declare class MasonryGallery {
     private container;
     private readonly loader;
@@ -38,4 +35,4 @@ declare class MasonryGallery {
     private addToShortestColumn;
     destroy(): void;
 }
-export { MasonryGallery, ImageData };
+export { MasonryGallery, type ImageData };

package/js/gallery.js

@@ -1,6 +1,5 @@
 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;
@@ -17,11 +16,11 @@ class MasonryGallery {
             throw new Error(`Container with id "${containerId}" not found`);
         }
         this.container = container;
-        this.loader = document.querySelector(options.loaderSelector || ".loader");
+        this.loader = document.querySelector(options.loaderSelector ?? '.loader');
         this.options = {
             minColumnWidth: options.minColumnWidth ?? 250,
             scrollThreshold: options.scrollThreshold ?? 100,
-            reload: 2,
+            reload: options.reload ?? 2,
             fetchFunction: options.fetchFunction,
             enableLightbox: options.enableLightbox ?? true,
         };
@@ -54,11 +53,11 @@ class MasonryGallery {
         this.abortController = new AbortController();
         const sig = this.abortController.signal;
         let resizeTimeout;
-        window.addEventListener("resize", () => {
+        window.addEventListener('resize', () => {
             clearTimeout(resizeTimeout);
             resizeTimeout = setTimeout(() => this.reLayout(), 200);
         }, { signal: sig });
-        window.addEventListener("scroll", this.handleScroll, { passive: true, signal: sig });
+        window.addEventListener('scroll', this.handleScroll, { passive: true, signal: sig });
     }
     reLayout() {
         const items = this.columns.flatMap(col => Array.from(col.children));
@@ -84,7 +83,7 @@ class MasonryGallery {
         if (!isAutoFill)
             this.reloaded++;
         if (this.options.reload > 0 && this.reloaded > this.options.reload) {
-            console.warn("Maximum reload limit reached.");
+            console.warn('Maximum reload limit reached.');
             return;
         }
         if (this.isFetching)
@@ -96,7 +95,7 @@ class MasonryGallery {
             this.renderImages(newImages);
         }
         catch (error) {
-            throw new Error("Error loading images: " + error);
+            console.error('MasonryGallery: error loading images', error);
         }
         finally {
             this.isFetching = false;
@@ -111,16 +110,12 @@ class MasonryGallery {
     }
     toggleLoader(show) {
         if (this.loader) {
-            this.loader.classList.toggle("hidden", !show);
+            this.loader.classList.toggle('hidden', !show);
         }
     }
     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, i) => {
             const item = this.createCard(data);
@@ -140,28 +135,28 @@ class MasonryGallery {
             const col = sorted[i % sorted.length];
             col.appendChild(item);
             requestAnimationFrame(() => {
-                const img = item.querySelector("img");
+                const img = item.querySelector('img');
                 if (img) {
-                    img.addEventListener("load", () => img.classList.add("loaded"), {
+                    img.addEventListener('load', () => img.classList.add('loaded'), {
                         once: true,
                     });
                     if (img.complete) {
-                        img.classList.add("loaded");
+                        img.classList.add('loaded');
                     }
                 }
             });
         });
     }
     createCard(data) {
-        const div = document.createElement("div");
-        div.className = "masonry-item";
+        const div = document.createElement('div');
+        div.className = 'masonry-item';
         div.innerHTML = `
-      <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
-      <div class="masonry-item-info">
-        <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
-        <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
-      </div>
-    `;
+            <img src="${escapeHtml(data.src)}" alt="${escapeHtml(data.title)}" loading="lazy">
+            <div class="masonry-item-info">
+                <h3 class="masonry-item-title">${escapeHtml(data.title)}</h3>
+                <p class="masonry-item-desc">${escapeHtml(data.desc)}</p>
+            </div>
+        `;
         return div;
     }
     addToShortestColumn(element) {

package/js/group-picker.d.ts

@@ -1,15 +1,12 @@
-/** 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: {
@@ -17,7 +14,6 @@ interface GroupPickerSelection {
         subgroupId: string;
     }[];
 }
-/** Configuration options for the GroupPicker component. */
 interface GroupPickerOptions {
     onSelectionChange?: (selection: GroupPickerSelection) => void;
     searchPlaceholder?: string;
@@ -26,7 +22,6 @@ 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,5 +1,4 @@
 import { escapeHtml } from './utils.js';
-/** Searchable picker for selecting groups and their subgroups. */
 class GroupPicker {
     container;
     data;
@@ -44,9 +43,9 @@ class GroupPicker {
         const searchWrap = document.createElement('div');
         searchWrap.className = 'group-picker__search';
         searchWrap.innerHTML = `
-      <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
-      <input type="text" />
-    `;
+            <span class="icon icon-search group-picker__search-icon" aria-hidden="true"></span>
+            <input type="text" />
+        `;
         this.searchInput = searchWrap.querySelector('input');
         this.searchInput.placeholder = this.options.searchPlaceholder;
         this.listEl = document.createElement('div');
@@ -73,9 +72,9 @@ class GroupPicker {
             const empty = document.createElement('div');
             empty.className = 'group-picker__empty';
             empty.innerHTML = `
-        <span class="icon icon-search" aria-hidden="true"></span>
-        <span>${this.options.emptyLabel}</span>
-      `;
+                <span class="icon icon-search" aria-hidden="true"></span>
+                <span>${this.options.emptyLabel}</span>
+            `;
             this.listEl.appendChild(empty);
         }
     }
@@ -94,7 +93,6 @@ class GroupPicker {
             el.classList.add('is-expanded');
         if (isParentSelected)
             el.classList.add('is-selected');
-        // Header row
         const header = document.createElement('div');
         header.className = 'group-picker__group-header';
         const label = document.createElement('span');

package/js/lightbox.d.ts

@@ -1,10 +1,8 @@
-/** 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;
@@ -15,7 +13,6 @@ interface LightboxOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
-/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 declare class Lightbox {
     private images;
     private currentIndex;
@@ -30,7 +27,7 @@ declare class Lightbox {
     private abortController;
     constructor(options: LightboxOptions);
     show(): void;
-    hide(): void;
+    hide: () => void;
     next(): void;
     prev(): void;
     isVisible(): boolean;

package/js/lightbox.js

@@ -1,4 +1,3 @@
-/** Full-screen image viewer with gallery navigation, zoom, and touch support. */
 class Lightbox {
     images;
     currentIndex;
@@ -22,9 +21,6 @@ class Lightbox {
         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();
@@ -61,7 +57,7 @@ class Lightbox {
         });
         this.onOpen?.();
     }
-    hide() {
+    hide = () => {
         const wrapper = this.wrapper;
         if (!wrapper)
             return;
@@ -80,7 +76,7 @@ class Lightbox {
             }
             this.onClose?.();
         }, 300);
-    }
+    };
     next() {
         if (this.images.length <= 1)
             return;
@@ -168,7 +164,7 @@ class Lightbox {
         this.imgEl.classList.toggle('is-zoomed', this.isZoomed);
         this.wrapper?.querySelector('.lightbox-img-wrap')?.classList.toggle('is-zoomed', this.isZoomed);
     }
-    handleKeydown(e) {
+    handleKeydown = (e) => {
         switch (e.key) {
             case 'Escape':
                 if (this.closeable)
@@ -184,7 +180,7 @@ class Lightbox {
                 this.trapFocus(e);
                 break;
         }
-    }
+    };
     trapFocus(e) {
         if (!this.wrapper)
             return;
@@ -206,11 +202,11 @@ class Lightbox {
             }
         }
     }
-    handleBackgroundClick(e) {
+    handleBackgroundClick = (e) => {
         if (e.target?.classList.contains('lightbox-background')) {
             this.hide();
         }
-    }
+    };
     addTouchSupport() {
         const wrap = this.wrapper?.querySelector('.lightbox-img-wrap');
         if (!wrap)

package/js/modal.d.ts

@@ -1,5 +1,4 @@
 type ModalType = 'default' | 'success' | 'error' | 'warning' | 'info';
-/** Configuration options for a Modal dialog. */
 interface ModalOptions {
     content: string;
     header?: string;
@@ -7,7 +6,6 @@ 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?;

package/js/modal.js

@@ -1,6 +1,5 @@
 import { sanitizeHtml } from './utils.js';
 const CLOSE_ICON = '<div class="icon icon-close close"></div>';
-/** Overlay dialog with optional header, footer, close button, and type variants. */
 class Modal {
     content;
     header;

package/js/popover.d.ts

@@ -2,7 +2,6 @@ import type { Placement } from './position.js';
 type PopoverPlacement = Placement | 'auto';
 type PopoverAlign = 'start' | 'center' | 'end';
 type PopoverTrigger = 'click' | 'hover';
-/** Configuration options for a Popover instance. */
 interface PopoverOptions {
     content: string;
     placement?: PopoverPlacement;
@@ -16,7 +15,6 @@ interface PopoverOptions {
     onOpen?: () => void;
     onClose?: () => void;
 }
-/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 declare class Popover {
     private static openPopovers;
     private static idCounter;
@@ -32,7 +30,6 @@ declare class Popover {
     toggle(): void;
     destroy(): void;
     static closeAll(): void;
-    /** Declarative init — reads [data-popover="#selector"] attributes */
     static initAll(): void;
     private buildEl;
     private reposition;

package/js/popover.js

@@ -1,7 +1,6 @@
 import { computePosition } from './position.js';
 import { sanitizeHtml } from './utils.js';
 const ARROW_SIZE = 6;
-/** Anchored popover triggered by click or hover, with auto-placement and optional arrow. */
 class Popover {
     static openPopovers = new Set();
     static idCounter = 0;
@@ -75,7 +74,6 @@ class Popover {
     static closeAll() {
         Popover.openPopovers.forEach(p => p.close());
     }
-    /** Declarative init — reads [data-popover="#selector"] attributes */
     static initAll() {
         document.querySelectorAll('[data-popover]').forEach(trigger => {
             const sel = trigger.getAttribute('data-popover');

package/js/position.d.ts

@@ -1,10 +1,5 @@
-/**
- * Shared floating-element positioning utility.
- * Used by Tooltip and Popover.
- */
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 type Align = 'start' | 'center' | 'end';
-/** Options accepted by `computePosition`. */
 interface PositionOptions {
     placement: Placement | 'auto';
     align?: Align;
@@ -12,22 +7,14 @@ interface PositionOptions {
     margin?: number;
     arrowSize?: number;
 }
-/** Result returned by `computePosition`. */
 interface PositionResult {
     left: number;
     top: number;
     placement: Placement;
     arrowOffset?: number;
 }
-/** Pick the placement with the most available space, preferring bottom > top > right > left. */
 declare function bestPlacement(trigger: DOMRect, floating: DOMRect, offset: number): Placement;
-/** Flip to opposite side if preferred placement doesn't fit. */
 declare function maybeFlip(placement: Placement, trigger: DOMRect, floating: DOMRect, offset: number): Placement;
-/**
- * Compute `left` / `top` for a `position: fixed` floating element anchored to a trigger.
- * Handles placement resolution (auto + flip), cross-axis alignment, viewport clamping,
- * and optional arrow offset calculation.
- */
 declare function computePosition(trigger: DOMRect, floating: DOMRect, opts: PositionOptions): PositionResult;
 export { computePosition, bestPlacement, maybeFlip };
 export type { Placement, Align, PositionOptions, PositionResult };

package/js/position.js

@@ -1,8 +1,3 @@
-/**
- * Shared floating-element positioning utility.
- * Used by Tooltip and Popover.
- */
-/** Pick the placement with the most available space, preferring bottom > top > right > left. */
 function bestPlacement(trigger, floating, offset) {
     const space = {
         bottom: window.innerHeight - trigger.bottom - offset,
@@ -18,10 +13,8 @@ function bestPlacement(trigger, floating, offset) {
         return 'right';
     if (space.left >= floating.width)
         return 'left';
-    // Fallback: largest available side
     return (Object.entries(space).sort((a, b) => b[1] - a[1])[0][0]);
 }
-/** Flip to opposite side if preferred placement doesn't fit. */
 function maybeFlip(placement, trigger, floating, offset) {
     const fits = {
         top: trigger.top - offset >= floating.height,
@@ -32,11 +25,6 @@ function maybeFlip(placement, trigger, floating, offset) {
     const opp = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
     return (!fits[placement] && fits[opp[placement]]) ? opp[placement] : placement;
 }
-/**
- * Compute `left` / `top` for a `position: fixed` floating element anchored to a trigger.
- * Handles placement resolution (auto + flip), cross-axis alignment, viewport clamping,
- * and optional arrow offset calculation.
- */
 function computePosition(trigger, floating, opts) {
     const offset = opts.offset ?? 8;
     const margin = opts.margin ?? 8;

package/js/push-menu.d.ts

@@ -1,4 +1,3 @@
-/** DOM element references managed by the PushMenu static class. */
 interface PushMenuElements {
     navigation: HTMLElement | null;
     content: HTMLElement | null;
@@ -7,12 +6,10 @@ interface PushMenuElements {
     controlIcon: HTMLElement | null;
     backdrop: HTMLElement | null;
 }
-/** Static class that manages a push-style side navigation panel. */
 declare class PushMenu {
     private static elements;
     private static initialized;
     private static panelStack;
-    private static boundHandleNavigationChange;
     static init(): void;
     private static buildPanels;
     private static extractSubPanels;

package/js/push-menu.js

@@ -1,4 +1,3 @@
-/** Static class that manages a push-style side navigation panel. */
 class PushMenu {
     static elements = {
         navigation: null,
@@ -10,7 +9,6 @@ class PushMenu {
     };
     static initialized = false;
     static panelStack = [];
-    static boundHandleNavigationChange;
     static init() {
         if (this.initialized) {
             console.warn('PushMenu: Already initialized');
@@ -21,8 +19,7 @@ class PushMenu {
             throw new Error('PushMenu: Required elements not found (.navigation, .push-content)');
         }
         this.buildPanels();
-        this.boundHandleNavigationChange = this.handleNavigationChange.bind(this);
-        this.elements.navigation.addEventListener('change', this.boundHandleNavigationChange);
+        this.elements.navigation.addEventListener('change', this.handleNavigationChange);
         this.elements.backdrop?.addEventListener('click', this.handleBackdropClick);
         this.initialized = true;
     }
@@ -120,7 +117,7 @@ class PushMenu {
             }
         }, 300);
     }
-    static handleNavigationChange() {
+    static handleNavigationChange = () => {
         const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
         if (!isPushed) {
             this.elements.content?.addEventListener('click', this.clickNav);
@@ -130,7 +127,7 @@ class PushMenu {
             this.resetPanels();
         }
         this.pushToggle();
-    }
+    };
     static pushToggle() {
         if (!this.elements.content || !this.elements.menu) {
             throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
@@ -152,13 +149,11 @@ class PushMenu {
         }
     }
     static clickNav = () => {
-        const navigation = PushMenu.elements.navigation;
-        navigation?.click();
+        PushMenu.elements.navigation.click();
     };
     static handleBackdropClick = () => {
         if (PushMenu.isOpen()) {
-            const navigation = PushMenu.elements.navigation;
-            navigation?.click();
+            PushMenu.elements.navigation.click();
         }
     };
     static open() {
@@ -177,7 +172,7 @@ class PushMenu {
     static destroy() {
         if (!this.initialized)
             return;
-        this.elements.navigation?.removeEventListener('change', this.boundHandleNavigationChange);
+        this.elements.navigation?.removeEventListener('change', this.handleNavigationChange);
         this.elements.content?.removeEventListener('click', this.clickNav);
         this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
         this.close();

package/js/range-slider.d.ts

@@ -1,4 +1,3 @@
-/** Enhances a native range input with a CSS fill-percentage custom property. */
 declare class RangeSlider {
     private readonly input;
     constructor(input: HTMLInputElement);

package/js/range-slider.js

@@ -1,4 +1,3 @@
-/** Enhances a native range input with a CSS fill-percentage custom property. */
 class RangeSlider {
     input;
     constructor(input) {
@@ -12,8 +11,8 @@ class RangeSlider {
         });
     }
     update() {
-        const min = +this.input.min || 0;
-        const max = +this.input.max || 100;
+        const min = this.input.min !== '' ? +this.input.min : 0;
+        const max = this.input.max !== '' ? +this.input.max : 100;
         const pct = ((+this.input.value - min) / (max - min)) * 100;
         this.input.style.setProperty('--range-fill', `${pct}%`);
     }

package/js/scroll.d.ts

@@ -1,10 +1,8 @@
-/** Options for the Scroll.to() utility. */
 interface ScrollOptions {
     behavior?: ScrollBehavior;
     offset?: number;
     block?: ScrollLogicalPosition;
 }
-/** Static utility for smooth-scrolling to a target element with header offset support. */
 declare class Scroll {
     static to(target: string | Element, options?: ScrollOptions): void;
 }

package/js/scroll.js

@@ -1,16 +1,15 @@
-/** Static utility for smooth-scrolling to a target element with header offset support. */
 class Scroll {
     static to(target, options = {}) {
-        const fixed_header = document.querySelector('.main-header');
-        const offset = fixed_header ? fixed_header.offsetHeight : 0;
+        const fixedHeader = document.querySelector('.main-header');
+        const offset = fixedHeader ? fixedHeader.offsetHeight : 0;
         const settings = {
-            behavior: "smooth",
+            behavior: 'smooth',
             offset: offset,
-            block: "start",
+            block: 'start',
             ...options
         };
         let el = target instanceof Element ? target : null;
-        if (typeof target === "string") {
+        if (typeof target === 'string') {
             el = document.querySelector(target);
         }
         if (!el)

package/js/scrollbar.d.ts

@@ -1,11 +1,9 @@
-/** DOM element references for a Scrollbar instance. */
 interface ScrollbarElements {
     viewport: HTMLElement;
     content: HTMLElement;
     track: HTMLElement;
     thumb: HTMLElement;
 }
-/** Custom scrollbar overlay that replaces the native scrollbar with a draggable thumb. */
 declare class Scrollbar {
     private static readonly instances;
     private static activeInstance;
@@ -23,13 +21,7 @@ declare class Scrollbar {
     private activePointerId;
     private startPointerY;
     private startThumbTop;
-    private readonly boundPointerMove;
-    private readonly boundPointerUp;
-    private readonly boundThumbPointerDown;
-    private readonly boundTrackClick;
-    private readonly boundViewportScroll;
-    private readonly boundUpdateThumb;
-    private readonly boundContainerWheel;
+    private abortController;
     private constructor();
     private getRequiredElements;
     private getMinThumbHeight;
@@ -47,4 +39,4 @@ declare class Scrollbar {
     static initOne(elementOrSelector: string | HTMLElement): Scrollbar;
     static getInstance(container: HTMLElement): Scrollbar | undefined;
 }
-export { Scrollbar, ScrollbarElements };
+export { Scrollbar, type ScrollbarElements };