color-elements 0.0.1 → 0.0.3

package/src/space-picker/space-picker.js

@@ -0,0 +1,213 @@
+import ColorElement from "../common/color-element.js";
+
+const Self = class SpacePicker extends ColorElement {
+	static tagName = "space-picker";
+	static url = import.meta.url;
+	static shadowStyle = true;
+	static shadowTemplate = `<select id="picker" part="base"></select>`;
+
+	constructor () {
+		super();
+
+		this._el = {};
+		this._el.picker = this.shadowRoot.querySelector("#picker");
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+		this._el.picker.addEventListener("input", this);
+	}
+
+	disconnectedCallback () {
+		super.disconnectedCallback?.();
+		this._el.picker.removeEventListener("input", this);
+	}
+
+	handleEvent (event) {
+		if (event.target === this._el.picker && event.target.value !== this.value) {
+			this.value = event.target.value;
+		}
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "spaces") {
+			if (!this.groups) {
+				this._el.picker.innerHTML = Object.entries(this.spaces)
+					.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+					.join("\n");
+			}
+			else {
+				let groups = this.groups;
+
+				// Remove empty groups
+				groups = Object.entries(groups).filter(([type, spaces]) => {
+					if (Object.keys(spaces).length === 0) {
+						console.warn(`Removed empty group of color spaces with the label "${type}."`);
+						return false;
+					}
+
+					return true;
+				});
+
+				if (!groups.length) {
+					console.warn("All provided groups of color spaces are empty. Falling back to default grouping.");
+					groups = [["All spaces", this.spaces]];
+				}
+
+				this._el.picker.innerHTML = groups.map(([type, spaces]) => `
+					<optgroup label="${type}">
+						${Object.entries(spaces)
+							.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+							.join("\n")}
+					</optgroup>
+				`).join("\n");
+			}
+
+			this._el.picker.value = this.value;
+		}
+
+		if (name === "value") {
+			let value = this.value;
+
+			if (value) {
+				if (!(value in this.spaces)) {
+					let spaces = Object.keys(this.spaces);
+					let firstSpace = spaces[0];
+					let currentSpace = this._el.picker.value;
+					let fallback = spaces.includes(currentSpace) ? currentSpace : firstSpace;
+
+					console.warn(`No color space found with id = "${ value }". Choose one of the following: ${ spaces.join(", ") }. Falling back to "${ fallback }".`);
+					this.value = value = fallback;
+				}
+
+				if (this._el.picker.value !== value) {
+					this._el.picker.value = value;
+				}
+			}
+		}
+	}
+
+	static props = {
+		value: {
+			default () {
+				if (this.groups) {
+					let groups = this.groups;
+					let firstGroup = Object.values(groups)[0];
+
+					return firstGroup && Object.keys(firstGroup)[0];
+				}
+				else {
+					return Object.keys(this.spaces)[0];
+				}
+			},
+		},
+
+		selectedSpace: {
+			get () {
+				let value = this.value;
+				if (value === undefined || value === null) {
+					return;
+				}
+
+				return this.spaces[value];
+			},
+		},
+
+		spaces: {
+			type: {
+				is: Object,
+				get values () {
+					return Self.Color.Space;
+				},
+				defaultValue: (id, index) => {
+					try {
+						return Self.Color.Space.get(id);
+					}
+					catch (e) {
+						console.error(e);
+					}
+				},
+			},
+			default: () => Self.Color.spaces,
+			convert (value) {
+				// Replace non-existing spaces with { id, name: id }
+				for (let id in value) {
+					if (!value[id]) {
+						value[id] = { id, name: id };
+					}
+				}
+
+				return value;
+			},
+			stringify (value) {
+				return Object.entries(value).map(([id, space]) => id).join(", ");
+			},
+		},
+
+		groupBy: {
+			type: {
+				is: Function,
+				arguments: ["space"],
+			},
+			reflect: false,
+		},
+
+		groups: {
+			get () {
+				if (!this.groupBy) {
+					return;
+				}
+
+				let ret = {};
+				for (let [id, space] of Object.entries(this.spaces)) {
+					let group = this.groupBy(space);
+					if (group) {
+						(ret[group] ??= {})[id] = space;
+					}
+				}
+
+				return ret;
+			},
+		},
+
+		getSpaceLabel: {
+			type: {
+				is: Function,
+				arguments: ["space"],
+			},
+			default () {
+				return space => space.name;
+			},
+			reflect: false,
+		},
+	};
+
+	static events = {
+		change: {
+			from () {
+				return this._el.picker;
+			},
+		},
+		input: {
+			from () {
+				return this._el.picker;
+			},
+		},
+		valuechange: {
+			propchange: "value",
+		},
+		spacechange: {
+			propchange: "selectedSpace",
+		},
+	};
+
+	static formAssociated = {
+		like: el => el._el.picker,
+		role: "combobox",
+		changeEvent: "change",
+	};
+};
+
+Self.define();
+
+export default Self;

package/src/src.json

@@ -0,0 +1,3 @@
+{
+	"layout": "component"
+}

package/_data/eleventyComputed.11tydata.js

@@ -1,29 +0,0 @@
-export default {
-	// Extract default title from content
-	foo (data) {
-		// if (data.title) {
-		// 	return data.title;
-		// }
-
-		// let ext = data.page.inputPath.split(".").pop();
-
-		// // Title must appear in first 1000 chars
-		// let content = data.page.rawInput.slice(0, 1000);
-		// let ret;
-
-		// if (ext === "md") {
-		// 	// First heading
-		// 	ret = content.match(/^#+\s+(.*)/m)?.[1];
-		// }
-		// else if (ext === "njk") {
-		// 	// First level 1 heading
-		// 	ret = content.match(/<h1>(.*)<\/h1>/)?.[1];
-		// }
-
-		// if (ret) {
-		// 	ret = ret.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
-		// }
-
-		// return ret;
-	},
-};

package/color-gamut/README.md

@@ -1,75 +0,0 @@
-<script src="color-gamut.js" type="module"></script>
-# &lt;color-gamut>
-
-Gamut indicator. Used internally by `<css-color>`
-
-## Usage
-
-Static (only read once):
-```html
-<color-gamut>red</color-gamut>
-```
-
-Produces <color-gamut>red</color-gamut>
-
-Dynamic:
-```js
-colorGamutElement.color = colorValue;
-```
-
-## Demo
-<style>
-	#params {
-		background: linear-gradient(to right, var(--start-color), var(--end-color)) no-repeat top / 100% 1em;
-		padding-top: 1.5em;
-	}
-
-	#colors_container_h {
-		display: flex;
-		height: 1em;
-		margin-bottom: 1em;
-
-		color-gamut {
-			flex: 1;
-			border-radius: 0;
-
-			&::part(label) {
-				display: none;
-			}
-		}
-	}
-</style>
-<form id=params>
-<code>oklch(<input type=number id=l value=50>% <input type=number id=min_c value=30>&ndash;<input type=number id=max_c value=40>% <input type=number id=h value=50>)</code>
-<p><label>Chroma increments: <input type=number id=c_step value="0.2" min="0">%</label>
-</form>
-
-<script type=module>
-params.addEventListener("input", e => {
-	let c_range = {min: Number(min_c.value), max: Number(max_c.value)};
-	let step = Number(c_step.value);
-	let colors = [];
-	let start = `oklch(${l.value}% ${c_range.min.toLocaleString("en")}% ${h.value})`;
-	let end = `oklch(${l.value}% ${c_range.max.toLocaleString("en")}% ${h.value})`;
-
-	params.style.setProperty("--start-color", start);
-	params.style.setProperty("--end-color", end);
-
-	for (let c = c_range.min; c<= c_range.max; c+=step) {
-		colors.push(`oklch(${l.value}% ${c.toLocaleString("en")}% ${h.value})`);
-	}
-
-	let html = colors.map(color => `
-		<color-gamut title="${color}">${color}</color-gamut>`).join("\n");
-	colors_container_h.innerHTML = html;
-	colors_container.innerHTML = html;
-});
-params.dispatchEvent(new Event("input"));
-</script>
-
-No label:
-
-<div id=colors_container_h></div>
-
-Default display:
-<div id=colors_container></div>

package/color-gamut/color-gamut.js

@@ -1,172 +0,0 @@
-import Color from "../common/color.js";
-
-let styleURL = new URL("./style.css", import.meta.url);
-
-export default class ColorGamut extends HTMLElement {
-	#label;
-
-	constructor () {
-		super();
-		this.attachShadow({mode: "open"});
-		this.shadowRoot.innerHTML = `
-			<style>@import url("${ styleURL }")</style>
-			<span id="label" part="label"></span>
-		`;
-
-		this.gamuts = this.gamuts ?? this.getAttribute("gamuts") ?? this.constructor.defaultGamuts;
-	}
-
-	connectedCallback () {
-		this.#initialize();
-		this.#render();
-	}
-
-	#initialized;
-	#initialize () {
-		if (this.#initialized) {
-			return;
-		}
-
-		this.#initialized = true;
-
-		let textContent = this.textContent;
-
-		if (textContent) {
-			this.color ??= this.textContent;
-		}
-	}
-
-	#render () {
-		if (!this.isConnected) {
-			return;
-		}
-
-		if (!this.#label) {
-			this.#label = this.shadowRoot.querySelector("#label");
-		}
-
-		this.#updateGamut();
-	}
-
-	#gamut;
-	get gamut () {
-		return this.#gamut?.id;
-	}
-
-	get gamutLabel () {
-		return this.#gamut?.label ?? "";
-	}
-
-	#gamuts;
-	get gamuts () {
-		return this.#gamuts;
-	}
-
-	set gamuts (gamuts) {
-
-		this.#gamuts = this.constructor.parseGamuts(gamuts);
-	}
-
-	#updateGamut () {
-		if (!this.#color) {
-			this.#setGamut();
-			return;
-		}
-
-		let gamut = this.gamuts.find(gamut => gamut.id === "none" || this.#color.inGamut(gamut.id));
-		this.#setGamut(gamut);
-	}
-
-	#setGamut (gamut) {
-		let oldGamut = this.#gamut;
-
-		if (gamut === oldGamut) {
-			return;
-		}
-
-		this.#gamut = gamut;
-		this.#label.textContent = this.#gamut?.label ?? "";
-
-		if (!gamut) {
-			this.removeAttribute("gamut");
-			this.removeAttribute("level");
-			this.style.removeProperty("--gamut-level");
-
-			return;
-		}
-
-		this.setAttribute("gamut", gamut.id);
-		this.setAttribute("level", gamut.level);
-		this.style.setProperty("--gamut-level", gamut.level);
-
-		this.dispatchEvent(new CustomEvent("gamutchange", {
-			detail: {oldGamut, gamut},
-			bubbles: true,
-		}));
-	}
-
-	#color;
-	get color () {
-		return this.#color;
-	}
-
-	set color (color) {
-		this.#color = Color.get(color);
-		this.#render();
-	}
-
-	static observedAttributes = ["gamuts"];
-
-	attributeChangedCallback (name, oldValue, newValue) {
-		if (!name && this.hasAttribute("gamuts") || name === "gamuts") {
-			newValue ??= this.getAttribute("gamuts");
-
-			if (oldValue !== newValue) {
-				this.gamuts = this.constructor.parseGamuts(newValue ?? this.constructor.defaultGamuts);
-				this.#render();
-			}
-		}
-	}
-
-	static defaultGamuts = ["srgb", "p3", "rec2020", "prophoto"];
-
-	static parseGamuts (gamuts) {
-		if (!gamuts) {
-			return [];
-		}
-
-		if (typeof gamuts === "string") {
-			gamuts = gamuts.trim().split(/\s*,\s*/);
-		}
-		else if (!Array.isArray(gamuts) && typeof gamuts === "object") {
-			// Object
-			return Object.entries(gamuts).map(([id, label]) => {id, label});
-		}
-
-		let ret = gamuts.map((gamut, level) => {
-			if (gamut?.id && "label" in gamut) {
-				// Already in the correct format
-				return gamut;
-			}
-
-			gamut = gamut.trim().split(/\s*:\s*/);
-			let id = gamut[0];
-			let label = gamut[1] ?? Color.spaces[gamut]?.name ?? id;
-			return {id, label, level};
-		});
-
-		if (!ret.find(gamut => gamut.id === "none")) {
-			ret.push({
-				id: "none",
-				get label () {
-					return ret[this.level - 1].label + "+";
-				},
-				level: ret.length,
-			});
-		}
-
-		return ret;
-	}
-}
-
-customElements.define("color-gamut", ColorGamut);

package/color-gamut/style.css

@@ -1,32 +0,0 @@
-:host {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: .2em;
-	color: white;
-	background: var(--gamut-color, var(--color-neutral-60, hsl(220 10% 60%)));
-	font-weight: bold;
-	padding-inline: .4em;
-	line-height: 1.4;
-}
-
-:host([level="0"]) {
-	--gamut-color: var(--color-green, yellowgreen);
-}
-
-:host([level="1"]) {
-	color: black;
-	--gamut-color: var(--color-yellow, gold);
-}
-
-:host([level="2"]) {
-	--gamut-color: var(--color-orange, orange);
-}
-
-:host([level="3"]) {
-	--gamut-color: var(--color-red, red);
-}
-
-:host([gamut="none"]) {
-	--gamut-color: var(--color-red-dark, #b00);
-}

package/color-slider/README.md

@@ -1,84 +0,0 @@
-# `<color-slider>`
-<script src="color-slider.js" type="module"></script>
-
-Creates a slider with a gradient background, primarily intended for color picking.
-
-## Installation
-
-The quick and dirty way is straight from the CDN (kindly provided by [Netlify](https://www.netlify.com/)):
-
-```html
-<script src="https://colorjs.io/elements/color-slider/color-slider.js" type="module"></script>
-```
-
-You can also install it via npm.
-There is no separate package currently, you just install the whole `colorjs.io` package:
-
-```bash
-npm install colorjs.io
-```
-
-Then, you use the `colorjs.io/elements` import:
-
-```js
-import {ColorSlider} from "colorjs.io/elements";
-```
-
-## Usage
-
-There are many ways to use this component, depending on what you need.
-E.g. if all you need is styling sliders with arbitrary gradients you don’t even need a component,
-you can just use the CSS file and a few classes and CSS variables.
-
-The actual component does a lot more:
-- It takes care of applying the right `min` and `max` values to the slider
-- It automatically generates the start and end colors,
-- It provides a `color` property with the actual color value.
-- It can provide an editable tooltip as a tooltip that both shows and edits the current value
-
-<script src="./color-slider.js" type="module"></script>
-<style>@import url("style.css");</style>
-
-### Zero hassle, little control
-
-You get the most value out of this component when using it to control a single component:
-
-```html
-<color-slider space="oklch" component="h" colorvalue="oklch(50 50% 180)"></color-slider>
-```
-
-This will automatically use the whole reference range of that component in the specified color space,
-and use the current value of the component as the starting value (unless `value` is also specified).
-If you don’t want to show the whole range you can also specify `min` and `max` attributes.
-
-```html
-<color-slider space="oklch" component="l" colorvalue="red" min=".3" max=".95"></color-slider>
-```
-
-### Minimal hassle, more control
-
-If your use case does not involve interpolating across a single component, or you already have the colors you want to plot from and to, you can also do that:
-
-```html
-<color-slider space="oklch" colormin="gold" colormax="oklch(65% 0.15 210)"></color-slider>
-```
-
-### Styling-only usage
-
-If you just want the styling and are fine dealing with the lower level details on your own, you *can* just use the CSS file:
-
-```css
-@import url("https://colorjs.io/elements/color-slider/style.css");
-```
-
-Then use a `color-slider` class on your slider element, and the following CSS variables:
-
-- `--start-color`: the start color of the gradient
-- `--end-color`: the end color of the gradient
-- `--color-space`: the color space of the gradient (default: `oklch`)
-- `--intermediate-colors`: _(optional)_ any intermediate colors.
-
-OR:
-- `--gradient` if you want to override the whole gradient.
-
-

package/color-slider/color-slider.js

@@ -1,79 +0,0 @@
-/*
-<label v-for="(meta, i) in coord_meta" class="color-slider-label">
-	{{ meta.name }} ({{ meta.min }}-{{ meta.max }})
-	<input class="color-slider" type="range" v-model.number="coords[i]" :style="`--stops: ${ slider_steps[i] }`" :min="meta.min" :max="meta.max" :step="meta.step" />
-	<input type="number" v-model.number="coords[i]" class="autosize" :style="`--percentage: ${coords[i] / (meta.max - meta.min) }`" :min="meta.min" :max="meta.max" :step="meta.step" />
-</label>
-
-<label class="color-slider-label">Alpha (0-100)
-	<input class="color-slider" type="range" v-model.number="alpha"
-	:style="`--stops: ${ slider_steps[coord_meta.length] }`" />
-	<input type="number" class="autosize" v-model.number="alpha" :style="`--percentage: ${alpha / 100}`" max="100" />
-</label>*/
-import defineAttributes from "../common/attributes.js";
-import Color from "../common/color.js";
-
-export default class ColorSlider extends HTMLElement {
-	_props = {};
-
-	constructor () {
-		super();
-		this.attachShadow({mode: "open"});
-		this.shadowRoot.innerHTML = `
-			<style>@import url("${ styleURL }")</style>
-			<label v-for="(meta, i) in coord_meta" class="color-slider-label">
-				{{ meta.name }} ({{ meta.min }}-{{ meta.max }})
-				<input class="color-slider" type="range" v-model.number="coords[i]" :style="`--stops: ${ slider_steps[i] }`" :min="meta.min" :max="meta.max" :step="meta.step" />
-				<input type="number" :style="`--percentage: ${coords[i] / (meta.max - meta.min) }`" :min="meta.min" :max="meta.max" :step="meta.step" />
-			</label>
-		`;
-	}
-
-
-
-	attributeChangedCallback (name, value, oldValue) {
-		if (name in this.constructor.attributes) {
-			this[name] = value;
-		}
-	}
-
-	static get observedAttributes() {
-		return Object.keys(this.attributes);
-	}
-
-	static attributes = {
-		space: {
-			type: String,
-			default: "oklch",
-		},
-		component: {
-			type: String,
-			default: "h",
-		},
-		value: {
-			type: Number,
-			default: "oklch(0.5 0 180)",
-		},
-		min: {
-			type: Number,
-		},
-		max: {
-			type: Number,
-		},
-		step: {
-			type: Number,
-		},
-		colorvalue: {
-			type: Color,
-		},
-		colormin: {
-			type: Color,
-		},
-		colormax: {
-			type: Color,
-		},
-	}
-}
-
-defineAttributes(ColorSlider);
-customElements.define("color-slider", ColorSlider);