@dodlhuat/basix 1.2.7 → 1.2.9

package/js/popover.ts

@@ -1,221 +0,0 @@
-import { computePosition } from './position.js';
-import type { Placement } from './position.js';
-import { sanitizeHtml } from './utils.js';
-
-type PopoverPlacement = Placement | 'auto';
-type PopoverAlign     = 'start' | 'center' | 'end';
-type PopoverTrigger   = 'click' | 'hover';
-
-interface PopoverOptions {
-    content:              string;
-    placement?:           PopoverPlacement;
-    align?:               PopoverAlign;
-    offset?:              number;
-    arrow?:               boolean;
-    triggerMode?:         PopoverTrigger;
-    closeOnOutsideClick?: boolean;
-    closeOnEscape?:       boolean;
-    className?:           string;
-    onOpen?:              () => void;
-    onClose?:             () => void;
-}
-
-// Must match $arrow in popover.scss
-const ARROW_SIZE = 6;
-
-class Popover {
-    private static openPopovers: Set<Popover> = new Set();
-    private static idCounter = 0;
-
-    private readonly trigger: HTMLElement;
-    private readonly opts: Required<PopoverOptions>;
-    private popoverEl: HTMLElement | null = null;
-    private _isOpen = false;
-    private hoverTimer: number | null = null;
-
-    constructor(triggerEl: HTMLElement | string, options: PopoverOptions) {
-        const el = typeof triggerEl === 'string'
-            ? document.querySelector<HTMLElement>(triggerEl)
-            : triggerEl;
-        if (!el) throw new Error('Popover: trigger element not found');
-
-        this.trigger = el;
-        this.opts = {
-            content:              options.content,
-            placement:            options.placement            ?? 'bottom',
-            align:                options.align                ?? 'center',
-            offset:               options.offset               ?? 8,
-            arrow:                options.arrow                ?? true,
-            triggerMode:          options.triggerMode          ?? 'click',
-            closeOnOutsideClick:  options.closeOnOutsideClick  ?? true,
-            closeOnEscape:        options.closeOnEscape        ?? true,
-            className:            options.className            ?? '',
-            onOpen:               options.onOpen               ?? (() => {}),
-            onClose:              options.onClose              ?? (() => {}),
-        };
-
-        this.attachTrigger();
-    }
-
-    // ── Public API ─────────────────────────────────────────────────────────────
-
-    get isOpen(): boolean { return this._isOpen; }
-
-    open(): void {
-        if (this._isOpen) return;
-        if (this.opts.triggerMode === 'click') Popover.closeAll();
-
-        this.popoverEl = this.buildEl();
-        document.body.appendChild(this.popoverEl);
-        this.reposition();
-
-        requestAnimationFrame(() => {
-            this.popoverEl?.classList.add('is-open');
-            this._isOpen = true;
-            Popover.openPopovers.add(this);
-            this.opts.onOpen();
-
-            if (this.opts.closeOnOutsideClick)
-                document.addEventListener('pointerdown', this.onOutsideClick, { capture: true });
-            if (this.opts.closeOnEscape)
-                document.addEventListener('keydown', this.onEscape);
-        });
-    }
-
-    close(): void {
-        if (!this._isOpen || !this.popoverEl) return;
-
-        this.popoverEl.classList.remove('is-open');
-        this._isOpen = false;
-        Popover.openPopovers.delete(this);
-        this.opts.onClose();
-
-        document.removeEventListener('pointerdown', this.onOutsideClick, { capture: true });
-        document.removeEventListener('keydown', this.onEscape);
-
-        this.trigger.removeAttribute('aria-expanded');
-        this.trigger.removeAttribute('aria-controls');
-
-        const el = this.popoverEl;
-        setTimeout(() => el.remove(), 200);
-        this.popoverEl = null;
-    }
-
-    toggle(): void { this._isOpen ? this.close() : this.open(); }
-
-    destroy(): void {
-        this.close();
-        this.detachTrigger();
-    }
-
-    static closeAll(): void {
-        Popover.openPopovers.forEach(p => p.close());
-    }
-
-    /** Declarative init — reads [data-popover="#selector"] attributes */
-    static initAll(): void {
-        document.querySelectorAll<HTMLElement>('[data-popover]').forEach(trigger => {
-            const sel = trigger.getAttribute('data-popover');
-            if (!sel) return;
-            const contentEl = document.querySelector(sel);
-            if (!contentEl) return;
-
-            new Popover(trigger, {
-                content:    (contentEl as HTMLElement).innerHTML,
-                placement:  (trigger.getAttribute('data-popover-placement') as PopoverPlacement) ?? 'bottom',
-                align:      (trigger.getAttribute('data-popover-align')     as PopoverAlign)     ?? 'center',
-                triggerMode:(trigger.getAttribute('data-popover-trigger')   as PopoverTrigger)   ?? 'click',
-                arrow:       trigger.getAttribute('data-popover-arrow')     !== 'false',
-            });
-        });
-    }
-
-    // ── Build ──────────────────────────────────────────────────────────────────
-
-    private buildEl(): HTMLElement {
-        const id = `popover-${++Popover.idCounter}`;
-        const el  = document.createElement('div');
-        el.className   = ['popover', this.opts.className].filter(Boolean).join(' ');
-        el.id          = id;
-        el.setAttribute('role', 'dialog');
-        el.setAttribute('data-arrow', String(this.opts.arrow));
-
-        // Wrap plain content in .popover-body so it gets proper padding.
-        // Skip wrapping when content already uses structured popover elements.
-        const hasStructure = /class="popover-(header|body|footer|menu)/.test(this.opts.content);
-        const safeContent = sanitizeHtml(this.opts.content);
-        el.innerHTML = hasStructure
-            ? safeContent
-            : `<div class="popover-body">${safeContent}</div>`;
-
-        this.trigger.setAttribute('aria-expanded', 'true');
-        this.trigger.setAttribute('aria-controls', id);
-
-        return el;
-    }
-
-    // ── Positioning ────────────────────────────────────────────────────────────
-
-    private reposition(): void {
-        if (!this.popoverEl) return;
-
-        const { left, top, placement, arrowOffset } = computePosition(
-            this.trigger.getBoundingClientRect(),
-            this.popoverEl.getBoundingClientRect(),
-            {
-                placement: this.opts.placement,
-                align:     this.opts.align,
-                offset:    this.opts.offset,
-                arrowSize: this.opts.arrow ? ARROW_SIZE : undefined,
-            }
-        );
-
-        if (arrowOffset !== undefined)
-            this.popoverEl.style.setProperty('--popover-arrow-offset', `${arrowOffset}px`);
-
-        this.popoverEl.setAttribute('data-placement', placement);
-        this.popoverEl.setAttribute('data-align', this.opts.align);
-        this.popoverEl.style.left = `${left}px`;
-        this.popoverEl.style.top  = `${top}px`;
-    }
-
-    // ── Event handlers ─────────────────────────────────────────────────────────
-
-    private onClick = (): void => { this.toggle(); };
-
-    private onMouseEnter = (): void => {
-        if (this.hoverTimer !== null) clearTimeout(this.hoverTimer);
-        this.open();
-    };
-
-    private onMouseLeave = (): void => {
-        this.hoverTimer = window.setTimeout(() => this.close(), 120);
-    };
-
-    private onOutsideClick = (e: Event): void => {
-        const t = e.target as Node;
-        if (!this.popoverEl?.contains(t) && !this.trigger.contains(t)) this.close();
-    };
-
-    private onEscape = (e: KeyboardEvent): void => {
-        if (e.key === 'Escape') this.close();
-    };
-
-    private attachTrigger(): void {
-        if (this.opts.triggerMode === 'click') {
-            this.trigger.addEventListener('click', this.onClick);
-        } else {
-            this.trigger.addEventListener('mouseenter', this.onMouseEnter);
-            this.trigger.addEventListener('mouseleave', this.onMouseLeave);
-        }
-    }
-
-    private detachTrigger(): void {
-        this.trigger.removeEventListener('click', this.onClick);
-        this.trigger.removeEventListener('mouseenter', this.onMouseEnter);
-        this.trigger.removeEventListener('mouseleave', this.onMouseLeave);
-    }
-}
-
-export { Popover };
-export type { PopoverOptions, PopoverPlacement, PopoverAlign, PopoverTrigger };

package/js/position.ts

@@ -1,111 +0,0 @@
-/**
- * Shared floating-element positioning utility.
- * Used by Tooltip and Popover.
- */
-
-type Placement = 'top' | 'bottom' | 'left' | 'right';
-type Align     = 'start' | 'center' | 'end';
-
-interface PositionOptions {
-    placement:      Placement | 'auto';
-    align?:         Align;
-    offset?:        number;  // gap between trigger and floating element (default: 8)
-    margin?:        number;  // minimum distance from viewport edge (default: 8)
-    arrowSize?:     number;  // if set, returns arrowOffset in result
-}
-
-interface PositionResult {
-    left:         number;
-    top:          number;
-    placement:    Placement;   // resolved (after auto/flip)
-    arrowOffset?: number;      // px offset for arrow centering on trigger axis
-}
-
-/** Pick the placement with the most available space, preferring bottom > top > right > left. */
-function bestPlacement(trigger: DOMRect, floating: DOMRect, offset: number): Placement {
-    const space = {
-        bottom: window.innerHeight - trigger.bottom - offset,
-        top:    trigger.top        - offset,
-        right:  window.innerWidth  - trigger.right  - offset,
-        left:   trigger.left       - offset,
-    };
-    if (space.bottom >= floating.height) return 'bottom';
-    if (space.top    >= floating.height) return 'top';
-    if (space.right  >= floating.width)  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]) as Placement;
-}
-
-/** Flip to opposite side if preferred placement doesn't fit. */
-function maybeFlip(placement: Placement, trigger: DOMRect, floating: DOMRect, offset: number): Placement {
-    const fits: Record<Placement, boolean> = {
-        top:    trigger.top        - offset >= floating.height,
-        bottom: window.innerHeight - trigger.bottom - offset >= floating.height,
-        left:   trigger.left       - offset >= floating.width,
-        right:  window.innerWidth  - trigger.right  - offset >= floating.width,
-    };
-    const opp: Record<Placement, Placement> = { 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: DOMRect, floating: DOMRect, opts: PositionOptions): PositionResult {
-    const offset = opts.offset ?? 8;
-    const margin = opts.margin ?? 8;
-    const align  = opts.align  ?? 'center';
-
-    const placement: Placement = opts.placement === 'auto'
-        ? bestPlacement(trigger, floating, offset)
-        : maybeFlip(opts.placement, trigger, floating, offset);
-
-    // Main-axis offset
-    let left = 0, top = 0;
-    switch (placement) {
-        case 'top':    top  = trigger.top    - floating.height - offset; break;
-        case 'bottom': top  = trigger.bottom + offset;                    break;
-        case 'left':   left = trigger.left   - floating.width  - offset; break;
-        case 'right':  left = trigger.right  + offset;                   break;
-    }
-
-    // Cross-axis alignment
-    if (placement === 'top' || placement === 'bottom') {
-        switch (align) {
-            case 'start':  left = trigger.left;                                          break;
-            case 'center': left = trigger.left + (trigger.width  - floating.width)  / 2; break;
-            case 'end':    left = trigger.right - floating.width;                        break;
-        }
-    } else {
-        switch (align) {
-            case 'start':  top = trigger.top;                                             break;
-            case 'center': top = trigger.top  + (trigger.height - floating.height) / 2;  break;
-            case 'end':    top = trigger.bottom - floating.height;                        break;
-        }
-    }
-
-    // Clamp to viewport
-    const l = Math.max(margin, Math.min(window.innerWidth  - floating.width  - margin, left));
-    const t = Math.max(margin, Math.min(window.innerHeight - floating.height - margin, top));
-
-    // Arrow offset: keep arrow centred on the trigger even after viewport clamping
-    let arrowOffset: number | undefined;
-    if (opts.arrowSize !== undefined) {
-        const minOff = opts.arrowSize + 8; // min distance from rounded corner
-        if (placement === 'top' || placement === 'bottom') {
-            const raw = trigger.left + trigger.width  / 2 - l;
-            arrowOffset = Math.max(minOff, Math.min(floating.width  - minOff, raw));
-        } else {
-            const raw = trigger.top  + trigger.height / 2 - t;
-            arrowOffset = Math.max(minOff, Math.min(floating.height - minOff, raw));
-        }
-    }
-
-    return { left: l, top: t, placement, arrowOffset };
-}
-
-export { computePosition, bestPlacement, maybeFlip };
-export type { Placement, Align, PositionOptions, PositionResult };

package/js/push-menu.ts

@@ -1,286 +0,0 @@
-interface PushMenuElements {
-    navigation: HTMLElement | null;
-    content: HTMLElement | null;
-    menu: HTMLElement | null;
-    header: HTMLElement | null;
-    controlIcon: HTMLElement | null;
-    backdrop: HTMLElement | null;
-}
-
-class PushMenu {
-    private static elements: PushMenuElements = {
-        navigation: null,
-        content: null,
-        menu: null,
-        header: null,
-        controlIcon: null,
-        backdrop: null
-    };
-
-    private static initialized = false;
-    private static panelStack: HTMLElement[] = [];
-    private static boundHandleNavigationChange: () => void;
-
-    public static init(): void {
-        if (this.initialized) {
-            console.warn('PushMenu: Already initialized');
-            return;
-        }
-
-        this.refresh();
-
-        if (!this.elements.navigation || !this.elements.content) {
-            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.backdrop?.addEventListener('click', this.handleBackdropClick);
-
-        this.initialized = true;
-    }
-
-    // ─── Panel construction ────────────────────────────────────────────────
-
-    private static buildPanels(): void {
-        const menu = this.elements.menu;
-        if (!menu) return;
-
-        const rootUl = menu.querySelector(':scope > ul');
-        if (!rootUl) return;
-
-        // Wrap root ul in a panel
-        const rootPanel = document.createElement('div');
-        rootPanel.classList.add('push-menu-panel', 'is-active');
-        rootPanel.dataset.level = '0';
-        rootPanel.appendChild(rootUl);
-        menu.appendChild(rootPanel);
-
-        // Recursively extract nested uls into sibling panels
-        this.extractSubPanels(rootPanel, 1);
-
-        this.panelStack = [rootPanel];
-    }
-
-    private static extractSubPanels(panel: HTMLElement, level: number): void {
-        // Collect all uls currently in this panel before any mutations
-        const uls = Array.from(panel.querySelectorAll('ul')) as HTMLUListElement[];
-
-        for (const ul of uls) {
-            const listItems = Array.from(ul.children) as HTMLElement[];
-
-            for (const li of listItems) {
-                const childUl = li.querySelector(':scope > ul') as HTMLElement | null;
-                if (!childUl) continue;
-
-                // Determine label from the immediate anchor child
-                const parentAnchor = li.querySelector(':scope > a') as HTMLElement | null;
-                const title = parentAnchor?.textContent?.trim() ?? '';
-
-                // ── Build sub-panel ──────────────────────────────────────
-                const subPanel = document.createElement('div');
-                subPanel.classList.add('push-menu-panel');
-                subPanel.dataset.level = String(level);
-
-                // Header: back button + breadcrumb title
-                const header = document.createElement('div');
-                header.classList.add('push-menu-panel-header');
-
-                const backBtn = document.createElement('button');
-                backBtn.classList.add('push-menu-back');
-                backBtn.setAttribute('aria-label', 'Back');
-                backBtn.innerHTML = `<span class="icon icon-navigate_before" aria-hidden="true"></span>`;
-                header.addEventListener('click', () => PushMenu.goBack());
-
-                const titleEl = document.createElement('span');
-                titleEl.classList.add('push-menu-panel-title');
-                titleEl.textContent = title;
-
-                header.appendChild(backBtn);
-                header.appendChild(titleEl);
-                subPanel.appendChild(header);
-
-                // Move the child ul into the sub-panel
-                subPanel.appendChild(childUl);
-
-                // Append sub-panel as sibling inside the nav
-                this.elements.menu?.appendChild(subPanel);
-
-                // ── Replace anchor with a trigger span in the parent li ──
-                const trigger = document.createElement('span');
-                trigger.classList.add('push-menu-item');
-                trigger.textContent = title;
-
-                // Chevron icon
-                const chevron = document.createElement('span');
-                chevron.classList.add('push-menu-chevron');
-                chevron.setAttribute('aria-hidden', 'true');
-                chevron.innerHTML = `<span class="icon icon-navigate_next" aria-hidden="true"></span>`;
-                trigger.appendChild(chevron);
-
-                if (parentAnchor) {
-                    parentAnchor.replaceWith(trigger);
-                } else {
-                    li.prepend(trigger);
-                }
-
-                trigger.addEventListener('click', () => PushMenu.openPanel(subPanel));
-
-                // Recurse into the newly created sub-panel
-                this.extractSubPanels(subPanel, level + 1);
-            }
-        }
-    }
-
-    // ─── Panel navigation ──────────────────────────────────────────────────
-
-    public static openPanel(panel: HTMLElement): void {
-        const currentPanel = this.panelStack[this.panelStack.length - 1];
-
-        currentPanel.classList.remove('is-active');
-        currentPanel.classList.add('is-prev');
-
-        panel.classList.add('is-active');
-
-        this.panelStack.push(panel);
-    }
-
-    public static goBack(): void {
-        if (this.panelStack.length <= 1) return;
-
-        const currentPanel = this.panelStack.pop()!;
-        const prevPanel = this.panelStack[this.panelStack.length - 1];
-
-        currentPanel.classList.remove('is-active');
-        prevPanel.classList.remove('is-prev');
-        prevPanel.classList.add('is-active');
-    }
-
-    private static resetPanels(): void {
-        const menu = this.elements.menu;
-        if (!menu) return;
-
-        // Wait for the close animation before snapping panels back
-        setTimeout(() => {
-            const panels = Array.from(menu.querySelectorAll('.push-menu-panel')) as HTMLElement[];
-            panels.forEach((panel, index) => {
-                panel.classList.remove('is-active', 'is-prev');
-                if (index === 0) panel.classList.add('is-active');
-            });
-
-            if (panels[0]) {
-                this.panelStack = [panels[0]];
-            }
-        }, 300);
-    }
-
-    // ─── Open / close ──────────────────────────────────────────────────────
-
-    private static handleNavigationChange(): void {
-        const isPushed = this.elements.content?.classList.contains('pushed') ?? false;
-
-        if (!isPushed) {
-            this.elements.content?.addEventListener('click', this.clickNav);
-        } else {
-            this.elements.content?.removeEventListener('click', this.clickNav);
-            this.resetPanels();
-        }
-
-        this.pushToggle();
-    }
-
-    public static pushToggle(): void {
-        if (!this.elements.content || !this.elements.menu) {
-            throw new Error('PushMenu: Required elements not found (.push-content, .push-menu)');
-        }
-
-        const isPushed = this.elements.content.classList.contains('pushed');
-
-        this.toggleClass(this.elements.content, 'pushed', !isPushed);
-        this.toggleClass(this.elements.menu, 'pushed', !isPushed);
-        this.toggleClass(this.elements.header, 'pushed', !isPushed);
-        this.toggleClass(this.elements.backdrop, 'pushed', !isPushed);
-
-        if (this.elements.controlIcon) {
-            if (isPushed) {
-                this.elements.controlIcon.classList.remove('icon-menu_open');
-                this.elements.controlIcon.classList.add('icon-menu');
-            } else {
-                this.elements.controlIcon.classList.add('icon-menu_open');
-                this.elements.controlIcon.classList.remove('icon-menu');
-            }
-        }
-    }
-
-    private static toggleClass(element: HTMLElement | null, className: string, add: boolean): void {
-        if (!element) return;
-        if (add) {
-            element.classList.add(className);
-        } else {
-            element.classList.remove(className);
-        }
-    }
-
-    private static clickNav = (): void => {
-        const navigation = PushMenu.elements.navigation as HTMLElement;
-        navigation?.click();
-    };
-
-    private static handleBackdropClick = (): void => {
-        if (PushMenu.isOpen()) {
-            const navigation = PushMenu.elements.navigation as HTMLElement;
-            navigation?.click();
-        }
-    };
-
-    public static open(): void {
-        if (!this.elements.content?.classList.contains('pushed')) {
-            this.pushToggle();
-        }
-    }
-
-    public static close(): void {
-        if (this.elements.content?.classList.contains('pushed')) {
-            this.pushToggle();
-        }
-    }
-
-    public static isOpen(): boolean {
-        return this.elements.content?.classList.contains('pushed') ?? false;
-    }
-
-    public static destroy(): void {
-        if (!this.initialized) return;
-
-        this.elements.navigation?.removeEventListener('change', this.boundHandleNavigationChange);
-        this.elements.content?.removeEventListener('click', this.clickNav);
-        this.elements.backdrop?.removeEventListener('click', this.handleBackdropClick);
-
-        this.close();
-
-        this.elements = {
-            navigation: null,
-            content: null,
-            menu: null,
-            header: null,
-            controlIcon: null,
-            backdrop: null
-        };
-
-        this.panelStack = [];
-        this.initialized = false;
-    }
-
-    public static refresh(): void {
-        this.elements.navigation = document.querySelector('.navigation');
-        this.elements.content = document.querySelector('.push-content');
-        this.elements.menu = document.querySelector('.push-menu');
-        this.elements.header = document.querySelector('.main-header');
-        this.elements.controlIcon = document.querySelector('.navigation-controls .icon');
-        this.elements.backdrop = document.querySelector('.push-menu-backdrop');
-    }
-}
-
-export { PushMenu, type PushMenuElements };

package/js/range-slider.ts

@@ -1,33 +0,0 @@
-class RangeSlider {
-    private readonly input: HTMLInputElement;
-
-    constructor(input: HTMLInputElement) {
-        this.input = input;
-        this.update();
-        this.input.addEventListener('input', this.handleInput);
-    }
-
-    public static initAll(selector: string = '.range-slider input[type="range"]'): void {
-        document.querySelectorAll<HTMLInputElement>(selector).forEach(input => {
-            new RangeSlider(input);
-        });
-    }
-
-    private update(): void {
-        const min = +this.input.min || 0;
-        const max = +this.input.max || 100;
-        const pct = ((+this.input.value - min) / (max - min)) * 100;
-        this.input.style.setProperty('--range-fill', `${pct}%`);
-    }
-
-    private handleInput = (): void => {
-        this.update();
-    };
-
-    public destroy(): void {
-        this.input.removeEventListener('input', this.handleInput);
-        this.input.style.removeProperty('--range-fill');
-    }
-}
-
-export { RangeSlider };