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.

หน้านี้สร้างจากซอร์สโดยตรงเมื่อ 2026-08-21 คำอธิบายมาจาก JSDoc ในไฟล์
รันซ้ำได้ด้วย docs_scaffold เมื่อโค้ดเปลี่ยน อย่าแก้ด้วยมือถ้าตั้งใจให้ generate ต่อ

ที่มา

• ไฟล์: Now/js/ColorElementFactory.js (879 บรรทัด)
• รูปแบบ: ES class

เมธอดสาธารณะ (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.

เหตุการณ์

เหตุการณ์เหล่านี้เป็น DOM CustomEvent ที่ dispatch บนอีลิเมนต์ จึงต้องรับด้วย
element.addEventListener() และอ่านค่าจาก event.detail

Data attribute ที่ใช้

data-color

พึ่งพาคลาสอื่น

DropdownPanel · ElementFactory · ElementManager · EventManager