color-elements 0.0.1 → 0.0.2

package/src/common/util.js

@@ -0,0 +1,142 @@
+/**
+ * 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 [];
+	}
+
+	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
+ * @param {number} max
+ * @param {options} options
+ */
+export function getStep (min, max, {minSteps = 100, maxStep = 1} = {}) {
+	let range = Math.abs(max - min);
+	let step = range / minSteps;
+
+	// Find nearest power of 10 that is < step
+	step = 10 ** Math.floor(Math.log10(step));
+
+	return step > maxStep ? maxStep : step;
+}
+
+export function sortObject (obj, fn) {
+	if (!obj) {
+		return obj;
+	}
+
+	return Object.fromEntries(Object.entries(obj).sort(fn));
+}
+
+export function mapObject (obj, fn) {
+	if (!obj) {
+		return obj;
+	}
+
+	return Object.fromEntries(Object.entries(obj).map(fn));
+}
+
+export function pick (obj, properties) {
+	if (!properties || !obj) {
+		return obj;
+	}
+
+	return Object.fromEntries(Object.entries(obj).filter(([key]) => properties.includes(key)));
+}

package/src/index.js.njk

@@ -0,0 +1,7 @@
+---
+permalink: "index.js"
+layout: null
+---
+{% for name in components -%}
+export { default as {{ name | tag_to_class }} } from "./src/{{ name }}/{{ name }}.js";
+{% endfor %}

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-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);

package/color-slider/style.css

@@ -1,65 +0,0 @@
-.color-slider {
-	display: block;
-	margin: 0 1em auto 0;
-	width: 100%;
-	-moz-appearance: none;
-	-webkit-appearance: none;
-	background: linear-gradient(to right, var(--stops)), var(--transparency);
-	height: 2.2em;
-	border-radius: .3em;
-	box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-
-
-&::-webkit-slider-thumb {
-	width: 1em;
-	height: 2.3em;
-	-webkit-appearance: none;
-	border-radius: .15em;
-	border: 1px solid black;
-	box-shadow: 0 0 0 1px white;
-}
-
-&::-moz-range-thumb {
-	width: 1em;
-	height: 2.3em;
-	border-radius: .15em;
-	border: 1px solid black;
-	box-shadow: 0 0 0 1px white;
-	background: transparent;
-}
-
-&::-moz-range-track {
-	background: none;
-}
-
-& + input[type=number] {
-	position: absolute;
-	margin-top: -4em;
-	left: calc(100% * var(--percentage));
-	transform: translateX(-50%);
-	padding: .2em .5em;
-	width: 3em;
-	border: 0;
-	border-radius: .3em;
-	text-align: center;
-	color: white;
-	background: rgba(0,0,0,.8);
-	font: inherit;
-	font-size: 120%;
-	transition: .3s left cubic-bezier(.17,.67,.49,1.48) ;
-}
-
-	/* Prevent input from moving all over the place as we type */
-	& + input[type=number]:focus {
-		transition-delay: .5s;
-	}
-
-	label:not(:focus-within):not(:hover) > .color-slider + input[type=number] {
-		display: none;
-	}
-
-}
-
-.color-slider-label {
-	position: relative;
-}

package/color-swatch/index.njk

@@ -1,40 +0,0 @@
----
-title: <color-swatch>
----
-
-
-<script src="color-swatch.js" type="module"></script>
-<style>
-	html {
-		color-scheme: light dark;
-	}
-
-	@media (prefers-color-scheme: dark) {
-		html {
-			background: hsl(220 5% 20%);
-		}
-	}
-
-	color-swatch {
-		display: block;
-		margin: 1em 0;
-	}
-</style>
-
-
-<h1>&lt;color-swatch></h1>
-
-<section>
-	<h2>Different font sizes</h2>
-	<color-swatch style="font-size: 70%" contentEditable>lch(50% 40 30)</color-swatch>
-	<color-swatch contentEditable>lch(50% 40 30)</color-swatch>
-	<color-swatch style="font-size: 200%" contentEditable>lch(50% 40 30)</color-swatch>
-	<color-swatch style="font-size: 400%" contentEditable>lch(50% 40 30)</color-swatch>
-	<color-swatch style="font-size: 800%" contentEditable>lch(50% 40 30)</color-swatch>
-</section>
-
-<p>Semi-transparent color</p>
-<color-swatch>hsl(340 90% 50% / .25)</color-swatch>
-
-<p>Invalid color</p>
-<color-swatch>foobar</color-swatch>

package/common/attributes.js

@@ -1,68 +0,0 @@
-export default function (Class, attributes = Class.attributes) {
-	Object.defineProperty(Class.prototype, "_props", {
-		get () {
-			let value = {};
-			Object.defineProperty(this, "_props", {
-				value,
-				writable: true,
-				configurable: true,
-				enumerable: false,
-			});
-			return value;
-		},
-		writable: true,
-		configurable: true,
-	});
-
-	// Define getters and setters for each attribute
-	for (let name in attributes) {
-		let spec = Class.attributes[name] ?? {};
-		let {type, default: defaultValue} = spec;
-
-		Object.defineProperty(Class.prototype, name, {
-			get () {
-				let value = this._props[name];
-
-				if (value === undefined && defaultValue !== undefined) {
-					return defaultValue;
-				}
-
-				return value;
-			},
-			set (value) {
-				let oldValue = this._props[name];
-				let oldAttributeValue = this.getAttribute(name);
-				let originalValue = value;
-				let originalClass = value.constructor;
-				let originalType = typeof value;
-
-				if (type && type !== String) {
-					if (type === Number) {
-						value = Number(value);
-					}
-					else if (type === Boolean) {
-						value = value !== null;
-					}
-					else {
-						// Assume it's a class
-						value = new type(value);
-					}
-				}
-
-				this._props[name] = value;
-
-				if (value !== oldValue && oldAttributeValue !== originalValue) {
-					if (type === Boolean) {
-						this.toggleAttribute(name, value);
-					}
-					else {
-						this.setAttribute(name, value);
-					}
-				}
-			},
-			enumerable: true,
-		});
-	}
-
-	// Class.prototype._initializeProps = function () {};
-}

package/common/color.js

@@ -1,10 +0,0 @@
-let specifier;
-
-if (import.meta.resolve("colorjs.io")) {
-	specifier = "colorjs.io";
-}
-else {
-	specifier = "../node_modules/colorjs.io/dist/color.js";
-}
-
-export default await import(specifier);

package/css-color/index.njk

@@ -1,43 +0,0 @@
-<h1>&lt;css-color></h1>
-
-<script src="./css-color.js" type="module"></script>
-<h2>Static</h2>
-<css-color>oklch(70% 0.25 138)</css-color>
-<css-color swatch="large">oklch(70% 0.25 138)</css-color>
-
-<h2>Editable</h2>
-<css-color>
-	<input value="oklch(70% 0.25 138)" />
-</css-color>
-<css-color swatch="large">
-	<input value="oklch(70% 0.25 138)" />
-</css-color>
-
-<h2>With name</h2>
-<css-color>
-	<label slot="before" for=c1>Accent color:</label>
-	<input value="oklch(70% 0.25 138)" id=c1 />
-</css-color>
-<css-color swatch="large">
-	<label slot="before" id=c2>Accent color:</label>
-	<input value="oklch(70% 0.25 138)" id=c2 />
-</css-color>
-
-<h2>Bound to CSS property</h2>
-<css-color swatch="large" property="--color-red">
-	<input />
-</css-color>
-
-<h2>Update via JS</h2>
-<h3>Static</h3>
-<css-color id="dynamic_static">oklch(70% 0.25 138)</css-color>
-<script type="module">
-	dynamic_static.color = "oklch(60% 0.15 0)"
-</script>
-<h3>Editable</h3>
-<css-color id="dynamic_editable">
-	<input value="oklch(70% 0.25 138)" />
-</css-color>
-<script type="module">
-	dynamic_editable.color = "oklch(60% 0.15 0)"
-</script>

package/css-color/style.css

@@ -1,67 +0,0 @@
-:host {
-	display: inline-flex;
-	gap: .3em;
-	width: min-content;
-	white-space: nowrap;
-	--background-checkerboard: repeating-conic-gradient(rgb(0 0 0 / .12) 0 25%, transparent 0 50%) 0 0 / 1em 1em;
-}
-
-#gamut {
-	font-size: 80%;
-}
-
-#wrapper {
-	display: flex;
-	flex-flow: inherit;
-
-	&.static {
-		gap: .4em;
-	}
-}
-
-[part="color-wrapper"] {
-	position: relative;
-	display: flex;
-	gap: .2em;
-
-	&:not(.static *) {
-		#gamut {
-			position: absolute;
-			inset: .3em;
-			inset-inline-start: auto;
-		}
-	}
-
-	::slotted(input) {
-		padding-inline-end: 2em;
-	}
-}
-
-:host(:not([for])) #swatch {
-	display: block;
-	inline-size: 2em;
-	border-radius: .2em;
-	background: linear-gradient(var(--color, transparent) 0 100%), var(--background-checkerboard);
-}
-
-:host([swatch="none"]) #swatch {
-	display: none;
-}
-
-:host(:not([for])):host([swatch="large"]) {
-	flex-flow: column;
-
-	#wrapper {
-		flex-flow: column;
-	}
-}
-
-:host(:not([for])):host([swatch="large"]) #swatch {
-	inline-size: auto;
-	block-size: 5em;
-}
-
-:host(:not([for])):host([swatch="large"]) #wrapper.static slot {
-	display: flex;
-	flex: 1;
-}