color-elements 0.0.1 → 0.0.3

package/src/channel-picker/channel-picker.js

@@ -0,0 +1,168 @@
+import ColorElement from "../common/color-element.js";
+import "../space-picker/space-picker.js";
+import * as dom from "../common/dom.js";
+
+const Self = class ChannelPicker extends ColorElement {
+	static tagName = "channel-picker";
+	static url = import.meta.url;
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<space-picker part="color-space" exportparts="base: color-space-base" id="space_picker"></space-picker>
+		<select id="picker" part="color-channel-base"></select>`;
+
+	constructor () {
+		super();
+
+		this._el = dom.named(this);
+
+		// We need to start listening for this event as soon as the <space-picker> is created
+		this._el.space_picker.addEventListener("spacechange", this);
+
+		// We need to render the picker as soon as possible so as not to choke on invalid initial values
+		this.#render();
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+
+		this._el.picker.addEventListener("input", this);
+	}
+
+	disconnectedCallback () {
+		super.disconnectedCallback?.();
+
+		this._el.space_picker.removeEventListener("spacechange", this);
+		this._el.picker.removeEventListener("input", this);
+	}
+
+	get selectedSpace () {
+		return this._el.space_picker.selectedSpace;
+	}
+
+	get selectedChannel () {
+		return this.selectedSpace.coords?.[this._el.picker.value];
+	}
+
+	/**
+	 * Previously selected channels for each space.
+	 * Keys are space IDs. Values are coords.
+	 */
+	#history = {};
+
+	#render () {
+		let space = this.selectedSpace;
+		let coords = space.coords;
+
+		if (space && !coords) {
+			console.warn(`Color space "${ space.name }" has no coordinates.`);
+			return;
+		}
+
+		this._el.picker.innerHTML = Object.entries(coords)
+			.map(([id, coord]) => `<option value="${ id }">${ coord.name }</option>`)
+			.join("\n");
+
+		let [prevSpace, prevChannel] = this.value?.split(".") ?? [];
+		if (prevSpace && prevChannel) {
+			let prevChannelName = this._el.space_picker.spaces[prevSpace].coords[prevChannel].name;
+			let currentChannelName = coords[prevChannel]?.name;
+			if (prevChannelName === currentChannelName) {
+				// Preserve the channel if it exists in the new space and has the same name ("b" in "oklab" is not the same as "b" in "p3")
+				this._el.picker.value = prevChannel;
+			}
+			else if (this.#history?.[space.id]) {
+				// Otherwise, try to restore the last channel used
+				this._el.picker.value = this.#history[space.id];
+			}
+		}
+	}
+
+	handleEvent (event) {
+		if (event.type === "spacechange") {
+			this.#render();
+		}
+
+		if ([this._el.space_picker, this._el.picker].includes(event.target)) {
+			let value = `${ this._el.space_picker.value }.${ this._el.picker.value }`;
+			if (value !== this.value) {
+				this.value = value;
+			}
+		}
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "value" && this.value) {
+			let [space, channel] = (this.value + "").split(".");
+
+			let currentSpace = this._el.space_picker.value;
+			let currentCoord = this._el.picker.value;
+			let currentValue = `${ currentSpace }.${ currentCoord }`;
+
+			if (!space || !channel) {
+				console.warn(`Invalid value "${ this.value }". Expected format: "space.channel". Falling back to "${ currentValue }".`);
+				this.value = currentValue;
+			}
+			else {
+				let spaces = Object.keys(this._el.space_picker.spaces);
+
+				if (!spaces.includes(space)) {
+					console.warn(`No "${ space }" color space found. Choose one of the following: ${ spaces.join(", ") }. Falling back to "${ currentSpace }".`);
+					this.value = currentValue;
+				}
+				else {
+					if (currentSpace !== space) {
+						this._el.space_picker.value = space;
+					}
+
+					if (currentCoord && currentCoord !== channel) {
+						let coords = Object.keys(this.selectedSpace.coords ?? {});
+
+						if (coords.includes(channel)) {
+							this._el.picker.value = channel;
+						}
+						else {
+							currentCoord = coords.includes(currentCoord) ? currentCoord : coords[0];
+
+							let message = `Color space "${ space }" has no coordinate "${ channel }".`;
+							if (coords.length) {
+								message += ` Choose one of the following: ${ coords.join(", ") }.`;
+							}
+							message += ` Falling back to "${ currentCoord }".`;
+							console.warn(message);
+							this.value = `${ space }.${ currentCoord }`;
+							channel = currentCoord;
+						}
+					}
+
+					this.#history[space] = channel;
+				}
+			}
+		}
+	}
+
+	static props = {
+		value: {
+			default: "oklch.l",
+		},
+	};
+
+	static events = {
+		change: {
+			from () {
+				return [this._el.space_picker, this._el.picker];
+			},
+		},
+		input: {
+			from () {
+				return [this._el.space_picker, this._el.picker];
+			},
+		},
+		valuechange: {
+			propchange: "value",
+		},
+	};
+};
+
+Self.define();
+
+export default Self;

package/src/channel-slider/README.md

@@ -0,0 +1,165 @@
+# `<channel-slider>`
+
+A [`<color-slider>`](../color-slider) for a specific channel, intended for color picking.
+
+## Usage
+
+This is a higher level component than `<color-slider>` for the cases where you want to control a single channel of a color space.
+It offers many conveniences for these cases:
+- It takes care of applying the right `min`, `max`, and `step` values to the slider
+- It automatically generates the start and end colors
+- It can provide an editable tooltip as a tooltip that both shows and edits the current value
+- Already includes a suitable label
+
+### Static
+
+Basic example:
+
+```html
+<channel-slider space="oklch" channel="h"></channel-slider>
+```
+
+The alpha channel is also supported:
+
+```html
+<channel-slider space="oklch" channel="alpha"></channel-slider>
+```
+
+In most cases you’d also want to set a color to set the other channels and the initial value:
+
+```html
+<channel-slider space="oklch" channel="h" color="oklch(80% 20% 130)"></channel-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).
+
+---
+
+The color does not actually need to be in the same color space, it will be converted if needed:
+
+```html
+<channel-slider space="oklch" channel="h" color="deeppink"></channel-slider>
+```
+
+Colors and color spaces not supported by the browser also work:
+
+```html
+<channel-slider space="okhsl" channel="h" color="color(--okhsl 180 100% 50%)"></channel-slider>
+```
+
+
+If you don’t want to show the whole range you can also specify `min` and `max` attributes.
+
+```html
+<channel-slider space="oklch" channel="l" color="red" min=".3" max=".95"></channel-slider>
+```
+
+### Dynamic
+
+You can listen to the `colorchange` event and grab the `color` property to get the current color value.
+Here we are using a [`<color-swatch>`](../color-swatch/) to not just display the CSS code but also the actual color:
+
+```html
+<channel-slider space="oklch" channel="h" color="oklch(50% 50% 180)"
+				oncolorchange="this.nextElementSibling.textContent = this.color"></channel-slider>
+<color-swatch></color-swatch>
+```
+
+All attributes are reactive:
+
+```html
+<label>
+	Space:
+	<select id="space_select" size="3">
+		<option>oklch</option>
+		<option>oklab</option>
+		<option>okhsl</option>
+		<option>lab</option>
+		<option>lch</option>
+		<option>hsl</option>
+		<option>srgb</option>
+	</select>
+</label>
+<label>
+	Channel:
+	<select id="channel_select" size=3>
+		<option>l</option>
+		<option>c</option>
+		<option>h</option>
+		<option>alpha</option>
+	</select>
+</label>
+
+<channel-slider id="dynamic_slider" space="oklch" channel="h" color="oklch(50% 50% 180)"
+				oncolorchange="this.nextElementSibling.textContent = this.color"></channel-slider>
+<color-swatch></color-swatch>
+<script>
+	function fromSlider () {
+		space_select.value = dynamic_slider.space.id;
+		channel_select.innerHTML = [...Object.keys(dynamic_slider.space.coords).map(c => `<option>${c}</option>`), "<option>alpha</option>"].join('\n');
+		channel_select.value = dynamic_slider.channel || channel_select.options[0].value;
+	}
+
+	function fromSelects () {
+		dynamic_slider.space = space_select.value;
+		dynamic_slider.channel = channel_select.value || channel_select.options[0].value;
+	}
+
+	space_select.oninput = channel_select.oninput = fromSelects;
+
+	customElements.whenDefined("channel-slider").then(fromSlider);
+	dynamic_slider.addEventListener("propchange", fromSlider);
+</script>
+```
+
+
+## Reference
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| _(default)_ | The channel slider's label. |
+
+### Attributes & Properties
+
+| Attribute | Property | Property type | Default value | Description |
+|-----------|----------|---------------|---------------|-------------|
+| `space` | `space` | `ColorSpace` &#124; `string` | `oklch` | The color space to use for interpolation. |
+| `channel` | `channel` | `string` | `h` | The component to use for the gradient. |
+| `min` | `min` | `number` | `this.refRange[0]` | The minimum value for the slider. |
+| `max` | `max` | `number` | `this.refRange[1]` | The maximum value for the slider. |
+| `step` | `step` | `number` | Computed automatically based on `this.min` and `this.max`. | The granularity that the slider's current value must adhere to. |
+| `value` | `value` | `number` | `(this.min + this.max) / 2` | The current value of the slider. |
+| `color` | `color` | `Color` &#124; `string` | `oklch(50% 50% 180)` | The current color value. |
+
+### Getters
+
+These properties are read-only.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `minColor` | `Color` | The color corresponding to the minimum value of the slider. |
+| `maxColor` | `Color` | The color corresponding to the maximum value of the slider. |
+| `stops` | `Array<Color>` | The array of the slider color stops used for rendering. Unsupported color spaces or angular channels (hues) will have more color stops, while other channels may have as little as two: `minColor` and `maxColor`. |
+| `progress` | `number` | The slider value converted to a 0-1 number with `0` corresponding to the min of the range and `1` to the max. |
+| `channelName` | `string` | The name of the channel (e.g. `Hue` or `Alpha`). |
+
+
+### Events
+
+| Name | Description |
+|------|-------------|
+| `input` | Fired when the color changes due to user action. |
+| `change` | Fired when the color changes due to user action. |
+| `valuechange` | Fired when the value changes for any reason, and once during initialization. |
+| `colorchange` | Fired when the color changes for any reason, and once during initialization. |
+
+### Parts
+
+| Name | Description |
+|------|-------------|
+| `color_slider` | The internal `<color-slider>` element. |
+| `slider` | The `slider` part of the internal [`<color-slider>`](../color-slider/#parts) element. |
+| `label` | The internal `<label>` element used as a wrapper around the default slot and the slider. |

package/src/channel-slider/channel-slider.css

@@ -0,0 +1,61 @@
+.color-slider-label {
+	--_transition-duration: var(--transition-duration, 200ms);
+
+	display: grid;
+	grid-template-columns: 1fr auto;
+	gap: .3em;
+	align-items: center;
+
+	em {
+		opacity: 60%;
+		transition: opacity var(--_transition-duration);
+	}
+
+	&:not(:hover, :focus-within) em {
+		opacity: 0;
+	}
+
+	input[type=number] {
+		--_border-color: var(--border-color, color-mix(in oklab, currentcolor calc(var(--_current-color-percent, 30) * 1%), oklab(none none none / 0%)));
+
+		all: unset;
+
+		--content-width: calc(var(--value-length) * 1ch);
+		width: calc(var(--content-width, 2ch) + 1.2em);
+		min-width: calc(2ch + 1.2em);
+		box-sizing: content-box;
+		padding: .1em .2em;
+		border-radius: .2em;
+		border: 1px solid var(--_border-color);
+		text-align: center;
+		font-size: 90%;
+		transition: var(--_transition-duration) allow-discrete;
+		transition-property: opacity, border-color;
+
+		&::-webkit-textfield-decoration-container {
+			gap: .2em;
+		}
+
+		&:not(:hover, :focus) {
+			--_current-color-percent: 10;
+
+			opacity: 60%;
+			border-color: var(--_border-color);
+
+			&::-webkit-inner-spin-button {
+				/* Fade out the spin buttons in Chrome and Safari */
+				opacity: .35;
+				filter: contrast(2);
+			}
+		}
+
+		@supports (field-sizing: content) {
+			field-sizing: content;
+			width: auto;
+		}
+	}
+}
+
+color-slider {
+	grid-column: 1 / -1;
+}

package/src/channel-slider/channel-slider.js

@@ -0,0 +1,287 @@
+import "../color-slider/color-slider.js";
+import * as dom from "../common/dom.js";
+import ColorElement from "../common/color-element.js";
+import { getStep } from "../common/util.js";
+
+const Self = class ChannelSlider extends ColorElement {
+	static tagName = "channel-slider";
+	static url = import.meta.url;
+	static shadowStyle = true;
+	static shadowTemplate = `
+		<label class="color-slider-label" part="label">
+			<slot>
+				<span id="channel_info" part="channel-info"></span>
+				<input type="number" part="spinner" min="0" max="1" step="0.01" id="spinner" />
+			</slot>
+			<color-slider part="color_slider" exportparts="slider" id="slider"></color-slider>
+		</label>`;
+
+	constructor () {
+		super();
+
+		this._el = dom.named(this);
+		this._el.slot = this.shadowRoot.querySelector("slot");
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+
+		this._el.slider.addEventListener("input", this);
+		this._el.slot.addEventListener("input", this);
+	}
+
+	disconnectedCallback () {
+		this._el.slider.removeEventListener("input", this);
+		this._el.slot.removeEventListener("input", this);
+	}
+
+	handleEvent (event) {
+		if (event.type === "input") {
+			this.value = event.target.value;
+		}
+	}
+
+	colorAt (value) {
+		let color = this.defaultColor.clone();
+
+		if (this.channel === "alpha") {
+			color.alpha = value / 100;
+		}
+		else if (this.channel in color.space.coords) {
+			color.set(this.channel, value);
+		}
+
+		return color;
+	}
+
+	colorAtProgress (progress) {
+		// Map progress to min - max range
+		let value = this.min + progress * (this.max - this.min);
+		return this.colorAt(value);
+	}
+
+	get minColor () {
+		return this.colorAt(this.min);
+	}
+
+	get maxColor () {
+		return this.colorAt(this.max);
+	}
+
+	get stops () {
+		return [
+			this.minColor,
+			this.colorAtProgress(0.25),
+			this.colorAtProgress(0.5),
+			this.colorAtProgress(0.75),
+			this.maxColor,
+		];
+	}
+
+	get progress () {
+		return this._el.slider.progress;
+	}
+
+	progressAt (p) {
+		return this._el.slider.progressAt(p);
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (["space", "min", "max", "step", "value", "defaultValue"].includes(name)) {
+			prop.applyChange(this._el.slider, change);
+
+			if (["min", "max", "step", "value", "defaultValue"].includes(name)) {
+				prop.applyChange(this._el.spinner, change);
+
+				if (name === "value" && this.value !== undefined) {
+					this._el.spinner.value = Number(this.value.toPrecision(4));
+
+					if (!CSS.supports("field-sizing", "content")) {
+						let valueStr = this._el.spinner.value;
+						this._el.spinner.style.setProperty("--value-length", valueStr.length);
+					}
+				}
+			}
+		}
+
+		if (name === "defaultColor" || name === "space" || name === "channel" || name === "min" || name === "max") {
+			this._el.slider.stops = this.stops;
+
+			if (name === "space" || name === "channel" || name === "min" || name === "max") {
+				this._el.channel_info.innerHTML = `${ this.channelName } <em>(${ this.min }&thinsp;&ndash;&thinsp;${ this.max })</em>`;
+			}
+		}
+	}
+
+	get channelName () {
+		return this.channelSpec?.name ?? this.channel;
+	}
+
+	static props = {
+		space: {
+			default: "oklch",
+			parse (value) {
+				if (value instanceof Self.Color.Space || value === null || value === undefined) {
+					return value;
+				}
+
+				value += "";
+
+				return Self.Color.Space.get(value);
+			},
+			stringify (value) {
+				return value?.id;
+			},
+		},
+		channel: {
+			type: String,
+			default () {
+				return Object.keys(this.space.coords)[0];
+			},
+			// get () {
+			// 	let value = this.props.channel;
+			// 	let space = this.space;
+			// 	console.log(this.props, value, space);
+
+			// 	if (!space || space.coords[value]) {
+			// 		return value;
+			// 	}
+
+			// 	return Object.keys(this.space.coords)[0];
+			// },
+			// set: true,
+			// reflect: true,
+		},
+		channelSpec: {
+			get () {
+				if (this.channel === "alpha") {
+					return {
+						name: "Alpha",
+					};
+				}
+
+				let channelSpec = this.space?.coords[this.channel];
+
+				if (!channelSpec && this.space) {
+					channelSpec = Object.values(this.space.coords)[0];
+					console.warn(`Unknown channel ${ this.channel } in space ${ this.space }. Using first channel (${ channelSpec.name }) instead.`);
+				}
+
+				return channelSpec;
+			},
+		},
+		refRange: {
+			get () {
+				let channelSpec = this.channelSpec;
+				return channelSpec?.refRange ?? channelSpec?.range ?? [0, 100];
+			},
+		},
+		min: {
+			type: Number,
+			default () {
+				return this.refRange[0];
+			},
+		},
+		max: {
+			type: Number,
+			default () {
+				return this.refRange[1];
+			},
+		},
+		step: {
+			type: Number,
+			default () {
+				return getStep(this.max, this.min, { minSteps: 100 });
+			},
+		},
+
+		defaultValue: {
+			type: Number,
+			default () {
+				if (this.channel === "alpha") {
+					return this.defaultColor.alpha * 100;
+				}
+				else if (this.channel in this.defaultColor.space.coords) {
+					return this.defaultColor.get(this.channel);
+				}
+				else {
+					let firstChannel = Object.keys(this.defaultColor.space.coords)[0];
+					return this.defaultColor.get(firstChannel);
+				}
+			},
+			reflect: {
+				from: "value",
+			},
+		},
+		value: {
+			type: Number,
+			defaultProp: "defaultValue",
+			reflect: false,
+		},
+
+		defaultColor: {
+			get type () {
+				return Self.Color;
+			},
+			convert (color) {
+				return color.to(this.space);
+			},
+			default () {
+				let coords = [];
+				for (let channel in this.space.coords) {
+					let spec = this.space.coords[channel];
+					let range = spec.refRange ?? spec.range ?? [0, 100];
+					coords.push((range[0] + range[1]) / 2);
+				}
+
+				return new Self.Color(this.space, coords);
+			},
+			reflect: {
+				from: "color",
+			},
+		},
+		color: {
+			get type () {
+				return Self.Color;
+			},
+			get () {
+				return this.colorAt(this.value);
+			},
+			dependencies: ["defaultColor", "space", "channel", "value"],
+			set (value) {
+				this.defaultColor = value;
+				this.value = this.defaultValue;
+			},
+		},
+	};
+
+	static events = {
+		change: {
+			from () {
+				return this._el.slider;
+			},
+		},
+		input: {
+			from () {
+				return this._el.slider;
+			},
+		},
+		valuechange: {
+			propchange: "value",
+		},
+		colorchange: {
+			propchange: "color",
+		},
+	};
+
+	static formAssociated = {
+		like: el => el._el.slider,
+		role: "slider",
+		valueProp: "value",
+		changeEvent: "valuechange",
+	};
+};
+
+Self.define();
+
+export default Self;