color-elements 0.0.2 → 0.0.4

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

@@ -1,263 +1,243 @@
-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 styles = "./color-swatch.css";
+	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;
+				this._el.label.title = this.label;
 			}
-
-			if (this.#color) {
-				this.#setColor(this.#color);
-				this.#dom.input?.setCustomValidity("");
+			else {
+				this._el.label.textContent = "";
+				this._el.label.title = "";
 			}
-
-			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 +247,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,140 @@
+import NudeElement from "../../node_modules/nude-element/src/Element.js";
+import { getType, defer, wait, dynamicAll, noOpTemplateTag as css } from "./util.js";
+
+const baseGlobalStyles = css`
+@keyframes fade-in {
+	from { opacity: 0; }
+}
+
+:state(color-element) {
+	&:state(loading) {
+		content-visibility: hidden;
+		opacity: 0;
+
+		&, * {
+			transition-property: opacity !important;
+		}
+	}
+
+	&:not(:state(loading)) {
+		xanimation: fade-in 300ms both;
+	}
+}
+`;
+
+
+const Self = class ColorElement extends NudeElement {
+	static url = import.meta.url;
+	// TODO make lazy
+	static Color;
+	static all = {};
+	static dependencies = new Set();
+
+	static globalStyles = [{css: baseGlobalStyles}];
+
+	constructor () {
+		super();
+
+		let Self = this.constructor;
+
+		if (Self.shadowTemplate !== undefined) {
+			this.attachShadow({mode: "open"});
+			this.shadowRoot.innerHTML = Self.shadowTemplate;
+		}
+
+		this._internals ??= this.attachInternals?.();
+		if (this._internals.states) {
+			this._internals.states.add("color-element");
+
+			this._internals.states.add("loading");
+			Self.whenReady.then(() => {
+				this._internals.states.delete("loading");
+			});
+		}
+	}
+
+	static init () {
+		let wasInitialized = super.init();
+
+		if (!wasInitialized) {
+			return wasInitialized;
+		}
+
+		if (this.fetchedStyles) {
+			this.ready.push(...this.fetchedStyles);
+		}
+
+		if (this.fetchedGlobalStyles) {
+			this.ready.push(...this.fetchedGlobalStyles	);
+		}
+
+
+		this.ready[0].resolve();
+
+		return wasInitialized;
+	}
+
+	static ready = [defer()];
+	static whenReady = dynamicAll(this.ready);
+
+	static async define () {
+		// Overwrite static properties, otherwise they will be shared across subclasses
+		this.ready = [defer()];
+		this.whenReady = dynamicAll(this.ready);
+
+		if (!Object.hasOwn(this, "dependencies")) {
+			this.dependencies = new Set();
+		}
+
+		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.dependencies.size > 0) {
+			let whenDefined = [...this.dependencies].map(tag => customElements.whenDefined(tag).then(Class => Class.whenReady));
+			this.ready.push(...whenDefined);
+		}
+
+		// 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);
 	}
-}
+}