chnobli 0.1.4 → 0.1.6

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

@@ -1,16 +1,34 @@
-import { takeProp } from '../utils/internal.js';
-import Timeline from './timeline.js';
-import { STATE_ENDED } from '../timing/timing.js';
-import { callStagger } from '../stagger/stagger.js';
-import Events from '../utils/events.js';
-import ResponsiveEvent from '../responsive/event.js';
+import { takeProp } from '../utils/internal';
+import Timeline from './TimeLine';
+import { STATE_ENDED } from '../timing/Timing';
+import { callStagger } from '../stagger/stagger';
+import Events from '../utils/Events';
+import ResponsiveEvent from '../responsive/ResponsiveEvent';
+import NestedTimeline from './Nested';
 
 const STATE_PAUSED = 0;
 const STATE_RENDER_ONCE = 1;
 const STATE_PLAYING = 2;
 
+export type Responsive = {
+	responsive: () => void;
+};
+
 export default class PublicTimeline {
-	constructor(props = {}) {
+	_defaults: Record<string, any>;
+	private _responsive: boolean;
+
+	_inner: Timeline;
+
+	private _events: Events;
+
+	private _state: number;
+	private _renderedOnce: boolean;
+	private _runningTicker: any;
+	private _responsiveBlocks: { responsive: () => void }[];
+	private _responsiveEvent: any;
+
+	constructor(props: Record<string, any> = {}) {
 		this._defaults = takeProp(props, 'defaults', {});
 		this._responsive = takeProp(props, 'responsive', true);
 
@@ -22,15 +40,15 @@ export default class PublicTimeline {
 		this._inner = new Timeline(props);
 
 		// 'start', 'end'
-		this._events = new Events;
+		this._events = new Events();
 
 		this._state = STATE_PAUSED;
 		this._renderedOnce = false;
 		this._runningTicker = null;
 		this._responsiveBlocks = [];
 		if (this._responsive) {
-			this._responsiveEvent = ResponsiveEvent.global()?.add((...args) => {
-				this._onResponsive(...args);
+			this._responsiveEvent = ResponsiveEvent.global()?.add((a, b) => {
+				this._onResponsive(a, b);
 			});
 
 			// setup callback so we can notify our listeners
@@ -48,39 +66,18 @@ export default class PublicTimeline {
 	 * Set's properties
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
-	set(targets, props, offset = null) {
+	set(targets: any, props: Record<string, any>, offset = 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, props, offset = null) {
-		if (Array.from(targets).length === 0)
-			targets = [targets];
-		else
-			targets = Array.from(targets);
-
-		let i = -1;
-		for (const target of targets) {
-			i++;
-
-			const nProps = {
-				...this._defaults,
-				...props
-			};
-
-			for (const prop in nProps) {
-				nProps[prop] = callStagger(nProps[prop], i, targets.length);
-			}
-
-			const nOffset = callStagger(offset, i);
-
-			this._inner.add(target, nProps, nOffset, i);
-		}
+	add(targets: any, props: Record<string, any>, offset = null) {
+		timelineAdd(this, targets, props, offset);
 
 		return this;
 	}
@@ -90,17 +87,33 @@ export default class PublicTimeline {
 	 *
 	 * This label can then be used in offsets
 	 */
-	label(label, offset = null) {
+	label(label: string, offset: any = null) {
 		this._inner.label(label, offset);
 
 		return this;
 	}
 
+	/**
+	 * Allows to nest timelines
+	 *
+	 * fn: (timeline)
+	 */
+	// todo probably tl should be an interface
+	nest(fn: (tl: NestedTimeline) => void, opts = {}, offset: any = null) {
+		const tl = new NestedTimeline(opts);
+
+		fn(tl);
+
+		this._inner.addTimeline(tl._inner, offset);
+
+		return this;
+	}
+
 	/**
 	 * Adds a responsive function call which get's called before the responsive
 	 * functions in properties
 	 */
-	addResponsive(responsive) {
+	addResponsive(responsive: Responsive | Responsive[]) {
 		if (!this._responsiveEvent)
 			throw new Error('this timeline is not responsive');
 
@@ -121,8 +134,7 @@ export default class PublicTimeline {
 	 * Starts to play the timeline if it hasn't started
 	 */
 	play() {
-		if (this._state === STATE_PLAYING)
-			return;
+		if (this._state === STATE_PLAYING) return this;
 
 		this._state = STATE_PLAYING;
 
@@ -135,8 +147,7 @@ export default class PublicTimeline {
 	 * Pause the timeline at the current position
 	 */
 	pause() {
-		if (this._state === STATE_PAUSED)
-			return;
+		if (this._state === STATE_PAUSED) return;
 
 		this._state = STATE_PAUSED;
 
@@ -146,29 +157,27 @@ export default class PublicTimeline {
 	/**
 	 * Seeks to a position in the timeline
 	 */
-	seekMs(ms) {
+	seekMs(ms: number) {
 		this._inner.init();
 
 		this._inner.seekMs(ms);
 
-		if (this._state !== STATE_PLAYING)
-			this._state = STATE_RENDER_ONCE;
+		if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
 
 		this._startTicker();
 	}
 
 	/**
 	 * Seeks to a normalized position in the timeline
-	 * 
+	 *
 	 * @param pos = number between 0 and 1
 	 */
-	seek(pos) {
+	seek(pos: number) {
 		this._inner.init();
 
 		this._inner.seek(pos);
 
-		if (this._state !== STATE_PLAYING)
-			this._state = STATE_RENDER_ONCE;
+		if (this._state !== STATE_PLAYING) this._state = STATE_RENDER_ONCE;
 
 		this._startTicker();
 	}
@@ -189,7 +198,7 @@ export default class PublicTimeline {
 	 */
 	resetProps() {
 		const reversed = this._inner.timing.reverse;
-		this._inner.timing.reverse = false;
+		this._inner.timing.reversed = false;
 		this._inner.seek(-1);
 		this._inner.render();
 		this._inner.ticker.applyTargets();
@@ -215,9 +224,8 @@ export default class PublicTimeline {
 	/**
 	 * Set's the timeline to a specific direction
 	 */
-	setReversed(reversed) {
-		if (this.isReversed() == reversed)
-			return;
+	setReversed(reversed: boolean) {
+		if (this.isReversed() == reversed) return;
 		this.reverse();
 	}
 
@@ -230,22 +238,22 @@ export default class PublicTimeline {
 
 	/**
 	 * Listen on events
-	 * 
+	 *
 	 * returns a function to remove the event listener
-	 * 
+	 *
 	 * ## Events
-	 * 
+	 *
 	 * ### end
 	 * Get's executed once the timeline comes to the end
 	 * Does not get executed during seeking
-	 * 
+	 *
 	 */
-	on(event, fn) {
+	on(event: string, fn: (...args: any[]) => void) {
 		return this._events.add(event, fn);
 	}
 
-	// not wroking
-	onPromise(event) {
+	// not working
+	onPromise(event: string) {
 		return this._events.wait(event);
 	}
 
@@ -258,12 +266,12 @@ export default class PublicTimeline {
 		this._events.destroy();
 		this._responsiveEvent?.remove();
 		this._responsiveBlocks = [];
+		// @ts-ignore
 		this._inner = null;
 	}
 
 	_startTicker() {
-		if (this._runningTicker)
-			return;
+		if (this._runningTicker) return;
 
 		this._inner.init();
 
@@ -274,12 +282,11 @@ export default class PublicTimeline {
 					this._inner.render();
 				}
 
-				if (this._state === STATE_PLAYING)
-					this._events.trigger('end');
+				if (this._state === STATE_PLAYING) this._events.trigger('end');
 
 				this._state = STATE_PAUSED;
 				this._stopTicker();
-				return
+				return;
 			}
 
 			// if (this._inner.timing.state <= STATE_START) {
@@ -292,20 +299,18 @@ export default class PublicTimeline {
 			// 	return;
 			// }
 
-			if (this._state === STATE_PLAYING)
-				this._inner.advance(change);
+			if (this._state === STATE_PLAYING) this._inner.advance(change);
 
 			// todo when we add smooth seeks we need to update this
 
 			this._inner.render();
 
 			if (this._inner.timing.state >= STATE_ENDED) {
-				if (this._state === STATE_PLAYING)
-					this._events.trigger('end');
+				if (this._state === STATE_PLAYING) this._events.trigger('end');
 
 				this._state = STATE_PAUSED;
 				this._stopTicker();
-				return
+				return;
 			}
 
 			// we rendered once let's stop
@@ -317,17 +322,51 @@ export default class PublicTimeline {
 	}
 
 	_stopTicker() {
-		if (!this._runningTicker)
-			return;
+		if (!this._runningTicker) return;
 
 		this._runningTicker.remove();
 		this._runningTicker = null;
 	}
 
-	_onResponsive(_obj) {
+	_onResponsive(
+		a: { width: number; height: number },
+		b: { remove: () => void },
+	) {
 		// // make sure we don't render something if we never did
 		// if (!this._renderedOnce)
 		// 	return;
 		this._inner.update();
 	}
-}
+}
+
+/**
+ * Add an animation to the timeline
+ * tl needs to have _defaults, and _inner
+ */
+export function timelineAdd(
+	tl: PublicTimeline | NestedTimeline,
+	targets: any,
+	props: Record<string, any>,
+	offset: any = null,
+) {
+	if (Array.from(targets).length === 0) targets = [targets];
+	else targets = Array.from(targets);
+
+	let i = -1;
+	for (const target of targets) {
+		i++;
+
+		const nProps = {
+			...tl._defaults,
+			...props,
+		};
+
+		for (const prop in nProps) {
+			nProps[prop] = callStagger(nProps[prop], i, targets.length);
+		}
+
+		const nOffset = callStagger(offset, i);
+
+		tl._inner.add(target, nProps, nOffset, i);
+	}
+}

package/src/timing/{ticker.js → AnimationFrameTicker.ts}

@@ -1,15 +1,23 @@
-import { newTarget } from '../target/target.js';
+import { newTarget } from '../target/Target';
+import Ticker, { Callback } from './Ticker';
 
 /**
  * The ticker is the main driver for all animations
- * 
+ *
  * it also manages all targets allowing to only call the dom api
  * at the end of every frame
  */
-export default class Ticker {
+export default class AnimationFrameTicker implements Ticker {
+	private _listeners: Set<Callback>;
+	private _targets: GlobalTargets;
+
+	running: boolean;
+
+	private _previousTick: number | null;
+
 	constructor() {
-		this._listeners = new Set;
-		this._targets = new GlobalTargets;
+		this._listeners = new Set();
+		this._targets = new GlobalTargets();
 
 		this.running = false;
 
@@ -18,22 +26,27 @@ export default class Ticker {
 
 	static global() {
 		// allow to define a test ticker
+		// @ts-ignore
 		if (typeof globalThis !== 'undefined' && globalThis.chnobliTicker)
+			// @ts-ignore
 			return globalThis.chnobliTicker;
 
 		if (typeof window === 'undefined')
 			throw new Error('can only be executed in a browser context');
 
+		// @ts-ignore
 		if (typeof window.chnobliTicker === 'undefined')
-			window.chnobliTicker = new Ticker;
+			// @ts-ignore
+			window.chnobliTicker = new Ticker();
+		// @ts-ignore
 		return window.chnobliTicker;
 	}
 
-	registerTarget(target) {
+	registerTarget(target: any) {
 		return this._targets.register(target);
 	}
 
-	unregisterTarget(target) {
+	unregisterTarget(target: any) {
 		return this._targets.unregister(target);
 	}
 
@@ -41,7 +54,7 @@ export default class Ticker {
 		return this._targets.apply();
 	}
 
-	add(fn) {
+	add(fn: Callback): { remove: () => void } {
 		this._listeners.add(fn);
 
 		if (!this.running) {
@@ -52,23 +65,22 @@ export default class Ticker {
 		return {
 			remove: () => {
 				this.remove(fn);
-			}
+			},
 		};
 	}
 
-	remove(fn) {
+	remove(fn: Callback) {
 		this._listeners.delete(fn);
 	}
 
-	_tick(elapsed) {
+	_tick(elapsed: number) {
 		if (this._listeners.size === 0) {
 			this.running = false;
 			this._previousTick = null;
 			return;
 		}
 
-		if (this._previousTick === null)
-			this._previousTick = elapsed;
+		if (this._previousTick === null) this._previousTick = elapsed;
 
 		let change = elapsed - this._previousTick;
 		// lagSmoothing
@@ -83,7 +95,7 @@ export default class Ticker {
 		for (const fn of this._listeners) {
 			fn(change, {
 				// changes,
-				remove: () => this.remove(fn)
+				remove: () => this.remove(fn),
 			});
 		}
 
@@ -112,17 +124,19 @@ export default class Ticker {
 // }
 
 export class GlobalTargets {
+	private _targets: Map<any, { target: any; ref: number }>;
+
 	constructor() {
 		// {target, ref}
-		this._targets = new Map;
+		this._targets = new Map();
 	}
 
-	register(target) {
+	register(target: any) {
 		let storedTarget = this._targets.get(target);
 		if (!storedTarget) {
 			storedTarget = {
 				target: newTarget(target),
-				ref: 0
+				ref: 0,
 			};
 			this._targets.set(target, storedTarget);
 		}
@@ -131,8 +145,10 @@ export class GlobalTargets {
 		return storedTarget.target;
 	}
 
-	unregister(target) {
+	unregister(target: any) {
 		const storedTarget = this._targets.get(target);
+		if (!storedTarget) return;
+
 		storedTarget.ref -= 1;
 	}
 
@@ -141,8 +157,7 @@ export class GlobalTargets {
 			const { target, ref } = storedTarget;
 			target.apply();
 
-			if (ref <= 0)
-				this._targets.delete(target.target);
+			if (ref <= 0) this._targets.delete(target.target);
 		}
 	}
 

package/src/timing/{ease.js → Ease.ts}

@@ -1,5 +1,7 @@
 export default class Ease {
-	constructor(prop) {
+	fn: ((t: number) => number) | null;
+
+	constructor(prop: any) {
 		// parse prop
 		if (prop !== null && typeof prop !== 'function')
 			throw new Error('ease needs to be a function');
@@ -7,10 +9,9 @@ export default class Ease {
 		this.fn = prop;
 	}
 
-	apply(t) {
-		if (this.fn === null)
-			return t;
+	apply(t: number) {
+		if (this.fn === null) return t;
 
 		return this.fn(t);
 	}
-}
+}

package/src/timing/{testticker.js → TestTicker.ts}

@@ -1,22 +1,31 @@
-import { GlobalTargets } from './ticker.js';
+import { GlobalTargets } from './AnimationFrameTicker';
+import Ticker, { Callback } from './Ticker';
+
+export default class TestTicker implements Ticker {
+	private _listeners: Set<Callback>;
+	targets: GlobalTargets;
+
+	running: boolean;
+
+	private _previousTick: number | null;
 
-export default class TestTicker {
 	constructor() {
-		this._listeners = new Set;
-		this.targets = new GlobalTargets;
+		this._listeners = new Set();
+		this.targets = new GlobalTargets();
 
 		this.running = false;
 
 		this._previousTick = null;
 
+		// @ts-ignore
 		globalThis.chnobliTicker = this;
 	}
 
-	registerTarget(target) {
+	registerTarget(target: any) {
 		return this.targets.register(target);
 	}
 
-	unregisterTarget(target) {
+	unregisterTarget(target: any) {
 		return this.targets.unregister(target);
 	}
 
@@ -24,20 +33,19 @@ export default class TestTicker {
 		return this.targets.apply();
 	}
 
-	add(fn) {
+	add(fn: Callback) {
 		this._listeners.add(fn);
 
-		if (!this.running)
-			this.running = true;
+		if (!this.running) this.running = true;
 
 		return {
 			remove: () => {
 				this.remove(fn);
-			}
+			},
 		};
 	}
 
-	remove(fn) {
+	remove(fn: Callback) {
 		this._listeners.delete(fn);
 	}
 
@@ -45,30 +53,25 @@ export default class TestTicker {
 	///
 	/// runs until the ticker ends this allows to run
 	run(max = 3000, step = 1) {
-		if (!this.running)
-			return true;
+		if (!this.running) return true;
 
-		if (this._previousTick === null)
-			this.tick(0);
+		if (this._previousTick === null) this.tick(0);
 
 		let i = 0;
 		const start = this._previousTick ?? 0;
 
 		for (i = 1; i <= max; i += step) {
-			if (!this.tick(start + i))
-				return true;
+			if (!this.tick(start + i)) return true;
 		}
 
 		return false;
 	}
 
 	// elapsed in ms
-	tick(elapsed) {
-		if (!this.running)
-			return false;
+	tick(elapsed: number) {
+		if (!this.running) return false;
 
-		if (this._previousTick === null)
-			this._previousTick = elapsed;
+		if (this._previousTick === null) this._previousTick = elapsed;
 
 		let change = elapsed - this._previousTick;
 		// lagSmoothing
@@ -81,7 +84,7 @@ export default class TestTicker {
 		for (const fn of this._listeners) {
 			fn(change, {
 				// changes,
-				remove: () => this.remove(fn)
+				remove: () => this.remove(fn),
 			});
 		}
 
@@ -95,4 +98,4 @@ export default class TestTicker {
 
 		return true;
 	}
-}
+}

package/src/timing/Ticker.ts

@@ -0,0 +1,11 @@
+import { Target } from '../target/Target';
+
+export type Callback = (change: number, api: { remove: () => void }) => void;
+
+export default interface Ticker {
+	registerTarget(target: any): Target;
+	unregisterTarget(target: any): void;
+	applyTargets(): void;
+	add(fn: Callback): { remove: () => void };
+	remove(fn: Callback): void;
+}