mtrl 0.2.9 → 0.3.0

package/src/components/navigation/system/index.ts

@@ -0,0 +1,184 @@
+// src/components/navigation/system/index.ts
+
+import { 
+  NavigationSystemConfig, 
+  NavigationSystemState, 
+  NavigationSystem,
+  ViewChangeEvent
+} from './types';
+
+import { 
+  createInitialState, 
+  createConfig, 
+  createMobileConfig 
+} from './state';
+
+import {
+  createRailNavigation,
+  createDrawerNavigation,
+  updateDrawerContent,
+  showDrawer as showDrawerCore,
+  hideDrawer as hideDrawerCore,
+  isDrawerVisible as isDrawerVisibleCore,
+  checkMobileState as checkMobileStateCore,
+  cleanupResources,
+  navigateTo as navigateToCore
+} from './core';
+
+import {
+  registerRailEvents,
+  registerDrawerEvents,
+  setupResponsiveHandling,
+  cleanupEvents
+} from './events';
+
+import {
+  setupMobileMode as setupMobileModeCore,
+  teardownMobileMode
+} from './mobile';
+
+/**
+ * Creates a complete navigation system with synchronized rail and drawer components
+ * 
+ * @param options - System configuration options
+ * @returns Navigation system API
+ */
+export const createNavigationSystem = (options: NavigationSystemConfig = {}): NavigationSystem => {
+  // Initialize state and configuration
+  const state = createInitialState(options);
+  const config = createConfig(options);
+  const mobileConfig = createMobileConfig(options);
+
+  // Create system API object with placeholders
+  const system: NavigationSystem = {
+    initialize: () => system,
+    cleanup: () => {},
+    navigateTo: () => {},
+    getRail: () => state.rail,
+    getDrawer: () => state.drawer,
+    getActiveSection: () => state.activeSection,
+    getActiveSubsection: () => state.activeSubsection,
+    showDrawer: () => {},
+    hideDrawer: () => {},
+    isDrawerVisible: () => false,
+    configure: () => system,
+    setProcessingChange: () => {},
+    isProcessingChange: () => false,
+    isMobile: () => state.isMobile,
+    checkMobileState: () => {},
+    onSectionChange: undefined,
+    onItemSelect: undefined,
+    onViewChange: undefined
+  };
+
+  // Implementation functions that use the state
+  const showDrawer = () => showDrawerCore(state, mobileConfig);
+  const hideDrawer = () => hideDrawerCore(state, mobileConfig);
+  const isDrawerVisible = () => isDrawerVisibleCore(state);
+  
+  const updateDrawerContentWrapper = (sectionId: string) => {
+    updateDrawerContent(state, sectionId, showDrawer, hideDrawer);
+  };
+
+  const setupMobileMode = () => {
+    setupMobileModeCore(
+      state, 
+      mobileConfig, 
+      hideDrawer, 
+      isDrawerVisible,
+      showDrawer
+    );
+  };
+
+  const checkMobileState = () => {
+    checkMobileStateCore(
+      state, 
+      mobileConfig, 
+      setupMobileMode, 
+      () => teardownMobileMode(state, mobileConfig), 
+      system
+    );
+  };
+
+  const navigateTo = (section: string, subsection?: string, silent?: boolean) => {
+    navigateToCore(state, section, subsection, silent);
+  };
+
+  // Implementation of the initialize method
+  const initialize = (): NavigationSystem => {
+    // Create rail component
+    state.rail = createRailNavigation(state, config);
+    
+    // Create drawer component
+    state.drawer = createDrawerNavigation(state, config);
+    
+    // Register event handlers
+    registerRailEvents(state, config, updateDrawerContentWrapper, showDrawer, hideDrawer, system);
+    registerDrawerEvents(state, config, hideDrawer, system);
+    
+    // Set up responsive behavior
+    setupResponsiveHandling(state, checkMobileState);
+    
+    // Set active section if specified
+    if (options.activeSection && state.items[options.activeSection]) {
+      state.activeSection = options.activeSection;
+      
+      if (state.rail) {
+        state.rail.setActive(options.activeSection);
+      }
+      
+      // Update drawer content without showing it
+      updateDrawerContentWrapper(options.activeSection);
+      
+      // Only show drawer if expanded is explicitly true
+      if (options.expanded === true) {
+        showDrawer();
+      } else {
+        // Explicitly ensure drawer is hidden
+        hideDrawer();
+      }
+    }
+    
+    // Check initial mobile state
+    checkMobileState();
+    
+    return system;
+  };
+
+  // Implementation of the cleanup method
+  const cleanup = (): void => {
+    cleanupEvents(state, checkMobileState);
+    cleanupResources(state);
+  };
+
+  // Configure method implementation
+  const configure = (newConfig: Partial<NavigationSystemConfig>): NavigationSystem => {
+    Object.assign(options, newConfig);
+    Object.assign(config, createConfig({...options, ...newConfig}));
+    Object.assign(mobileConfig, createMobileConfig({...options, ...newConfig}));
+    return system;
+  };
+
+  // Assign implementations to system object
+  system.initialize = initialize;
+  system.cleanup = cleanup;
+  system.navigateTo = navigateTo;
+  system.showDrawer = showDrawer;
+  system.hideDrawer = hideDrawer;
+  system.isDrawerVisible = isDrawerVisible;
+  system.configure = configure;
+  system.setProcessingChange = (isProcessing: boolean) => {
+    state.processingChange = isProcessing;
+  };
+  system.isProcessingChange = () => state.processingChange;
+  system.isMobile = () => state.isMobile;
+  system.checkMobileState = checkMobileState;
+
+  // Return the uninitialized system
+  return system;
+};
+
+export default createNavigationSystem;
+
+// Re-export types for external use
+export * from './types';

package/src/components/navigation/system/mobile.ts

@@ -0,0 +1,278 @@
+// src/components/navigation/system/mobile.ts
+
+import { NavigationSystemState } from './types';
+import { 
+  hasTouchSupport, 
+  normalizeEvent,
+  TOUCH_CONFIG,
+  TOUCH_TARGETS 
+} from '../../../core/utils/mobile';
+
+/**
+ * Creates and appends overlay element for mobile
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @returns Overlay element
+ */
+export const createOverlay = (
+  state: NavigationSystemState, 
+  mobileConfig: any, 
+  hideDrawer: () => void
+): HTMLElement => {
+  if (state.overlayElement) return state.overlayElement;
+  
+  state.overlayElement = document.createElement('div');
+  state.overlayElement.className = mobileConfig.overlayClass;
+  state.overlayElement.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(state.overlayElement);
+  
+  state.overlayElement.addEventListener('click', (event) => {
+    if (event.target === state.overlayElement) {
+      hideDrawer();
+    }
+  });
+  
+  return state.overlayElement;
+};
+
+/**
+ * Creates and adds close button to the drawer
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @returns Close button element
+ */
+export const createCloseButton = (
+  state: NavigationSystemState, 
+  mobileConfig: any, 
+  hideDrawer: () => void
+): HTMLElement | null => {
+  if (!state.drawer || state.closeButtonElement) return null;
+  
+  state.closeButtonElement = document.createElement('button');
+  state.closeButtonElement.className = mobileConfig.closeButtonClass;
+  state.closeButtonElement.setAttribute('aria-label', 'Close navigation');
+  state.closeButtonElement.innerHTML = `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <line x1="18" y1="6" x2="6" y2="18"></line>
+      <line x1="6" y1="6" x2="18" y2="18"></line>
+    </svg>
+  `;
+  
+  // Handle click event
+  state.closeButtonElement.addEventListener('click', () => {
+    hideDrawer();
+  });
+  
+  // Apply touch-friendly styles if needed
+  if (hasTouchSupport() && mobileConfig.optimizeForTouch) {
+    state.closeButtonElement.style.minWidth = `${TOUCH_TARGETS.COMFORTABLE}px`;
+    state.closeButtonElement.style.minHeight = `${TOUCH_TARGETS.COMFORTABLE}px`;
+    
+    // Add touch feedback
+    state.closeButtonElement.addEventListener('touchstart', () => {
+      state.closeButtonElement.classList.add('active');
+    }, { passive: true });
+    
+    state.closeButtonElement.addEventListener('touchend', () => {
+      setTimeout(() => {
+        state.closeButtonElement.classList.remove('active');
+      }, TOUCH_CONFIG.FEEDBACK_DURATION);
+    }, { passive: true });
+  }
+  
+  state.drawer.element.appendChild(state.closeButtonElement);
+  return state.closeButtonElement;
+};
+
+/**
+ * Sets up mobile mode features
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @param isDrawerVisible - Function to check if drawer is visible
+ */
+export const setupMobileMode = (
+  state: NavigationSystemState, 
+  mobileConfig: any, 
+  hideDrawer: () => void,
+  isDrawerVisible: () => boolean
+): void => {
+  const drawer = state.drawer;
+  const rail = state.rail;
+  
+  if (!drawer || !rail) return;
+  
+  // Create mobile UI elements
+  createOverlay(state, mobileConfig, hideDrawer);
+  createCloseButton(state, mobileConfig, hideDrawer);
+  
+  // Setup outside click handling
+  setupOutsideClickHandling(state, mobileConfig, hideDrawer, isDrawerVisible);
+  
+  // Setup touch gestures if enabled
+  if (mobileConfig.enableSwipeGestures && hasTouchSupport()) {
+    setupTouchGestures(state, hideDrawer, isDrawerVisible);
+  }
+  
+  // Hide drawer initially in mobile mode
+  hideDrawer();
+};
+
+/**
+ * Sets up outside click handling for mobile
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ * @param hideDrawer - Function to hide the drawer
+ * @param isDrawerVisible - Function to check if drawer is visible
+ */
+export const setupOutsideClickHandling = (
+  state: NavigationSystemState, 
+  mobileConfig: any, 
+  hideDrawer: () => void,
+  isDrawerVisible: () => boolean
+): void => {
+  if (!mobileConfig.hideOnClickOutside) return;
+  
+  // Only set up once
+  if (state.outsideClickHandlerSet) return;
+  state.outsideClickHandlerSet = true;
+  
+  // Use either click or touchend event depending on device capability
+  const eventType = hasTouchSupport() ? 'touchend' : 'click';
+  
+  // The handler function
+  const handleOutsideClick = (event: Event) => {
+    if (!state.isMobile || !isDrawerVisible()) return;
+    
+    const normalizedEvent = normalizeEvent(event);
+    const target = normalizedEvent.target as HTMLElement;
+    
+    // Don't close if clicking on drawer, rail, or excluded elements
+    if (state.drawer.element.contains(target) || 
+        state.rail.element.contains(target)) {
+      return;
+    }
+    
+    // Close drawer - it's an outside click/touch
+    hideDrawer();
+  };
+  
+  // Store handler for cleanup
+  state.outsideClickHandler = handleOutsideClick;
+  
+  // Add listener
+  document.addEventListener(eventType, handleOutsideClick,
+    hasTouchSupport() ? { passive: true } : false);
+};
+
+/**
+ * Sets up touch gestures for mobile
+ *
+ * @param state - System state
+ * @param hideDrawer - Function to hide the drawer
+ * @param isDrawerVisible - Function to check if drawer is visible
+ */
+export const setupTouchGestures = (
+  state: NavigationSystemState, 
+  hideDrawer: () => void,
+  isDrawerVisible: () => boolean,
+  showDrawer?: () => void
+): void => {
+  const drawer = state.drawer;
+  const rail = state.rail;
+  
+  if (!drawer || !rail) return;
+  
+  let touchStartX = 0;
+  let touchStartY = 0;
+  
+  // Rail swipe right to open drawer
+  rail.element.addEventListener('touchstart', (event: TouchEvent) => {
+    const touch = event.touches[0];
+    touchStartX = touch.clientX;
+    touchStartY = touch.clientY;
+  }, { passive: true });
+  
+  rail.element.addEventListener('touchmove', (event: TouchEvent) => {
+    if (!state.isMobile || isDrawerVisible() || !showDrawer) return;
+    
+    const touch = event.touches[0];
+    const deltaX = touch.clientX - touchStartX;
+    const deltaY = touch.clientY - touchStartY;
+    
+    // Only consider horizontal swipes
+    if (Math.abs(deltaX) > Math.abs(deltaY) && 
+        deltaX > TOUCH_CONFIG.SWIPE_THRESHOLD) {
+      showDrawer();
+    }
+  }, { passive: true });
+  
+  // Drawer swipe left to close
+  drawer.element.addEventListener('touchstart', (event: TouchEvent) => {
+    const touch = event.touches[0];
+    touchStartX = touch.clientX;
+    touchStartY = touch.clientY;
+  }, { passive: true });
+  
+  // Use touchmove with transform for visual feedback
+  drawer.element.addEventListener('touchmove', (event: TouchEvent) => {
+    if (!state.isMobile || !isDrawerVisible()) return;
+    
+    const touch = event.touches[0];
+    const deltaX = touch.clientX - touchStartX;
+    
+    // Only apply transform for leftward swipes
+    if (deltaX < 0) {
+      // Apply transform with resistance
+      drawer.element.style.transform = `translateX(${deltaX / 2}px)`;
+      
+      // Close if threshold reached
+      if (deltaX < -TOUCH_CONFIG.SWIPE_THRESHOLD) {
+        hideDrawer();
+      }
+    }
+  }, { passive: true });
+  
+  // Reset transforms when touch ends
+  drawer.element.addEventListener('touchend', () => {
+    if (drawer.element.style.transform) {
+      drawer.element.style.transition = 'transform 0.2s ease';
+      drawer.element.style.transform = '';
+      
+      setTimeout(() => {
+        drawer.element.style.transition = '';
+      }, 200);
+    }
+  }, { passive: true });
+};
+
+/**
+ * Tears down mobile-specific features
+ *
+ * @param state - System state
+ * @param mobileConfig - Mobile configuration
+ */
+export const teardownMobileMode = (
+  state: NavigationSystemState, 
+  mobileConfig: any
+): void => {
+  // Hide overlay
+  if (state.overlayElement) {
+    state.overlayElement.classList.remove('active');
+    state.overlayElement.setAttribute('aria-hidden', 'true');
+  }
+  
+  // Hide close button
+  if (state.closeButtonElement) {
+    state.closeButtonElement.style.display = 'none';
+  }
+  
+  // Remove body scroll lock if applied
+  document.body.classList.remove(mobileConfig.bodyLockClass);
+};

package/src/components/navigation/system/state.ts

@@ -0,0 +1,77 @@
+// src/components/navigation/system/state.ts
+
+import { NavigationSystemConfig, NavigationSystemState } from './types';
+
+/**
+ * Create the initial state for the navigation system
+ * 
+ * @param options - Configuration options
+ * @returns Initial system state
+ */
+export const createInitialState = (options: NavigationSystemConfig = {}): NavigationSystemState => {
+  return {
+    rail: null,
+    drawer: null,
+    activeSection: options.activeSection || null,
+    activeSubsection: options.activeSubsection || null,
+    items: options.items || {},
+    mouseInDrawer: false,
+    mouseInRail: false,
+    hoverTimer: null,
+    closeTimer: null,
+    processingChange: false,
+    isMobile: false,
+    overlayElement: null,
+    closeButtonElement: null,
+    resizeObserver: null,
+    outsideClickHandler: null,
+    outsideClickHandlerSet: false
+  };
+};
+
+/**
+ * Create default configuration with sensible defaults
+ * 
+ * @param options - User-provided configuration
+ * @returns Complete configuration with defaults
+ */
+export const createConfig = (options: NavigationSystemConfig = {}): Required<Pick<NavigationSystemConfig, 
+  'animateDrawer' | 'showLabelsOnRail' | 'hideDrawerOnClick' | 'expanded' | 
+  'hoverDelay' | 'closeDelay' | 'railOptions' | 'drawerOptions'>> => {
+  return {
+    // Display options
+    animateDrawer: options.animateDrawer !== false,
+    showLabelsOnRail: options.showLabelsOnRail !== false,
+    hideDrawerOnClick: options.hideDrawerOnClick || false,
+    expanded: options.expanded === true,
+    
+    // Timing options (ms)
+    hoverDelay: options.hoverDelay || 200,
+    closeDelay: options.closeDelay || 100,
+    
+    // Component options
+    railOptions: options.railOptions || {},
+    drawerOptions: options.drawerOptions || {}
+  };
+};
+
+/**
+ * Create mobile configuration with defaults
+ * 
+ * @param options - User-provided configuration
+ * @returns Mobile-specific configuration
+ */
+export const createMobileConfig = (options: NavigationSystemConfig = {}): Required<Pick<NavigationSystemConfig, 
+  'breakpoint' | 'lockBodyScroll' | 'hideOnClickOutside' | 'enableSwipeGestures' | 
+  'optimizeForTouch' | 'overlayClass' | 'closeButtonClass' | 'bodyLockClass'>> => {
+  return {
+    breakpoint: options.breakpoint || 960,
+    lockBodyScroll: options.lockBodyScroll !== false,
+    hideOnClickOutside: options.hideOnClickOutside !== false,
+    enableSwipeGestures: options.enableSwipeGestures !== false,
+    optimizeForTouch: options.optimizeForTouch !== false,
+    overlayClass: options.overlayClass || 'mtrl-nav-overlay',
+    closeButtonClass: options.closeButtonClass || 'mtrl-nav-close-btn',
+    bodyLockClass: options.bodyLockClass || 'mtrl-body-drawer-open'
+  };
+};