mtrl 0.2.2 → 0.2.3

package/src/components/slider/features/slider.ts

@@ -0,0 +1,336 @@
+// src/components/slider/features/slider.ts - Added initialization code
+import { SLIDER_EVENTS } from '../constants';
+import { SliderConfig } from '../types';
+import { createUiHelpers } from './ui';
+import { createInteractionHandlers } from './interactions';
+import { createKeyboardHandlers } from './keyboard';
+import { createEventHelpers } from './events';
+
+/**
+ * Add main slider functionality to component
+ * @param config Slider configuration
+ * @returns Component enhancer with slider functionality
+ */
+export const withSlider = (config: SliderConfig) => component => {
+  // Ensure component has events
+  if (!component.events) {
+    component.events = {
+      listeners: {},
+      on: function(event, handler) {
+        if (!this.listeners[event]) {
+          this.listeners[event] = [];
+        }
+        this.listeners[event].push(handler);
+        return this;
+      },
+      off: function(event, handler) {
+        if (this.listeners[event]) {
+          this.listeners[event] = this.listeners[event].filter(h => h !== handler);
+        }
+        return this;
+      },
+      trigger: function(event, data) {
+        if (this.listeners[event]) {
+          this.listeners[event].forEach(handler => handler(data));
+        }
+        return this;
+      }
+    };
+  }
+  
+  // Initialize state
+  const state = {
+    value: config.value !== undefined ? config.value : 0,
+    secondValue: config.secondValue !== undefined ? config.secondValue : null,
+    min: config.min !== undefined ? config.min : 0,
+    max: config.max !== undefined ? config.max : 100,
+    step: config.step !== undefined ? config.step : 1,
+    dragging: false,
+    activeBubble: null,
+    activeThumb: null,
+    ticks: [],
+    tickLabels: [],
+    component
+  };
+  
+  // Create helper functions
+  const uiHelpers = createUiHelpers(config, state);
+  const eventHelpers = createEventHelpers(state);
+  
+  // Combine helpers for event handlers
+  const handlers = {
+    ...uiHelpers,
+    triggerEvent: eventHelpers.triggerEvent
+  };
+  
+  // Create event handlers
+  const interactionHandlers = createInteractionHandlers(config, state, handlers);
+  const keyboardHandlers = createKeyboardHandlers(state, handlers);
+  
+  // Initialize slider
+  const initSlider = () => {
+    // Set ARIA attributes
+    component.element.setAttribute('aria-valuemin', String(state.min));
+    component.element.setAttribute('aria-valuemax', String(state.max));
+    component.element.setAttribute('aria-valuenow', String(state.value));
+    
+    if (!component.structure) {
+      console.warn('Cannot initialize slider: missing structure');
+      return;
+    }
+    
+    const { thumb, secondThumb } = component.structure;
+    
+    if (!thumb) {
+      console.warn('Cannot initialize slider: missing thumb');
+      return;
+    }
+    
+    thumb.setAttribute('aria-valuemin', String(state.min));
+    thumb.setAttribute('aria-valuemax', String(state.max));
+    thumb.setAttribute('aria-valuenow', String(state.value));
+    
+    if (config.range && secondThumb && state.secondValue !== null) {
+      secondThumb.setAttribute('aria-valuemin', String(state.min));
+      secondThumb.setAttribute('aria-valuemax', String(state.max));
+      secondThumb.setAttribute('aria-valuenow', String(state.secondValue));
+    }
+    
+    // Setup initial positions
+    uiHelpers.updateUi();
+    
+    // Generate ticks if needed
+    if (config.ticks || config.tickLabels) {
+      uiHelpers.generateTicks();
+      uiHelpers.updateTicks();
+    }
+    
+    // Setup event listeners
+    eventHelpers.setupEventListeners(interactionHandlers, keyboardHandlers);
+    
+    // Force one more UI update after a delay to ensure everything is properly positioned
+    // This is especially important for range sliders
+    setTimeout(() => {
+      uiHelpers.updateUi();
+    }, 50);
+  };
+  
+  // Cleanup event listeners
+  const cleanup = () => {
+    eventHelpers.cleanupEventListeners(interactionHandlers, keyboardHandlers);
+  };
+  
+  // Register with lifecycle
+  if (component.lifecycle) {
+    const originalDestroy = component.lifecycle.destroy || (() => {});
+    component.lifecycle.destroy = () => {
+      cleanup();
+      originalDestroy();
+    };
+  }
+  
+  // Initialize slider
+  initSlider();
+  
+  // Return enhanced component with the slider functionality
+  const enhancedComponent = {
+    ...component,
+    slider: {
+      /**
+       * Sets slider value
+       * @param value New value
+       * @param triggerEvent Whether to trigger change event
+       */
+      setValue(value, triggerEvent = true) {
+        // Validate and set value
+        const newValue = uiHelpers.clamp(value, state.min, state.max);
+        state.value = newValue;
+        
+        // Update UI
+        uiHelpers.updateUi();
+        
+        // Trigger events if needed
+        if (triggerEvent) {
+          eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets slider value
+       * @returns Current value
+       */
+      getValue() {
+        return state.value;
+      },
+      
+      /**
+       * Sets secondary slider value (for range slider)
+       * @param value New secondary value
+       * @param triggerEvent Whether to trigger change event
+       */
+      setSecondValue(value, triggerEvent = true) {
+        if (!config.range) return this;
+        
+        // Validate and set value
+        const newValue = uiHelpers.clamp(value, state.min, state.max);
+        state.secondValue = newValue;
+        
+        // Update UI
+        uiHelpers.updateUi();
+        
+        // Trigger events if needed
+        if (triggerEvent) {
+          eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets secondary slider value
+       * @returns Current secondary value or null
+       */
+      getSecondValue() {
+        return config.range ? state.secondValue : null;
+      },
+      
+      /**
+       * Sets slider minimum value
+       * @param min New minimum value
+       */
+      setMin(min) {
+        state.min = min;
+        
+        // Update ARIA attributes
+        component.element.setAttribute('aria-valuemin', String(min));
+        component.structure.thumb.setAttribute('aria-valuemin', String(min));
+        
+        if (config.range && component.structure.secondThumb) {
+          component.structure.secondThumb.setAttribute('aria-valuemin', String(min));
+        }
+        
+        // Clamp values to new min
+        if (state.value < min) {
+          state.value = min;
+        }
+        
+        if (config.range && state.secondValue !== null && state.secondValue < min) {
+          state.secondValue = min;
+        }
+        
+        // Regenerate ticks if needed
+        if (config.ticks || config.tickLabels) {
+          uiHelpers.generateTicks();
+        }
+        
+        // Update UI
+        uiHelpers.updateUi();
+        
+        return this;
+      },
+      
+      /**
+       * Gets slider minimum value
+       * @returns Current minimum value
+       */
+      getMin() {
+        return state.min;
+      },
+      
+      /**
+       * Sets slider maximum value
+       * @param max New maximum value
+       */
+      setMax(max) {
+        state.max = max;
+        
+        // Update ARIA attributes
+        component.element.setAttribute('aria-valuemax', String(max));
+        component.structure.thumb.setAttribute('aria-valuemax', String(max));
+        
+        if (config.range && component.structure.secondThumb) {
+          component.structure.secondThumb.setAttribute('aria-valuemax', String(max));
+        }
+        
+        // Clamp values to new max
+        if (state.value > max) {
+          state.value = max;
+        }
+        
+        if (config.range && state.secondValue !== null && state.secondValue > max) {
+          state.secondValue = max;
+        }
+        
+        // Regenerate ticks if needed
+        if (config.ticks || config.tickLabels) {
+          uiHelpers.generateTicks();
+        }
+        
+        // Update UI
+        uiHelpers.updateUi();
+        
+        return this;
+      },
+      
+      /**
+       * Gets slider maximum value
+       * @returns Current maximum value
+       */
+      getMax() {
+        return state.max;
+      },
+      
+      /**
+       * Sets slider step size
+       * @param step New step size
+       */
+      setStep(step) {
+        state.step = step;
+        
+        // Add or remove discrete class
+        if (step > 0) {
+          component.element.classList.add(`${component.getClass('slider')}--discrete`);
+        } else {
+          component.element.classList.remove(`${component.getClass('slider')}--discrete`);
+        }
+        
+        // Regenerate ticks if needed
+        if (config.ticks || config.tickLabels) {
+          uiHelpers.generateTicks();
+          uiHelpers.updateTicks();
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets slider step size
+       * @returns Current step size
+       */
+      getStep() {
+        return state.step;
+      },
+      
+      /**
+       * Regenerate tick marks and labels
+       */
+      regenerateTicks() {
+        uiHelpers.generateTicks();
+        uiHelpers.updateTicks();
+        return this;
+      },
+      
+      /**
+       * Update all UI elements
+       */
+      updateUi() {
+        uiHelpers.updateUi();
+        return this;
+      }
+    }
+  };
+  
+  return enhancedComponent;
+};

package/src/components/slider/features/structure.ts

@@ -0,0 +1,264 @@
+// src/components/slider/features/structure.ts - Fixed track initialization
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS } from '../constants';
+import { SliderConfig } from '../types';
+
+/**
+ * Creates the slider DOM structure following MD3 principles
+ * @param config Slider configuration
+ * @returns Component enhancer with DOM structure
+ */
+export const withStructure = (config: SliderConfig) => component => {
+  // Create track element
+  const track = document.createElement('div');
+  track.classList.add(component.getClass('slider-track'));
+  
+  // Calculate initial percentages based on values
+  const min = config.min || 0;
+  const max = config.max || 100;
+  const range = max - min;
+  
+  // Set default values
+  const value = config.value !== undefined ? config.value : min;
+  const secondValue = config.secondValue !== undefined ? config.secondValue : null;
+  
+  // Calculate percentages
+  const getPercentage = (val) => ((val - min) / range) * 100;
+  const valuePercent = getPercentage(value);
+  
+  // Create remaining track element (fills entire width initially)
+  const remainingTrack = document.createElement('div');
+  remainingTrack.classList.add(component.getClass('slider-remaining-track'));
+  
+  // Create start track element (for range slider)
+  const startTrack = document.createElement('div');
+  startTrack.classList.add(component.getClass('slider-start-track'));
+  
+  // Create active track element (filled part)
+  const activeTrack = document.createElement('div');
+  activeTrack.classList.add(component.getClass('slider-active-track'));
+  
+  // Calculate padding adjustment (8px equivalent as percentage)
+  // We'll do a rough estimate initially, then recalculate once rendered
+  const paddingAdjustment = 8; // 8px padding
+  const estimatedTrackSize = 300; // A reasonable guess at track width
+  const paddingPercent = (paddingAdjustment / estimatedTrackSize) * 100;
+  
+  // Set initial dimensions for all track segments
+  if (config.range && secondValue !== null) {
+    // Range slider
+    const lowerValue = Math.min(value, secondValue);
+    const higherValue = Math.max(value, secondValue);
+    const lowerPercent = getPercentage(lowerValue);
+    const higherPercent = getPercentage(higherValue);
+    
+    // Adjust positions and width to account for spacing
+    let adjustedLowerPercent = lowerPercent + paddingPercent;
+    let adjustedHigherPercent = higherPercent - paddingPercent;
+    
+    if (adjustedHigherPercent <= adjustedLowerPercent) {
+      adjustedLowerPercent = (lowerPercent + higherPercent) / 2 - 1;
+      adjustedHigherPercent = (lowerPercent + higherPercent) / 2 + 1;
+    }
+    
+    // Calculate track segment sizes
+    const startWidth = Math.max(0, lowerPercent - paddingPercent);
+    const activeWidth = Math.max(0, adjustedHigherPercent - adjustedLowerPercent);
+    const remainingWidth = Math.max(0, 100 - higherPercent - paddingPercent);
+    
+    if (config.orientation === SLIDER_ORIENTATIONS.VERTICAL) {
+      // Vertical orientation
+      startTrack.style.display = 'block';
+      startTrack.style.height = `${startWidth}%`;
+      startTrack.style.bottom = '0';
+      startTrack.style.width = '100%';
+      
+      activeTrack.style.display = 'block';
+      activeTrack.style.height = `${activeWidth}%`;
+      activeTrack.style.bottom = `${adjustedLowerPercent}%`;
+      activeTrack.style.width = '100%';
+      
+      remainingTrack.style.display = 'block';
+      remainingTrack.style.height = `${remainingWidth}%`;
+      remainingTrack.style.bottom = `${higherPercent + paddingPercent}%`;
+      remainingTrack.style.width = '100%';
+    } else {
+      // Horizontal orientation
+      startTrack.style.display = 'block';
+      startTrack.style.width = `${startWidth}%`;
+      startTrack.style.left = '0';
+      startTrack.style.height = '100%';
+      
+      activeTrack.style.display = 'block';
+      activeTrack.style.width = `${activeWidth}%`;
+      activeTrack.style.left = `${adjustedLowerPercent}%`;
+      activeTrack.style.height = '100%';
+      
+      remainingTrack.style.display = 'block';
+      remainingTrack.style.width = `${remainingWidth}%`;
+      remainingTrack.style.left = `${higherPercent + paddingPercent}%`;
+      remainingTrack.style.height = '100%';
+    }
+  } else {
+    // Single thumb slider
+    const adjustedWidth = Math.max(0, valuePercent - paddingPercent);
+    const remainingWidth = Math.max(0, 100 - valuePercent - paddingPercent);
+    
+    if (config.orientation === SLIDER_ORIENTATIONS.VERTICAL) {
+      // Vertical orientation
+      startTrack.style.display = 'none';
+      
+      activeTrack.style.display = 'block';
+      activeTrack.style.height = `${adjustedWidth}%`;
+      activeTrack.style.bottom = '0';
+      activeTrack.style.width = '100%';
+      
+      remainingTrack.style.display = 'block';
+      remainingTrack.style.height = `${remainingWidth}%`;
+      remainingTrack.style.bottom = `${valuePercent + paddingPercent}%`;
+      remainingTrack.style.width = '100%';
+    } else {
+      // Horizontal orientation
+      startTrack.style.display = 'none';
+      
+      activeTrack.style.display = 'block';
+      activeTrack.style.width = `${adjustedWidth}%`;
+      activeTrack.style.left = '0';
+      activeTrack.style.height = '100%';
+      
+      remainingTrack.style.display = 'block';
+      remainingTrack.style.width = `${remainingWidth}%`;
+      remainingTrack.style.left = `${valuePercent + paddingPercent}%`;
+      remainingTrack.style.height = '100%';
+    }
+  }
+  
+  // Add tracks to container
+  track.appendChild(remainingTrack);
+  track.appendChild(startTrack);
+  track.appendChild(activeTrack);
+  
+  // Create thumb element
+  const thumb = document.createElement('div');
+  thumb.classList.add(component.getClass('slider-thumb'));
+  thumb.setAttribute('tabindex', '0');
+  thumb.setAttribute('role', 'slider');
+  
+  // Set initial thumb position
+  if (config.orientation === SLIDER_ORIENTATIONS.VERTICAL) {
+    thumb.style.bottom = `${valuePercent}%`;
+    thumb.style.left = '50%';
+    thumb.style.top = 'auto';
+  } else {
+    thumb.style.left = `${valuePercent}%`;
+  }
+  
+  // Create dots for the track ends
+  const startDot = document.createElement('div');
+  startDot.classList.add(component.getClass('slider-dot'));
+  startDot.classList.add(component.getClass('slider-dot--start'));
+  
+  const endDot = document.createElement('div');
+  endDot.classList.add(component.getClass('slider-dot'));
+  endDot.classList.add(component.getClass('slider-dot--end'));
+  
+  // Create value bubble element
+  const valueBubble = document.createElement('div');
+  valueBubble.classList.add(component.getClass('slider-value'));
+  
+  // Format value and set initial bubble text
+  const formatter = config.valueFormatter || (val => val.toString());
+  valueBubble.textContent = formatter(value);
+  
+  // For range slider: Create second thumb and value bubble
+  let secondThumb = null;
+  let secondValueBubble = null;
+  
+  if (config.range && secondValue !== null) {
+    // Create second thumb
+    secondThumb = document.createElement('div');
+    secondThumb.classList.add(component.getClass('slider-thumb'));
+    secondThumb.setAttribute('tabindex', '0');
+    secondThumb.setAttribute('role', 'slider');
+    
+    // Set initial second thumb position
+    const secondPercent = getPercentage(secondValue);
+    if (config.orientation === SLIDER_ORIENTATIONS.VERTICAL) {
+      secondThumb.style.bottom = `${secondPercent}%`;
+      secondThumb.style.left = '50%';
+      secondThumb.style.top = 'auto';
+    } else {
+      secondThumb.style.left = `${secondPercent}%`;
+    }
+    
+    // Create second value bubble
+    secondValueBubble = document.createElement('div');
+    secondValueBubble.classList.add(component.getClass('slider-value'));
+    secondValueBubble.textContent = formatter(secondValue);
+  }
+  
+  // Add elements to the slider
+  component.element.classList.add(component.getClass('slider'));
+  component.element.appendChild(track);
+  component.element.appendChild(startDot);
+  component.element.appendChild(endDot);
+  component.element.appendChild(thumb);
+  component.element.appendChild(valueBubble);
+  
+  if (config.range && secondThumb && secondValueBubble) {
+    component.element.classList.add(`${component.getClass('slider')}--range`);
+    component.element.appendChild(secondThumb);
+    component.element.appendChild(secondValueBubble);
+  }
+  
+  // Apply size class
+  const size = config.size || SLIDER_SIZES.MEDIUM;
+  if (size !== SLIDER_SIZES.MEDIUM) {
+    component.element.classList.add(`${component.getClass('slider')}--${size}`);
+  }
+  
+  // Apply color class
+  const color = config.color || SLIDER_COLORS.PRIMARY;
+  if (color !== SLIDER_COLORS.PRIMARY) {
+    component.element.classList.add(`${component.getClass('slider')}--${color}`);
+  }
+  
+  // Apply orientation class
+  const orientation = config.orientation || SLIDER_ORIENTATIONS.HORIZONTAL;
+  if (orientation === SLIDER_ORIENTATIONS.VERTICAL) {
+    component.element.classList.add(`${component.getClass('slider')}--vertical`);
+  }
+  
+  // Apply discrete class if step is specified
+  if (config.step !== undefined && config.step > 0) {
+    component.element.classList.add(`${component.getClass('slider')}--discrete`);
+  }
+  
+  // Apply disabled class if needed
+  if (config.disabled) {
+    component.element.classList.add(`${component.getClass('slider')}--disabled`);
+  }
+  
+  // Ensure proper initialization after DOM is attached by scheduling a UI update
+  setTimeout(() => {
+    if (component.slider && typeof component.slider.updateUi === 'function') {
+      component.slider.updateUi();
+    }
+  }, 0);
+  
+  // Store elements in component
+  return {
+    ...component,
+    structure: {
+      track,
+      activeTrack,
+      startTrack,
+      remainingTrack,
+      thumb,
+      valueBubble,
+      secondThumb,
+      secondValueBubble,
+      startDot,
+      endDot
+    }
+  };
+};