vanduo-framework 1.1.8-docs-update

package/js/components/modals.js

@@ -0,0 +1,367 @@
+/**
+ * Vanduo Framework - Modals Component
+ * JavaScript functionality for modal dialogs
+ */
+
+(function () {
+  'use strict';
+
+  /**
+   * Modals Component
+   */
+  const Modals = {
+    modals: new Map(),
+    openModals: [],
+    zIndexCounter: 1050,
+
+    // Store trigger cleanup functions
+    _triggerCleanups: [],
+
+    /**
+     * Initialize modals
+     */
+    init: function () {
+      const modals = document.querySelectorAll('.vd-modal');
+
+      modals.forEach(modal => {
+        if (this.modals.has(modal)) {
+          return;
+        }
+        this.initModal(modal);
+      });
+
+      // Handle data-modal triggers
+      const triggers = document.querySelectorAll('[data-modal]');
+      triggers.forEach(trigger => {
+        if (trigger.dataset.modalTriggerInitialized) return;
+        trigger.dataset.modalTriggerInitialized = 'true';
+
+        const triggerClickHandler = (e) => {
+          e.preventDefault();
+          const modalId = trigger.dataset.modal;
+          const modal = document.querySelector(modalId);
+          if (modal) {
+            this.open(modal);
+          }
+        };
+        trigger.addEventListener('click', triggerClickHandler);
+        this._triggerCleanups.push(() => trigger.removeEventListener('click', triggerClickHandler));
+      });
+    },
+
+    /**
+     * Initialize a single modal
+     * @param {HTMLElement} modal - Modal element
+     */
+    initModal: function (modal) {
+      const backdrop = this.createBackdrop(modal);
+      const closeButtons = modal.querySelectorAll('.vd-modal-close, [data-dismiss="modal"]');
+      const dialog = modal.querySelector('.vd-modal-dialog');
+
+      if (!dialog) {
+        return;
+      }
+
+      const cleanupFunctions = [];
+
+      // Set ARIA attributes
+      modal.setAttribute('role', 'dialog');
+      modal.setAttribute('aria-modal', 'true');
+      modal.setAttribute('aria-hidden', 'true');
+
+      // Generate ID if not exists
+      if (!modal.id) {
+        modal.id = 'modal-' + Math.random().toString(36).substr(2, 9);
+      }
+
+      // Set aria-labelledby
+      const title = modal.querySelector('.vd-modal-title');
+      if (title && !title.id) {
+        title.id = modal.id + '-title';
+        modal.setAttribute('aria-labelledby', title.id);
+      }
+
+      // Close button handlers
+      closeButtons.forEach(button => {
+        const closeHandler = () => {
+          this.close(modal);
+        };
+        button.addEventListener('click', closeHandler);
+        cleanupFunctions.push(() => button.removeEventListener('click', closeHandler));
+      });
+
+      // Backdrop click handler
+      const backdropClickHandler = (e) => {
+        if (e.target === backdrop && modal.dataset.backdrop !== 'static') {
+          this.close(modal);
+        }
+      };
+      backdrop.addEventListener('click', backdropClickHandler);
+      cleanupFunctions.push(() => backdrop.removeEventListener('click', backdropClickHandler));
+
+      // ESC key handler
+      const escKeyHandler = (e) => {
+        if (e.key === 'Escape' && this.openModals.length > 0) {
+          const topModal = this.openModals[this.openModals.length - 1];
+          if (topModal === modal && topModal.dataset.keyboard !== 'false') {
+            this.close(topModal);
+          }
+        }
+      };
+      document.addEventListener('keydown', escKeyHandler);
+      cleanupFunctions.push(() => document.removeEventListener('keydown', escKeyHandler));
+
+      this.modals.set(modal, { backdrop, dialog, trapHandler: null, cleanup: cleanupFunctions });
+    },
+
+    /**
+     * Create backdrop element
+     * @param {HTMLElement} modal - Modal element
+     * @returns {HTMLElement} Backdrop element
+     */
+    createBackdrop: function (modal) {
+      let backdrop = modal.querySelector('.vd-modal-backdrop');
+
+      if (!backdrop) {
+        backdrop = document.createElement('div');
+        backdrop.className = 'vd-modal-backdrop';
+        document.body.appendChild(backdrop);
+      }
+
+      return backdrop;
+    },
+
+    /**
+     * Open modal
+     * @param {HTMLElement|string} modal - Modal element or selector
+     */
+    open: function (modal) {
+      const el = typeof modal === 'string' ? document.querySelector(modal) : modal;
+
+      if (!el) {
+        console.warn('[Vanduo Modals] Modal element not found:', modal);
+        return;
+      }
+
+      if (!this.modals.has(el)) {
+        console.warn('[Vanduo Modals] Modal not initialized:', el);
+        return;
+      }
+
+      const modalData = this.modals.get(el);
+      const { backdrop, dialog: _dialog } = modalData;
+
+      // Increment z-index for stacking
+      this.zIndexCounter += 10;
+      el.style.zIndex = this.zIndexCounter;
+      backdrop.style.zIndex = this.zIndexCounter - 1;
+
+      // Add to open modals stack
+      this.openModals.push(el);
+
+      // Show backdrop
+      backdrop.classList.add('is-visible');
+
+      // Show modal
+      el.classList.add('is-open');
+      el.setAttribute('aria-hidden', 'false');
+
+      // Lock body scroll
+      if (this.openModals.length === 1) {
+        document.body.classList.add('body-modal-open');
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        if (scrollbarWidth > 0) {
+          document.body.style.paddingRight = `${scrollbarWidth}px`;
+        }
+      }
+
+      // Focus trap (store handler for cleanup)
+      const trapHandler = this.trapFocus(el);
+      modalData.trapHandler = trapHandler;
+
+      // Auto-focus first focusable element
+      setTimeout(() => {
+        const firstFocusable = this.getFocusableElements(el)[0];
+        if (firstFocusable) {
+          firstFocusable.focus();
+        }
+      }, 100);
+
+      // Dispatch event
+      el.dispatchEvent(new CustomEvent('modal:open', { bubbles: true }));
+    },
+
+    /**
+     * Close modal
+     * @param {HTMLElement|string} modal - Modal element or selector
+     */
+    close: function (modal) {
+      const el = typeof modal === 'string' ? document.querySelector(modal) : modal;
+
+      if (!el) {
+        console.warn('[Vanduo Modals] Modal element not found:', modal);
+        return;
+      }
+
+      if (!this.modals.has(el)) {
+        console.warn('[Vanduo Modals] Modal not initialized:', el);
+        return;
+      }
+
+      const modalData = this.modals.get(el);
+      const { backdrop, trapHandler } = modalData;
+
+      // Remove focus trap event listener to prevent memory leak
+      if (trapHandler) {
+        el.removeEventListener('keydown', trapHandler);
+        modalData.trapHandler = null;
+      }
+
+      // Remove from open modals stack
+      const index = this.openModals.indexOf(el);
+      if (index > -1) {
+        this.openModals.splice(index, 1);
+      }
+
+      // Hide modal
+      el.classList.remove('is-open');
+      el.setAttribute('aria-hidden', 'true');
+
+      // Hide backdrop if no other modals open
+      if (this.openModals.length === 0) {
+        backdrop.classList.remove('is-visible');
+        document.body.classList.remove('body-modal-open');
+        document.body.style.paddingRight = '';
+        // Reset z-index counter to prevent indefinite growth
+        this.zIndexCounter = 1050;
+      } else {
+        // Show backdrop for top modal
+        const topModal = this.openModals[this.openModals.length - 1];
+        const topBackdrop = this.modals.get(topModal).backdrop;
+        topBackdrop.classList.add('is-visible');
+      }
+
+      // Return focus to trigger
+      const trigger = document.querySelector(`[data-modal="#${el.id}"]`);
+      if (trigger) {
+        trigger.focus();
+      }
+
+      // Dispatch event
+      el.dispatchEvent(new CustomEvent('modal:close', { bubbles: true }));
+    },
+
+    /**
+     * Trap focus within modal
+     * @param {HTMLElement} modal - Modal element
+     * @returns {Function} The trap handler function for cleanup
+     */
+    trapFocus: function (modal) {
+      const self = this;
+
+      const trapHandler = function (e) {
+        if (e.key !== 'Tab') {
+          return;
+        }
+
+        const focusableElements = self.getFocusableElements(modal);
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        if (e.shiftKey) {
+          // Shift + Tab
+          if (document.activeElement === firstElement) {
+            e.preventDefault();
+            lastElement.focus();
+          }
+        } else {
+          // Tab
+          if (document.activeElement === lastElement) {
+            e.preventDefault();
+            firstElement.focus();
+          }
+        }
+      };
+
+      modal.addEventListener('keydown', trapHandler);
+      return trapHandler;
+    },
+
+    /**
+     * Get focusable elements within modal
+     * @param {HTMLElement} modal - Modal element
+     * @returns {Array<HTMLElement>} Focusable elements
+     */
+    getFocusableElements: function (modal) {
+      const selector = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+      return Array.from(modal.querySelectorAll(selector)).filter(el => {
+        return !el.hasAttribute('disabled') &&
+          el.offsetWidth > 0 &&
+          el.offsetHeight > 0;
+      });
+    },
+
+    /**
+     * Toggle modal
+     * @param {HTMLElement|string} modal - Modal element or selector
+     */
+    toggle: function (modal) {
+      const el = typeof modal === 'string' ? document.querySelector(modal) : modal;
+      if (el) {
+        if (el.classList.contains('is-open')) {
+          this.close(el);
+        } else {
+          this.open(el);
+        }
+      }
+    },
+
+    /**
+     * Destroy a modal instance and clean up event listeners
+     * @param {HTMLElement} modal - Modal element
+     */
+    destroy: function (modal) {
+      const modalData = this.modals.get(modal);
+      if (!modalData) return;
+
+      // Close if open
+      if (modal.classList.contains('is-open')) {
+        this.close(modal);
+      }
+
+      // Run all cleanup functions
+      if (modalData.cleanup) {
+        modalData.cleanup.forEach(fn => fn());
+      }
+
+      // Remove created backdrop
+      if (modalData.backdrop && modalData.backdrop.parentNode) {
+        modalData.backdrop.parentNode.removeChild(modalData.backdrop);
+      }
+
+      this.modals.delete(modal);
+    },
+
+    /**
+     * Destroy all modal instances
+     */
+    destroyAll: function () {
+      this.modals.forEach((data, modal) => {
+        this.destroy(modal);
+      });
+      // Clean up trigger listeners
+      this._triggerCleanups.forEach(fn => fn());
+      this._triggerCleanups = [];
+    }
+  };
+
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('modals', Modals);
+  }
+
+  // Expose globally
+  window.VanduoModals = Modals;
+
+})();
+

package/js/components/navbar.js

@@ -0,0 +1,264 @@
+/**
+ * Vanduo Framework - Navbar Component
+ * JavaScript functionality for navbar mobile menu
+ */
+
+(function () {
+  'use strict';
+
+  /**
+   * Navbar Component
+   */
+  const Navbar = {
+    // Store initialized navbars and their cleanup functions
+    instances: new Map(),
+
+    /**
+     * Get the breakpoint value from CSS variable or use fallback
+     * @returns {number} Breakpoint in pixels
+     */
+    getBreakpoint: function () {
+      const root = getComputedStyle(document.documentElement);
+      const breakpointValue = root.getPropertyValue('--breakpoint-lg').trim();
+
+      // Parse the value (could be "992px" or just "992")
+      const parsed = parseInt(breakpointValue, 10);
+      return isNaN(parsed) ? 992 : parsed;
+    },
+
+    /**
+     * Initialize navbar component
+     */
+    init: function () {
+      const navbars = document.querySelectorAll('.vd-navbar');
+
+      navbars.forEach(navbar => {
+        // Skip if already initialized
+        if (this.instances.has(navbar)) {
+          return;
+        }
+        this.initNavbar(navbar);
+      });
+    },
+
+    /**
+     * Initialize a single navbar
+     * @param {HTMLElement} navbar - Navbar element
+     */
+    initNavbar: function (navbar) {
+      const toggle = navbar.querySelector('.vd-navbar-toggle, .vd-navbar-burger');
+      const menu = navbar.querySelector('.vd-navbar-menu');
+      const overlay = navbar.querySelector('.vd-navbar-overlay') || this.createOverlay(navbar);
+
+      if (!toggle || !menu) {
+        return;
+      }
+
+      // Store cleanup functions for this navbar instance
+      const cleanupFunctions = [];
+
+      // Toggle menu on button click
+      const toggleClickHandler = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleMenu(navbar, toggle, menu, overlay);
+      };
+      toggle.addEventListener('click', toggleClickHandler);
+      cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));
+
+      // Close menu on overlay click
+      if (overlay) {
+        const overlayClickHandler = () => {
+          this.closeMenu(navbar, toggle, menu, overlay);
+        };
+        overlay.addEventListener('click', overlayClickHandler);
+        cleanupFunctions.push(() => overlay.removeEventListener('click', overlayClickHandler));
+      }
+
+      // Close menu on escape key
+      const keydownHandler = (e) => {
+        if (e.key === 'Escape' && menu.classList.contains('is-open')) {
+          this.closeMenu(navbar, toggle, menu, overlay);
+        }
+      };
+      document.addEventListener('keydown', keydownHandler);
+      cleanupFunctions.push(() => document.removeEventListener('keydown', keydownHandler));
+
+      // Close menu on window resize (if resizing to desktop)
+      let resizeTimer;
+      const resizeHandler = () => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+          const breakpoint = this.getBreakpoint();
+          if (window.innerWidth >= breakpoint && menu.classList.contains('is-open')) {
+            this.closeMenu(navbar, toggle, menu, overlay);
+          }
+        }, 250);
+      };
+      window.addEventListener('resize', resizeHandler);
+      cleanupFunctions.push(() => {
+        clearTimeout(resizeTimer);
+        window.removeEventListener('resize', resizeHandler);
+      });
+
+      // Close menu when clicking outside
+      const documentClickHandler = (e) => {
+        if (menu.classList.contains('is-open') &&
+          !navbar.contains(e.target) &&
+          !menu.contains(e.target)) {
+          this.closeMenu(navbar, toggle, menu, overlay);
+        }
+      };
+      document.addEventListener('click', documentClickHandler);
+      cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));
+
+      // Handle dropdown toggles in mobile menu
+      const dropdownToggles = menu.querySelectorAll('.vd-navbar-dropdown > .vd-nav-link, .vd-navbar-dropdown > .nav-link');
+      dropdownToggles.forEach(dropdownToggle => {
+        const dropdownClickHandler = (e) => {
+          const breakpoint = this.getBreakpoint();
+          if (window.innerWidth < breakpoint) {
+            e.preventDefault();
+            const dropdown = dropdownToggle.parentElement;
+            const dropdownMenu = dropdown.querySelector('.vd-navbar-dropdown-menu');
+
+            if (dropdownMenu) {
+              dropdownMenu.classList.toggle('is-open');
+            }
+          }
+        };
+        dropdownToggle.addEventListener('click', dropdownClickHandler);
+        cleanupFunctions.push(() => dropdownToggle.removeEventListener('click', dropdownClickHandler));
+      });
+
+      // Store instance with cleanup functions
+      this.instances.set(navbar, {
+        toggle,
+        menu,
+        overlay,
+        cleanup: cleanupFunctions
+      });
+    },
+
+    /**
+     * Destroy a navbar instance and clean up event listeners
+     * @param {HTMLElement} navbar - Navbar element
+     */
+    destroy: function (navbar) {
+      const instance = this.instances.get(navbar);
+      if (!instance) {
+        return;
+      }
+
+      // Run all cleanup functions
+      instance.cleanup.forEach(fn => fn());
+
+      // Remove created overlay if it exists
+      if (instance.overlay && instance.overlay.parentNode) {
+        instance.overlay.parentNode.removeChild(instance.overlay);
+      }
+
+      // Remove from instances map
+      this.instances.delete(navbar);
+    },
+
+    /**
+     * Destroy all navbar instances
+     */
+    destroyAll: function () {
+      this.instances.forEach((instance, navbar) => {
+        this.destroy(navbar);
+      });
+    },
+
+    /**
+     * Toggle mobile menu
+     * @param {HTMLElement} navbar - Navbar element
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Menu element
+     * @param {HTMLElement} overlay - Overlay element
+     */
+    toggleMenu: function (navbar, toggle, menu, overlay) {
+      const isOpen = menu.classList.contains('is-open');
+
+      if (isOpen) {
+        this.closeMenu(navbar, toggle, menu, overlay);
+      } else {
+        this.openMenu(navbar, toggle, menu, overlay);
+      }
+    },
+
+    /**
+     * Open mobile menu
+     * @param {HTMLElement} navbar - Navbar element
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Menu element
+     * @param {HTMLElement} overlay - Overlay element
+     */
+    openMenu: function (navbar, toggle, menu, overlay) {
+      menu.classList.add('is-open');
+      toggle.classList.add('is-active');
+
+      if (overlay) {
+        overlay.classList.add('is-active');
+      }
+
+      // Prevent body scroll when menu is open
+      document.body.style.overflow = 'hidden';
+
+      // Set ARIA attributes
+      toggle.setAttribute('aria-expanded', 'true');
+      menu.setAttribute('aria-hidden', 'false');
+    },
+
+    /**
+     * Close mobile menu
+     * @param {HTMLElement} navbar - Navbar element
+     * @param {HTMLElement} toggle - Toggle button
+     * @param {HTMLElement} menu - Menu element
+     * @param {HTMLElement} overlay - Overlay element
+     */
+    closeMenu: function (navbar, toggle, menu, overlay) {
+      menu.classList.remove('is-open');
+      toggle.classList.remove('is-active');
+
+      if (overlay) {
+        overlay.classList.remove('is-active');
+      }
+
+      // Restore body scroll
+      document.body.style.overflow = '';
+
+      // Close all dropdown menus
+      const dropdownMenus = menu.querySelectorAll('.vd-navbar-dropdown-menu.is-open');
+      dropdownMenus.forEach(dropdownMenu => {
+        dropdownMenu.classList.remove('is-open');
+      });
+
+      // Set ARIA attributes
+      toggle.setAttribute('aria-expanded', 'false');
+      menu.setAttribute('aria-hidden', 'true');
+    },
+
+    /**
+     * Create overlay element if it doesn't exist
+     * @param {HTMLElement} navbar - Navbar element
+     * @returns {HTMLElement} Overlay element
+     */
+    createOverlay: function (_navbar) {
+      const overlay = document.createElement('div');
+      overlay.className = 'vd-navbar-overlay';
+      document.body.appendChild(overlay);
+      return overlay;
+    }
+  };
+
+  // Register with Vanduo framework if available
+  if (typeof window.Vanduo !== 'undefined') {
+    window.Vanduo.register('navbar', Navbar);
+  }
+
+  // Expose globally
+  window.VanduoNavbar = Navbar;
+
+})();