@shohojdhara/atomix 0.1.16 → 0.1.18

package/src/components/Navigation/scripts/SideMenu.ts

@@ -0,0 +1,319 @@
+import { SIDE_MENU } from '../../../lib/constants/components';
+
+/**
+ * Default options for SideMenu component
+ */
+const DEFAULTS = {
+  collapsible: true,
+  open: false,
+  title: '',
+  toggleIcon: '▶',
+  keyboard: true,
+  autoOpen: true, // Auto-open on desktop
+};
+
+/**
+ * SideMenu component class for vanilla JavaScript implementation
+ * Provides collapsible side navigation functionality with responsive behavior
+ *
+ * @example
+ * ```js
+ * // Initialize a side menu
+ * const sideMenu = new SideMenu('.c-side-menu', {
+ *   collapsible: true,
+ *   autoOpen: true
+ * });
+ *
+ * // Control programmatically
+ * sideMenu.open();
+ * sideMenu.close();
+ * sideMenu.toggle();
+ * ```
+ */
+export default class SideMenu {
+  private element: HTMLElement;
+  private options: any;
+  private toggler: HTMLElement | null = null;
+  private wrapper: HTMLElement | null = null;
+  private inner: HTMLElement | null = null;
+  private togglerIcon: HTMLElement | null = null;
+  private isOpen: boolean = false;
+  private resizeHandler: () => void;
+
+  /**
+   * Create a new SideMenu instance
+   * @param element - The side menu element or selector
+   * @param options - Configuration options
+   */
+  constructor(element: string | HTMLElement, options: any = {}) {
+    this.element =
+      typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+    if (!this.element) {
+      throw new Error('SideMenu element not found');
+    }
+
+    this.options = { ...DEFAULTS, ...options };
+    this.resizeHandler = this._handleResize.bind(this);
+    this._init();
+  }
+
+  /**
+   * Initialize the side menu component
+   * @private
+   */
+  private _init(): void {
+    this._findElements();
+    this._bindEvents();
+    this._setInitialState();
+  }
+
+  /**
+   * Find required DOM elements
+   * @private
+   */
+  private _findElements(): void {
+    this.toggler = this.element.querySelector(SIDE_MENU.SELECTORS.TOGGLER);
+    this.wrapper = this.element.querySelector(SIDE_MENU.SELECTORS.WRAPPER);
+    this.inner = this.element.querySelector(SIDE_MENU.SELECTORS.INNER);
+    this.togglerIcon = this.element.querySelector(SIDE_MENU.SELECTORS.TOGGLER_ICON);
+  }
+
+  /**
+   * Bind event listeners
+   * @private
+   */
+  private _bindEvents(): void {
+    if (this.toggler) {
+      this.toggler.addEventListener('click', this._handleToggleClick.bind(this));
+    }
+
+    if (this.options.keyboard && this.toggler) {
+      this.toggler.addEventListener('keydown', this._handleKeydown.bind(this));
+    }
+
+    // Handle window resize for responsive behavior
+    window.addEventListener('resize', this.resizeHandler);
+  }
+
+  /**
+   * Set initial component state
+   * @private
+   */
+  private _setInitialState(): void {
+    this.isOpen = this.options.open || false;
+    this._handleResize(); // Set initial responsive state
+  }
+
+  /**
+   * Handle toggle button click
+   * @private
+   */
+  private _handleToggleClick(event: Event): void {
+    event.preventDefault();
+    this.toggle();
+  }
+
+  /**
+   * Handle keyboard events
+   * @private
+   */
+  private _handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+
+  /**
+   * Handle window resize for responsive behavior
+   * @private
+   */
+  private _handleResize(): void {
+    const isMobile = window.innerWidth < 768; // MD breakpoint
+
+    if (!this.options.collapsible) {
+      // Always open if not collapsible
+      this._updateOpenState(true, false);
+      return;
+    }
+
+    if (!isMobile && this.options.autoOpen) {
+      // Auto-open on desktop
+      this._updateOpenState(true, false);
+
+      // Reset wrapper height on desktop
+      if (this.wrapper) {
+        this.wrapper.style.height = 'auto';
+      }
+    } else if (isMobile) {
+      // Set proper height for mobile animation
+      this._updateWrapperHeight();
+    }
+  }
+
+  /**
+   * Update wrapper height for mobile animation
+   * @private
+   */
+  private _updateWrapperHeight(): void {
+    if (!this.wrapper || !this.inner) return;
+
+    const isMobile = window.innerWidth < 768;
+
+    if (isMobile && this.options.collapsible) {
+      if (this.isOpen) {
+        this.wrapper.style.height = `${this.inner.scrollHeight}px`;
+      } else {
+        this.wrapper.style.height = '0px';
+      }
+    } else {
+      this.wrapper.style.height = 'auto';
+    }
+  }
+
+  /**
+   * Update the open state and DOM
+   * @private
+   */
+  private _updateOpenState(newState: boolean, animate: boolean = true): void {
+    this.isOpen = newState;
+
+    // Update toggler aria-expanded
+    if (this.toggler) {
+      this.toggler.setAttribute('aria-expanded', this.isOpen.toString());
+    }
+
+    // Update wrapper aria-hidden
+    if (this.wrapper) {
+      this.wrapper.setAttribute('aria-hidden', (!this.isOpen).toString());
+    }
+
+    // Update CSS classes
+    if (this.isOpen) {
+      this.element.classList.add(SIDE_MENU.CLASSES.IS_OPEN);
+    } else {
+      this.element.classList.remove(SIDE_MENU.CLASSES.IS_OPEN);
+    }
+
+    // Update wrapper height for mobile
+    if (animate) {
+      this._updateWrapperHeight();
+    }
+
+    // Dispatch custom event
+    const eventType = this.isOpen ? 'sidemenu:opened' : 'sidemenu:closed';
+    const customEvent = new CustomEvent(eventType, {
+      detail: { sideMenu: this, open: this.isOpen },
+    });
+    this.element.dispatchEvent(customEvent);
+  }
+
+  /**
+   * Open the side menu
+   */
+  public open(): void {
+    if (this.isOpen) return;
+    this._updateOpenState(true);
+  }
+
+  /**
+   * Close the side menu
+   */
+  public close(): void {
+    if (!this.isOpen) return;
+    this._updateOpenState(false);
+  }
+
+  /**
+   * Toggle the side menu open state
+   */
+  public toggle(): void {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /**
+   * Get the current open state
+   * @returns Whether the side menu is open
+   */
+  public isOpened(): boolean {
+    return this.isOpen;
+  }
+
+  /**
+   * Update side menu options
+   * @param newOptions - New options to merge
+   */
+  public updateOptions(newOptions: Partial<typeof DEFAULTS>): void {
+    this.options = { ...this.options, ...newOptions };
+
+    // Re-apply responsive behavior if autoOpen changed
+    if ('autoOpen' in newOptions) {
+      this._handleResize();
+    }
+  }
+
+  /**
+   * Set active menu item
+   * @param selector - Selector for the menu item to activate
+   */
+  public setActiveItem(selector: string): void {
+    // Remove active class from all items
+    const allItems = this.element.querySelectorAll(SIDE_MENU.SELECTORS.LINK);
+    allItems.forEach(item => {
+      item.classList.remove(SIDE_MENU.CLASSES.ACTIVE);
+      item.removeAttribute('aria-current');
+    });
+
+    // Add active class to selected item
+    const activeItem = this.element.querySelector(selector);
+    if (activeItem) {
+      activeItem.classList.add(SIDE_MENU.CLASSES.ACTIVE);
+      activeItem.setAttribute('aria-current', 'page');
+    }
+  }
+
+  /**
+   * Get all menu items
+   * @returns Array of menu item elements
+   */
+  public getMenuItems(): HTMLElement[] {
+    return Array.from(this.element.querySelectorAll(SIDE_MENU.SELECTORS.LINK));
+  }
+
+  /**
+   * Destroy the side menu instance and clean up
+   */
+  public destroy(): void {
+    // Remove event listeners
+    if (this.toggler) {
+      this.toggler.removeEventListener('click', this._handleToggleClick);
+      this.toggler.removeEventListener('keydown', this._handleKeydown);
+    }
+
+    window.removeEventListener('resize', this.resizeHandler);
+
+    // Reset DOM state
+    this.element.classList.remove(SIDE_MENU.CLASSES.IS_OPEN);
+
+    if (this.wrapper) {
+      this.wrapper.style.height = '';
+      this.wrapper.removeAttribute('aria-hidden');
+    }
+
+    if (this.toggler) {
+      this.toggler.removeAttribute('aria-expanded');
+    }
+
+    // Clear references
+    this.element = null as any;
+    this.toggler = null;
+    this.wrapper = null;
+    this.inner = null;
+    this.togglerIcon = null;
+  }
+}

package/src/components/Navigation/scripts/SideMenuBundle.ts

@@ -0,0 +1,69 @@
+import SideMenu from './SideMenu';
+import {
+  initFromDataAttributes,
+  getInstance,
+  create,
+  disposeAll,
+  openAll,
+  closeAll,
+  toggleAll,
+  getAllInstances,
+  setActiveByHref,
+  setActiveByText,
+  setupGlobalEventDelegation,
+  autoSetActiveFromURL,
+} from './SideMenuInteractions';
+
+// Global registration for browser environments
+if (typeof window !== 'undefined') {
+  // Initialize the Atomix global object if it doesn't exist
+  (window as any).Atomix = (window as any).Atomix || {};
+
+  // Add SideMenu to the global Atomix object
+  (window as any).Atomix.SideMenu = {
+    create: create,
+    init: initFromDataAttributes,
+    get: getInstance,
+    disposeAll: disposeAll,
+    openAll: openAll,
+    closeAll: closeAll,
+    toggleAll: toggleAll,
+    getAllInstances: getAllInstances,
+    setActiveByHref: setActiveByHref,
+    setActiveByText: setActiveByText,
+    setupGlobalEventDelegation: setupGlobalEventDelegation,
+    autoSetActiveFromURL: autoSetActiveFromURL,
+    // Direct class access
+    SideMenu: SideMenu,
+  };
+
+  // Auto-initialize side menus when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initFromDataAttributes();
+      setupGlobalEventDelegation();
+      autoSetActiveFromURL();
+    });
+  } else {
+    initFromDataAttributes();
+    setupGlobalEventDelegation();
+    autoSetActiveFromURL();
+  }
+}
+
+// Export everything for module bundling
+export {
+  SideMenu as default,
+  initFromDataAttributes,
+  getInstance,
+  create,
+  disposeAll,
+  openAll,
+  closeAll,
+  toggleAll,
+  getAllInstances,
+  setActiveByHref,
+  setActiveByText,
+  setupGlobalEventDelegation,
+  autoSetActiveFromURL,
+};

package/src/components/Navigation/scripts/SideMenuInteractions.ts

@@ -0,0 +1,250 @@
+import SideMenu from './SideMenu';
+import { SIDE_MENU } from '../../../lib/constants/components';
+
+/**
+ * Parse data attributes from an element to create side menu options
+ * @param element - The side menu element
+ * @returns Parsed options object
+ */
+function parseDataAttributes(element: HTMLElement): any {
+  const dataset = element.dataset;
+
+  return {
+    collapsible: dataset.collapsible !== 'false',
+    open: dataset.open === 'true',
+    title: dataset.title || '',
+    keyboard: dataset.keyboard !== 'false',
+    autoOpen: dataset.autoOpen !== 'false',
+  };
+}
+
+/**
+ * Initialize side menu components from data attributes
+ * Finds all elements with [data-side-menu] and creates SideMenu instances
+ *
+ * @example
+ * ```html
+ * <div class="c-side-menu" data-side-menu data-collapsible="true" data-auto-open="true">
+ *   <div class="c-side-menu__toggler">
+ *     <span class="c-side-menu__title">Navigation</span>
+ *     <span class="c-side-menu__toggler-icon">▶</span>
+ *   </div>
+ *   <div class="c-side-menu__wrapper">
+ *     <div class="c-side-menu__inner">
+ *       <!-- menu content -->
+ *     </div>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * @returns Array of created SideMenu instances
+ */
+export function initFromDataAttributes(): SideMenu[] {
+  const instances: SideMenu[] = [];
+
+  document.querySelectorAll('[data-side-menu]').forEach(element => {
+    const options = parseDataAttributes(element as HTMLElement);
+    const instance = new SideMenu(element as HTMLElement, options);
+    instances.push(instance);
+
+    // Store instance reference on the element for later retrieval
+    (element as any)._sideMenuInstance = instance;
+  });
+
+  return instances;
+}
+
+/**
+ * Get a side menu instance from an element
+ * @param element - The side menu element or selector
+ * @returns The SideMenu instance or null if not found
+ */
+export function getInstance(element: string | HTMLElement): SideMenu | null {
+  const el =
+    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+  if (!el) return null;
+
+  return (el as any)._sideMenuInstance || null;
+}
+
+/**
+ * Create a new side menu instance programmatically
+ * @param element - The side menu element or selector
+ * @param options - Configuration options
+ * @returns New SideMenu instance
+ */
+export function create(element: string | HTMLElement, options: any = {}): SideMenu {
+  const instance = new SideMenu(element, options);
+
+  // Store instance reference
+  const el =
+    typeof element === 'string' ? (document.querySelector(element) as HTMLElement) : element;
+
+  if (el) {
+    (el as any)._sideMenuInstance = instance;
+  }
+
+  return instance;
+}
+
+/**
+ * Dispose all side menu instances
+ * Destroys all side menu instances and cleans up references
+ */
+export function disposeAll(): void {
+  document.querySelectorAll(SIDE_MENU.SELECTORS.SIDE_MENU).forEach(element => {
+    const instance = (element as any)._sideMenuInstance;
+    if (instance && typeof instance.destroy === 'function') {
+      instance.destroy();
+      delete (element as any)._sideMenuInstance;
+    }
+  });
+}
+
+/**
+ * Open all side menu instances
+ */
+export function openAll(): void {
+  document.querySelectorAll(SIDE_MENU.SELECTORS.SIDE_MENU).forEach(element => {
+    const instance = (element as any)._sideMenuInstance;
+    if (instance && typeof instance.open === 'function') {
+      instance.open();
+    }
+  });
+}
+
+/**
+ * Close all side menu instances
+ */
+export function closeAll(): void {
+  document.querySelectorAll(SIDE_MENU.SELECTORS.SIDE_MENU).forEach(element => {
+    const instance = (element as any)._sideMenuInstance;
+    if (instance && typeof instance.close === 'function') {
+      instance.close();
+    }
+  });
+}
+
+/**
+ * Toggle all side menu instances
+ */
+export function toggleAll(): void {
+  document.querySelectorAll(SIDE_MENU.SELECTORS.SIDE_MENU).forEach(element => {
+    const instance = (element as any)._sideMenuInstance;
+    if (instance && typeof instance.toggle === 'function') {
+      instance.toggle();
+    }
+  });
+}
+
+/**
+ * Get all side menu instances
+ * @returns Array of all SideMenu instances
+ */
+export function getAllInstances(): SideMenu[] {
+  const instances: SideMenu[] = [];
+
+  document.querySelectorAll(SIDE_MENU.SELECTORS.SIDE_MENU).forEach(element => {
+    const instance = (element as any)._sideMenuInstance;
+    if (instance) {
+      instances.push(instance);
+    }
+  });
+
+  return instances;
+}
+
+/**
+ * Set active menu item across all side menus
+ * @param href - The href to match for setting active state
+ */
+export function setActiveByHref(href: string): void {
+  document.querySelectorAll(SIDE_MENU.SELECTORS.SIDE_MENU).forEach(element => {
+    const instance = (element as any)._sideMenuInstance;
+    if (instance && typeof instance.setActiveItem === 'function') {
+      instance.setActiveItem(`[href="${href}"]`);
+    }
+  });
+}
+
+/**
+ * Set active menu item by text content
+ * @param text - The text content to match for setting active state
+ */
+export function setActiveByText(text: string): void {
+  document.querySelectorAll(SIDE_MENU.SELECTORS.SIDE_MENU).forEach(element => {
+    const links = element.querySelectorAll(SIDE_MENU.SELECTORS.LINK);
+
+    // Remove active from all links
+    links.forEach(link => {
+      link.classList.remove(SIDE_MENU.CLASSES.ACTIVE);
+      link.removeAttribute('aria-current');
+    });
+
+    // Find and activate matching link
+    links.forEach(link => {
+      if (link.textContent?.trim() === text) {
+        link.classList.add(SIDE_MENU.CLASSES.ACTIVE);
+        link.setAttribute('aria-current', 'page');
+      }
+    });
+  });
+}
+
+/**
+ * Event delegation helper for side menu togglers
+ * Handles clicks on side menu togglers throughout the document
+ */
+export function setupGlobalEventDelegation(): void {
+  document.addEventListener('click', event => {
+    const target = event.target as HTMLElement;
+    const toggler = target.closest(SIDE_MENU.SELECTORS.TOGGLER);
+
+    if (toggler) {
+      const sideMenu = toggler.closest(SIDE_MENU.SELECTORS.SIDE_MENU);
+      if (sideMenu) {
+        const instance = getInstance(sideMenu as HTMLElement);
+        if (instance) {
+          event.preventDefault();
+          instance.toggle();
+        }
+      }
+    }
+  });
+
+  // Handle keyboard events for togglers
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      const target = event.target as HTMLElement;
+      const toggler = target.closest(SIDE_MENU.SELECTORS.TOGGLER);
+
+      if (toggler) {
+        const sideMenu = toggler.closest(SIDE_MENU.SELECTORS.SIDE_MENU);
+        if (sideMenu) {
+          const instance = getInstance(sideMenu as HTMLElement);
+          if (instance) {
+            event.preventDefault();
+            instance.toggle();
+          }
+        }
+      }
+    }
+  });
+}
+
+/**
+ * Auto-set active menu items based on current URL
+ */
+export function autoSetActiveFromURL(): void {
+  const currentPath = window.location.pathname;
+  const currentHref = window.location.href;
+
+  // Try to match by full href first, then by pathname
+  setActiveByHref(currentHref);
+
+  // If no match found, try pathname
+  if (!document.querySelector(`${SIDE_MENU.SELECTORS.LINK}.${SIDE_MENU.CLASSES.ACTIVE}`)) {
+    setActiveByHref(currentPath);
+  }
+}

package/src/components/Navigation/scripts/bundle.ts

@@ -0,0 +1,58 @@
+import Navbar from './index';
+import {
+  initFromDataAttributes,
+  getInstance,
+  create,
+  disposeAll,
+  expandAll,
+  collapseAll,
+  toggleAll,
+  getAllInstances,
+  setupGlobalEventDelegation,
+} from './NavbarInteractions';
+
+// Global registration for browser environments
+if (typeof window !== 'undefined') {
+  // Initialize the Atomix global object if it doesn't exist
+  (window as any).Atomix = (window as any).Atomix || {};
+
+  // Add Navbar to the global Atomix object
+  (window as any).Atomix.Navbar = {
+    create: create,
+    init: initFromDataAttributes,
+    get: getInstance,
+    disposeAll: disposeAll,
+    expandAll: expandAll,
+    collapseAll: collapseAll,
+    toggleAll: toggleAll,
+    getAllInstances: getAllInstances,
+    setupGlobalEventDelegation: setupGlobalEventDelegation,
+    // Direct class access
+    Navbar: Navbar,
+  };
+
+  // Auto-initialize navbars when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initFromDataAttributes();
+      setupGlobalEventDelegation();
+    });
+  } else {
+    initFromDataAttributes();
+    setupGlobalEventDelegation();
+  }
+}
+
+// Export everything for module bundling
+export {
+  Navbar as default,
+  initFromDataAttributes,
+  getInstance,
+  create,
+  disposeAll,
+  expandAll,
+  collapseAll,
+  toggleAll,
+  getAllInstances,
+  setupGlobalEventDelegation,
+};