@shohojdhara/atomix 0.1.27 → 0.1.28

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

@@ -1,319 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,250 +0,0 @@
-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

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