@dodlhuat/basix 1.0.0

package/js/tabs.ts

@@ -0,0 +1,280 @@
+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 = document.querySelectorAll('.tab-item'); // Will be set in init
+        this.tabPanels = document.querySelectorAll('.tab-panel'); // Will be set in init
+
+        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.js

@@ -0,0 +1,194 @@
+class Theme {
+    /**
+     * Initializes the theme system with toggle functionality and system preference detection
+     */
+    static init() {
+        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
+     */
+    static getSavedTheme() {
+        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
+     */
+    static saveTheme(theme) {
+        try {
+            localStorage.setItem(this.STORAGE_KEY, theme);
+        }
+        catch (e) {
+            console.warn('localStorage.setItem failed', e);
+        }
+    }
+    /**
+     * Gets the system-preferred theme
+     */
+    static getSystemTheme() {
+        return this.mediaQuery?.matches ? 'dark' : 'light';
+    }
+    /**
+     * Gets the current active theme
+     */
+    static getCurrentTheme() {
+        const current = this.root.getAttribute('data-theme');
+        return current === 'dark' ? 'dark' : 'light';
+    }
+    /**
+     * Applies a theme to the document
+     */
+    static applyTheme(theme) {
+        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 classes
+        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
+     */
+    static toggleTheme() {
+        if (!this.elements)
+            return;
+        try {
+            const current = this.getCurrentTheme();
+            const next = 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
+     */
+    static bindToggleClick() {
+        if (!this.elements)
+            return;
+        this.elements.toggleBtn.addEventListener('click', () => {
+            this.toggleTheme();
+        });
+    }
+    /**
+     * Binds keyboard shortcut (Ctrl/Cmd+J) for theme toggle
+     */
+    static bindKeyboardShortcut() {
+        window.addEventListener('keydown', (ev) => {
+            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
+     */
+    static bindSystemThemeChange() {
+        if (!this.mediaQuery)
+            return;
+        const handler = (e) => {
+            // Only apply system theme if user hasn't saved a preference
+            if (!this.getSavedTheme()) {
+                const matches = 'matches' in e ? e.matches : e.matches;
+                this.applyTheme(matches ? 'dark' : 'light');
+            }
+        };
+        // Modern API
+        if ('addEventListener' in this.mediaQuery) {
+            this.mediaQuery.addEventListener('change', handler);
+        }
+        // Legacy API (deprecated but still supported in older browsers)
+        else if ('addListener' in this.mediaQuery) {
+            this.mediaQuery.addListener(handler);
+        }
+    }
+    /**
+     * Public API: Get the current theme
+     */
+    static getTheme() {
+        return this.getCurrentTheme();
+    }
+    /**
+     * Public API: Set the theme programmatically
+     */
+    static setTheme(theme) {
+        this.saveTheme(theme);
+        this.applyTheme(theme);
+    }
+    /**
+     * Public API: Reset to system preference
+     */
+    static resetToSystem() {
+        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
+     */
+    static hasSavedPreference() {
+        return this.getSavedTheme() !== null;
+    }
+}
+Theme.STORAGE_KEY = 'theme';
+Theme.elements = null;
+Theme.mediaQuery = null;
+export { Theme };

package/js/theme.ts

@@ -0,0 +1,225 @@
+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 classes
+        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 };