chnobli 0.1.4 → 0.1.6

package/src/responsive/event.js

@@ -1,46 +0,0 @@
-export default class ResponsiveEvent {
-	constructor() {
-		this._listeners = new Set;
-
-		window.addEventListener('resize', e => this._onResize(e));
-	}
-
-	static global() {
-		// allow to define a test ticker
-		if (typeof globalThis !== 'undefined' && globalThis.chnobliResponsive)
-			return globalThis.chnobliResponsive;
-
-		if (typeof window === 'undefined')
-			return null;
-
-		if (typeof window.chnobliResponsive === 'undefined')
-			window.chnobliResponsive = new ResponsiveEvent;
-		return window.chnobliResponsive;
-	}
-
-	// fn({ width, height }, { remove() })
-	add(fn) {
-		this._listeners.add(fn);
-
-		return {
-			remove: () => {
-				this.remove(fn);
-			}
-		};
-	}
-
-	remove(fn) {
-		this._listeners.delete(fn);
-	}
-
-	_onResize(_e) {
-		for (const fn of this._listeners) {
-			fn({
-				width: window.innerWidth,
-				height: window.innerHeight
-			}, {
-				remove: () => this.remove(fn)
-			});
-		}
-	}
-}

package/src/scroll/event.js

@@ -1,41 +0,0 @@
-export default class ScrollEvent {
-	constructor() {
-		this._listeners = new Set;
-
-		window.addEventListener('scroll', e => this._onScroll(e));
-	}
-
-	static global() {
-		if (typeof window === 'undefined')
-			return null;
-
-		if (typeof window.chnobliScroll === 'undefined')
-			window.chnobliScroll = new ScrollEvent;
-		return window.chnobliScroll;
-	}
-
-	add(fn) {
-		this._listeners.add(fn);
-
-		return {
-			remove: () => {
-				this.remove(fn);
-			}
-		};
-	}
-
-	remove(fn) {
-		this._listeners.delete(fn);
-	}
-
-	_onScroll(_e) {
-		for (const fn of this._listeners) {
-			fn({
-				y: window.scrollY,
-				height: window.innerHeight
-			}, {
-				remove: () => this.remove(fn)
-			});
-		}
-	}
-}

package/src/scroll/public.js

@@ -1,17 +0,0 @@
-import Scroll from './scroll.js';
-
-export default class PublicScroll {
-	/*
-	{
-		start: el | px
-		startView: 'top'
-	}
-	*/
-	constructor(props = {}) {
-		this._inner = new Scroll(props);
-	}
-
-	add(timeline) {
-		this._inner.addTimeline(timeline);
-	}
-}

package/src/stagger/stagger.js

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

package/src/target/domtarget.js

@@ -1,266 +0,0 @@
-import BaseTarget from './basetarget.js';
-import Value from '../values/value.js';
-import StyleValue from '../values/stylevalue.js';
-
-
-export default class DomTarget extends BaseTarget {
-	/**
-	 * target a dom node or svg
-	 * 
-	 * extFns: {getComputedStyle, getRootElement}
-	 */
-	constructor(target, extFns) {
-		super(target);
-
-		this._extFns = extFns;
-
-		// for the moment 
-
-		this.transformValues = new Map;
-		this.styleValues = new Map;
-		this.values = new Map;
-	}
-
-	type() {
-		return 'dom';
-	}
-
-	getValue(name) {
-		return this.values.get(name);
-	}
-
-	setValue(name, value) {
-		this.values.set(name, value);
-	}
-
-	removeValue(name) {
-		this.values.delete(name);
-	}
-
-	getTransformValue(name) {
-		const [fn, idx] = TRANSFORM_PROPS[name] ?? [];
-		if (!fn)
-			return null;
-
-		const r = this.transformValues.get(fn);
-		return r?.[idx ?? 0] ?? null;
-	}
-
-	setTransformValue(name, 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) {
-		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) {
-		const v = this.styleValues.get(name);
-
-		if (typeof v === 'undefined' || v === null) {
-			// 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;
-			}
-		} else
-			return v;
-	}
-
-	setStyleValue(name, value) {
-		this.styleValues.set(name, value);
-	}
-
-	removeStyleValue(name) {
-		this.styleValues.set(name, undefined);
-	}
-
-	hasClass(name) {
-		return this.target.classList.contains(name);
-	}
-
-	addClass(name) {
-		return this.target.classList.add(name);
-	}
-
-	removeClass(name) {
-		return this.target.classList.remove(name);
-	}
-
-	_getRem() {
-		const rootEl = this._extFns.getRootElement();
-		const style = this._extFns.getComputedStyle(rootEl);
-		const fontSize = Value.parse(style.fontSize, 'px');
-		if (fontSize.unit !== 'px')
-			throw new Error('rem could not be determined');
-
-		return fontSize.num;
-	}
-
-	_convertToPx(name, 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
-	_convertFromPx(name, value, unit) {
-		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.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, a, b) {
-		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 = {
-	'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 = {
-	'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.js

@@ -1,22 +0,0 @@
-import DomTarget from './domtarget.js';
-
-
-export function newTarget(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');
-}

package/src/tests/timeline.test.js

@@ -1,234 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/testticker.js';
-import { animate, timeline } from '../chnobli.js';
-import { el } from '../target/testdomnode.js';
-
-describe('timeline', () => {
-	it('empty timeline', () => {
-		const ticker = new TestTicker;
-
-		const tl = timeline();
-		tl.play();
-		const finished = ticker.run();
-		expect(finished).toBe(true);
-	});
-
-	it('single timeline', () => {
-		const ticker = new TestTicker;
-
-		const tl = timeline();
-		const target = el();
-		tl.add(target, {
-			x: 10,
-			duration: 10
-		});
-		tl.play();
-
-		ticker.run(0);
-		expect(target.style.transform)
-			.toBe('translate3d(0.000px,0.000px,0.000px)');
-
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-
-		tl.reverse();
-		tl.play();
-		ticker.run();
-		expect(target.style.transform).toBe('');
-	});
-
-	it('timeline set', () => {
-		const ticker = new TestTicker;
-
-		const target = el();
-		const tl = timeline()
-			.set(target, {
-				x: 10
-			});
-		tl.play();
-
-		ticker.run(0);
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-
-		tl.reverse();
-		tl.play();
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-	});
-
-	it('offsetTimeline timeline', () => {
-		const ticker = new TestTicker;
-
-		const tl = timeline();
-		const target = el();
-		tl.add(target, {
-			x: 10,
-			duration: 10
-		});
-		tl.add(target, {
-			x: 20,
-			duration: 10
-		})
-		tl.play();
-
-		ticker.run(10);
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-		ticker.run(1);
-		expect(target.style.transform)
-			.toBe('translate3d(11.000px,0.000px,0.000px)');
-
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(20.000px,0.000px,0.000px)');
-	});
-
-	it('timeline seeking', () => {
-		const ticker = new TestTicker;
-
-		const tl = timeline();
-		const target = el();
-		tl.add(target, {
-			x: 10,
-			duration: 10
-		});
-		tl.add(target, {
-			x: 20,
-			duration: 10
-		})
-
-		tl.seekMs(10);
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-
-		tl.seekMs(11);
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(11.000px,0.000px,0.000px)');
-
-		tl.seekMs(20);
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(20.000px,0.000px,0.000px)');
-
-		tl.seekMs(8);
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(8.000px,0.000px,0.000px)');
-	});
-
-	it('seeking after', () => {
-		const ticker = new TestTicker;
-
-		const target = el();
-		const ani = animate(target, {
-			autoplay: false,
-			duration: 10,
-			x: 10
-		});
-		ani.seek(2);
-
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-	});
-
-	it('timeline controls', () => {
-		const ticker = new TestTicker;
-
-		const tl = timeline();
-		const target = el();
-		tl.add(target, {
-			x: 10,
-			duration: 10
-		});
-		tl.add(target, {
-			x: 20,
-			duration: 10
-		})
-
-		tl.seekMs(10);
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-
-		tl.play();
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(20.000px,0.000px,0.000px)');
-
-		tl.reset();
-		tl.play();
-		ticker.run(10);
-		expect(target.style.transform)
-			.toBe('translate3d(10.000px,0.000px,0.000px)');
-
-		tl.reverse();
-		ticker.run(5);
-		expect(target.style.transform)
-			.toBe('translate3d(5.000px,0.000px,0.000px)');
-
-		tl.reverse();
-		ticker.run();
-		expect(target.style.transform)
-			.toBe('translate3d(20.000px,0.000px,0.000px)');
-
-		tl.reverse();
-		tl.play();
-		ticker.run();
-		expect(target.style.transform).toBe('');
-	});
-
-	it('timeline events', () => {
-		const ticker = new TestTicker;
-
-		const target = el();
-		const tl = timeline()
-			.add(target, {
-				x: 50,
-				duration: 10
-			})
-			.add(target, {
-				y: 50,
-				duration: 10
-			});
-
-		let endCounter = 0;
-		tl.on('end', () => endCounter += 1);
-
-		tl.play();
-		ticker.run(5);
-		expect(endCounter).toBe(0);
-
-		ticker.run();
-		expect(endCounter).toBe(1);
-
-		tl.play();
-		ticker.run();
-		// not sure this is the behaviour we wan't
-		expect(endCounter).toBe(2);
-
-		tl.reverse();
-		ticker.run();
-		expect(endCounter).toBe(2);
-		expect(target.style.transform)
-			.toBe('translate3d(50.000px,50.000px,0.000px)');
-
-		tl.play();
-		ticker.run();
-		expect(endCounter).toBe(3);
-		expect(target.style.transform).toBe('');
-
-		tl.play();
-		ticker.run();
-		expect(endCounter).toBe(4);
-	});
-});

package/src/utils/internal.js

@@ -1,7 +0,0 @@
-
-export function takeProp(props, name, def = null) {
-	const v = props[name] ?? def;
-	delete props[name];
-
-	return v;
-}