pickit-color 1.0.2 → 1.1.0

package/src/index.ts

@@ -17,6 +17,8 @@ export interface ColorPickerOptions {
   inline?: boolean;
   compact?: boolean;
   inputPreview?: boolean;
+  previewTarget?: string;
+  previewProperty?: string;
   onChange?: (color: string) => void;
   onOpen?: () => void;
   onClose?: () => void;
@@ -103,6 +105,8 @@ export class ColorPicker {
       inline: options.inline ?? false,
       compact: options.compact ?? false,
       inputPreview: options.inputPreview ?? false,
+      previewTarget: options.previewTarget || "",
+      previewProperty: options.previewProperty || "background-color",
       onChange: options.onChange || (() => {}),
       onOpen: options.onOpen || (() => {}),
       onClose: options.onClose || (() => {}),
@@ -147,9 +151,11 @@ export class ColorPicker {
     // Update display
     this.updateColorDisplay();
 
-    // Open if inline
-    if (this.options.inline) {
-      this.open();
+    // Open if inline (without scrolling)
+    if (this.options.inline && this.container) {
+      this.isOpen = true;
+      this.container.style.display = "block";
+      this.options.onOpen();
     }
   }
 
@@ -518,6 +524,9 @@ export class ColorPicker {
         this.updateColorDisplay();
         this.announceColorChange();
       });
+      this.hueSlider.addEventListener("touchstart", (e) => {
+        this.handleSliderTouch(e, this.hueSlider!, 'h', 0, 360);
+      });
     }
 
     // Saturation slider (sliderMode only)
@@ -527,6 +536,9 @@ export class ColorPicker {
         this.updateColorDisplay();
         this.announceColorChange();
       });
+      this.saturationSlider.addEventListener("touchstart", (e) => {
+        this.handleSliderTouch(e, this.saturationSlider!, 's', 0, 100);
+      });
     }
 
     // Lightness slider (sliderMode only)
@@ -536,6 +548,9 @@ export class ColorPicker {
         this.updateColorDisplay();
         this.announceColorChange();
       });
+      this.lightnessSlider.addEventListener("touchstart", (e) => {
+        this.handleSliderTouch(e, this.lightnessSlider!, 'l', 0, 100);
+      });
     }
 
     // Alpha slider
@@ -546,6 +561,9 @@ export class ColorPicker {
         this.updateColorDisplay();
         this.announceColorChange();
       });
+      this.alphaSlider.addEventListener("touchstart", (e) => {
+        this.handleSliderTouch(e, this.alphaSlider!, 'a', 0, 100, true);
+      });
     }
 
     // Saturation box
@@ -553,6 +571,9 @@ export class ColorPicker {
       this.colorBox.addEventListener("mousedown", (e) =>
         this.onSaturationMouseDown(e)
       );
+      this.colorBox.addEventListener("touchstart", (e) =>
+        this.onSaturationTouchStart(e)
+      );
       this.colorBox.addEventListener("keydown", (e) =>
         this.onSaturationKeyDown(e)
       );
@@ -706,6 +727,83 @@ export class ColorPicker {
     document.addEventListener("mouseup", onMouseUp);
   }
 
+  private onSaturationTouchStart(e: TouchEvent): void {
+    e.preventDefault();
+    const touch = e.touches[0];
+    this.updateSaturationFromTouch(touch);
+
+    const onTouchMove = (e: TouchEvent) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      this.updateSaturationFromTouch(touch);
+    };
+
+    const onTouchEnd = () => {
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onTouchEnd);
+    };
+
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("touchend", onTouchEnd);
+  }
+
+  private updateSaturationFromTouch(touch: Touch): void {
+    if (!this.colorBox) return;
+
+    const rect = this.colorBox.getBoundingClientRect();
+    const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
+    const y = Math.max(0, Math.min(touch.clientY - rect.top, rect.height));
+
+    this.currentColor.s = (x / rect.width) * 100;
+    this.currentColor.l = 100 - (y / rect.height) * 100;
+
+    this.updateColorDisplay();
+    this.announceColorChange();
+  }
+
+  private handleSliderTouch(
+    e: TouchEvent, 
+    slider: HTMLInputElement, 
+    property: 'h' | 's' | 'l' | 'a',
+    min: number,
+    max: number,
+    isAlpha: boolean = false
+  ): void {
+    const updateFromTouch = (touch: Touch) => {
+      const rect = slider.getBoundingClientRect();
+      const x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
+      const ratio = x / rect.width;
+      const value = min + ratio * (max - min);
+      
+      if (isAlpha) {
+        this.currentColor[property] = value / 100;
+      } else {
+        this.currentColor[property] = Math.round(value);
+      }
+      
+      slider.value = String(Math.round(value));
+      this.updateColorDisplay();
+      this.announceColorChange();
+    };
+
+    const touch = e.touches[0];
+    updateFromTouch(touch);
+
+    const onTouchMove = (e: TouchEvent) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      updateFromTouch(touch);
+    };
+
+    const onTouchEnd = () => {
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onTouchEnd);
+    };
+
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("touchend", onTouchEnd);
+  }
+
   private updateSaturationFromMouse(e: MouseEvent): void {
     if (!this.colorBox) return;
 
@@ -804,6 +902,15 @@ export class ColorPicker {
       this.input.value = this.formatColor(this.currentColor);
       this.options.onChange(this.input.value);
       
+      // Update preview target if configured
+      if (this.options.previewTarget) {
+        const target = document.querySelector(this.options.previewTarget) as HTMLElement;
+        if (target) {
+          const property = this.options.previewProperty || 'background-color';
+          target.style.setProperty(property, this.input.value);
+        }
+      }
+      
       // Update compact button preview
       if (this.compactButton) {
         const preview = this.compactButton.querySelector('.colorpicker-compact-preview') as HTMLElement;
@@ -1038,25 +1145,27 @@ export class ColorPicker {
 
     this.options.onOpen();
 
-    // Focus first interactive element based on mode
-    setTimeout(() => {
-      let focusTarget: HTMLElement | null = null;
-      
-      if (this.options.presetsOnly) {
-        // In presets-only mode, focus first preset
-        focusTarget = this.container?.querySelector('.colorpicker-preset') as HTMLElement;
-      } else if (this.options.sliderMode) {
-        // In slider mode, focus first slider (hue)
-        focusTarget = this.hueSlider;
-      } else {
-        // In standard mode, focus saturation box
-        focusTarget = this.colorBox;
-      }
-      
-      if (focusTarget) {
-        focusTarget.focus();
-      }
-    }, 0);
+    // Auto-focus only for popup mode, not inline
+    if (!this.options.inline) {
+      setTimeout(() => {
+        let focusTarget: HTMLElement | null = null;
+        
+        if (this.options.presetsOnly) {
+          // In presets-only mode, focus first preset
+          focusTarget = this.container?.querySelector('.colorpicker-preset') as HTMLElement;
+        } else if (this.options.sliderMode) {
+          // In slider mode, focus first slider (hue)
+          focusTarget = this.hueSlider;
+        } else {
+          // In standard mode, focus saturation box
+          focusTarget = this.colorBox;
+        }
+        
+        if (focusTarget) {
+          focusTarget.focus();
+        }
+      }, 0);
+    }
   }
 
   public close(): void {
@@ -1209,6 +1318,14 @@ export function initColorPickers(root: Document | HTMLElement = document): Color
           case 'inputPreview':
             options.inputPreview = value === 'true' || value === '1';
             break;
+          case 'target':
+          case 'previewTarget':
+            options.previewTarget = value;
+            break;
+          case 'property':
+          case 'previewProperty':
+            options.previewProperty = value;
+            break;
         }
       });
     }