mtrl 0.3.8 → 0.3.9

package/src/components/timepicker/render.ts

@@ -1,613 +0,0 @@
-// src/components/timepicker/render.ts
-
-import { TimePickerConfig, TimeValue, TIME_PICKER_TYPE, TIME_PICKER_ORIENTATION, TIME_FORMAT, TIME_PERIOD } from './types';
-import { 
-  DIAL_CONSTANTS, 
-  TIME_CONSTANTS, 
-  DEFAULT_CLOCK_ICON,
-  DEFAULT_KEYBOARD_ICON,
-  SELECTORS
-} from './config';
-import { padZero, convertTo12Hour } from './utils';
-import { renderClockDial, getTimeValueFromClick } from './clockdial';
-
-/**
- * Renders the time picker dialog
- * @param {HTMLElement} container - Dialog container element
- * @param {TimeValue} timeValue - Current time value
- * @param {TimePickerConfig} config - Time picker configuration
- * @param {Function} onTimeChange - Optional callback when time changes
- */
-export const renderTimePicker = (
-  container: HTMLElement,
-  timeValue: TimeValue,
-  config: TimePickerConfig,
-  onTimeChange?: (key: 'hours' | 'minutes' | 'seconds', value: number) => void
-): void => {
-  // Clear container content
-  container.innerHTML = '';
-  
-  // Create title if provided
-  if (config.title) {
-    const title = document.createElement('div');
-    title.className = `${config.prefix}-time-picker-title`;
-    title.textContent = config.title;
-    title.id = `${config.prefix}-time-picker-title`;
-    container.appendChild(title);
-  }
-  
-  // Create content container
-  const content = document.createElement('div');
-  content.className = `${config.prefix}-time-picker-content`;
-  container.appendChild(content);
-  
-  // Create time input container (same for both modes)
-  const inputContainer = document.createElement('div');
-  inputContainer.className = `${config.prefix}-time-picker-input-container`;
-  content.appendChild(inputContainer);
-  
-  // Determine display hours based on format
-  const { hours: displayHours } = config.format === TIME_FORMAT.MILITARY 
-    ? { hours: timeValue.hours } 
-    : convertTo12Hour(timeValue.hours);
-  
-  // Create hours input field
-  const hoursInputContainer = document.createElement('div');
-  hoursInputContainer.className = `${config.prefix}-time-picker-time-input-field`;
-  
-  const hoursInput = document.createElement('input');
-  hoursInput.type = 'number';
-  hoursInput.className = `${config.prefix}-time-picker-hours`;
-  hoursInput.min = config.format === TIME_FORMAT.MILITARY ? '0' : '1';
-  hoursInput.max = config.format === TIME_FORMAT.MILITARY ? '23' : '12';
-  hoursInput.value = padZero(displayHours);
-  hoursInput.setAttribute('data-type', 'hour');
-  hoursInput.setAttribute('inputmode', 'numeric');
-  hoursInput.setAttribute('pattern', '[0-9]*');
-    
-  hoursInputContainer.appendChild(hoursInput);
-  inputContainer.appendChild(hoursInputContainer);
-  
-  // Create separator
-  const separator = document.createElement('div');
-  separator.className = `${config.prefix}-time-picker-separator`;
-  separator.textContent = ':';
-  inputContainer.appendChild(separator);
-  
-  // Create minutes input field
-  const minutesInputContainer = document.createElement('div');
-  minutesInputContainer.className = `${config.prefix}-time-picker-time-input-field`;
-  
-  const minutesInput = document.createElement('input');
-  minutesInput.type = 'number';
-  minutesInput.className = `${config.prefix}-time-picker-minutes`;
-  minutesInput.min = '0';
-  minutesInput.max = '59';
-  minutesInput.value = padZero(timeValue.minutes);
-  minutesInput.setAttribute('data-type', 'minute');
-  minutesInput.setAttribute('inputmode', 'numeric');
-  minutesInput.setAttribute('pattern', '[0-9]*');
-  
-  minutesInputContainer.appendChild(minutesInput);
-  inputContainer.appendChild(minutesInputContainer);
-  
-  // Add seconds if enabled
-  let secondsInput;
-  if (config.showSeconds) {
-    const secondsSeparator = document.createElement('div');
-    secondsSeparator.className = `${config.prefix}-time-picker-separator`;
-    secondsSeparator.textContent = ':';
-    inputContainer.appendChild(secondsSeparator);
-    
-    const secondsInputContainer = document.createElement('div');
-    secondsInputContainer.className = `${config.prefix}-time-picker-time-input-field`;
-    
-    secondsInput = document.createElement('input');
-    secondsInput.type = 'number';
-    secondsInput.className = `${config.prefix}-time-picker-seconds`;
-    secondsInput.min = '0';
-    secondsInput.max = '59';
-    secondsInput.value = padZero(timeValue.seconds || 0);
-    secondsInput.setAttribute('data-type', 'second');
-    secondsInput.setAttribute('inputmode', 'numeric');
-    secondsInput.setAttribute('pattern', '[0-9]*');
-    
-    const secondsLabel = document.createElement('label');
-    secondsLabel.className = `${config.prefix}-time-picker-input-label`;
-    secondsLabel.textContent = 'Second';
-    
-    secondsInputContainer.appendChild(secondsInput);
-    secondsInputContainer.appendChild(secondsLabel);
-    inputContainer.appendChild(secondsInputContainer);
-  }
-  
-  // Add period selector for 12-hour format
-  if (config.format === TIME_FORMAT.AMPM) {
-    const periodContainer = document.createElement('div');
-    periodContainer.className = `${config.prefix}-time-picker-period`;
-    
-    const amPeriod = document.createElement('div');
-    amPeriod.className = `${config.prefix}-time-picker-period-am ${timeValue.period === TIME_PERIOD.AM ? `${config.prefix}-time-picker-period--selected` : ''}`;
-    amPeriod.textContent = TIME_PERIOD.AM;
-    amPeriod.setAttribute('role', 'button');
-    amPeriod.setAttribute('tabindex', '0');
-    amPeriod.setAttribute('aria-pressed', timeValue.period === TIME_PERIOD.AM ? 'true' : 'false');
-    
-    const pmPeriod = document.createElement('div');
-    pmPeriod.className = `${config.prefix}-time-picker-period-pm ${timeValue.period === TIME_PERIOD.PM ? `${config.prefix}-time-picker-period--selected` : ''}`;
-    pmPeriod.textContent = TIME_PERIOD.PM;
-    pmPeriod.setAttribute('role', 'button');
-    pmPeriod.setAttribute('tabindex', '0');
-    pmPeriod.setAttribute('aria-pressed', timeValue.period === TIME_PERIOD.PM ? 'true' : 'false');
-    
-    periodContainer.appendChild(amPeriod);
-    periodContainer.appendChild(pmPeriod);
-    inputContainer.appendChild(periodContainer);
-  }
-  
-  // Create canvas-based dial container (shown/hidden based on mode)
-  const dialContainer = document.createElement('div');
-  dialContainer.className = `${config.prefix}-time-picker-dial`;
-  dialContainer.style.display = config.type === TIME_PICKER_TYPE.DIAL ? 'block' : 'none';
-  content.appendChild(dialContainer);
-  
-  // Create canvas element
-  const canvas = document.createElement('canvas');
-  canvas.className = `${config.prefix}-time-picker-dial-canvas`;
-  canvas.width = DIAL_CONSTANTS.DIAMETER;
-  canvas.height = DIAL_CONSTANTS.DIAMETER;
-  canvas.style.width = `${DIAL_CONSTANTS.DIAMETER}px`;
-  canvas.style.height = `${DIAL_CONSTANTS.DIAMETER}px`;
-  dialContainer.appendChild(canvas);
-  
-  // Create actions container
-  const actions = document.createElement('div');
-  actions.className = `${config.prefix}-time-picker-actions`;
-  container.appendChild(actions);
-  
-  // Create type toggle button
-  const toggleTypeButton = document.createElement('button');
-  toggleTypeButton.className = `${config.prefix}-time-picker-toggle-type`;
-  toggleTypeButton.setAttribute('aria-label', config.type === TIME_PICKER_TYPE.DIAL 
-    ? 'Switch to keyboard input' 
-    : 'Switch to dial selector');
-  toggleTypeButton.innerHTML = config.type === TIME_PICKER_TYPE.DIAL 
-    ? config.keyboardIcon || DEFAULT_KEYBOARD_ICON 
-    : config.clockIcon || DEFAULT_CLOCK_ICON;
-  actions.appendChild(toggleTypeButton);
-  
-  // Create action buttons container
-  const actionButtons = document.createElement('div');
-  actionButtons.className = `${config.prefix}-time-picker-action-buttons`;
-  actions.appendChild(actionButtons);
-  
-  // Create cancel button
-  const cancelButton = document.createElement('button');
-  cancelButton.className = `${config.prefix}-time-picker-cancel`;
-  cancelButton.textContent = config.cancelText || 'Cancel';
-  cancelButton.setAttribute('type', 'button');
-  actionButtons.appendChild(cancelButton);
-  
-  // Create confirm button
-  const confirmButton = document.createElement('button');
-  confirmButton.className = `${config.prefix}-time-picker-confirm`;
-  confirmButton.textContent = config.confirmText || 'OK';
-  confirmButton.setAttribute('type', 'button');
-  actionButtons.appendChild(confirmButton);
-  
-  // Track active selector for clock dial
-  let activeSelector: 'hour' | 'minute' | 'second' = 'hour';
-  
-  // Render initial clock dial if in dial mode
-  if (config.type === TIME_PICKER_TYPE.DIAL) {
-    setTimeout(() => {
-      renderClockDial(canvas, timeValue, {
-        type: config.type,
-        format: config.format,
-        showSeconds: config.showSeconds,
-        prefix: config.prefix,
-        activeSelector
-      });
-    }, 0);
-  }
-  
-  // Add event listener for toggle button
-  toggleTypeButton.addEventListener('click', () => {
-    // Toggle dial visibility
-    if (dialContainer.style.display === 'none') {
-      // Switch to dial mode
-      dialContainer.style.display = 'block';
-      toggleTypeButton.innerHTML = config.keyboardIcon || DEFAULT_KEYBOARD_ICON;
-      toggleTypeButton.setAttribute('aria-label', 'Switch to keyboard input');
-      
-      // Set focus on dial
-      setTimeout(() => {
-        canvas.focus();
-        
-        // Apply active state to hour input by default
-        const hourElements = document.querySelectorAll(`.${config.prefix}-time-picker-hours`);
-        hourElements.forEach(el => el.setAttribute('data-active', 'true'));
-        
-        const minuteElements = document.querySelectorAll(`.${config.prefix}-time-picker-minutes`);
-        minuteElements.forEach(el => el.setAttribute('data-active', 'false'));
-        
-        const secondElements = document.querySelectorAll(`.${config.prefix}-time-picker-seconds`);
-        secondElements.forEach(el => el.setAttribute('data-active', 'false'));
-        
-        // Render clock dial
-        renderClockDial(canvas, timeValue, {
-          type: TIME_PICKER_TYPE.DIAL,
-          format: config.format,
-          showSeconds: config.showSeconds,
-          prefix: config.prefix,
-          activeSelector: 'hour'
-        });
-      }, 50);
-    } else {
-      // Switch to input mode
-      dialContainer.style.display = 'none';
-      toggleTypeButton.innerHTML = config.clockIcon || DEFAULT_CLOCK_ICON;
-      toggleTypeButton.setAttribute('aria-label', 'Switch to dial selector');
-      
-      // Focus on hours input
-      setTimeout(() => {
-        hoursInput.focus();
-        hoursInput.select();
-      }, 50);
-    }
-  });
-  
-  // Handle input time changes
-  const handleInputChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    const type = target.getAttribute('data-type');
-    const value = target.value;
-    
-    // Skip processing if the field is empty (user might be in the middle of typing)
-    if (value === '') return;
-    
-    const numValue = parseInt(value, 10);
-    if (isNaN(numValue)) return;
-    
-    if (type === 'hour') {
-      let newHours = numValue;
-      
-      // Handle hour constraints
-      if (config.format === TIME_FORMAT.AMPM) {
-        // Special handling for 12-hour format
-        if (numValue < 0) newHours = 1;
-        if (numValue > 12) newHours = 12;
-        
-        // Convert to 24h format internally
-        if (timeValue.period === 'PM' && newHours !== 12) {
-          newHours += 12;
-        } else if (timeValue.period === 'AM' && newHours === 12) {
-          newHours = 0;
-        }
-      } else {
-        // 24-hour format validation
-        if (numValue < 0) newHours = 0;
-        if (numValue > 23) newHours = 23;
-      }
-      
-      timeValue.hours = newHours;
-      
-      // Set this field as active for the dial
-      activeSelector = 'hour';
-      
-      // Update active states for visualization
-      hoursInput.setAttribute('data-active', 'true');
-      minutesInput.setAttribute('data-active', 'false');
-      if (secondsInput) secondsInput.setAttribute('data-active', 'false');
-      
-      // Always update the dial regardless of visibility
-      renderClockDial(canvas, timeValue, {
-        type: TIME_PICKER_TYPE.DIAL,
-        format: config.format,
-        showSeconds: config.showSeconds,
-        prefix: config.prefix,
-        activeSelector
-      });
-      
-      if (onTimeChange) {
-        onTimeChange('hours', newHours);
-      }
-    } else if (type === 'minute') {
-      let newMinutes = numValue;
-      
-      // Handle minute constraints
-      if (numValue < 0) newMinutes = 0;
-      if (numValue > 59) newMinutes = 59;
-      
-      timeValue.minutes = newMinutes;
-      
-      // Set this field as active for the dial
-      activeSelector = 'minute';
-      
-      // Update active states for visualization
-      hoursInput.setAttribute('data-active', 'false');
-      minutesInput.setAttribute('data-active', 'true');
-      if (secondsInput) secondsInput.setAttribute('data-active', 'false');
-      
-      // Always update the dial regardless of visibility
-      renderClockDial(canvas, timeValue, {
-        type: TIME_PICKER_TYPE.DIAL,
-        format: config.format,
-        showSeconds: config.showSeconds,
-        prefix: config.prefix,
-        activeSelector
-      });
-      
-      if (onTimeChange) {
-        onTimeChange('minutes', newMinutes);
-      }
-    } else if (type === 'second') {
-      let newSeconds = numValue;
-      
-      // Handle second constraints
-      if (numValue < 0) newSeconds = 0;
-      if (numValue > 59) newSeconds = 59;
-      
-      timeValue.seconds = newSeconds;
-      
-      // Set this field as active for the dial
-      activeSelector = 'second';
-      
-      // Update active states for visualization
-      hoursInput.setAttribute('data-active', 'false');
-      minutesInput.setAttribute('data-active', 'false');
-      if (secondsInput) secondsInput.setAttribute('data-active', 'true');
-      
-      // Always update the dial regardless of visibility
-      renderClockDial(canvas, timeValue, {
-        type: TIME_PICKER_TYPE.DIAL,
-        format: config.format,
-        showSeconds: config.showSeconds,
-        prefix: config.prefix,
-        activeSelector
-      });
-      
-      if (onTimeChange) {
-        onTimeChange('seconds', newSeconds);
-      }
-    }
-  };
-  
-  // Event handlers for input fields
-  hoursInput.addEventListener('input', handleInputChange);
-  minutesInput.addEventListener('input', handleInputChange);
-  if (secondsInput) {
-    secondsInput.addEventListener('input', handleInputChange);
-  }
-  
-  // Set up keyboard navigation
-  hoursInput.addEventListener('keyup', (e) => {
-    if (e.key === 'Enter') {
-      minutesInput.focus();
-      minutesInput.select();
-    }
-  });
-  
-  minutesInput.addEventListener('keyup', (e) => {
-    if (e.key === 'Enter') {
-      if (config.showSeconds && secondsInput) {
-        secondsInput.focus();
-        secondsInput.select();
-      } else {
-        confirmButton.focus();
-      }
-    }
-  });
-  
-  if (secondsInput) {
-    secondsInput.addEventListener('keyup', (e) => {
-      if (e.key === 'Enter') {
-        confirmButton.focus();
-      }
-    });
-  }
-  
-  // Handle period selection (AM/PM)
-  const handlePeriodChange = (period: TIME_PERIOD) => {
-    if (timeValue.period !== period) {
-      const oldPeriod = timeValue.period;
-      timeValue.period = period;
-      
-      // Adjust hours when switching between AM/PM
-      if (oldPeriod === TIME_PERIOD.AM && period === TIME_PERIOD.PM) {
-        if (timeValue.hours < 12) {
-          timeValue.hours += 12;
-        }
-      } else if (oldPeriod === TIME_PERIOD.PM && period === TIME_PERIOD.AM) {
-        if (timeValue.hours >= 12) {
-          timeValue.hours -= 12;
-        }
-      }
-      
-      // Update display for 12-hour format
-      if (config.format === TIME_FORMAT.AMPM) {
-        const displayHours = timeValue.hours === 0 ? 12 : (timeValue.hours > 12 ? timeValue.hours - 12 : timeValue.hours);
-        hoursInput.value = padZero(displayHours);
-      }
-      
-      // Update period selectors
-      document.querySelectorAll(`.${config.prefix}-time-picker-period-am, .${config.prefix}-time-picker-period-pm`)
-        .forEach(el => {
-          el.classList.remove(`${config.prefix}-time-picker-period--selected`);
-          el.setAttribute('aria-pressed', 'false');
-        });
-      
-      const selectedPeriod = document.querySelector(`.${config.prefix}-time-picker-period-${period.toLowerCase()}`);
-      if (selectedPeriod) {
-        selectedPeriod.classList.add(`${config.prefix}-time-picker-period--selected`);
-        selectedPeriod.setAttribute('aria-pressed', 'true');
-      }
-      
-      // Update dial if visible
-      if (dialContainer.style.display === 'block') {
-        renderClockDial(canvas, timeValue, {
-          type: TIME_PICKER_TYPE.DIAL,
-          format: config.format,
-          showSeconds: config.showSeconds,
-          prefix: config.prefix,
-          activeSelector
-        });
-      }
-      
-      if (onTimeChange) {
-        onTimeChange('hours', timeValue.hours);
-      }
-    }
-  };
-  
-  // Add event listeners for period selectors
-  if (config.format === TIME_FORMAT.AMPM) {
-    const amPeriodElement = document.querySelector(`.${config.prefix}-time-picker-period-am`);
-    const pmPeriodElement = document.querySelector(`.${config.prefix}-time-picker-period-pm`);
-    
-    if (amPeriodElement) {
-      amPeriodElement.addEventListener('click', () => {
-        handlePeriodChange(TIME_PERIOD.AM);
-      });
-    }
-    
-    if (pmPeriodElement) {
-      pmPeriodElement.addEventListener('click', () => {
-        handlePeriodChange(TIME_PERIOD.PM);
-      });
-    }
-  }
-  
-  // Set up the clock dial interaction
-  if (config.type === TIME_PICKER_TYPE.DIAL || dialContainer.style.display === 'block') {
-    // Handle clock dial
-    canvas.addEventListener('click', (event) => {
-      const rect = canvas.getBoundingClientRect();
-      const x = event.clientX - rect.left;
-      const y = event.clientY - rect.top;
-      
-      const selectedValue = getTimeValueFromClick(canvas, x, y, {
-        type: TIME_PICKER_TYPE.DIAL,
-        format: config.format,
-        showSeconds: config.showSeconds,
-        prefix: config.prefix,
-        activeSelector
-      });
-      
-      if (selectedValue !== null) {
-        if (activeSelector === 'hour') {
-          let newHours = selectedValue;
-          
-          // Adjust for 12-hour format
-          if (config.format === TIME_FORMAT.AMPM) {
-            if (timeValue.period === TIME_PERIOD.PM && selectedValue !== 12) {
-              newHours += 12;
-            } else if (timeValue.period === TIME_PERIOD.AM && selectedValue === 12) {
-              newHours = 0;
-            }
-          }
-          
-          timeValue.hours = newHours;
-          
-          // Update input display
-          if (config.format === TIME_FORMAT.AMPM) {
-            const displayHours = newHours === 0 ? 12 : (newHours > 12 ? newHours - 12 : newHours);
-            hoursInput.value = padZero(displayHours);
-          } else {
-            hoursInput.value = padZero(newHours);
-          }
-          
-          if (onTimeChange) {
-            onTimeChange('hours', newHours);
-          }
-        } else if (activeSelector === 'minute') {
-          timeValue.minutes = selectedValue;
-          minutesInput.value = padZero(selectedValue);
-          
-          if (onTimeChange) {
-            onTimeChange('minutes', selectedValue);
-          }
-        } else if (activeSelector === 'second' && secondsInput) {
-          timeValue.seconds = selectedValue;
-          secondsInput.value = padZero(selectedValue);
-          
-          if (onTimeChange) {
-            onTimeChange('seconds', selectedValue);
-          }
-        }
-        
-        // Update dial
-        renderClockDial(canvas, timeValue, {
-          type: TIME_PICKER_TYPE.DIAL,
-          format: config.format,
-          showSeconds: config.showSeconds,
-          prefix: config.prefix,
-          activeSelector
-        });
-      }
-    });
-    
-    // Setup clicking on input fields to change active selector in dial mode
-    hoursInput.addEventListener('click', () => {
-      if (dialContainer.style.display === 'block') {
-        activeSelector = 'hour';
-        
-        // Update active states
-        hoursInput.setAttribute('data-active', 'true');
-        minutesInput.setAttribute('data-active', 'false');
-        if (secondsInput) secondsInput.setAttribute('data-active', 'false');
-        
-        // Update dial
-        renderClockDial(canvas, timeValue, {
-          type: TIME_PICKER_TYPE.DIAL,
-          format: config.format,
-          showSeconds: config.showSeconds,
-          prefix: config.prefix,
-          activeSelector
-        });
-      }
-    });
-    
-    minutesInput.addEventListener('click', () => {
-      if (dialContainer.style.display === 'block') {
-        activeSelector = 'minute';
-        
-        // Update active states
-        hoursInput.setAttribute('data-active', 'false');
-        minutesInput.setAttribute('data-active', 'true');
-        if (secondsInput) secondsInput.setAttribute('data-active', 'false');
-        
-        // Update dial
-        renderClockDial(canvas, timeValue, {
-          type: TIME_PICKER_TYPE.DIAL,
-          format: config.format,
-          showSeconds: config.showSeconds,
-          prefix: config.prefix,
-          activeSelector
-        });
-      }
-    });
-    
-    if (secondsInput) {
-      secondsInput.addEventListener('click', () => {
-        if (dialContainer.style.display === 'block') {
-          activeSelector = 'second';
-          
-          // Update active states
-          hoursInput.setAttribute('data-active', 'false');
-          minutesInput.setAttribute('data-active', 'false');
-          secondsInput.setAttribute('data-active', 'true');
-          
-          // Update dial
-          renderClockDial(canvas, timeValue, {
-            type: TIME_PICKER_TYPE.DIAL,
-            format: config.format,
-            showSeconds: config.showSeconds,
-            prefix: config.prefix,
-            activeSelector
-          });
-        }
-      });
-    }
-  }
-};