ColorElementFactory

EmbeddedColorPicker A hand-built color picker that replaces the native <input type="color"> with a palette-based dropdown UI. Instantiated once per element by ColorElementFactory; the original input is hidden but kept so the form still submits its value.

Generated from source on 2026-08-21. Descriptions come from JSDoc in the file.
Re-run docs_scaffold when the code changes; hand edits are lost on regeneration

Source

• File: Now/js/ColorElementFactory.js (879 lines)
• Form: ES class

Public methods (15)

close()

Close the picker dropdown. Delegates to the shared DropdownPanel, which triggers the picker's own close callback.

static createInstance(element, config = {})

Get or create the element's instance state, same as the base ElementFactory.

destroy()

Tear the picker down and remove its wrapper from the DOM.

getColor()

The color currently stored for form submission.

getElement()

The wrapper element this picker rendered into.

normalizeColor(color)

Coerce a color value into the picker's canonical hex form. Returns '' when the value carries no color (empty, transparent, inherit, currentColor, or any fully transparent color) and null when the value is not a color at all — a transparent value never becomes black.

open()

Open the picker dropdown. Ignored while the field is disabled, read-only, or already open.

selectColor(color, options = {})

Choose a color and update the display, the hidden input and the swatch.

setColor(color, options = {})

Set the picker's color programmatically. A color that fails normalisation is silently ignored rather than clearing the current selection; a value that carries no color ('', transparent, inherit, a fully transparent color) clears it and leaves the picker empty.

setDisabled(disabled)

Enable or disable the picker, closing it first when disabling.

setReadonly(readonly)

Toggle read-only presentation, closing the picker first when turning it on.

static setupElement(instance)

Replace the native color input with an EmbeddedColorPicker.

static setupProperties(instance)

Intercept the element's value property so setting it updates the picker. Only installed when the platform's own value descriptor is configurable. A recursion guard (_syncingHiddenValue) lets the picker write back to the hidden input without triggering itself again.

syncFromElementValue(color)

Apply a color that was set directly on the original element's value. Called from the intercepted value setter in setupProperties, so element.value = '#fff' keeps the visible picker in sync.

toggle()

Open the picker if closed, close it if open.

Events

These are DOM CustomEvents dispatched on the element, so listen with
element.addEventListener() and read the values from event.detail.

Data attributes used

data-color

Depends on

DropdownPanel · ElementFactory · ElementManager · EventManager