@dodlhuat/basix 1.2.8 → 1.3.0

package/js/tabs.ts

@@ -1,280 +0,0 @@
-type TabLayout = 'horizontal' | 'vertical';
-type MenuPosition = 'top' | 'bottom' | 'left' | 'right';
-
-interface TabsOptions {
-    layout?: TabLayout;
-    defaultTab?: number;
-    menuPos?: MenuPosition;
-    onChange?: (index: number) => void;
-}
-
-class Tabs {
-    private container: HTMLElement;
-    private options: Required<Omit<TabsOptions, 'onChange'>> & Pick<TabsOptions, 'onChange'>;
-    private tabItems: NodeListOf<Element>;
-    private tabPanels: NodeListOf<Element>;
-    private currentTab: number;
-
-    constructor(elementOrSelector: string | HTMLElement, options: TabsOptions = {}) {
-        const element = typeof elementOrSelector === 'string'
-            ? document.querySelector<HTMLElement>(elementOrSelector)
-            : elementOrSelector;
-
-        if (!element) {
-            throw new Error(`Tabs: Element not found for selector "${elementOrSelector}"`);
-        }
-
-        this.container = element;
-
-        // Set default options
-        const layout = options.layout || 'horizontal';
-        this.options = {
-            layout,
-            defaultTab: options.defaultTab ?? 0,
-            menuPos: options.menuPos || (layout === 'vertical' ? 'left' : 'top'),
-            onChange: options.onChange
-        };
-
-        this.currentTab = this.options.defaultTab;
-        this.tabItems = this.container.querySelectorAll('.tab-item');
-        this.tabPanels = this.container.querySelectorAll('.tab-panel');
-
-        this.init();
-    }
-
-    /**
-     * Initializes the tabs component
-     */
-    private init(): void {
-        // Apply layout class
-        if (this.options.layout === 'vertical') {
-            this.container.classList.add('tabs-vertical');
-        }
-
-        this.tabItems = this.container.querySelectorAll('.tab-item');
-        this.tabPanels = this.container.querySelectorAll('.tab-panel');
-
-        // Validate that we have tabs and panels
-        if (this.tabItems.length === 0) {
-            console.warn('No tab items found in container');
-            return;
-        }
-
-        if (this.tabPanels.length === 0) {
-            console.warn('No tab panels found in container');
-            return;
-        }
-
-        if (this.tabItems.length !== this.tabPanels.length) {
-            console.warn('Number of tab items does not match number of tab panels');
-        }
-
-        this.bindEvents();
-        this.activateTab(this.options.defaultTab);
-    }
-
-    /**
-     * Binds click events to tab items
-     */
-    private bindEvents(): void {
-        this.tabItems.forEach((item, index) => {
-            item.addEventListener('click', (e: Event) => {
-                e.preventDefault();
-                this.activateTab(index);
-            });
-
-            // Add keyboard navigation for accessibility
-            item.addEventListener('keydown', (e: Event) => {
-                const keyEvent = e as KeyboardEvent;
-                this.handleKeyboardNavigation(keyEvent, index);
-            });
-
-            // Set ARIA attributes
-            item.setAttribute('role', 'tab');
-            item.setAttribute('tabindex', index === this.options.defaultTab ? '0' : '-1');
-            item.setAttribute('aria-selected', index === this.options.defaultTab ? 'true' : 'false');
-        });
-
-        // Set ARIA attributes for panels
-        this.tabPanels.forEach((panel, index) => {
-            panel.setAttribute('role', 'tabpanel');
-            panel.setAttribute('aria-hidden', index === this.options.defaultTab ? 'false' : 'true');
-        });
-    }
-
-    /**
-     * Handles keyboard navigation (Arrow keys, Home, End)
-     */
-    private handleKeyboardNavigation(e: KeyboardEvent, currentIndex: number): void {
-        let newIndex = currentIndex;
-        const isVertical = this.options.layout === 'vertical';
-
-        switch (e.key) {
-            case 'ArrowLeft':
-                if (!isVertical) {
-                    newIndex = currentIndex > 0 ? currentIndex - 1 : this.tabItems.length - 1;
-                    e.preventDefault();
-                }
-                break;
-            case 'ArrowRight':
-                if (!isVertical) {
-                    newIndex = currentIndex < this.tabItems.length - 1 ? currentIndex + 1 : 0;
-                    e.preventDefault();
-                }
-                break;
-            case 'ArrowUp':
-                if (isVertical) {
-                    newIndex = currentIndex > 0 ? currentIndex - 1 : this.tabItems.length - 1;
-                    e.preventDefault();
-                }
-                break;
-            case 'ArrowDown':
-                if (isVertical) {
-                    newIndex = currentIndex < this.tabItems.length - 1 ? currentIndex + 1 : 0;
-                    e.preventDefault();
-                }
-                break;
-            case 'Home':
-                newIndex = 0;
-                e.preventDefault();
-                break;
-            case 'End':
-                newIndex = this.tabItems.length - 1;
-                e.preventDefault();
-                break;
-            default:
-                return;
-        }
-
-        if (newIndex !== currentIndex) {
-            this.activateTab(newIndex);
-            (this.tabItems[newIndex] as HTMLElement).focus();
-        }
-    }
-
-    /**
-     * Activates a tab by index
-     */
-    private activateTab(index: number): void {
-        if (index < 0 || index >= this.tabItems.length) {
-            console.warn(`Invalid tab index: ${index}`);
-            return;
-        }
-
-        // Remove active class from all
-        this.tabItems.forEach((item, i) => {
-            item.classList.remove('active');
-            item.setAttribute('tabindex', '-1');
-            item.setAttribute('aria-selected', 'false');
-        });
-
-        this.tabPanels.forEach((panel) => {
-            panel.classList.remove('active');
-            panel.setAttribute('aria-hidden', 'true');
-        });
-
-        // Add active class to selected
-        this.tabItems[index].classList.add('active');
-        this.tabItems[index].setAttribute('tabindex', '0');
-        this.tabItems[index].setAttribute('aria-selected', 'true');
-
-        this.tabPanels[index].classList.add('active');
-        this.tabPanels[index].setAttribute('aria-hidden', 'false');
-
-        const previousTab = this.currentTab;
-        this.currentTab = index;
-
-        // Call onChange callback if provided
-        if (this.options.onChange && previousTab !== index) {
-            this.options.onChange(index);
-        }
-    }
-
-    /**
-     * Public API: Programmatically activate a tab
-     */
-    public goToTab(index: number): void {
-        this.activateTab(index);
-
-        // Focus the tab for keyboard users
-        if (this.tabItems[index]) {
-            (this.tabItems[index] as HTMLElement).focus();
-        }
-    }
-
-    /**
-     * Public API: Get the currently active tab index
-     */
-    public getCurrentTab(): number {
-        return this.currentTab;
-    }
-
-    /**
-     * Public API: Get the total number of tabs
-     */
-    public getTabCount(): number {
-        return this.tabItems.length;
-    }
-
-    /**
-     * Public API: Enable a tab
-     */
-    public enableTab(index: number): void {
-        if (index < 0 || index >= this.tabItems.length) return;
-
-        const tab = this.tabItems[index] as HTMLElement;
-        tab.classList.remove('disabled');
-        tab.removeAttribute('aria-disabled');
-        tab.style.pointerEvents = '';
-    }
-
-    /**
-     * Public API: Disable a tab
-     */
-    public disableTab(index: number): void {
-        if (index < 0 || index >= this.tabItems.length) return;
-
-        const tab = this.tabItems[index] as HTMLElement;
-        tab.classList.add('disabled');
-        tab.setAttribute('aria-disabled', 'true');
-        tab.style.pointerEvents = 'none';
-
-        // If disabling the current tab, switch to the first enabled tab
-        if (index === this.currentTab) {
-            const firstEnabled = Array.from(this.tabItems).findIndex(
-                (item) => !item.classList.contains('disabled')
-            );
-            if (firstEnabled !== -1) {
-                this.activateTab(firstEnabled);
-            }
-        }
-    }
-
-    /**
-     * Public API: Destroy the tabs instance and clean up
-     */
-    public destroy(): void {
-        // Remove event listeners by cloning and replacing nodes
-        this.tabItems.forEach((item) => {
-            const newItem = item.cloneNode(true);
-            item.parentNode?.replaceChild(newItem, item);
-        });
-
-        // Remove classes
-        this.container.classList.remove('tabs-vertical');
-
-        // Remove ARIA attributes
-        this.tabItems.forEach((item) => {
-            item.removeAttribute('role');
-            item.removeAttribute('tabindex');
-            item.removeAttribute('aria-selected');
-        });
-
-        this.tabPanels.forEach((panel) => {
-            panel.removeAttribute('role');
-            panel.removeAttribute('aria-hidden');
-        });
-    }
-}
-
-export { Tabs };

package/js/theme.ts

@@ -1,235 +0,0 @@
-type ThemeMode = 'light' | 'dark';
-
-interface ThemeElements {
-    toggleBtn: HTMLElement;
-    icon: HTMLElement;
-    status: HTMLElement | null;
-}
-
-class Theme {
-    private static readonly STORAGE_KEY = 'theme';
-    private static root: HTMLElement;
-    private static elements: ThemeElements | null = null;
-    private static mediaQuery: MediaQueryList | null = null;
-
-    /**
-     * Initializes the theme system with toggle functionality and system preference detection
-     */
-    public static init(): void {
-        this.root = document.documentElement;
-
-        // Get DOM elements
-        const toggleBtn = document.getElementById('theme-toggle');
-        const icon = document.getElementById('theme-icon');
-        const status = document.getElementById('status');
-
-        // Validate required elements
-        if (!toggleBtn || !icon) {
-            console.error('Theme toggle: missing DOM elements', { toggleBtn, icon });
-            if (status) {
-                status.textContent = 'Error: missing toggle elements (check IDs).';
-            }
-            return;
-        }
-
-        this.elements = { toggleBtn, icon, status };
-
-        // Initialize media query
-        if (window.matchMedia) {
-            this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        }
-
-        // Apply initial theme
-        const savedTheme = this.getSavedTheme();
-        const systemTheme = this.getSystemTheme();
-        const initialTheme = savedTheme || systemTheme;
-        this.applyTheme(initialTheme);
-
-        // Bind event listeners
-        this.bindToggleClick();
-        this.bindKeyboardShortcut();
-        this.bindSystemThemeChange();
-    }
-
-    /**
-     * Safely retrieves the saved theme from localStorage
-     */
-    private static getSavedTheme(): ThemeMode | null {
-        try {
-            const saved = localStorage.getItem(this.STORAGE_KEY);
-            return saved === 'dark' || saved === 'light' ? saved : null;
-        } catch (e) {
-            console.warn('localStorage.getItem failed', e);
-            return null;
-        }
-    }
-
-    /**
-     * Safely saves the theme to localStorage
-     */
-    private static saveTheme(theme: ThemeMode): void {
-        try {
-            localStorage.setItem(this.STORAGE_KEY, theme);
-        } catch (e) {
-            console.warn('localStorage.setItem failed', e);
-        }
-    }
-
-    /**
-     * Gets the system-preferred theme
-     */
-    private static getSystemTheme(): ThemeMode {
-        return this.mediaQuery?.matches ? 'dark' : 'light';
-    }
-
-    /**
-     * Gets the current active theme
-     */
-    private static getCurrentTheme(): ThemeMode {
-        const current = this.root.getAttribute('data-theme');
-        return current === 'dark' ? 'dark' : 'light';
-    }
-
-    /**
-     * Applies a theme to the document
-     */
-    private static applyTheme(theme: ThemeMode): void {
-        if (!this.elements) return;
-
-        this.root.setAttribute('data-theme', theme);
-
-        const isDark = theme === 'dark';
-        const { toggleBtn, icon } = this.elements;
-
-        // Update button state
-        toggleBtn.setAttribute('aria-pressed', String(isDark));
-        toggleBtn.setAttribute('aria-label', `Switch to ${isDark ? 'light' : 'dark'} mode`);
-
-        // Update icon — SVG sprite via <use> or font icon via class
-        const useEl = icon.querySelector('use');
-        if (useEl) {
-            const iconName = isDark ? icon.dataset.iconDark : icon.dataset.iconLight;
-            if (iconName) {
-                const existingHref = useEl.getAttribute('href') ?? '';
-                const basePath = existingHref.includes('#') ? existingHref.split('#')[0] : '';
-                useEl.setAttribute('href', `${basePath}#${iconName}`);
-            }
-        } else {
-            if (isDark) {
-                icon.classList.remove('icon-light');
-                icon.classList.add('icon-dark');
-            } else {
-                icon.classList.remove('icon-dark');
-                icon.classList.add('icon-light');
-            }
-        }
-    }
-
-    /**
-     * Toggles between light and dark theme
-     */
-    private static toggleTheme(): void {
-        if (!this.elements) return;
-
-        try {
-            const current = this.getCurrentTheme();
-            const next: ThemeMode = current === 'dark' ? 'light' : 'dark';
-
-            this.saveTheme(next);
-            this.applyTheme(next);
-        } catch (err) {
-            console.error('Error toggling theme', err);
-            if (this.elements.status) {
-                this.elements.status.textContent = 'Error toggling theme (see console).';
-            }
-        }
-    }
-
-    /**
-     * Binds click event to toggle button
-     */
-    private static bindToggleClick(): void {
-        if (!this.elements) return;
-
-        this.elements.toggleBtn.addEventListener('click', () => {
-            this.toggleTheme();
-        });
-    }
-
-    /**
-     * Binds keyboard shortcut (Ctrl/Cmd+J) for theme toggle
-     */
-    private static bindKeyboardShortcut(): void {
-        window.addEventListener('keydown', (ev: KeyboardEvent) => {
-            const isMac = /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
-            const modifierPressed = isMac ? ev.metaKey : ev.ctrlKey;
-
-            if (modifierPressed && ev.key.toLowerCase() === 'j') {
-                ev.preventDefault();
-                this.toggleTheme();
-            }
-        });
-    }
-
-    /**
-     * Binds listener for system theme changes
-     * Only applies if user hasn't explicitly saved a preference
-     */
-    private static bindSystemThemeChange(): void {
-        if (!this.mediaQuery) return;
-
-        const handler = (e: MediaQueryListEvent | MediaQueryList): void => {
-            // Only apply system theme if user hasn't saved a preference
-            if (!this.getSavedTheme()) {
-                const matches = 'matches' in e ? e.matches : (e as MediaQueryList).matches;
-                this.applyTheme(matches ? 'dark' : 'light');
-            }
-        };
-
-        // Modern API
-        if ('addEventListener' in this.mediaQuery) {
-            this.mediaQuery.addEventListener('change', handler as (e: MediaQueryListEvent) => void);
-        }
-        // Legacy API (deprecated but still supported in older browsers)
-        else if ('addListener' in this.mediaQuery) {
-            (this.mediaQuery as any).addListener(handler);
-        }
-    }
-
-    /**
-     * Public API: Get the current theme
-     */
-    public static getTheme(): ThemeMode {
-        return this.getCurrentTheme();
-    }
-
-    /**
-     * Public API: Set the theme programmatically
-     */
-    public static setTheme(theme: ThemeMode): void {
-        this.saveTheme(theme);
-        this.applyTheme(theme);
-    }
-
-    /**
-     * Public API: Reset to system preference
-     */
-    public static resetToSystem(): void {
-        try {
-            localStorage.removeItem(this.STORAGE_KEY);
-            const systemTheme = this.getSystemTheme();
-            this.applyTheme(systemTheme);
-        } catch (e) {
-            console.warn('Failed to reset theme', e);
-        }
-    }
-
-    /**
-     * Public API: Check if user has a saved preference
-     */
-    public static hasSavedPreference(): boolean {
-        return this.getSavedTheme() !== null;
-    }
-}
-
-export { Theme };