61 lines
1.4 KiB
JavaScript
61 lines
1.4 KiB
JavaScript
const controlGrid = document.getElementById("control-parent");
|
|
|
|
function parseColor(c)
|
|
{
|
|
const groups = c.match(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/i);
|
|
if (groups == null) {
|
|
throw new Error("invalid color", c);
|
|
} else {
|
|
return [parseInt(groups[1], 16), parseInt(groups[2], 16), parseInt(groups[3], 16)];
|
|
}
|
|
}
|
|
|
|
class ColorInput {
|
|
constructor(label, defaultValue)
|
|
{
|
|
const parent = controlGrid;
|
|
|
|
const labelE = document.createElement("label");
|
|
labelE.innerHTML = label;
|
|
|
|
const inputE = document.createElement("input");
|
|
inputE.type = "color";
|
|
inputE.className = "span-2";
|
|
|
|
const rowE = document.createElement("row");
|
|
const sepE = document.createElement("row-separator");
|
|
|
|
rowE.appendChild(labelE);
|
|
rowE.appendChild(inputE);
|
|
|
|
parent.appendChild(rowE);
|
|
parent.appendChild(sepE);
|
|
|
|
this.label = label;
|
|
this.input = inputE;
|
|
|
|
this.lastValue = undefined;
|
|
|
|
const storageValue = localStorage.getItem(this.label);
|
|
if (storageValue !== null) {
|
|
this.input.value = storageValue;
|
|
} else {
|
|
this.input.value = defaultValue;
|
|
}
|
|
|
|
this.update();
|
|
}
|
|
|
|
update()
|
|
{
|
|
const rawValue = this.input.value;
|
|
if (rawValue !== this.lastValue) {
|
|
this.lastValue = rawValue;
|
|
localStorage.setItem(this.label, rawValue);
|
|
}
|
|
return parseColor(rawValue);
|
|
}
|
|
};
|
|
|
|
export { ColorInput };
|