chnobli 0.1.4 → 0.1.6

package/src/tests/{values.test.js → values.test.ts}

@@ -1,14 +1,12 @@
 import { describe, expect, it } from 'vitest';
-import TestTicker from '../timing/testticker.js';
-import TestResponsiveEvent from '../responsive/testevent.js';
-import { animate, timeline } from '../chnobli.js';
-import { responsive, from, fromTo } from '../utils/utils.js';
-import { el, getRootElement } from '../target/testdomnode.js';
-import { timeout } from 'fire/util.js';
+import TestTicker from '../timing/TestTicker';
+import { animate, timeline } from '../chnobli';
+import { responsive, from, fromTo } from '../utils/utils';
+import { el, getRootElement } from '../target/TestDomNode';
 
 describe('values', () => {
 	it('rem unit', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 
 		const root = getRootElement();
 		root.computedStyle.fontSize = '13px';
@@ -17,11 +15,11 @@ describe('values', () => {
 		const tl = timeline()
 			.add(div, {
 				width: '10rem',
-				duration: 5
+				duration: 5,
 			})
 			.add(div, {
 				width: 20,
-				duration: 5
+				duration: 5,
 			})
 			.play();
 
@@ -33,7 +31,7 @@ describe('values', () => {
 	});
 
 	it('percent unit', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 
 		const div = el();
 		div.computedStyle.width = '10px';
@@ -41,7 +39,7 @@ describe('values', () => {
 			.add(div, {
 				x: '10%',
 				width: '50%',
-				duration: 10
+				duration: 10,
 			})
 			.play();
 
@@ -50,12 +48,14 @@ describe('values', () => {
 		expect(div.style.width).toBe('100.000%');
 
 		ticker.run();
-		expect(div.style.transform).toBe('translate3d(10.000%,0.000px,0.000px)');
+		expect(div.style.transform).toBe(
+			'translate3d(10.000%,0.000px,0.000px)',
+		);
 		expect(div.style.width).toBe('50.000%');
 	});
 
 	it('multiple values', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 
 		const root = getRootElement();
 		root.computedStyle.fontSize = '10px';
@@ -65,7 +65,7 @@ describe('values', () => {
 		const tl = timeline()
 			.add(div, {
 				padding: '10px 20rem',
-				duration: 10
+				duration: 10,
 			})
 			.play();
 
@@ -77,7 +77,7 @@ describe('values', () => {
 	});
 
 	it('display', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 
 		const div = el();
 		div.computedStyle.display = 'block';
@@ -86,7 +86,7 @@ describe('values', () => {
 				display: 'none',
 				position: from('absolute'),
 				visibility: fromTo('hidden', 'visible'),
-				duration: 10
+				duration: 10,
 			})
 			.play();
 
@@ -108,7 +108,7 @@ describe('values', () => {
 	});
 
 	it('colors', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 		const div = el();
 		div.computedStyle.color = 'rgb(120, 130, 20)';
 
@@ -116,7 +116,7 @@ describe('values', () => {
 			.add(div, {
 				color: 'black',
 				backgroundColor: 'hsl(10, 80%, 40%)',
-				duration: 10
+				duration: 10,
 			})
 			.play();
 
@@ -134,7 +134,7 @@ describe('values', () => {
 	});
 
 	it('css-vars', () => {
-		const ticker = new TestTicker;
+		const ticker = new TestTicker();
 		const div = el();
 		div.computedStyle['--color'] = 'rgb(120, 130, 20)';
 		div.computedStyle['--border'] = '20px';
@@ -143,7 +143,7 @@ describe('values', () => {
 			.add(div, {
 				'--color': 'black',
 				'--border': '1px 20px',
-				duration: 10
+				duration: 10,
 			})
 			.play();
 
@@ -159,4 +159,4 @@ describe('values', () => {
 		expect(div.style['--color']).toBe('rgba(0, 0, 0, 1.000)');
 		expect(div.style['--border']).toBe('1.000px 20.000px');
 	});
-});
+});

package/src/timeline/Nested.ts

@@ -0,0 +1,67 @@
+import { takeProp } from '../utils/internal';
+import Timeline from './TimeLine';
+import { timelineAdd } from './public';
+
+export default class NestedTimeline {
+	_defaults: Record<string, any>;
+	_inner: Timeline;
+
+	constructor(props: Record<string, any> = {}) {
+		this._defaults = takeProp(props, 'defaults', {});
+
+		if ('duration' in props)
+			throw new Error('a timeline does not accept a duration');
+
+		this._inner = new Timeline(props);
+	}
+
+	/**
+	 * Set's properties
+	 * offset can be staggered, a number, a label or a string `+=10`
+	 */
+	set(targets: any, props: Record<string, any>, offset: any = null) {
+		// for the moment let's just add as usual but set the duration to 0
+		return this.add(targets, { ...props, duration: 0 }, offset);
+	}
+
+	/**
+	 * Add an animation to the timeline
+	 *
+	 * offset can be staggered, a number, a label or a string `+=10`
+	 */
+	add(targets: any, props: Record<string, any>, offset: any = null) {
+		timelineAdd(this, targets, props, offset);
+
+		return this;
+	}
+
+	/**
+	 * Adds a label at to the current nOffse
+	 *
+	 * This label can then be used in offsets
+	 */
+	label(label: string, offset: any = null) {
+		this._inner.label(label, offset);
+
+		return this;
+	}
+
+	/**
+	 * Allows to nest timelines
+	 *
+	 * fn: (timeline)
+	 */
+	nest(
+		fn: (tl: NestedTimeline) => void,
+		opts: Record<string, any> = {},
+		offset: any = null,
+	) {
+		const tl = new NestedTimeline(opts);
+
+		fn(tl);
+
+		this._inner.addTimeline(tl._inner, offset);
+
+		return this;
+	}
+}

package/src/timeline/{timeline.js → TimeLine.ts}

@@ -1,18 +1,45 @@
-import { takeProp } from '../utils/internal.js';
+import { takeProp } from '../utils/internal';
 import Timing, {
-	parseEase, parseRepeat, parseAlternate, parseReversed,
-	STATE_BEFORE, STATE_ENDED
-} from '../timing/timing.js';
-import Ticker from '../timing/ticker.js';
-import Animation from '../animation/animation.js';
+	parseEase,
+	parseRepeat,
+	parseAlternate,
+	parseReversed,
+	STATE_BEFORE,
+	STATE_ENDED,
+} from '../timing/Timing';
+import Ticker from '../timing/Ticker';
+import Animation from '../animation/Animation';
+import AnimationFrameTicker from '../timing/AnimationFrameTicker';
+
+type Entry = {
+	type: 'label' | 'animation' | 'timeline';
+	value: any;
+	offset: Offset;
+	relativeOffset: number;
+	start?: number;
+	end?: number;
+};
 
 /**
  * Timeline is the most versatile class
- * 
+ *
  * A timeline can contain multiple animation, ordered one after the other or
  * offset.
  */
 export default class Timeline {
+	timing: Timing;
+	ticker: Ticker;
+
+	private entries: Entry[];
+
+	private _beforeResponsiveFn: () => void;
+	private _initialized: boolean;
+	private _renderQueue: {
+		upcoming: Animation[];
+		passed: Animation[];
+		active: Animation[];
+	};
+
 	/*
 	{
 		ease,
@@ -20,30 +47,45 @@ export default class Timeline {
 		alternate
 	}
 	*/
-	constructor(props = {}) {
+	constructor(props: Record<string, any> = {}) {
 		const nProps = {
 			duration: 1000,
 			ease: parseEase(takeProp(props, 'ease', null)),
 			repeat: parseRepeat(takeProp(props, 'repeat', false)),
 			alternate: parseAlternate(takeProp(props, 'alternate', true)),
-			reversed: parseReversed(takeProp(props, 'reversed', false))
+			reversed: parseReversed(takeProp(props, 'reversed', false)),
 		};
 
 		this.timing = new Timing(nProps);
-		this.ticker = Ticker.global();
+		this.ticker = AnimationFrameTicker.global();
 
 		// { type: label|animation, value: {}, offset, start: x, end: y, render }
 		this.entries = [];
 
 		this._beforeResponsiveFn = () => {};
 		this._initialized = false;
-		this._renderQueue = null;
+		this._renderQueue = {
+			upcoming: [],
+			passed: [],
+			active: [],
+		};
+	}
+
+	isFinite() {
+		return !this.entries.some(e => {
+			return e.type === 'animation' && !e.value.isFinite();
+		});
 	}
 
 	// relative represents the point which the offset should be taken
 	// if relative 1 is done the offset will be taken from the previous - 1
-	add(targets, props, offset = null, relative = 0) {
-		const animation = new Animation(targets, this.ticker, props);
+	add(
+		target: any,
+		props: Record<string, any>,
+		offset: any = null,
+		relative = 0,
+	) {
+		const animation = new Animation(target, this.ticker, props);
 
 		if (!animation.isFinite())
 			throw new Error('the animation needs to be finite');
@@ -52,79 +94,92 @@ export default class Timeline {
 			type: 'animation',
 			value: animation,
 			offset: new Offset(offset),
-			relativeOffset: relative
+			relativeOffset: relative,
 		});
 
 		return this;
 	}
 
-	label(label, offset = null) {
+	addTimeline(tl: Timeline, offset: any = null) {
+		if (!tl.isFinite()) throw new Error('the animation needs to be finite');
+
+		this.entries.push({
+			type: 'timeline',
+			value: tl,
+			offset: new Offset(offset),
+			relativeOffset: 0,
+		});
+	}
+
+	label(label: string, offset: any = null) {
 		this.entries.push({
 			type: 'label',
 			value: label,
 			offset: new Offset(offset),
-			relativeOffset: 0
+			relativeOffset: 0,
 		});
 
 		return this;
 	}
 
 	// set's a function which get's called before any responsive call
-	setBeforeResponsiveFn(fn) {
+	setBeforeResponsiveFn(fn: () => void) {
 		this._beforeResponsiveFn = fn;
 	}
 
-	advance(change) {
+	advance(change: number) {
 		this.timing.advance(change);
 
 		this._updateTimings();
 	}
 
-	seekMs(ms) {
+	seekMs(ms: number) {
 		this.timing.seekMs(ms);
 
 		this._updateTimings();
 	}
 
-	seek(pos) {
+	seek(pos: number) {
 		this.timing.seek(pos);
 
 		this._updateTimings();
 	}
 
 	init() {
-		if (this._initialized)
-			return;
+		if (this._initialized) return;
 		this._initialized = true;
 
 		let duration = 0;
 
-		const labels = {};
+		const labels: Record<string, any> = {};
 
 		let i = -1;
 		for (const entry of this.entries) {
 			i++;
 			let offset = entry.offset;
+			const label = offset.label();
 
-			if (offset.type === 'label') {
-				if (!(offset.value in labels))
-					throw new Error('could not find label ' + offset.value);
+			if (label) {
+				if (!(label in labels))
+					throw new Error('could not find label ' + label);
 
-				offset = new Offset(labels[offset.value]);
+				offset = new Offset(labels[label]);
 			}
 
 			const pos = this.entries[i - 1 - entry.relativeOffset]?.end ?? 0;
 
 			let start = offset.calculate(pos);
-			if (start < 0)
-				throw new Error('cannot go in the past start < 0');
+			if (start < 0) throw new Error('cannot go in the past start < 0');
 
 			let end = start;
-			if (entry.type === 'animation')
-				end += entry.value.duration;
+			if (entry.type === 'animation') end += entry.value.duration;
+
+			if (entry.type === 'timeline') {
+				entry.value.init();
+				end += entry.value.timing.duration;
+			}
 
-			if (entry.type === 'label')
-				labels[entry.value] = start;
+			if (entry.type === 'label') labels[entry.value] = start;
 
 			entry.start = start;
 			entry.end = end;
@@ -148,13 +203,15 @@ export default class Timeline {
 		// initialization means
 		// we need to define which value should be used as the from and the to
 		// value
-		const startOrdered = this.entries.filter(e => e.type === 'animation');
-		startOrdered.sort((a, b) => a.start - b.start);
+		const startOrdered = this.entries.filter(e => {
+			return e.type === 'animation' || e.type === 'timeline';
+		});
+		startOrdered.sort((a, b) => a.start! - b.start!);
 
 		for (let i = 0; i < startOrdered.length; i++) {
 			const entry = startOrdered[i];
 
-			this.timing.seekMs(entry.start);
+			this.timing.seekMs(entry.start!);
 
 			const pos = this.timing.positionMs();
 
@@ -163,7 +220,7 @@ export default class Timeline {
 				const prevEntry = startOrdered[y];
 				const prevAnimation = prevEntry.value;
 
-				prevAnimation.seekMs(pos - prevEntry.start);
+				prevAnimation.seekMs(pos - prevEntry.start!);
 				prevAnimation.render();
 			}
 
@@ -201,17 +258,17 @@ export default class Timeline {
 		this._renderQueue = {
 			upcoming: [],
 			passed: [],
-			active: []
+			active: [],
 		};
 
 		const pos = this.timing.positionMsUnbounded();
 
 		for (const entry of this.entries) {
-			if (entry.type !== 'animation')
+			if (entry.type !== 'animation' && entry.type !== 'timeline')
 				continue;
 
 			const animation = entry.value;
-			animation.seekMs(pos - entry.start);
+			animation.seekMs(pos - entry.start!);
 
 			if (animation.timing.state >= STATE_ENDED) {
 				this._renderQueue.passed.push(animation);
@@ -224,8 +281,7 @@ export default class Timeline {
 	}
 
 	update() {
-		if (!this._initialized)
-			return;
+		if (!this._initialized) return;
 
 		const pos = this.timing.savePosition();
 		const reversed = this.timing.reversed;
@@ -251,23 +307,30 @@ export default class Timeline {
 
 	destroy() {
 		for (const entry of this.entries) {
-			if (entry.type !== 'animation')
+			if (entry.type === 'timeline') {
+				entry.value.destroy();
 				continue;
+			}
+
+			if (entry.type !== 'animation') continue;
 
 			const animation = entry.value;
 			animation.destroy();
 		}
 
 		this.entries = [];
-		this._beforeResponsiveFn = null;
+		this._beforeResponsiveFn = () => {};
 		this.ticker.applyTargets();
 	}
 }
 
-
 class Offset {
-	constructor(offset = null) {
+	type: 'none' | 'absolute' | 'sub' | 'add' | 'label';
+	value: number | string | null;
+
+	constructor(offset: any = null) {
 		this.type = 'none';
+		this.value = null;
 
 		if (typeof offset === 'number') {
 			this.type = 'absolute';
@@ -286,19 +349,26 @@ class Offset {
 		}
 	}
 
-	calculate(pos) {
-		if (this.type === 'none')
-			return pos;
+	label(): string | null {
+		if (this.type !== 'label') return null;
+
+		return this.value as string;
+	}
 
-		if (this.type === 'absolute')
-			return this.value;
+	// this is bullshit
+	/* isAbsolute(this: Offset): this is { type: 'absolute'; value: number } {
+		return this.type === 'absolute';
+	} */
 
-		if (this.type === 'sub')
-			return pos - this.value;
+	calculate(pos: number): number {
+		if (this.type === 'none') return pos;
 
-		if (this.type === 'add')
-			return pos + this.value;
+		if (this.type === 'absolute') return this.value as number;
+
+		if (this.type === 'sub') return pos - (this.value as number);
+
+		if (this.type === 'add') return pos + (this.value as number);
 
 		throw new Error('cannot calculate for type ' + this.type);
 	}
-}
+}