color-elements 0.0.2 → 0.0.3

package/src/color-swatch/color-swatch.js

@@ -1,263 +1,241 @@
-import Color from "../common/color.js";
-import defineEvents from "../../node_modules/nude-element/src/events/defineEvents.js";
-import "../color-gamut/color-gamut.js";
+import ColorElement from "../common/color-element.js";
+import "../gamut-badge/gamut-badge.js";
 
 let importIncrementable;
 
-const Self = class ColorSwatch extends HTMLElement {
-	static initQueue = [];
-
-	#dom = {};
+const Self = class ColorSwatch extends ColorElement {
+	static tagName = "color-swatch";
+	static url = import.meta.url;
+	static dependencies = new Set(["gamut-badge"]);
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<slot name="swatch">
+			<div id="swatch" part="swatch">
+				<slot name="swatch-content"></slot>
+			</div>
+		</slot>
+		<div id="wrapper" part="details">
+			<slot name="before"></slot>
+			<div part="label"></div>
+			<div part="color">
+				<slot></slot>
+			</div>
+			<slot name="after"></slot>
+		</div>`;
 
 	constructor () {
 		super();
-		this.attachShadow({mode: "open"});
-		let styleURL = new URL("./color-swatch.css", import.meta.url);
-		this.shadowRoot.innerHTML = `
-			<style>@import url("${ styleURL }")</style>
-			<slot name="swatch">
-				<div id="swatch" part="swatch">
-					<slot name="swatch-content"></slot>
-				</div>
-			</slot>
-			<div id="wrapper">
-				<slot name="before"></slot>
-				<div part="color-wrapper">
-					<slot></slot>
-				</div>
-				<slot name="after"></slot>
-			</div>
-		`;
-	}
 
-	#initialized;
+		this._el = {
+			wrapper: this.shadowRoot.querySelector("#wrapper"),
+			label: this.shadowRoot.querySelector("[part=label]"),
+			colorWrapper: this.shadowRoot.querySelector("[part=color]"),
+		};
 
-	connectedCallback () {
-		if (!this.#initialized) {
-			this.#initialize();
-		}
-
-		this.constructor.initQueue.forEach(init => init.call(this));
-
-		// This should eventually be a custom state
-		this.#dom.wrapper.classList.toggle("static", !this.#dom.input);
-
-		if (this.#dom.input) {
-			if (!this.#dom.input.incrementable) {
-				// Increment numbers by keyboard arrow keys
-				importIncrementable.then(Incrementable => new Incrementable(this.#dom.input));
-			}
-		}
+		this._slots = {
+			default: this.shadowRoot.querySelector("slot:not([name])"),
+		};
 
-		this.#render();
+		this.#updateStatic();
+		this._slots.default.addEventListener("slotchange", evt => this.#updateStatic());
 	}
 
-	#errorTimeout;
-	#cs;
-	#scopeRoot;
-
-	// Gets called when the element is connected for the first time
-	#initialize ({force} = {}) {
-		if (!force && this.#initialized) {
-			return;
-		}
-
-		this.#initialized = true;
+	#updateStatic () {
+		let previousInput = this._el.input;
+		let input = this._el.input = this.querySelector("input");
 
-		this.#dom.wrapper = this.shadowRoot.querySelector("#wrapper");
-		this.#dom.colorWrapper = this.shadowRoot.querySelector("[part=color-wrapper]");
-		this.#dom.input = this.querySelector("input");
-		this.#dom.slot = this.shadowRoot.querySelector("slot:not([name])");
+		this.static = !input;
 
-		this.#dom.slot.addEventListener("slotchange", evt => {
-			this.#render();
-		});
+		// This should eventually be a custom state
+		this._el.wrapper.classList.toggle("static", this.static);
 
-		if (this.#dom.input) {
+		if (input && input !== previousInput) {
 			importIncrementable ??= import("https://incrementable.verou.me/incrementable.mjs").then(m => m.default);
-			this.#dom.input.addEventListener("input", evt => {
-				this.#render(evt);
-			});
-		}
-
-		this.verbatim = this.hasAttribute("verbatim");
-
-		if (this.verbatim) {
-			// Cannot display gamut info without parsing the color
-			this.setAttribute("gamuts", "none");
-		}
-
-		this.gamuts = null;
-		if (!this.matches('[gamuts="none"]')) {
-			this.gamuts = this.getAttribute("gamuts") ?? "srgb, p3, rec2020: P3+, prophoto: PP";
-			this.#dom.gamutIndicator = document.createElement("color-gamut");
+			importIncrementable?.then(Incrementable => new Incrementable(input));
 
-			Object.assign(this.#dom.gamutIndicator, {
-				gamuts: this.gamuts,
-				id: "gamut",
-				part: "gamut",
-				exportparts: "label: gamutlabel",
+			input.addEventListener("input", evt => {
+				this.value = evt.target.value;
 			});
+		}
+	}
 
-			this.#dom.colorWrapper.appendChild(this.#dom.gamutIndicator);
+	get gamut () {
+		return this._el.gamutIndicator.gamut;
+	}
 
-			this.#dom.gamutIndicator.addEventListener("gamutchange", evt => {
-				this.setAttribute("gamut", evt.detail.gamut);
-				this.dispatchEvent(new CustomEvent("gamutchange", {
-					detail: evt.detail,
-				}));
-			});
-		}
+	get swatchTextContent () {
+		// Children that are not assigned to another slot
+		return [...this.childNodes].filter(n => !n.slot).map(n => n.textContent).join("").trim();
+	}
 
-		if (this.hasAttribute("property")) {
-			this.property = this.getAttribute("property");
-			this.scope = this.getAttribute("scope") ?? ":root";
-			this.#dom.style = document.createElement("style");
-			document.head.appendChild(this.#dom.style);
+	propChangedCallback ({name, prop, detail: change}) {
+		let input = this._el.input;
 
-			let varRef = `var(${this.property})`;
-			if (this.verbatim) {
-				this.style.setProperty("--color", varRef);
-				this.value ||= varRef;
+		if (name === "gamuts") {
+			if (this.gamuts === "none") {
+				this._el.gamutIndicator?.remove();
+				this._el.gamutIndicator = null;
 			}
-			else {
-				let scopeRoot = this.closest(this.scope);
-
-				// Is contained within scope root
-				if (scopeRoot) {
-					this.style.setProperty("--color", varRef);
+			else if (this.gamuts) {
+				if (!this._el.gamutIndicator) {
+					this._el.gamutIndicator = Object.assign(document.createElement("gamut-badge"), {
+						id: "gamut",
+						part: "gamut",
+						exportparts: "label: gamutLabel",
+						gamuts: this.gamuts,
+						color: this.color,
+					});
+
+					this.shadowRoot.append(this._el.gamutIndicator);
+
+					this._el.gamutIndicator.addEventListener("gamutchange", evt => {
+						let gamut = this._el.gamutIndicator.gamut;
+						this.setAttribute("gamut", gamut);
+						this.dispatchEvent(new CustomEvent("gamutchange", {
+							detail: gamut,
+						}));
+					});
 				}
-
-				scopeRoot ??= document.querySelector(this.scope);
-
-				if (scopeRoot) {
-					let cs = getComputedStyle(scopeRoot);
-					this.value = cs.getPropertyValue(this.property);
+				else {
+					this._el.gamutIndicator.gamuts = this.gamuts;
 				}
 			}
 		}
-	}
-
-	#render (evt) {
-		if (!this.#initialized) {
-			return;
-		}
 
-		clearTimeout(this.#errorTimeout);
-
-		if (!this.isConnected) {
-			return;
+		if (name === "value") {
+			if (input && (!input.value || input.value !== this.value)) {
+				input.value = this.value;
+			}
 		}
 
-		let value = this.value;
-		this.#color = null;
-
-		if (value) {
-			try {
-				this.#color = new Color(value);
-			}
-			catch (e) {
-				// Why a timeout? We don't want to produce errors for intermediate states while typing,
-				// but if this is a genuine error, we do want to communicate it.
-				this.#errorTimeout = setTimeout(_ => this.#dom.input?.setCustomValidity(e.message), 500);
+		if (name === "label") {
+			if (this.label.length && this.label !== this.swatchTextContent) {
+				this._el.label.textContent = this.label;
 			}
-
-			if (this.#color) {
-				this.#setColor(this.#color);
-				this.#dom.input?.setCustomValidity("");
+			else {
+				this._el.label.textContent = "";
 			}
-
-			this.dispatchEvent(new CustomEvent("colorchange", {
-				detail: {
-					color: this.#color,
-				},
-			}));
 		}
-	}
 
-	get gamut () {
-		return this.#dom.gamutIndicator.gamut;
-	}
+		if (name === "color") {
+			let isValid = this.color !== null || !this.value;
 
-	get value () {
-		return this.#dom.input?.value ?? this.textContent.trim();
-	}
+			input?.setCustomValidity(isValid ? "" : "Invalid color");
 
-	set value (value) {
-		let oldValue = this.value;
-		if (value === oldValue) {
-			return;
+			if (this._el.gamutIndicator) {
+				this._el.gamutIndicator.color = this.color;
+			}
+
+			let colorString = this.color?.display();
+			this.style.setProperty("--color", colorString);
 		}
 
-		this.#setValue(value);
-		this.#render();
-	}
+		if (name === "colorInfo") {
+			if (!this.colorInfo) {
+				return;
+			}
 
-	#setValue (value) {
-		if (!this.#initialized) {
-			this.#initialize();
-		}
+			this._el.info ??= Object.assign(document.createElement("dl"), {part: "info"});
+			if (!this._el.info.parentNode) {
+				this._el.colorWrapper.after(this._el.info);
+			}
 
-		if (this.#dom.input) {
-			this.#dom.input.value = value;
-		}
-		else {
-			this.textContent = value;
-		}
-	}
+			let info = [];
+			for (let coord of this.info) {
+				let [label, channel] = Object.entries(coord)[0];
 
-	#color;
-	get color () {
-		return this.#color;
-	}
+				let value = this.colorInfo[channel];
+				if (value === undefined) {
+					continue;
+				}
 
-	set color (color) {
-		if (typeof color === "string") {
-			color = new Color(color);
-		}
+				value = typeof value === "number" ? Number(value.toPrecision(4)) : value;
 
-		this.#setColor(color);
+				info.push(`<div class="coord"><dt>${ label }</dt><dd>${ value }</dd></div>`);
+			}
 
-		let colorString;
-		if (this.verbatim && this.property) {
-			colorString = `var(${this.property})`;
-		}
-		else {
-			colorString = color.toString({ precision: 2, inGamut: false });
+			this._el.info.innerHTML = info.join("\n");
 		}
-		this.#setValue(colorString);
 	}
 
-	#setColor (color) {
-		this.#color = color;
-		let colorString;
-
-		if (this.verbatim && this.property) {
-			colorString = `var(${this.property})`;
-		}
-		else {
-			try {
-				colorString = this.#color.display({inGamut: false});
-			}
-			catch (e) {
-				colorString = this.value;
-			}
-		}
+	static props = {
+		size: {},
+		open: {},
+		gamuts: {
+			default: "srgb, p3, rec2020: P3+, prophoto: PP",
+		},
+		value: {
+			type: String,
+			default () {
+				if (this._el.input) {
+					return this._el.input.value;
+				}
 
-		if (this.value === colorString) {
-			return;
-		}
+				return this.swatchTextContent;
+			},
+			reflect: {
+				from: true,
+			},
+		},
+		label: {
+			type: String,
+			default () {
+				return this.swatchTextContent;
+			},
+			convert (value) {
+				return value.trim();
+			},
+		},
+		color: {
+			get type () {
+				return ColorSwatch.Color;
+			},
+			get () {
+				if (!this.value) {
+					return null;
+				}
 
-		this.style.setProperty("--color", colorString);
+				return ColorSwatch.Color.get(this.value);
+			},
+			set (value) {
+				this.value = ColorSwatch.Color.get(value)?.display();
+			},
+			reflect: false,
+		},
+		info: {
+			type: {
+				is: Array,
+				values: {
+					is: Object,
+					defaultKey: (coord, i) => ColorSwatch.Color.Space.resolveCoord(coord)?.name,
+				},
+			},
+			default: [],
+			reflect: {
+				from: true,
+			},
+		},
+		colorInfo: {
+			get () {
+				if (!this.info.length || !this.color) {
+					return;
+				}
 
-		if (this.property) {
-			this.#dom.style.textContent = `${this.scope} { ${this.property}: ${colorString}; }`;
-		}
+				let ret = {};
+				for (let coord of this.info) {
+					let [label, channel] = Object.entries(coord)[0];
+					try {
+						ret[channel] = this.color.get(channel);
+					}
+					catch (e) {
+						console.error(e);
+					}
+				}
 
-		if (this.#dom.gamutIndicator) {
-			this.#dom.gamutIndicator.color = this.#color;
-		}
-	}
+				return ret;
+			},
+		},
+	};
 
 	static events = {
 		colorchange: {
@@ -267,12 +245,8 @@ const Self = class ColorSwatch extends HTMLElement {
 			propchange: "value",
 		},
 	};
+};
 
-	static observedAttributes = ["for", "property"];
-}
-
-defineEvents(Self);
-
-customElements.define("color-swatch", Self);
+Self.define();
 
-export default Self;
+export default Self;

package/src/common/color-element.js

@@ -0,0 +1,86 @@
+import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import { getType, wait } from "./util.js";
+
+const Self = class ColorElement extends NudeElement {
+	// TODO make lazy
+	static Color;
+	static all = {};
+	static dependencies = new Set();
+
+	constructor () {
+		super();
+
+		if (this.constructor.shadowTemplate !== undefined) {
+			this.attachShadow({mode: "open"});
+			this.shadowRoot.innerHTML = this.constructor.shadowTemplate;
+		}
+	}
+
+	static async define () {
+		Self.all[this.tagName] = this;
+		let colorTags = Object.keys(Self.all);
+
+		if (this.shadowTemplate) {
+			// TODO find dependencies
+			let colorTagRegex = RegExp(`(?<=</)(${ colorTags.join("|") })(?=>)`, "g");
+			(this.shadowTemplate.match(colorTagRegex) ?? []).forEach(tag => {
+				this.dependencies ??= new Set();
+				this.dependencies.add(tag);
+			});
+
+			if (this.shadowStyle) {
+				let url = this.shadowStyle;
+				url = url === true ? `./${this.tagName}.css` : url;
+				url = new URL(url, this.url);
+				this.shadowTemplate = `<style>@import url("${ url }")</style>` + "\n" + this.shadowTemplate;
+			}
+		}
+
+		// Hide elements before they are defined
+		let style = document.getElementById("color-element-styles")
+		          ?? Object.assign(document.createElement("style"), {id: "color-element-styles"});
+		style.textContent = `:is(${ colorTags.join(", ") }):not(:defined) {display: none}`;
+		if (!style.parentNode) {
+			document.head.append(style);
+		}
+
+		if (this.dependencies.size > 0) {
+			await Promise.all([...this.dependencies].map(tag => customElements.whenDefined(tag)));
+		}
+		else {
+			// Give other code a chance to overwrite Self.Color
+			await wait();
+		}
+
+		if (!Self.Color) {
+			let specifier;
+
+			try {
+				// Is already loaded? (e.g. via an import map, or if we're in Node)
+				import.meta.resolve("colorjs.io");
+				specifier = "colorjs.io";
+			}
+			catch (e) {
+				// specifier = "../../node_modules/colorjs.io/dist/color.js";
+				specifier = "https://colorjs.io/dist/color.js";
+			}
+
+			Self.Color = import(specifier).then(module => module.default);
+		}
+
+		// We can't just use top level await, see https://bugs.webkit.org/show_bug.cgi?id=242740
+		if (getType(Self.Color) === "Promise") {
+			let ColorPending = Self.Color;
+			let Color = await ColorPending;
+
+			if (Self.Color === ColorPending) {
+				// Hasn't changed
+				Self.Color = Color;
+			}
+		}
+
+		customElements.define(this.tagName, this);
+	}
+};
+
+export default Self;

package/src/common/dom.js

@@ -58,4 +58,4 @@ export function toSlots ({
 		let all = assignments.get(slot) ?? new Set();
 		slot.assign(...all);
 	}
-}
+}

package/src/common/util.js

@@ -1,106 +1,11 @@
-/**
- * Defines instance properties by defining an accessor that automatically replaces itself with a writable property when accessed.
- * @param {Function} Class
- * @param {string} name
- * @param {function} getValue
- */
-export function defineInstanceProperty (
-	Class, name, getValue,
-	{writable = true, configurable = true, enumerable = false} = {}) {
-	let setter = function (value) {
-		Object.defineProperty(this, name, { value, writable, configurable, enumerable });
-	}
-	Object.defineProperty(Class.prototype, name, {
-		get () {
-			let value = getValue.call(this, this);
-			setter.call(this, value);
-			return value;
-		},
-		set (value) { // Blind set
-			setter.call(this, value);
-		},
-		configurable: true,
-	});
-}
-
-export function defineLazyProperty (object, name, options) {
-	if (typeof options === "function") {
-		options = { get: options };
-	}
-
-	let {get, writable = true, configurable = true, enumerable = false} = options;
-
-	let setter = function (value) {
-		Object.defineProperty(this, name, { value, writable, configurable, enumerable });
-	}
-	Object.defineProperty(object, name, {
-		get () {
-			let value = get.call(this);
-			setter.call(this, value);
-			return value;
-		},
-		set (value) { // Blind set
-			setter.call(this, value);
-		},
-		configurable: true,
-	});
-}
-
-export function defineComputed (Class, computed = Class.computed) {
-	let dependencies = new Map();
-
-	for (let name in computed) {
-		let spec = computed[name];
-		defineInstanceProperty(Class, name, spec.get);
-
-		if (spec.dependencies) {
-			for (let prop of spec.dependencies) {
-				let deps = dependencies.get(prop) ?? [];
-				deps.push(name);
-				dependencies.set(prop, deps);
-			}
-		}
-	}
-
-	if (dependencies.size > 0) {
-		let _propChangedCallback = Class.prototype.propChangedCallback;
-
-		Class.prototype.propChangedCallback = function(name, change) {
-			if (dependencies.has(name)) {
-				for (let prop of dependencies.get(name)) {
-					this[prop] = computed[prop].get.call(this, this);
-				}
-			}
-
-			_propChangedCallback?.call(this, name, change);
-		}
-	}
-}
-
-export function inferDependencies (fn) {
-	if (!fn || typeof fn !== "function") {
-		return [];
+export async function wait (ms) {
+	if (ms === undefined) {
+		return new Promise(resolve => requestAnimationFrame(resolve));
 	}
 
-	let code = fn.toString();
-
-	return [...code.matchAll(/\bthis\.([$\w]+)\b/g)].map(match => match[1]);
-}
-
-export async function wait (ms) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-export async function nextTick (refreshRate = 20) {
-	let now = performance.now();
-	let remainder = now % refreshRate;
-	let delay = refreshRate - remainder;
-	let nextAt = now + delay;
-	nextTick.start ??= now - remainder;
-
-	return new Promise(resolve => setTimeout(() => resolve(nextAt - nextTick.start), delay));
-}
-
 /**
  * Compute the ideal step for a range, to be used as a default in spinners and sliders
  * @param {number} min
@@ -139,4 +44,12 @@ export function pick (obj, properties) {
 	}
 
 	return Object.fromEntries(Object.entries(obj).filter(([key]) => properties.includes(key)));
-}
+}
+
+export function getType (value) {
+	if (value === null || value === undefined) {
+		return value + "";
+	}
+
+	return Object.prototype.toString.call(value).slice(8, -1);
+}