chnobli 0.1.4 → 0.1.6

package/src/scroll/ScrollEvent.ts

@@ -0,0 +1,53 @@
+export type Callback = (
+	a: { y: number; height: number },
+	opts: { remove: () => void },
+) => void;
+
+export default class ScrollEvent {
+	_listeners: Set<Callback>;
+
+	constructor() {
+		this._listeners = new Set();
+
+		window.addEventListener('scroll', e => this._onScroll(e));
+	}
+
+	static global() {
+		if (typeof window === 'undefined') return null;
+
+		// @ts-ignore
+		if (typeof window.chnobliScroll === 'undefined')
+			// @ts-ignore
+			window.chnobliScroll = new ScrollEvent();
+		// @ts-ignore
+		return window.chnobliScroll;
+	}
+
+	add(fn: Callback) {
+		this._listeners.add(fn);
+
+		return {
+			remove: () => {
+				this.remove(fn);
+			},
+		};
+	}
+
+	remove(fn: Callback) {
+		this._listeners.delete(fn);
+	}
+
+	private _onScroll(_e: Event) {
+		for (const fn of this._listeners) {
+			fn(
+				{
+					y: window.scrollY,
+					height: window.innerHeight,
+				},
+				{
+					remove: () => this.remove(fn),
+				},
+			);
+		}
+	}
+}

package/src/scroll/public.ts

@@ -0,0 +1,20 @@
+import PublicTimeline from '../timeline/public';
+import Scroll from './Scroll';
+
+export default class PublicScroll {
+	private _inner: Scroll;
+
+	/*
+	{
+		start: el | px
+		startView: 'top'
+	}
+	*/
+	constructor(props: Record<string, any> = {}) {
+		this._inner = new Scroll(props);
+	}
+
+	add(timeline: PublicTimeline) {
+		this._inner.addTimeline(timeline);
+	}
+}

package/src/stagger/stagger.ts

@@ -0,0 +1,45 @@
+/**
+ * Staggering allows to have a different value for every target
+ * allowing to easely offset each target by a few pixels
+ */
+
+function isStagger(value: any) {
+	return (
+		typeof value === 'object' &&
+		value !== null &&
+		typeof value.__isStagger__ === 'function'
+	);
+}
+
+export function callStagger(value: any, i: number, l: any = null) {
+	if (isStagger(value)) return value.call(i, l);
+
+	return value;
+}
+
+export function staggerMap(value: any, fn: (v: any) => any) {
+	if (isStagger(value))
+		return new Stagger((...args: any[]) => fn(value.call(...args)));
+
+	return fn(value);
+}
+
+export default class Stagger {
+	private fn: (...args: any[]) => any;
+
+	constructor(value: any) {
+		if (typeof value === 'function') {
+			this.fn = value;
+			return;
+		}
+
+		// if (value === )
+		throw new Error('unknown stagger value ' + value);
+	}
+
+	call(...args: any[]) {
+		return this.fn(...args);
+	}
+
+	__isStagger__() {}
+}

package/src/target/{basetarget.js → BaseTarget.old.ts}

@@ -1,8 +1,10 @@
-import StyleValue from '../values/stylevalue.js';
+import Value from '../values/Value';
+import StyleValue from '../values/StyleValue';
 
+export default class BaseTarget<T> {
+	target: T;
 
-export default class BaseTarget {
-	constructor(target) {
+	constructor(target: T) {
 		this.target = target;
 
 		// this might be an object, a dom node
@@ -13,74 +15,71 @@ export default class BaseTarget {
 		return 'unknown';
 	}
 
-	getValue(name) {
+	getValue(name: string): Value | null {
 		throw new Error('cannot get value of ' + name);
 	}
 
-	setValue(name, _value) {
+	setValue(name: string, _value: Value) {
 		throw new Error('cannot set value of ' + name);
 	}
 
-	removeValue(name) {
+	removeValue(name: string) {
 		throw new Error('cannot remove value of ' + name);
 	}
 
-	getTransformValue(name) {
+	getTransformValue(name: string): Value | null {
 		return this.getValue(name);
 	}
 
-	setTransformValue(name, value) {
+	setTransformValue(name: string, value: Value) {
 		return this.setValue(name, value);
 	}
 
-	removeTransformValue(name) {
+	removeTransformValue(name: string) {
 		return this.removeValue(name);
 	}
 
 	/**
 	 * returns nothing or a style value
 	 */
-	getStyleValue(name) {
+	getStyleValue(name: string): StyleValue | null {
 		const val = this.getValue(name);
-		if (!val)
-			return val;
-		return StyleValue([val]);
+		if (!val) return val;
+		return new StyleValue([val]);
 	}
 
 	/**
 	 * Expects a style value
 	 */
-	setStyleValue(name, value) {
-		return this.setValue(name, value);
+	setStyleValue(name: string, value: StyleValue) {
+		return this.setValue(name, value.intoValue());
 	}
 
-	removeStyleValue(name) {
+	removeStyleValue(name: string) {
 		return this.removeValue(name);
 	}
 
-	hasClass(name) {
+	hasClass(name: string): boolean {
 		throw new Error('cannot know if class exists ' + name);
 	}
 
-	addClass(name) {
+	addClass(name: string) {
 		throw new Error('cannot add class ' + name);
 	}
 
-	removeClass(name) {
+	removeClass(name: string) {
 		throw new Error('cannot remove class ' + name);
 	}
 
 	/**
 	 * Tries to unify both values so their units match
-	 * 
+	 *
 	 * a and b need to be a Value
 	 */
-	unifyValues(name, a, b) {
-		if (!a.unit && b.unit)
-			a.unit = b.unit;
+	unifyValues(name: string, a: Value, b: Value): [Value, Value] {
+		if (!a.unit && b.unit) a.unit = b.unit;
 
-		if (!b.unit && a.unit)
-			b.unit = a.unit;
+		if (!b.unit && a.unit) b.unit = a.unit;
 
 		if (a.unit !== b.unit)
 			throw new Error(`${name} cannot unify ${a.unit} and ${b.unit}`);
@@ -89,4 +88,4 @@ export default class BaseTarget {
 	}
 
 	apply() {}
-}
+}

package/src/target/DomTarget.ts

@@ -0,0 +1,281 @@
+import Value from '../values/Value';
+import StyleValue from '../values/StyleValue';
+import { Target } from './Target';
+
+export type Element = HTMLElement | SVGElement;
+
+export type ExternalFunctions = {
+	getComputedStyle: (el: Element) => CSSStyleDeclaration;
+	getRootElement: () => Element;
+};
+
+export default class DomTarget implements Target {
+	private target: Element;
+
+	private _extFns: ExternalFunctions;
+
+	private transformValues: Map<string, (Value | null)[]>;
+	private styleValues: Map<string, StyleValue | undefined>;
+	private values: Map<string, Value>;
+
+	/**
+	 * target a dom node or svg
+	 *
+	 * extFns: {getComputedStyle, getRootElement}
+	 */
+	constructor(target: Element, extFns: ExternalFunctions) {
+		this.target = target;
+		this._extFns = extFns;
+
+		// for the moment
+
+		this.transformValues = new Map();
+		this.styleValues = new Map();
+		this.values = new Map();
+	}
+
+	inner() {
+		return this.target;
+	}
+
+	type() {
+		return 'dom';
+	}
+
+	getValue(name: string): Value | null {
+		return this.values.get(name) ?? null;
+	}
+
+	setValue(name: string, value: Value) {
+		this.values.set(name, value);
+	}
+
+	removeValue(name: string) {
+		this.values.delete(name);
+	}
+
+	getTransformValue(name: string): Value | null {
+		const [fn, idx] = TRANSFORM_PROPS[name] ?? [];
+		if (!fn) return null;
+
+		const r = this.transformValues.get(fn);
+		return r?.[idx ?? 0] ?? null;
+	}
+
+	setTransformValue(name: string, value: Value) {
+		const [fn, idx] = TRANSFORM_PROPS[name] ?? [];
+		if (!fn) throw new Error('unknown transform ' + name);
+
+		let vals = this.transformValues.get(fn);
+		if (!vals) vals = Array(TRANSFORM_FUNCTIONS[fn].length).fill(null);
+
+		if (idx === null) vals = vals.map(() => value.clone());
+		else vals[idx] = value;
+
+		this.transformValues.set(fn, vals);
+	}
+
+	removeTransformValue(name: string) {
+		const [fn, idx] = TRANSFORM_PROPS[name] ?? [];
+		if (!fn) return;
+
+		if (idx === null) {
+			this.transformValues.delete(fn);
+			return;
+		}
+
+		let vals = this.transformValues.get(fn);
+		if (!vals) return;
+
+		vals[idx] = null;
+
+		if (vals.every(v => v === null)) this.transformValues.delete(fn);
+	}
+
+	getStyleValue(name: string): StyleValue | null {
+		const v = this.styleValues.get(name) ?? null;
+
+		if (v !== null) return v;
+
+		// let's try to get it from the dom
+		const style = this._extFns.getComputedStyle(this.target);
+		const styleV = style.getPropertyValue(name);
+
+		if (typeof styleV === 'undefined' || styleV === null) {
+			return styleV;
+		}
+
+		try {
+			const value = StyleValue.parse(styleV);
+			this.styleValues.set(name, value);
+
+			return value;
+		} catch (e) {
+			console.log('could not parse value', styleV);
+			return v;
+		}
+	}
+
+	setStyleValue(name: string, value: StyleValue) {
+		this.styleValues.set(name, value);
+	}
+
+	removeStyleValue(name: string) {
+		this.styleValues.set(name, undefined);
+	}
+
+	hasClass(name: string): boolean {
+		return this.target.classList.contains(name);
+	}
+
+	addClass(name: string) {
+		return this.target.classList.add(name);
+	}
+
+	removeClass(name: string) {
+		return this.target.classList.remove(name);
+	}
+
+	private _getRem(): number {
+		const rootEl = this._extFns.getRootElement();
+		const style = this._extFns.getComputedStyle(rootEl);
+		const fontSize = Value.parse(style.fontSize);
+		if (fontSize.unit !== 'px')
+			throw new Error('rem could not be determined');
+
+		return fontSize.num;
+	}
+
+	private _convertToPx(name: string, value: Value) {
+		if (value.num === 0) return new Value(0, 'px');
+
+		switch (value.unit) {
+			case 'px':
+				return value;
+			case 'rem':
+				return new Value(value.num * this._getRem(), 'px');
+			default:
+				throw new Error(
+					`cannot convert ${name} from ${value.unit} to px`,
+				);
+		}
+	}
+
+	// value needs to be a unit with pixels
+	private _convertFromPx(name: string, value: Value, unit: string) {
+		if (value.num === 0) return new Value(0, unit);
+
+		let v;
+		switch (unit) {
+			case 'px':
+				return value;
+
+			case 'rem':
+				return new Value(value.num / this._getRem(), 'rem');
+
+			case '%':
+				v = this.getStyleValue(name)?.intoValue();
+				if (!v || v.unit !== 'px')
+					throw new Error('cannot get style value of ' + name);
+
+				return new Value((value.num / v.num) * 100, '%');
+
+			default:
+				throw new Error(`cannot convert ${name} from px to ${unit}`);
+		}
+	}
+
+	unifyValues(name: string, a: Value, b: Value): [Value, Value] {
+		if (a.unit === b.unit) return [a, b];
+
+		if (!a.unit && b.unit) a.unit = b.unit;
+
+		if (!b.unit && a.unit) b.unit = a.unit;
+
+		const aPx = this._convertToPx(name, a);
+		const aBUnit = this._convertFromPx(name, aPx, b.unit!);
+
+		return [aBUnit, b];
+	}
+
+	apply() {
+		this.target.style.transform = Array.from(this.transformValues.entries())
+			.map(([k, vals]) => {
+				// since we allow null in default Values we now need to make
+				// sure either a value or a default value are set for the
+				// transform function
+
+				const defVals = TRANSFORM_FUNCTIONS[k];
+				if (vals.length !== defVals.length)
+					throw new Error("transform values don't match");
+
+				const nArray = Array(vals.length);
+
+				for (let i = 0; i < vals.length; i++) {
+					let val = vals[i];
+
+					if (val === null) val = new Value(defVals[i][0]);
+
+					nArray[i] = val.withDefaultUnit(defVals[i][1]);
+				}
+
+				return `${k}(${nArray.join(',')})`;
+			})
+			.join(' ');
+
+		// style
+		for (const [k, v] of this.styleValues.entries()) {
+			if (v === undefined) {
+				this.target.style.removeProperty(k);
+				// is this a problem?
+				this.styleValues.delete(k);
+			} else {
+				this.target.style.setProperty(k, v.toString());
+			}
+		}
+
+		// values
+		for (const [k, _v] of this.values.entries()) {
+			console.log('what todo with this ' + k);
+		}
+	}
+}
+
+const TRANSFORM_PROPS: Record<string, [string, number | null]> = {
+	x: ['translate3d', 0],
+	y: ['translate3d', 1],
+	z: ['translate3d', 2],
+	scale: ['scale3d', null],
+	scaleX: ['scale3d', 0],
+	scaleY: ['scale3d', 1],
+	scaleZ: ['scale3d', 2],
+	rotate: ['rotate3d', null],
+	rotateX: ['rotate3d', 0],
+	rotateY: ['rotate3d', 1],
+	rotateZ: ['rotate3d', 2],
+	skew: ['skew', 0],
+	skewX: ['skew', 0],
+	skewY: ['skew', 1],
+};
+
+const TRANSFORM_FUNCTIONS: Record<string, [number, string | null][]> = {
+	translate3d: [
+		[0, 'px'],
+		[0, 'px'],
+		[0, 'px'],
+	],
+	scale3d: [
+		[1, null],
+		[1, null],
+		[1, null],
+	],
+	rotate3d: [
+		[0, 'deg'],
+		[0, 'deg'],
+		[0, 'deg'],
+	],
+	skew: [
+		[0, 'deg'],
+		[0, 'deg'],
+	],
+};

package/src/target/Target.ts

@@ -0,0 +1,48 @@
+import Value from '../values/Value';
+import DomTarget from './DomTarget';
+import StyleValue from '../values/StyleValue';
+
+export function newTarget(target: any): Target {
+	if (typeof window === 'undefined') {
+		if (typeof target.__simulatedDom__ === 'function') {
+			return new DomTarget(target, {
+				getComputedStyle: target.__getComputedStyleFn__(),
+				getRootElement: target.__getRootElementFn__(),
+			});
+		}
+	} else {
+		if (target instanceof HTMLElement || target instanceof SVGElement) {
+			return new DomTarget(target, {
+				getComputedStyle: e => window.getComputedStyle(e),
+				getRootElement: () => document.documentElement,
+			});
+		}
+	}
+
+	throw new Error('unknown target');
+}
+
+export interface Target {
+	inner(): any;
+	type(): string;
+
+	getValue(name: string): Value | null;
+	setValue(name: string, value: Value): void;
+	removeValue(name: string): void;
+
+	getTransformValue(name: string): Value | null;
+	setTransformValue(name: string, value: Value): void;
+	removeTransformValue(name: string): void;
+
+	getStyleValue(name: string): StyleValue | null;
+	setStyleValue(name: string, value: StyleValue): void;
+	removeStyleValue(name: string): void;
+
+	hasClass(name: string): boolean;
+	addClass(name: string): void;
+	removeClass(name: string): void;
+
+	unifyValues(name: string, a: Value, b: Value): [Value, Value];
+
+	apply(): void;
+}

package/src/target/{testdomnode.js → TestDomNode.ts}

@@ -1,33 +1,37 @@
-let ROOT_ELEMENT = null;
+let ROOT_ELEMENT: TestDomNode | null = null;
 
 export default class TestDomNode {
+	computedStyle: any;
+	style: any;
+	classList: any;
+
 	constructor() {
 		this.computedStyle = {
-			getPropertyValue(k) {
+			getPropertyValue(k: string) {
 				return this[k];
-			}
+			},
 		};
 
 		this.style = {
-			setProperty: (k, v) => {
+			setProperty: (k: string, v: string) => {
 				this.style[k] = v;
 			},
-			removeProperty: (k) => {
+			removeProperty: (k: string) => {
 				delete this.style[k];
-			}
+			},
 		};
 
 		this.classList = {
-			set: new Set,
-			contains(name) {
+			set: new Set(),
+			contains(name: string) {
 				return this.set.has(name);
 			},
-			add(name) {
+			add(name: string) {
 				this.set.add(name);
 			},
-			remove(name) {
+			remove(name: string) {
 				this.set.delete(name);
-			}
+			},
 		};
 	}
 
@@ -35,7 +39,7 @@ export default class TestDomNode {
 		this.computedStyle = { ...this.style };
 	}
 
-	static getComputedStyle(el) {
+	static getComputedStyle(el: TestDomNode): CSSStyleDeclaration {
 		return el.computedStyle;
 	}
 
@@ -55,7 +59,6 @@ export function el() {
 }
 
 export function getRootElement() {
-	if (!ROOT_ELEMENT)
-		ROOT_ELEMENT = el();
+	if (!ROOT_ELEMENT) ROOT_ELEMENT = el();
 	return ROOT_ELEMENT;
-}
+}