46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
export const ColourPicker = {
|
|
mounted() {
|
|
this._onClickAway = (e) => {
|
|
if (!this.el.contains(e.target)) {
|
|
this.el.querySelector(".colour-picker-popover")?.classList.add("hidden");
|
|
}
|
|
};
|
|
document.addEventListener("mousedown", this._onClickAway);
|
|
|
|
this._setupCustomInput();
|
|
},
|
|
|
|
updated() {
|
|
this._setupCustomInput();
|
|
},
|
|
|
|
destroyed() {
|
|
document.removeEventListener("mousedown", this._onClickAway);
|
|
},
|
|
|
|
_setupCustomInput() {
|
|
const input = this.el.querySelector(".colour-picker-custom input");
|
|
if (!input || input._cpBound) return;
|
|
input._cpBound = true;
|
|
|
|
const pushColor = () => {
|
|
let val = input.value.trim();
|
|
if (val && !val.startsWith("#")) val = "#" + val;
|
|
if (/^#[0-9a-fA-F]{6}$/.test(val)) {
|
|
const event = this.el.dataset.pickEvent;
|
|
this.pushEventTo(this.el.dataset.target, event, { color: val });
|
|
this.el.querySelector(".colour-picker-popover")?.classList.add("hidden");
|
|
}
|
|
};
|
|
|
|
input.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
pushColor();
|
|
}
|
|
});
|
|
|
|
input.addEventListener("blur", pushColor);
|
|
}
|
|
};
|