89 lines
2.2 KiB
JavaScript
89 lines
2.2 KiB
JavaScript
import AbstractFormInputElement from "./form-element.mjs";
|
|
|
|
/**
|
|
* A class designed to standardize the behavior for a hue selector UI component.
|
|
* @extends {AbstractFormInputElement<number>}
|
|
*/
|
|
export default class HTMLHueSelectorSlider extends AbstractFormInputElement {
|
|
|
|
/** @override */
|
|
static tagName = "hue-slider";
|
|
|
|
/**
|
|
* The color range associated with this element.
|
|
* @type {HTMLInputElement|null}
|
|
*/
|
|
#input;
|
|
|
|
/* -------------------------------------------- */
|
|
|
|
/** @override */
|
|
_buildElements() {
|
|
|
|
// Initialize existing value
|
|
this._setValue(this.getAttribute("value"));
|
|
|
|
// Build elements
|
|
this.#input = this._primaryInput = document.createElement("input");
|
|
this.#input.className = "color-range";
|
|
this.#input.type = "range";
|
|
this.#input.min = "0";
|
|
this.#input.max = "360";
|
|
this.#input.step = "1";
|
|
this.#input.disabled = this.disabled;
|
|
this.#input.value = this._value * 360;
|
|
return [this.#input];
|
|
}
|
|
|
|
/* -------------------------------------------- */
|
|
|
|
/**
|
|
* Refresh the active state of the custom element.
|
|
* @protected
|
|
*/
|
|
_refresh() {
|
|
this.#input.style.setProperty("--color-thumb", Color.fromHSL([this._value, 1, 0.5]).css);
|
|
}
|
|
|
|
/* -------------------------------------------- */
|
|
|
|
/**
|
|
* Activate event listeners which add dynamic behavior to the custom element.
|
|
* @protected
|
|
*/
|
|
_activateListeners() {
|
|
this.#input.oninput = this.#onInputColorRange.bind(this);
|
|
}
|
|
|
|
/* -------------------------------------------- */
|
|
|
|
/**
|
|
* Update the thumb and the value.
|
|
* @param {FormDataEvent} event
|
|
*/
|
|
#onInputColorRange(event) {
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
this.value = this.#input.value / 360;
|
|
}
|
|
|
|
/* -------------------------------------------- */
|
|
/* Form Handling
|
|
/* -------------------------------------------- */
|
|
|
|
/** @override */
|
|
_setValue(value) {
|
|
value = Number(value);
|
|
if ( !value.between(0, 1) ) throw new Error("The value of a hue-slider must be on the range [0,1]");
|
|
this._value = value;
|
|
this.setAttribute("value", String(value));
|
|
}
|
|
|
|
/* -------------------------------------------- */
|
|
|
|
/** @override */
|
|
_toggleDisabled(disabled) {
|
|
this.#input.disabled = disabled;
|
|
}
|
|
}
|