chnobli 0.1.5 → 0.1.7

package/src/utils/{motionpath.js → motionpath.ts}

@@ -1,19 +1,44 @@
-function catmullRom(p0, p1, p2, p3, t, p1Tension, p2Tension) {
+function catmullRom(
+	p0: number,
+	p1: number,
+	p2: number,
+	p3: number,
+	t: number,
+	p1Tension: number,
+	p2Tension: number,
+) {
 	let v0 = (p2 - p0) * p1Tension;
 	let v1 = (p3 - p1) * p2Tension;
 	let t2 = t * t;
 	let t3 = t2 * t;
 
-	return (2 * p1 - 2 * p2 + v0 + v1) *
-		t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
+	return (
+		(2 * p1 - 2 * p2 + v0 + v1) * t3 +
+		(-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 +
+		v0 * t +
+		p1
+	);
 }
 
+export type CurveOptions = {
+	startEndStraight?: boolean;
+};
+
+export type Point = {
+	x: number;
+	y: number;
+	straight?: boolean;
+};
+
 /**
  * Calculates a curve between different points
  */
-export function curve(points, tension = 1, opts = {}) {
-	if (points.length <= 1)
-		throw new Error('curve expects at least 2 points');
+export function curve(
+	points: Point[],
+	tension = 1,
+	opts: CurveOptions = {},
+): (t: number) => { x: number; y: number } {
+	if (points.length <= 1) throw new Error('curve expects at least 2 points');
 
 	let startEndStraight = opts.startEndStraight ?? true;
 	if (startEndStraight) {
@@ -23,7 +48,7 @@ export function curve(points, tension = 1, opts = {}) {
 
 	return t => {
 		const segment = Math.floor(t * (points.length - 1));
-		const localT = (t * (points.length - 1)) - segment;
+		const localT = t * (points.length - 1) - segment;
 
 		const p0 = points[Math.max(0, segment - 1)];
 		const p1 = points[segment];
@@ -33,15 +58,13 @@ export function curve(points, tension = 1, opts = {}) {
 		let p1Tension = tension;
 		let p2Tension = tension;
 
-		if (p1.straight)
-			p1Tension = 0;
+		if (p1.straight) p1Tension = 0;
 
-		if (p2.straight)
-			p2Tension = 0;
+		if (p2.straight) p2Tension = 0;
 
 		return {
 			x: catmullRom(p0.x, p1.x, p2.x, p3.x, localT, p1Tension, p2Tension),
-			y: catmullRom(p0.y, p1.y, p2.y, p3.y, localT, p1Tension, p2Tension)
+			y: catmullRom(p0.y, p1.y, p2.y, p3.y, localT, p1Tension, p2Tension),
 		};
 	};
-}
+}

package/src/utils/utils.ts

@@ -0,0 +1,110 @@
+import { Callback } from '../responsive/ResponsiveEvent';
+import { curve } from './motionpath';
+
+export { curve };
+
+/**
+ * Explicitly tells a property to animate the to value
+ */
+export function to(to: any) {
+	return { to };
+}
+
+/**
+ * Explicitly tells a property to animate the from value
+ */
+export function from(from: any) {
+	return { from };
+}
+
+/**
+ * Explicitly tells a property to animate with the from and to values
+ */
+export function fromTo(from: any, to: any) {
+	return { from, to };
+}
+
+/**
+ * makes a value reactive to `Timeline::update` calls or resizes
+ */
+export function responsive(fn: (target: any) => void): any {
+	return { responsive: fn };
+}
+
+/**
+ * Converts an element with text into span with chars
+ */
+export function chars(element: HTMLElement) {
+	if (element.dataset.processedChars) return Array.from(element.children);
+
+	const chars = element.textContent!.split('');
+
+	element.textContent = '';
+	element.dataset.processedChars = 'yes';
+
+	return chars
+		.map(c => {
+			if (c.trim().length === 0) {
+				element.appendChild(document.createTextNode(c));
+				return null;
+			}
+
+			const span = document.createElement('span');
+			span.textContent = c;
+			span.style.display = 'inline-block';
+			element.appendChild(span);
+
+			return span;
+		})
+		.filter(c => !!c);
+}
+
+/**
+ * Converts an element with text into span with words
+ */
+export function words(element: HTMLElement) {
+	if (element.dataset.processedWords) return Array.from(element.children);
+
+	const words = element.textContent!.split(/(\s+)/);
+
+	element.textContent = '';
+	element.dataset.processedWords = 'yes';
+
+	return words
+		.map(word => {
+			if (word.trim().length === 0) {
+				element.appendChild(document.createTextNode(word));
+				return null;
+			}
+
+			const span = document.createElement('span');
+			span.textContent = word;
+			span.style.display = 'inline-block';
+			element.appendChild(span);
+
+			return span;
+		})
+		.filter(w => !!w);
+}
+
+/**
+ * get the offset to the current page page
+ */
+export function pageOffset(el: HTMLElement) {
+	if ('offsetTop' in el) {
+		return {
+			top: el.offsetTop,
+			left: el.offsetLeft,
+			width: el.offsetWidth,
+			height: el.offsetHeight,
+		};
+	}
+
+	const rect = (el as HTMLElement).getBoundingClientRect();
+	return {
+		top: window.scrollY + rect.top,
+		left: window.scrollX + rect.left,
+		width: rect.width,
+		height: rect.height,
+	};
+}

package/src/values/{colorvalue.js → ColorValue.ts}

@@ -1,21 +1,28 @@
-import { COLORS } from './defaultcolors.js';
+import { COLORS } from './defaultcolors';
+
+export type RGBA = [number, number, number, number];
+export type HSLA = [number, number, number, number];
+export type RGB = [number, number, number];
 
 export default class ColorValue {
+	values: RGBA;
+
 	// [r, g, b, a?]
-	constructor(v) {
-		if (v.length === 3)
+	constructor(v: RGBA | RGB) {
+		if (v.length === 3) {
 			v = [...v, 1];
+		}
 
 		// always [r, g, b, a]
 		this.values = v;
 	}
 
-	static parse(v) {
+	static parse(v: string | number[]) {
 		if (Array.isArray(v)) {
 			if (v.length < 3 || v.length > 4)
 				throw new Error('expected array [r, g, b, a]');
 
-			return new ColorValue(v);
+			return new ColorValue(v as any);
 		}
 
 		if (typeof v !== 'string')
@@ -23,43 +30,41 @@ export default class ColorValue {
 
 		v = v.trim();
 
-		if (v.startsWith('#'))
-			return new ColorValue(parseHex(v.substring(1)));
-		if (v.startsWith('rgb'))
-			return new ColorValue(parseRgb(v));
-		if (v.startsWith('hsl'))
-			return new ColorValue(parseHsl(v));
+		if (v.startsWith('#')) return new ColorValue(parseHex(v.substring(1)));
+		if (v.startsWith('rgb')) return new ColorValue(parseRgb(v));
+		if (v.startsWith('hsl')) return new ColorValue(parseHsl(v));
 
-		if (v in COLORS)
-			return new ColorValue(COLORS[v]);
+		if (v in COLORS) return new ColorValue(COLORS[v]);
 
 		throw new Error('unknown color value ' + v);
 	}
 
 	// v needs to be a string
-	static mightBeAColor(v) {
+	static mightBeAColor(v: string) {
 		v = v.trim();
 
-		return v.startsWith('#')
-			|| v.startsWith('rgb')
-			|| v.startsWith('hsl')
-			|| v in COLORS;
+		return (
+			v.startsWith('#') ||
+			v.startsWith('rgb') ||
+			v.startsWith('hsl') ||
+			v in COLORS
+		);
 	}
 
 	clone() {
-		return new ColorValue(this.values.slice());
+		return new ColorValue(this.values.slice() as any);
 	}
 
 	toString() {
 		const [r, g, b, a] = this.values;
-		return `rgba(${[r, g, b].map(v => Math.round(v)).join(', ')}, ${
-			a.toFixed(3)
-		})`;
+		return `rgba(${[r, g, b].map(v => Math.round(v)).join(', ')}, ${a.toFixed(
+			3,
+		)})`;
 	}
 }
 
 // hex without the hash
-function parseHex(hex) {
+function parseHex(hex: string): RGBA {
 	if (hex.length !== 3 && hex.length !== 6 && hex.length !== 8)
 		throw new Error('unknown hex value ' + hex);
 
@@ -73,17 +78,16 @@ function parseHex(hex) {
 	const b = parseInt(hex.substring(4, 6), 16);
 	let a = 255;
 
-	if (hex.length === 8)
-		a = parseInt(hex.substring(6, 8), 16);
+	if (hex.length === 8) a = parseInt(hex.substring(6, 8), 16);
 
 	return [r, g, b, a / 255];
 }
 
 // rgb needs to start with rgb
-function parseRgb(rgb) {
+function parseRgb(rgb: string): RGBA {
 	const rgba = rgb.startsWith('rgba');
 	// remove the function name
-	rgb = rgb.substring(3 + rgba);
+	rgb = rgb.substring(3 + +rgba);
 	if (!rgb.startsWith('(') && !rgb.endsWith(')'))
 		throw new Error('invalid rgb function ' + rgb);
 
@@ -102,10 +106,10 @@ function parseRgb(rgb) {
 }
 
 // hsl needs to start with hsl
-function parseHsl(hsl) {
+function parseHsl(hsl: string): RGBA {
 	const hsla = hsl.startsWith('hsla');
 	// Remove the function name
-	hsl = hsl.substring(3 + hsla);
+	hsl = hsl.substring(3 + +hsla);
 	if (!hsl.startsWith('(') || !hsl.endsWith(')'))
 		throw new Error('invalid hsl function ' + hsl);
 
@@ -129,7 +133,7 @@ function parseHsl(hsl) {
 }
 
 /// expects [h, s, l, a]
-function hslToRgba(hsla) {
+function hslToRgba(hsla: HSLA): RGBA {
 	let [h, s, l, a] = hsla;
 
 	// normalize
@@ -141,27 +145,22 @@ function hslToRgba(hsla) {
 	if (s === 0) {
 		r = g = b = l;
 	} else {
-		const q = l < .5 ? l * (1 + s) : l + s - l * s;
+		const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
 		const p = 2 * l - q;
-		r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255, 0);
-		g = Math.round(hueToRgb(p, q, h) * 255, 0);
-		b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255, 0);
+		r = Math.round(hueToRgb(p, q, h + 1 / 3) * 255);
+		g = Math.round(hueToRgb(p, q, h) * 255);
+		b = Math.round(hueToRgb(p, q, h - 1 / 3) * 255);
 	}
 
 	return [r, g, b, a];
 }
 
-function hueToRgb(p, q, t) {
-	if (t < 0)
-		t += 1;
-	if (t > 1)
-		t -= 1;
-
-	if (t < 1 / 6)
-		return p + (q - p) * 6 * t;
-	if (t < 1 / 2)
-		return q;
-	if (t < 2 / 3)
-		return p + (q - p) * (2 / 3 - t) * 6;
+function hueToRgb(p: number, q: number, t: number): number {
+	if (t < 0) t += 1;
+	if (t > 1) t -= 1;
+
+	if (t < 1 / 6) return p + (q - p) * 6 * t;
+	if (t < 1 / 2) return q;
+	if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
 	return p;
-}
+}

package/src/values/StyleValue.ts

@@ -0,0 +1,186 @@
+import Value from './Value';
+import ColorValue from './ColorValue';
+
+const AT_THE_END_VALUES = ['none', 'hidden'];
+
+type InnerText = {
+	kind: 'text';
+	values: string;
+};
+
+type InnerValues = {
+	kind: 'values';
+	values: Value[];
+};
+
+type InnerColor = {
+	kind: 'color';
+	values: ColorValue;
+};
+
+/**
+ * A value from a style property
+ *
+ * might be a textual representation like none|auto|block|var(--abc)
+ * might be a value with unit or not
+ * might be multiple values `10 20px 4rem`
+ *
+ * values like hidden|none|null|undefined are market as at the end
+ * which means they should be set at the end
+ */
+export default class StyleValue {
+	private inner: InnerText | InnerValues | InnerColor;
+	private textAtTheEnd: boolean;
+
+	/**
+	 * Creates a style value
+	 *
+	 * ## value must be one of the following
+	 * - string (meaning this is of kind text)
+	 * - number (meaning this is of kind values with one value)
+	 * - array (meaning this is of kind values and each array element needs to
+	 * be a Value)
+	 * - ColorValue
+	 */
+	constructor(value: string | number | Value[] | ColorValue) {
+		if (typeof value === 'string') {
+			this.inner = {
+				kind: 'text',
+				values: value.trim(),
+			};
+		} else if (typeof value === 'number') {
+			this.inner = {
+				kind: 'values',
+				values: [Value.parse(value)],
+			};
+		} else if (Array.isArray(value)) {
+			this.inner = {
+				kind: 'values',
+				values: value,
+			};
+		} else if (value instanceof ColorValue) {
+			this.inner = {
+				kind: 'color',
+				values: value,
+			};
+		} else {
+			throw new Error('unknown style value ' + value);
+		}
+
+		/**
+		 * If this is true the value should be set at the end of a animation
+		 * this only works with kind === text
+		 */
+		this.textAtTheEnd =
+			this.inner.kind === 'text'
+				? AT_THE_END_VALUES.includes(this.inner.values)
+				: false;
+	}
+
+	static parse(v: string | number | (string | number)[]) {
+		if (typeof v === 'number') return new StyleValue(v);
+
+		if (Array.isArray(v)) {
+			const val = v.map(v => Value.parse(v));
+			return new StyleValue(val);
+		}
+
+		if (typeof v !== 'string')
+			throw new Error('expected a string as style value ' + v);
+
+		// let's first try to make it a color
+		if (ColorValue.mightBeAColor(v))
+			return new StyleValue(ColorValue.parse(v));
+
+		const split = v
+			.split(' ')
+			.map(v => v.trim())
+			.filter(v => !!v);
+		if (split.length === 0) throw new Error('style value cannot be empty');
+
+		if (split.length === 1) {
+			try {
+				const val = Value.parse(split[0]);
+				return new StyleValue([val]);
+			} catch (e) {
+				// console.log('failed to parse first style value ', e);
+				return new StyleValue(split[0]);
+			}
+		}
+
+		return new StyleValue(split.map(v => Value.parse(v)));
+	}
+
+	get kind(): 'text' | 'values' | 'color' {
+		return this.inner.kind;
+	}
+
+	get values(): string | Value[] | ColorValue {
+		return this.inner.values;
+	}
+
+	/// only works if the kind is values
+	get length() {
+		if (this.inner.kind !== 'values')
+			throw new Error('only works with kind values');
+
+		return this.inner.values.length;
+	}
+
+	extendToLength(length: number) {
+		if (this.length >= length) return;
+
+		// length already checks that kind is values
+		this.inner.values = Array(length).fill(this.values).flat();
+	}
+
+	/**
+	 * Throws if the this does not contain exactly one value
+	 */
+	intoValue(): Value {
+		if (this.length !== 1)
+			throw new Error('style value does not contain only one value');
+
+		// length already checks that kind is values
+		return (this.inner.values as Value[])[0];
+	}
+
+	clone() {
+		if (this.inner.kind === 'text')
+			return new StyleValue(this.inner.values);
+
+		if (this.inner.kind === 'color')
+			return new StyleValue(this.inner.values.clone());
+
+		return new StyleValue(this.inner.values.map(v => v.clone()));
+	}
+
+	/// if this is called with a text value nothing happens
+	withDefaultUnit(unit: string | null) {
+		if (this.inner.kind === 'text')
+			return new StyleValue(this.inner.values);
+
+		if (this.inner.kind === 'color')
+			return new StyleValue(this.inner.values.clone());
+
+		return new StyleValue(
+			this.inner.values.map(v => v.withDefaultUnit(unit)),
+		);
+	}
+
+	toString() {
+		switch (this.inner.kind) {
+			case 'text':
+				return this.inner.values;
+
+			case 'color':
+				return this.inner.values.toString();
+
+			case 'values':
+				return this.inner.values.join(' ');
+
+			default:
+				throw new Error('unknown kind ' + this.kind);
+		}
+	}
+}

package/src/values/{value.js → Value.ts}

@@ -1,46 +1,48 @@
 const REGEX = /^(\d+\.?\d*|\.\d+)(\w*|%)$/;
 
-
 export default class Value {
-	constructor(num, unit = null) {
+	num: number;
+	unit: string | null;
+
+	constructor(num: number, unit: string | null = null) {
 		this.num = num;
 		this.unit = unit;
 	}
 
-	static parse(v) {
+	static parse(v: string | number) {
 		if (typeof v === 'number') {
 			return new Value(v);
 		}
 
+		// @ts-ignore
 		const [_v, num, unit] = REGEX.exec(v);
 
 		return new Value(parseFloat(num), unit ? unit : null);
 	}
 
-	eq(other) {
+	eq(other: Value) {
 		return this.unit === other.unit && this.num === other.num;
 	}
 
-	clone(newNum = null) {
-		if (newNum !== null)
-			return new Value(newNum, this.unit);
-		
+	clone(newNum: number | null = null) {
+		if (newNum !== null) return new Value(newNum, this.unit);
+
 		return new Value(this.num, this.unit);
 	}
 
-	cloneAdd(add) {
+	cloneAdd(add: number) {
 		return new Value(this.num + add, this.unit);
 	}
 
-	cloneMul(mul) {
+	cloneMul(mul: number) {
 		return new Value(this.num * mul, this.unit);
 	}
 
-	withDefaultUnit(unit) {
+	withDefaultUnit(unit: string | null) {
 		return new Value(this.num, this.unit ?? unit);
 	}
 
 	toString() {
 		return this.num.toFixed(3) + (this.unit ?? '');
 	}
-}
+}

package/src/values/{defaultcolors.js → defaultcolors.ts}

@@ -1,4 +1,4 @@
-export const COLORS = {
+export const COLORS: Record<string, [number, number, number]> = {
 	black: [0, 0, 0],
 	silver: [192, 192, 192],
 	gray: [128, 128, 128],
@@ -144,5 +144,5 @@ export const COLORS = {
 	violet: [238, 130, 238],
 	wheat: [245, 222, 179],
 	whitesmoke: [245, 245, 245],
-	yellowgreen: [154, 205, 50]
+	yellowgreen: [154, 205, 50],
 };

package/tsconfig.build.json

@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"declaration": true,
+		"declarationMap": true,
+		"sourceMap": true,
+		"baseUrl": ".",
+		"allowJs": true,
+		"checkJs": false,
+		"isolatedModules": true,
+		"strict": true,
+		"outDir": "./dist"
+	},
+	"include": ["src/**/*.ts"],
+	"exclude": ["src/**/*.test.ts"]
+}