chunk-TXJFAAIW.js

Overview

This file implements a comprehensive color picker UI component with support for multiple color formats (RGB, HSL, Hex), alpha channel control, and an editable color input. It provides a class-based API to create, display, update, and interact with the color picker widget in a web page. The component supports popup and inline modes, customizable layouts and options, and exposes events for color change, opening, and closing.

The file also includes utility functions and classes for color parsing, conversion between color spaces (RGB↔HSL), and event management to handle user input and interactions.

Primary functionality includes:

• Parsing and representing colors in various formats.

• Rendering an interactive color picker UI with sliders for hue, saturation/lightness, and alpha.

• Allowing direct text input of colors in multiple formats.

• Managing event listeners for mouse/touch input on sliders.

• Supporting popup display with positioning relative to a parent element.

• Exposing hooks for external code to react to user color changes and picker lifecycle events.

Detailed Explanation of Classes and Functions

Class: z (Color)

This class encapsulates color representation and conversion logic.

Purpose:
Represents a color with internal storage in either RGBA or HSLA format, provides methods to convert, print, and parse color values.

Constructor:
constructor(i, e, t, r)

• Accepts color input in several formats:

  • String (e.g., hex #abc123, rgb/hsl strings, color names)

  • Array of RGBA components [r, g, b, a]

  • Individual RGBA components as separate arguments.

• Parses input to set internal RGBA or HSLA representation.

Properties:

• rgba (getter/setter): Returns or sets the color as an RGBA array [r,g,b,a]. Setting clears cached HSLA.

• hsla (getter/setter): Returns or sets the color as an HSLA array [h,s,l,a]. Setting clears cached RGBA.

• rgbString (getter): Returns color as "rgb(r,g,b)" string.

• rgbaString (getter): Returns color as "rgba(r,g,b,a)" string.

• hslString (getter): Returns color as "hsl(h,s%,l%)" string.

• hslaString (getter): Returns color as "hsla(h,s%,l%,a)" string.

• hex (getter/setter): Returns or sets color as hexadecimal string. Setter converts hex to RGBA.

Methods:

• printRGB(includeAlpha): Returns RGB(A) string. If includeAlpha true, includes alpha channel.

• printHSL(includeAlpha): Returns HSL(A) string. If includeAlpha true, includes alpha channel.

Static Methods:

• hexToRgb(hex): Converts hex color string to RGBA array.

• nameToRgb(name): Converts CSS color name to RGBA using a predefined mapping.

• rgbToHsl(rgba): Converts RGBA to HSLA color.

• hslToRgb(hsla): Converts HSLA to RGBA color.

Usage Example:

let c1 = new z("#3498db");         // Hex input
console.log(c1.rgba);               // [52, 152, 219, 1]
console.log(c1.hslaString);         // "hsla(204,70%,53%,1)"
c1.hsla = [0.5, 0.5, 0.5, 0.8];     // Set HSLA color
console.log(c1.printRGB(true));     // "rgba(64,128,128,0.8)"

Class: F (EventManager)

Purpose:
Manages DOM event listeners, providing add, remove, and destroy functionality to help attach and detach events cleanly.

Methods:

• add(target, type, handler): Adds an event listener and tracks it internally.

• remove(target?, type?, handler?): Removes matching event listeners based on provided filters.

• destroy(): Removes all managed event listeners.

Usage:
Used internally to manage events for the picker UI elements such as sliders and buttons.

Function: U(htmlString)

Creates a DOM element from an HTML string.

• Parameters:

  • htmlString - string containing HTML markup.

• Returns:

  • The first child element parsed from the string.

Function: T(eventManager, element, callback)

Sets up mouse and touch drag event handlers on a slider element to track normalized (0-1) coordinates during interaction.

• Parameters:

  • eventManager - instance of F to manage events.

  • element - DOM element to attach drag events.

  • callback - function called with normalized x and y coordinates during dragging.

Supports mouse and touch events, ensures proper coordinate clamping, and prevents default browser behaviors.

Class: W (ColorPicker)

Purpose:
Main exported class implementing the interactive color picker component.

Constructor:
new W(options)

• Accepts an options object to configure picker behavior and appearance.

Key Settings:

• popup (string): Popup position ("right", "left", "top", "bottom").

• layout (string): Layout style ("default").

• alpha (boolean): Show alpha slider.

• editor (boolean): Show input text editor.

• editorFormat (string): Color format for editor ("hex", "rgb", "hsl").

• cancelButton (boolean): Show cancel button.

• defaultColor (string): Initial color if none set.

• parent (HTMLElement): Container element for the picker.

Public Methods:

• setOptions(options): Update configuration and re-initialize picker.

• setColor(color, options): Set current color. Accepts string or color instance.

• setColour(...): Alias of setColor.

• show(): Render and display the picker UI; returns true if successful.

• hide(): Hide the picker UI.

• destroy(): Remove picker UI and event listeners.

Events (Properties to assign callbacks):

• onChange(color): Called when color changes.

• onDone(color): Called when user confirms selection.

• onOpen(color): Called when picker opens.

• onClose(color): Called when picker closes.

Internal Methods & Workflow:

• Initializes DOM elements from an HTML template or existing parent.

• Binds event listeners to hue, saturation/lightness, and alpha sliders using T().

• Allows user input in an editor box for manual color entry.

• Updates UI elements (slider handles, color preview, input) when color changes.

• Manages popup positioning relative to the parent element.

• Handles keyboard and mouse events for accessibility and interaction.

• Supports toggling visibility and cleanup.

Usage Example:

let picker = new W({
  parent: document.getElementById("color-picker-container"),
  alpha: true,
  editorFormat: "rgb",
  defaultColor: "#ff0000"
});

picker.onChange = (color) => {
  console.log("Color changed:", color.rgbaString);
};

picker.show();

Important Implementation Details

• The z class implements robust color parsing and conversion supporting CSS color names, hex strings with optional alpha, and rgb()/hsl() CSS functions.

• Color conversions use standard algorithms to convert between RGB and HSL color spaces.

• The color picker UI uses layered linear gradients and absolute positioned selectors to visually represent hue, saturation/lightness, and alpha channels.

• Event handling abstracts mouse/touch drag events to normalized coordinates, allowing smooth slider interactions.

• The picker supports popup mode with dynamic positioning and keyboard accessibility, including keyboard shortcuts to open/close the picker.

• The code uses a minimal templated HTML string to generate the picker DOM structure dynamically.

• The styling is injected dynamically into the document head as a <style> element with scoped CSS classes.

Interaction With Other System Components

• This file exports the W class as the default export, which is the main interface for embedding and controlling the color picker component.

• It depends on a small utility file "./chunk-EQDQRRRY.js" (imported at the top), which is not detailed here but likely contains common helpers or polyfills.

• The color picker component is intended to be integrated into a larger UI framework or application where color input is needed.

• External code interacts primarily via options, event callbacks (onChange, onDone, etc.), and method calls (setColor, show, hide).

• The component manages DOM elements within a specified parent container and uses standard web APIs for DOM and event handling.

Mermaid Diagram

classDiagram
class z {
+constructor(...)
+rgba
+hsla
+rgbString
+rgbaString
+hslString
+hslaString
+hex
+printRGB()
+printHSL()
+static hexToRgb()
+static nameToRgb()
+static rgbToHsl()
+static hslToRgb()
}
class F {
+add()
+remove()
+destroy()
}
class W {
+setOptions()
+setColor()
+setColour()
+show()
+hide()
+destroy()
+onChange
+onDone
+onOpen
+onClose
}
F ..> HTMLElement : manages events on
W *-- F : uses
W *-- z : uses color parsing/conversion

This diagram illustrates the main class relationships:

• W is the color picker component class.

• z is the color representation and conversion class used internally by W.

• F manages DOM event listeners and is used by W to handle user interactions.

This file is a self-contained color picker implementation designed for flexible integration into web applications requiring color selection UI with rich format support and customizable interaction. It encapsulates color math, UI rendering, and event management within a single module.