@dodlhuat/basix 1.2.7 → 1.2.9

package/js/scroll.ts

@@ -1,47 +0,0 @@
-interface ScrollOptions {
-    behavior?: ScrollBehavior;
-    offset?: number;
-    block?: ScrollLogicalPosition;
-}
-
-class Scroll {
-    public static to(target: string | Element, options: ScrollOptions = {}): void {
-        const fixed_header = document.querySelector('.main-header') as HTMLElement | null;
-        const offset = fixed_header ? fixed_header.offsetHeight : 0;
-
-        const settings: Required<ScrollOptions> = {
-            behavior: "smooth",
-            offset: offset,
-            block: "start",
-            ...options
-        };
-
-        let el: Element | null = target instanceof Element ? target : null;
-
-        if (typeof target === "string") {
-            el = document.querySelector(target);
-        }
-
-        if (!el) return;
-
-        const rect = el.getBoundingClientRect();
-        const scrollTop = window.scrollY;
-        const offsetTop = rect.top + scrollTop - settings.offset;
-
-        window.scrollTo({
-            top: offsetTop,
-            behavior: settings.behavior
-        });
-    }
-}
-
-declare global {
-    interface Window {
-        Scroll: typeof Scroll;
-    }
-}
-
-window.Scroll = Scroll;
-
-export { Scroll };
-export type { ScrollOptions };

package/js/scrollbar.ts

@@ -1,335 +0,0 @@
-interface ScrollbarElements {
-    viewport: HTMLElement;
-    content: HTMLElement;
-    track: HTMLElement;
-    thumb: HTMLElement;
-}
-
-class Scrollbar {
-    private static readonly instances = new WeakMap<HTMLElement, Scrollbar>();
-    private static activeInstance: Scrollbar | null = null;
-    private static globalListenersInstalled = false;
-    private static instanceCount = 0;
-    private static globalListenerAbortController: AbortController | null = null;
-
-    private readonly container!: HTMLElement;
-    private readonly viewport!: HTMLElement;
-    private readonly content!: HTMLElement;
-    private readonly track!: HTMLElement;
-    private readonly thumb!: HTMLElement;
-    private readonly MIN_THUMB_HEIGHT!: number;
-    private readonly ro!: ResizeObserver;
-
-    private dragging = false;
-    private activePointerId: number | null = null;
-    private startPointerY = 0;
-    private startThumbTop = 0;
-
-    // Bound methods for event handling
-    private readonly boundPointerMove!: (e: PointerEvent) => void;
-    private readonly boundPointerUp!: (e: PointerEvent) => void;
-    private readonly boundThumbPointerDown!: (e: PointerEvent) => void;
-    private readonly boundTrackClick!: (e: MouseEvent) => void;
-    private readonly boundViewportScroll!: () => void;
-    private readonly boundUpdateThumb!: () => void;
-    private readonly boundContainerWheel!: (e: WheelEvent) => void;
-
-    private constructor(container: HTMLElement) {
-        this.container = container;
-
-        // Query and validate required elements
-        const elements = this.getRequiredElements(container);
-        this.viewport = elements.viewport;
-        this.content = elements.content;
-        this.track = elements.track;
-        this.thumb = elements.thumb;
-
-        // Get minimum thumb height from CSS variable or use default
-        this.MIN_THUMB_HEIGHT = this.getMinThumbHeight();
-
-        // Bind all event handlers once
-        this.boundPointerMove = this.handlePointerMove.bind(this);
-        this.boundPointerUp = this.handlePointerUp.bind(this);
-        this.boundThumbPointerDown = this.handleThumbPointerDown.bind(this);
-        this.boundTrackClick = this.handleTrackClick.bind(this);
-        this.boundViewportScroll = this.updateThumb.bind(this);
-        this.boundUpdateThumb = this.updateThumb.bind(this);
-        this.boundContainerWheel = this.handleContainerWheel.bind(this);
-
-        // Setup ResizeObserver
-        this.ro = new ResizeObserver(this.boundUpdateThumb);
-
-        // Initialize
-        this.attachEventListeners();
-        Scrollbar.instances.set(container, this);
-
-        // Track instances and install global listeners once for all
-        Scrollbar.instanceCount++;
-        if (!Scrollbar.globalListenersInstalled) {
-            Scrollbar.installGlobalListeners();
-        }
-
-        // Initial thumb update
-        requestAnimationFrame(this.boundUpdateThumb);
-    }
-
-    private getRequiredElements(container: HTMLElement): ScrollbarElements {
-        const viewport = container.querySelector<HTMLElement>('.viewport');
-        const content = container.querySelector<HTMLElement>('.content');
-        const track = container.querySelector<HTMLElement>('.track');
-        const thumb = container.querySelector<HTMLElement>('.thumb');
-
-        if (!viewport || !content || !track || !thumb) {
-            throw new Error(
-                'Required scrollbar elements not found. Expected: .viewport, .content, .track, .thumb'
-            );
-        }
-
-        return { viewport, content, track, thumb };
-    }
-
-    private getMinThumbHeight(): number {
-        const cssValue = getComputedStyle(document.documentElement)
-            .getPropertyValue('--thumb-min')
-            .trim();
-
-        const parsed = parseInt(cssValue, 10);
-        const defaultMin = 28;
-        const absoluteMin = 16;
-
-        return Math.max(absoluteMin, parsed || defaultMin);
-    }
-
-    private static installGlobalListeners(): void {
-        const ac = new AbortController();
-        Scrollbar.globalListenerAbortController = ac;
-
-        document.addEventListener('pointermove', (e: PointerEvent) => {
-            Scrollbar.activeInstance?.boundPointerMove(e);
-        }, { passive: false, signal: ac.signal });
-
-        document.addEventListener('pointerup', (e: PointerEvent) => {
-            Scrollbar.activeInstance?.boundPointerUp(e);
-        }, { signal: ac.signal });
-
-        document.addEventListener('pointercancel', (e: PointerEvent) => {
-            Scrollbar.activeInstance?.boundPointerUp(e);
-        }, { signal: ac.signal });
-
-        Scrollbar.globalListenersInstalled = true;
-    }
-
-    private attachEventListeners(): void {
-        // Instance-specific events
-        this.viewport.addEventListener('scroll', this.boundViewportScroll, { passive: true });
-        this.thumb.addEventListener('pointerdown', this.boundThumbPointerDown);
-        this.track.addEventListener('click', this.boundTrackClick);
-        this.container.addEventListener('wheel', this.boundContainerWheel, { passive: false });
-
-        // Observe size changes
-        this.ro.observe(this.viewport);
-        this.ro.observe(this.content);
-        window.addEventListener('resize', this.boundUpdateThumb);
-    }
-
-    private updateThumb(): void {
-        const viewportHeight = this.viewport.clientHeight;
-        const contentHeight = this.content.scrollHeight;
-        const trackHeight = this.track.clientHeight;
-
-        // Hide thumb if content fits in viewport
-        if (contentHeight <= viewportHeight + 1) {
-            this.thumb.style.display = 'none';
-            return;
-        }
-
-        this.thumb.style.display = '';
-
-        // Calculate thumb size
-        const ratio = viewportHeight / contentHeight;
-        const thumbHeight = Math.max(
-            Math.floor(ratio * trackHeight),
-            this.MIN_THUMB_HEIGHT
-        );
-        this.thumb.style.height = `${thumbHeight}px`;
-
-        // Calculate thumb position
-        const maxScroll = contentHeight - viewportHeight;
-        const maxThumbTop = trackHeight - thumbHeight;
-        const scrollRatio = this.viewport.scrollTop / (maxScroll || 1);
-        const thumbTop = scrollRatio * (maxThumbTop || 0);
-
-        this.thumb.style.top = `${thumbTop}px`;
-    }
-
-    private handleThumbPointerDown(e: PointerEvent): void {
-        e.preventDefault();
-
-        this.dragging = true;
-        this.activePointerId = e.pointerId;
-        Scrollbar.activeInstance = this;
-
-        // Capture pointer for reliable tracking
-        try {
-            this.thumb.setPointerCapture(e.pointerId);
-        } catch (err) {
-            console.warn('Failed to capture pointer:', err);
-        }
-
-        this.startPointerY = e.clientY;
-
-        const thumbRect = this.thumb.getBoundingClientRect();
-        const trackRect = this.track.getBoundingClientRect();
-        this.startThumbTop = thumbRect.top - trackRect.top;
-
-        // Prevent text selection during drag
-        document.body.style.userSelect = 'none';
-    }
-
-    private handlePointerMove(e: PointerEvent): void {
-        // Only handle events for the active pointer
-        if (!this.dragging || this.activePointerId !== e.pointerId) {
-            return;
-        }
-
-        e.preventDefault();
-
-        const pointerDelta = e.clientY - this.startPointerY;
-        const trackHeight = this.track.clientHeight;
-        const thumbHeight = this.thumb.clientHeight;
-        const maxThumbTop = trackHeight - thumbHeight;
-
-        // Calculate new thumb position
-        const newThumbTop = Math.max(
-            0,
-            Math.min(maxThumbTop, this.startThumbTop + pointerDelta)
-        );
-        this.thumb.style.top = `${newThumbTop}px`;
-
-        // Update viewport scroll position
-        const contentHeight = this.content.scrollHeight;
-        const viewportHeight = this.viewport.clientHeight;
-        const maxScroll = contentHeight - viewportHeight;
-        const scrollRatio = newThumbTop / (maxThumbTop || 1);
-
-        this.viewport.scrollTop = scrollRatio * (maxScroll || 0);
-    }
-
-    private handlePointerUp(e: PointerEvent): void {
-        if (!this.dragging || this.activePointerId !== e.pointerId) {
-            return;
-        }
-
-        this.dragging = false;
-
-        // Release pointer capture
-        try {
-            this.thumb.releasePointerCapture(e.pointerId);
-        } catch (err) {
-            console.warn('Failed to release pointer:', err);
-        }
-
-        this.activePointerId = null;
-        Scrollbar.activeInstance = null;
-        document.body.style.userSelect = '';
-    }
-
-    private handleTrackClick(e: MouseEvent): void {
-        // Ignore clicks directly on the thumb
-        if (e.target === this.thumb) {
-            return;
-        }
-
-        const trackRect = this.track.getBoundingClientRect();
-        const clickY = e.clientY - trackRect.top;
-        const thumbHeight = this.thumb.clientHeight;
-        const trackHeight = this.track.clientHeight;
-
-        // Center thumb on click position
-        const targetThumbTop = clickY - thumbHeight / 2;
-        const maxThumbTop = trackHeight - thumbHeight;
-        const clampedThumbTop = Math.max(0, Math.min(maxThumbTop, targetThumbTop));
-
-        // Calculate corresponding scroll position
-        const contentHeight = this.content.scrollHeight;
-        const viewportHeight = this.viewport.clientHeight;
-        const maxScroll = contentHeight - viewportHeight;
-        const scrollRatio = clampedThumbTop / (maxThumbTop || 1);
-        const scrollTop = scrollRatio * (maxScroll || 0);
-
-        this.viewport.scrollTo({ top: scrollTop, behavior: 'smooth' });
-    }
-
-    private handleContainerWheel(e: WheelEvent): void {
-        const { scrollTop, scrollHeight, clientHeight } = this.viewport;
-        const scrollable = scrollHeight > clientHeight;
-        const atTop = scrollTop === 0 && e.deltaY < 0;
-        const atBottom = scrollTop + clientHeight >= scrollHeight - 1 && e.deltaY > 0;
-
-        if (scrollable && !atTop && !atBottom) {
-            e.preventDefault();
-        }
-
-        this.viewport.scrollTop += e.deltaY;
-    }
-
-    public destroy(): void {
-        // Remove event listeners
-        this.viewport.removeEventListener('scroll', this.boundViewportScroll);
-        this.thumb.removeEventListener('pointerdown', this.boundThumbPointerDown);
-        this.track.removeEventListener('click', this.boundTrackClick);
-        this.container.removeEventListener('wheel', this.boundContainerWheel);
-        window.removeEventListener('resize', this.boundUpdateThumb);
-
-        // Disconnect observer
-        this.ro.disconnect();
-
-        // Clear from instances map
-        Scrollbar.instances.delete(this.container);
-
-        // Clear active instance if this was it
-        if (Scrollbar.activeInstance === this) {
-            Scrollbar.activeInstance = null;
-        }
-
-        // Uninstall global listeners when last instance is destroyed
-        Scrollbar.instanceCount--;
-        if (Scrollbar.instanceCount === 0) {
-            Scrollbar.globalListenerAbortController?.abort();
-            Scrollbar.globalListenerAbortController = null;
-            Scrollbar.globalListenersInstalled = false;
-        }
-    }
-
-    // Static factory methods
-    public static create(elementOrSelector: string | HTMLElement): Scrollbar {
-        const container = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!container) {
-            throw new Error(`Scrollbar: Element not found for selector "${elementOrSelector}"`);
-        }
-
-        const existing = Scrollbar.instances.get(container);
-        if (existing) return existing;
-
-        return new Scrollbar(container);
-    }
-
-    public static initAll(selector: string): Scrollbar[] {
-        const containers = document.querySelectorAll<HTMLElement>(selector);
-        return Array.from(containers).map(container => Scrollbar.create(container));
-    }
-
-    public static initOne(elementOrSelector: string | HTMLElement): Scrollbar {
-        return Scrollbar.create(elementOrSelector);
-    }
-
-    public static getInstance(container: HTMLElement): Scrollbar | undefined {
-        return Scrollbar.instances.get(container);
-    }
-
-}
-
-export { Scrollbar, ScrollbarElements };

package/js/select.ts

@@ -1,235 +0,0 @@
-class Select {
-    private readonly element: HTMLSelectElement;
-    private readonly isMultiselect: boolean;
-    private readonly dropdown: HTMLElement | null;
-    private readonly documentClickHandler: (e: Event) => void;
-
-    constructor(elementOrSelector: string | HTMLSelectElement) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLSelectElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!element) {
-            throw new Error(`Select: Element not found for selector "${elementOrSelector}"`);
-        }
-
-        this.element = element;
-        const result = Select.initElement(element);
-
-        if (result === null) {
-            throw new Error(`Select: Failed to initialize select for "${elementOrSelector}"`);
-        }
-
-        this.isMultiselect = result.isMulti;
-        this.dropdown = result.dropdown;
-
-        this.documentClickHandler = (e: Event) => {
-            if (this.dropdown && !this.dropdown.contains(e.target as Node)) {
-                this.dropdown.classList.remove('open');
-            }
-        };
-        document.addEventListener('click', this.documentClickHandler);
-    }
-
-    public destroy(): void {
-        document.removeEventListener('click', this.documentClickHandler);
-        this.dropdown?.classList.remove('open');
-    }
-
-    public value(): string | string[] | undefined {
-        if (!this.element) {
-            return undefined;
-        }
-
-        const selectedValues = Array.from(this.element.options)
-            .filter(option => option.selected)
-            .map(option => option.value);
-
-        return this.isMultiselect ? selectedValues : selectedValues[0];
-    }
-
-    public static init(elementOrSelector: string | HTMLSelectElement): boolean | null {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLSelectElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!element) {
-            return null;
-        }
-
-        const result = Select.initElement(element);
-        if (!result) return null;
-
-        // Static init path: add document listener without lifecycle management
-        document.addEventListener('click', (e: Event) => {
-            if (!result.dropdown.contains(e.target as Node)) {
-                result.dropdown.classList.remove('open');
-            }
-        });
-
-        return result.isMulti;
-    }
-
-    private static initElement(element: HTMLSelectElement): { isMulti: boolean; dropdown: HTMLElement } | null {
-        if (!Select.transformSelect(element)) {
-            return null;
-        }
-
-        const selectGroup = element.closest('.select-group');
-        if (!selectGroup) {
-            throw new Error(`Select: Parent .select-group not found for "${element}"`);
-        }
-
-        const dropdown = selectGroup.querySelector('.dropdown') as HTMLElement | null;
-        if (!dropdown) {
-            throw new Error(`Select: Dropdown element not found for "${element}"`);
-        }
-
-        const selected = dropdown.querySelector('.dropdown-selected') as HTMLElement | null;
-        const options = dropdown.querySelector('.dropdown-options') as HTMLElement | null;
-
-        if (!selected || !options) {
-            throw new Error(`Select: Required dropdown elements not found for "${element}"`);
-        }
-
-        const isMulti = dropdown.dataset.multi === 'true';
-
-        // Toggle dropdown on selected element click
-        selected.addEventListener('click', () => {
-            Select.closeAllDropdowns(dropdown);
-            dropdown.classList.toggle('open');
-        });
-
-        // Handle option selection
-        options.addEventListener('click', (e: Event) => {
-            const target = e.target as HTMLElement;
-
-            if (!target.classList.contains('dropdown-option')) {
-                return;
-            }
-
-            if (isMulti) {
-                Select.handleMultiSelect(target, options, selected, element);
-            } else {
-                Select.handleSingleSelect(target, options, selected, dropdown, element);
-            }
-        });
-
-        // Close dropdown when clicking the close icon
-        const closeIcon = options.querySelector('.dropdown-options-icon') as HTMLElement | null;
-        if (closeIcon) {
-            closeIcon.addEventListener('click', () => {
-                dropdown.classList.remove('open');
-            });
-        }
-
-        return { isMulti, dropdown };
-    }
-
-    private static closeAllDropdowns(exceptDropdown?: HTMLElement): void {
-        document.querySelectorAll('.dropdown').forEach(dropdown => {
-            if (dropdown !== exceptDropdown) {
-                dropdown.classList.remove('open');
-            }
-        });
-    }
-
-    private static handleMultiSelect(
-        option: HTMLElement,
-        optionsContainer: HTMLElement,
-        selected: HTMLElement,
-        selectElement: HTMLSelectElement
-    ): void {
-        option.classList.toggle('selected');
-
-        const selectedOptions = Array.from(
-            optionsContainer.querySelectorAll('.dropdown-option.selected')
-        ) as HTMLElement[];
-
-        const values = selectedOptions.map(opt => opt.textContent?.trim() || '');
-        selected.textContent = values.length ? values.join(', ') : 'Select options';
-
-        const selectedValues = selectedOptions.map(opt => opt.dataset.value || '');
-        Array.from(selectElement.options).forEach(opt => {
-            opt.selected = selectedValues.includes(opt.value);
-        });
-    }
-
-    private static handleSingleSelect(
-        option: HTMLElement,
-        optionsContainer: HTMLElement,
-        selected: HTMLElement,
-        dropdown: HTMLElement,
-        selectElement: HTMLSelectElement
-    ): void {
-        optionsContainer.querySelectorAll('.dropdown-option').forEach(opt => {
-            opt.classList.remove('selected');
-        });
-
-        option.classList.add('selected');
-        selected.textContent = option.textContent?.trim() || '';
-        dropdown.classList.remove('open');
-        selectElement.value = option.dataset.value || '';
-    }
-
-    private static transformSelect(select: HTMLSelectElement): boolean {
-        const parent = select.closest('.select-group') as HTMLElement | null;
-
-        if (!parent) {
-            return false;
-        }
-
-        const label = parent.querySelector('label');
-        const isMulti = select.hasAttribute('multiple');
-        const labelText = label?.textContent?.trim() || 'Select';
-
-        // Create hidden wrapper for original select
-        const hiddenWrapper = document.createElement('div');
-        hiddenWrapper.classList.add('hidden');
-
-        if (label) {
-            hiddenWrapper.appendChild(label);
-        }
-        hiddenWrapper.appendChild(select);
-
-        // Create dropdown structure
-        const dropdown = document.createElement('div');
-        dropdown.className = 'dropdown';
-        dropdown.dataset.multi = String(isMulti);
-
-        const dropdownSelected = document.createElement('div');
-        dropdownSelected.className = 'dropdown-selected';
-        dropdownSelected.textContent = labelText;
-
-        const dropdownOptions = document.createElement('div');
-        dropdownOptions.className = 'dropdown-options';
-
-        // Add mobile menu
-        const optionsMenu = document.createElement('div');
-        optionsMenu.className = 'dropdown-options-menu hidden';
-        optionsMenu.innerHTML = 'Select options<span class="dropdown-options-icon icon icon-close"></span>';
-        dropdownOptions.appendChild(optionsMenu);
-
-        // Create option elements
-        Array.from(select.options).forEach(opt => {
-            const optDiv = document.createElement('div');
-            optDiv.className = 'dropdown-option';
-            optDiv.dataset.value = opt.value;
-            optDiv.textContent = opt.textContent;
-            dropdownOptions.appendChild(optDiv);
-        });
-
-        // Assemble dropdown
-        dropdown.appendChild(dropdownSelected);
-        dropdown.appendChild(dropdownOptions);
-
-        // Replace original content
-        parent.innerHTML = '';
-        parent.appendChild(hiddenWrapper);
-        parent.appendChild(dropdown);
-
-        return true;
-    }
-}
-
-export { Select };

package/js/sidebar-nav.ts

@@ -1,66 +0,0 @@
-interface SidebarNavOptions {
-    /** Selector for the toggle button. Default: '.sidebar-toggle' */
-    toggleSelector?: string;
-    /** Breakpoint (px) above which the sidebar is always visible. Default: 768 */
-    breakpoint?: number;
-}
-
-class SidebarNav {
-    private nav: HTMLElement | null;
-    private backdrop: HTMLElement | null;
-    private toggleBtn: HTMLElement | null;
-    private opts: Required<SidebarNavOptions>;
-    private _onToggle: () => void;
-    private _onBackdrop: () => void;
-    private _onResize: () => void;
-
-    constructor(containerOrSelector: string | HTMLElement, options: SidebarNavOptions = {}) {
-        const container: HTMLElement | null =
-            typeof containerOrSelector === 'string'
-                ? (document.querySelector(containerOrSelector) as HTMLElement | null)
-                : containerOrSelector;
-
-        this.opts = {
-            toggleSelector: options.toggleSelector ?? '.sidebar-toggle',
-            breakpoint: options.breakpoint ?? 768,
-        };
-
-        this.nav      = container?.querySelector('.sidebar-nav')      ?? null;
-        this.backdrop = container?.querySelector('.sidebar-backdrop')  ?? null;
-        this.toggleBtn = document.querySelector(this.opts.toggleSelector);
-
-        this._onToggle  = () => this.toggle();
-        this._onBackdrop = () => this.close();
-        this._onResize  = () => { if (window.innerWidth > this.opts.breakpoint) this.close(); };
-
-        this.toggleBtn?.addEventListener('click', this._onToggle);
-        this.backdrop?.addEventListener('click', this._onBackdrop);
-        window.addEventListener('resize', this._onResize);
-    }
-
-    open(): void {
-        this.nav?.classList.add('is-open');
-        this.backdrop?.classList.add('is-visible');
-    }
-
-    close(): void {
-        this.nav?.classList.remove('is-open');
-        this.backdrop?.classList.remove('is-visible');
-    }
-
-    toggle(): void {
-        this.nav?.classList.contains('is-open') ? this.close() : this.open();
-    }
-
-    isOpen(): boolean {
-        return this.nav?.classList.contains('is-open') ?? false;
-    }
-
-    destroy(): void {
-        this.toggleBtn?.removeEventListener('click', this._onToggle);
-        this.backdrop?.removeEventListener('click', this._onBackdrop);
-        window.removeEventListener('resize', this._onResize);
-    }
-}
-
-export { SidebarNav, SidebarNavOptions };