vanduo-framework 1.1.8

package/js/components/dropdown.js

@@ -0,0 +1,362 @@
+/**
+ * Vanduo Framework - Dropdown Component
+ * JavaScript functionality for dropdown menus
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Dropdown Component
+   */
+  const Dropdown = {
+    // Store initialized dropdowns and their cleanup functions
+    instances: new Map(),
+    // Typeahead state
+    _typeaheadBuffer: '',
+    _typeaheadTimer: null,
+
+    /**
+     * Initialize dropdown components
+     */
+    init: function() {
+      const dropdowns = document.querySelectorAll('.vd-dropdown');
+
+      dropdowns.forEach(dropdown => {
+        if (this.instances.has(dropdown)) {
+          return;
+        }
+        this.initDropdown(dropdown);
+      });
+    },
+
+    /**
+     * Initialize a single dropdown
+     * @param {HTMLElement} dropdown - Dropdown container
+     */
+    initDropdown: function(dropdown) {
+      const toggle = dropdown.querySelector('.vd-dropdown-toggle');
+      const menu = dropdown.querySelector('.vd-dropdown-menu');
+
+      if (!toggle || !menu) {
+        return;
+      }
+
+      const cleanupFunctions = [];
+
+      // Set ARIA attributes
+      toggle.setAttribute('aria-haspopup', 'true');
+      toggle.setAttribute('aria-expanded', 'false');
+      menu.setAttribute('role', 'menu');
+      menu.setAttribute('aria-hidden', 'true');
+
+      // Toggle on click
+      const toggleClickHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleDropdown(dropdown, toggle, menu);
+      };
+      toggle.addEventListener('click', toggleClickHandler);
+      cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));
+
+      // Close on outside click
+      const documentClickHandler = (e) => {
+        if (!dropdown.contains(e.target) && menu.classList.contains('is-open')) {
+          this.closeDropdown(dropdown, toggle, menu);
+        }
+      };
+      document.addEventListener('click', documentClickHandler);
+      cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));
+
+      // Keyboard navigation
+      const keydownHandler = (e) => {
+        this.handleKeydown(e, dropdown, toggle, menu);
+      };
+      toggle.addEventListener('keydown', keydownHandler);
+      cleanupFunctions.push(() => toggle.removeEventListener('keydown', keydownHandler));
+
+      // Handle item clicks
+      const items = menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)');
+      items.forEach(item => {
+        const itemClickHandler = (e) => {
+          e.preventDefault();
+          this.selectItem(item, dropdown, toggle, menu);
+        };
+        item.addEventListener('click', itemClickHandler);
+        cleanupFunctions.push(() => item.removeEventListener('click', itemClickHandler));
+
+        const itemKeydownHandler = (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.selectItem(item, dropdown, toggle, menu);
+          }
+        };
+        item.addEventListener('keydown', itemKeydownHandler);
+        cleanupFunctions.push(() => item.removeEventListener('keydown', itemKeydownHandler));
+      });
+
+      this.instances.set(dropdown, { toggle, menu, cleanup: cleanupFunctions });
+    },
+    
+    /**
+     * Toggle dropdown
+     * @param {HTMLElement} dropdown - Dropdown container
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Dropdown menu
+     */
+    toggleDropdown: function(dropdown, toggle, menu) {
+      const isOpen = menu.classList.contains('is-open');
+      
+      if (isOpen) {
+        this.closeDropdown(dropdown, toggle, menu);
+      } else {
+        this.openDropdown(dropdown, toggle, menu);
+      }
+    },
+    
+    /**
+     * Open dropdown
+     * @param {HTMLElement} dropdown - Dropdown container
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Dropdown menu
+     */
+    openDropdown: function(dropdown, toggle, menu) {
+      // Close other open dropdowns
+      const otherOpen = document.querySelectorAll('.vd-dropdown-menu.is-open');
+      otherOpen.forEach(otherMenu => {
+        if (otherMenu !== menu) {
+          const otherDropdown = otherMenu.closest('.vd-dropdown');
+          const otherToggle = otherDropdown.querySelector('.vd-dropdown-toggle');
+          this.closeDropdown(otherDropdown, otherToggle, otherMenu);
+        }
+      });
+      
+      dropdown.classList.add('is-open');
+      menu.classList.add('is-open');
+      toggle.setAttribute('aria-expanded', 'true');
+      menu.setAttribute('aria-hidden', 'false');
+      
+      // Position menu
+      this.positionMenu(dropdown, menu);
+      
+      // Focus first item
+      const firstItem = menu.querySelector('.vd-dropdown-item:not(.disabled):not(.is-disabled)');
+      if (firstItem) {
+        setTimeout(() => firstItem.focus(), 0);
+      }
+    },
+    
+    /**
+     * Close dropdown
+     * @param {HTMLElement} dropdown - Dropdown container
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Dropdown menu
+     */
+    closeDropdown: function(dropdown, toggle, menu) {
+      dropdown.classList.remove('is-open');
+      menu.classList.remove('is-open');
+      toggle.setAttribute('aria-expanded', 'false');
+      menu.setAttribute('aria-hidden', 'true');
+      
+      // Return focus to toggle
+      toggle.focus();
+    },
+    
+    /**
+     * Position dropdown menu
+     * @param {HTMLElement} dropdown - Dropdown container
+     * @param {HTMLElement} menu - Dropdown menu
+     */
+    positionMenu: function(dropdown, menu) {
+      const rect = dropdown.getBoundingClientRect();
+      const menuRect = menu.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const padding = 8;
+      
+      // Check if menu overflows right
+      if (rect.left + menuRect.width > viewportWidth - padding) {
+        menu.classList.add('vd-dropdown-menu-end');
+        menu.classList.remove('vd-dropdown-menu-start');
+      }
+      
+      // Check if menu overflows bottom (for top positioning)
+      if (menu.classList.contains('dropdown-menu-top')) {
+        if (rect.top - menuRect.height < padding) {
+          menu.classList.remove('vd-dropdown-menu-top');
+        }
+      } else {
+        if (rect.bottom + menuRect.height > viewportHeight - padding) {
+          menu.classList.add('vd-dropdown-menu-top');
+        }
+      }
+    },
+    
+    /**
+     * Handle keyboard navigation
+     * @param {KeyboardEvent} e - Keyboard event
+     * @param {HTMLElement} dropdown - Dropdown container
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Dropdown menu
+     */
+    handleKeydown: function(e, dropdown, toggle, menu) {
+      const isOpen = menu.classList.contains('is-open');
+      const items = Array.from(menu.querySelectorAll('.vd-dropdown-item:not(.disabled):not(.is-disabled)'));
+      const currentIndex = items.findIndex(item => item === document.activeElement);
+      
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+          e.preventDefault();
+          if (!isOpen) {
+            this.openDropdown(dropdown, toggle, menu);
+          } else if (e.key === 'ArrowDown') {
+            const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+            items[nextIndex].focus();
+          }
+          break;
+          
+        case 'ArrowUp':
+          if (isOpen) {
+            e.preventDefault();
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+            items[prevIndex].focus();
+          }
+          break;
+          
+        case 'Escape':
+          if (isOpen) {
+            e.preventDefault();
+            this.closeDropdown(dropdown, toggle, menu);
+          }
+          break;
+          
+        case 'Home':
+          if (isOpen) {
+            e.preventDefault();
+            items[0].focus();
+          }
+          break;
+          
+        case 'End':
+          if (isOpen) {
+            e.preventDefault();
+            items[items.length - 1].focus();
+          }
+          break;
+
+        default:
+          // Typeahead: jump to matching item when typing printable characters
+          if (isOpen && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            clearTimeout(this._typeaheadTimer);
+            this._typeaheadBuffer += e.key.toLowerCase();
+
+            const match = items.find(item =>
+              item.textContent.trim().toLowerCase().startsWith(this._typeaheadBuffer)
+            );
+            if (match) {
+              match.focus();
+            }
+
+            this._typeaheadTimer = setTimeout(() => {
+              this._typeaheadBuffer = '';
+            }, 500);
+          }
+          break;
+      }
+    },
+    
+    /**
+     * Select dropdown item
+     * @param {HTMLElement} item - Dropdown item
+     * @param {HTMLElement} dropdown - Dropdown container
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Dropdown menu
+     */
+    selectItem: function(item, dropdown, toggle, menu) {
+      // Remove active from all items
+      menu.querySelectorAll('.vd-dropdown-item').forEach(i => {
+        i.classList.remove('active', 'is-active');
+      });
+      
+      // Add active to selected item
+      item.classList.add('active', 'is-active');
+      
+      // Update toggle text if it's a button
+      if (toggle.tagName === 'BUTTON' || toggle.classList.contains('btn')) {
+        toggle.textContent = item.textContent.trim();
+      }
+      
+      // Close dropdown
+      this.closeDropdown(dropdown, toggle, menu);
+      
+      // Dispatch event
+      item.dispatchEvent(new CustomEvent('dropdown:select', { 
+        bubbles: true,
+        detail: { item, value: item.dataset.value || item.textContent }
+      }));
+    },
+    
+    /**
+     * Open dropdown programmatically
+     * @param {HTMLElement|string} dropdown - Dropdown container or selector
+     */
+    open: function(dropdown) {
+      const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;
+      if (el) {
+        const toggle = el.querySelector('.vd-dropdown-toggle');
+        const menu = el.querySelector('.vd-dropdown-menu');
+        if (toggle && menu) {
+          this.openDropdown(el, toggle, menu);
+        }
+      }
+    },
+    
+    /**
+     * Close dropdown programmatically
+     * @param {HTMLElement|string} dropdown - Dropdown container or selector
+     */
+    close: function(dropdown) {
+      const el = typeof dropdown === 'string' ? document.querySelector(dropdown) : dropdown;
+      if (el) {
+        const toggle = el.querySelector('.vd-dropdown-toggle');
+        const menu = el.querySelector('.vd-dropdown-menu');
+        if (toggle && menu) {
+          this.closeDropdown(el, toggle, menu);
+        }
+      }
+    },
+
+    /**
+     * Destroy a dropdown instance and clean up event listeners
+     * @param {HTMLElement} dropdown - Dropdown element
+     */
+    destroy: function(dropdown) {
+      const instance = this.instances.get(dropdown);
+      if (!instance) return;
+
+      instance.cleanup.forEach(fn => fn());
+      this.instances.delete(dropdown);
+    },
+
+    /**
+     * Destroy all dropdown instances
+     */
+    destroyAll: function() {
+      this.instances.forEach((instance, dropdown) => {
+        this.destroy(dropdown);
+      });
+    }
+  };
+  
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('dropdown', Dropdown);
+  }
+  
+  // Expose globally
+  window.VanduoDropdown = Dropdown;
+  
+})();
+

package/js/components/font-switcher.js

@@ -0,0 +1,253 @@
+/**
+ * Vanduo Framework - Font Switcher
+ * Handles font selection and persistence for previewing different typefaces
+ */
+
+(function() {
+  'use strict';
+
+  const FontSwitcher = {
+    STORAGE_KEY: 'vanduo-font-preference',
+    isInitialized: false,
+
+    // Available fonts configuration
+    fonts: {
+      'system': {
+        name: 'System Default',
+        family: null // Uses CSS default
+      },
+      'inter': {
+        name: 'Inter',
+        family: "'Inter', sans-serif"
+      },
+      'source-sans': {
+        name: 'Source Sans 3',
+        family: "'Source Sans 3', sans-serif"
+      },
+      'fira-sans': {
+        name: 'Fira Sans',
+        family: "'Fira Sans', sans-serif"
+      },
+      'ibm-plex': {
+        name: 'IBM Plex Sans',
+        family: "'IBM Plex Sans', sans-serif"
+      },
+      'jetbrains-mono': {
+        name: 'JetBrains Mono',
+        family: "'JetBrains Mono', monospace"
+      },
+      'ubuntu': {
+        name: 'Ubuntu',
+        family: "'Ubuntu', sans-serif",
+        category: 'sans-serif',
+        description: 'Friendly, humanist sans-serif'
+      },
+      'open-sans': {
+        name: 'Open Sans',
+        family: "'Open Sans', sans-serif",
+        category: 'sans-serif',
+        description: 'Neutral, highly readable'
+      },
+      'rubik': {
+        name: 'Rubik',
+        family: "'Rubik', sans-serif",
+        category: 'sans-serif',
+        description: 'Modern, geometric'
+      },
+      'titillium-web': {
+        name: 'Titillium Web',
+        family: "'Titillium Web', sans-serif",
+        category: 'sans-serif',
+        description: 'Technical, elegant'
+      }
+    },
+
+    init: function() {
+      this.state = {
+        preference: this.getPreference()
+      };
+
+      if (this.isInitialized) {
+        this.applyFont();
+        this.renderUI();
+        this.updateUI();
+        return;
+      }
+
+      this.isInitialized = true;
+
+      this.applyFont();
+      this.renderUI();
+
+      console.log('Vanduo Font Switcher initialized');
+    },
+
+    /**
+     * Get saved font preference from localStorage
+     * @returns {string} Font key or 'ubuntu' (default)
+     */
+    getPreference: function() {
+      return this.getStorageValue(this.STORAGE_KEY, 'ubuntu');
+    },
+
+    /**
+     * Set font preference and apply it
+     * @param {string} fontKey - The font key to apply
+     */
+    setPreference: function(fontKey) {
+      if (!this.fonts[fontKey]) {
+        console.warn('Unknown font:', fontKey);
+        return;
+      }
+
+      this.state.preference = fontKey;
+      this.setStorageValue(this.STORAGE_KEY, fontKey);
+      this.applyFont();
+      this.updateUI();
+
+      // Dispatch custom event for other components to listen to
+      const event = new CustomEvent('font:change', {
+        bubbles: true,
+        detail: { font: fontKey, fontData: this.fonts[fontKey] }
+      });
+      document.dispatchEvent(event);
+    },
+
+    /**
+     * Apply the current font preference to the document
+     */
+    applyFont: function() {
+      const fontKey = this.state.preference;
+
+      if (fontKey === 'system') {
+        // Remove data-font attribute to use system default
+        document.documentElement.removeAttribute('data-font');
+      } else {
+        // Set data-font attribute which triggers CSS variable override
+        document.documentElement.setAttribute('data-font', fontKey);
+      }
+    },
+
+    /**
+     * Initialize UI elements with data-toggle="font"
+     */
+    renderUI: function() {
+      const toggles = document.querySelectorAll('[data-toggle="font"]');
+
+      toggles.forEach(toggle => {
+        if (toggle.getAttribute('data-font-initialized') === 'true') {
+          if (toggle.tagName === 'SELECT') {
+            toggle.value = this.state.preference;
+          }
+          return;
+        }
+
+        if (toggle.tagName === 'SELECT') {
+          // Set initial value
+          toggle.value = this.state.preference;
+
+          // Listen for changes
+          const onChange = (e) => {
+            this.setPreference(e.target.value);
+          };
+          toggle.addEventListener('change', onChange);
+          toggle._fontToggleHandler = onChange;
+        } else {
+          // Button implementation - cycle through fonts
+          const onClick = () => {
+            const fontKeys = Object.keys(this.fonts);
+            const currentIndex = fontKeys.indexOf(this.state.preference);
+            const nextIndex = (currentIndex + 1) % fontKeys.length;
+            this.setPreference(fontKeys[nextIndex]);
+          };
+          toggle.addEventListener('click', onClick);
+          toggle._fontToggleHandler = onClick;
+        }
+
+        toggle.setAttribute('data-font-initialized', 'true');
+      });
+    },
+
+    /**
+     * Update all UI elements to reflect current state
+     */
+    updateUI: function() {
+      const toggles = document.querySelectorAll('[data-toggle="font"]');
+
+      toggles.forEach(toggle => {
+        if (toggle.tagName === 'SELECT') {
+          toggle.value = this.state.preference;
+        } else {
+          // Update button text if it has a label span
+          const label = toggle.querySelector('.font-current-label');
+          if (label) {
+            label.textContent = this.fonts[this.state.preference].name;
+          }
+        }
+      });
+    },
+
+    /**
+     * Get the current font preference
+     * @returns {string} Current font key
+     */
+    getCurrentFont: function() {
+      return this.state.preference;
+    },
+
+    /**
+     * Get font data for a given key
+     * @param {string} fontKey - The font key
+     * @returns {Object|null} Font data or null
+     */
+    getFontData: function(fontKey) {
+      return this.fonts[fontKey] || null;
+    },
+
+    destroyAll: function() {
+      const toggles = document.querySelectorAll('[data-toggle="font"][data-font-initialized="true"]');
+      toggles.forEach(toggle => {
+        if (toggle._fontToggleHandler) {
+          const eventName = toggle.tagName === 'SELECT' ? 'change' : 'click';
+          toggle.removeEventListener(eventName, toggle._fontToggleHandler);
+          delete toggle._fontToggleHandler;
+        }
+        toggle.removeAttribute('data-font-initialized');
+      });
+
+      this.isInitialized = false;
+    },
+
+    getStorageValue: function(key, fallback) {
+      if (typeof window.safeStorageGet === 'function') {
+        return window.safeStorageGet(key, fallback);
+      }
+      try {
+        const value = localStorage.getItem(key);
+        return value !== null ? value : fallback;
+      } catch (_e) {
+        return fallback;
+      }
+    },
+
+    setStorageValue: function(key, value) {
+      if (typeof window.safeStorageSet === 'function') {
+        return window.safeStorageSet(key, value);
+      }
+      try {
+        localStorage.setItem(key, value);
+        return true;
+      } catch (_e) {
+        return false;
+      }
+    }
+  };
+
+  // Register component
+  if (window.Vanduo) {
+    window.Vanduo.register('fontSwitcher', FontSwitcher);
+  }
+
+  // Expose globally for convenience
+  window.FontSwitcher = FontSwitcher;
+})();