chnobli 0.1.9 → 0.1.11

package/src/tests/usecases.test.ts

@@ -1,8 +1,8 @@
 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 '../utils/utils.js';
+import { timeline } from '../chnobli.js';
+import { fromTo, responsive } from '../utils/utils.js';
 import { el } from '../target/TestDomNode.js';
 
 describe('usecases', () => {
@@ -64,4 +64,42 @@ describe('usecases', () => {
 		expect(ctn.style.maxHeight).toBe(undefined);
 		expect(itm.classList.contains('open')).toBe(false);
 	});
+
+	it('accordion2', () => {
+		const ticker = new TestTicker();
+		const _respEv = new TestResponsiveEvent();
+
+		const ctn = el();
+		ctn.computedStyle.maxHeight = 'none';
+		// @ts-ignore
+		ctn.scrollHeight = '100px';
+
+		const tl = timeline({ reversed: true }).add(ctn, {
+			height: fromTo(
+				0,
+				responsive(el => el.scrollHeight),
+			),
+			duration: 100,
+		});
+
+		const toggle = () => {
+			tl.reverse();
+			tl.play();
+		};
+
+		// on click reverse or not
+		toggle();
+		ticker.run(1);
+		expect(ctn.style.height).toBe('1.000px');
+		ticker.run(49);
+		expect(ctn.style.height).toBe('50.000px');
+		toggle();
+		ticker.run(1);
+		expect(ctn.style.height).toBe('49.000px');
+		ticker.run(29);
+		expect(ctn.style.height).toBe('20.000px');
+		toggle();
+		ticker.run(1);
+		expect(ctn.style.height).toBe('21.000px');
+	});
 });

package/src/tests/values.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import TestTicker from '../timing/TestTicker.js';
-import { animate, timeline } from '../chnobli.js';
-import { responsive, from, fromTo } from '../utils/utils.js';
+import { timeline } from '../chnobli.js';
+import { from, fromTo } from '../utils/utils.js';
 import { el, getRootElement } from '../target/TestDomNode.js';
 
 describe('values', () => {
@@ -12,7 +12,7 @@ describe('values', () => {
 		root.computedStyle.fontSize = '13px';
 
 		const div = el();
-		const tl = timeline()
+		const _tl = timeline()
 			.add(div, {
 				width: '10rem',
 				duration: 5,
@@ -35,7 +35,7 @@ describe('values', () => {
 
 		const div = el();
 		div.computedStyle.width = '10px';
-		const tl = timeline()
+		const _tl = timeline()
 			.add(div, {
 				x: '10%',
 				width: '50%',
@@ -62,7 +62,7 @@ describe('values', () => {
 
 		const div = el();
 		div.computedStyle.padding = '5px';
-		const tl = timeline()
+		const _tl = timeline()
 			.add(div, {
 				padding: '10px 20rem',
 				duration: 10,
@@ -81,7 +81,7 @@ describe('values', () => {
 
 		const div = el();
 		div.computedStyle.display = 'block';
-		const tl = timeline()
+		const _tl = timeline()
 			.add(div, {
 				display: 'none',
 				position: from('absolute'),
@@ -100,7 +100,7 @@ describe('values', () => {
 		expect(div.style.position).toBe(undefined);
 		expect(div.style.visibility).toBe('visible');
 
-		tl.seek(-1);
+		_tl.seek(-1);
 		ticker.run();
 		expect(div.style.display).toBe(undefined);
 		expect(div.style.position).toBe(undefined);
@@ -112,7 +112,7 @@ describe('values', () => {
 		const div = el();
 		div.computedStyle.color = 'rgb(120, 130, 20)';
 
-		const tl = timeline()
+		const _tl = timeline()
 			.add(div, {
 				color: 'black',
 				backgroundColor: 'hsl(10, 80%, 40%)',
@@ -139,7 +139,7 @@ describe('values', () => {
 		div.computedStyle['--color'] = 'rgb(120, 130, 20)';
 		div.computedStyle['--border'] = '20px';
 
-		const tl = timeline()
+		const _tl = timeline()
 			.add(div, {
 				'--color': 'black',
 				'--border': '1px 20px',

package/src/timeline/Timeline.ts

@@ -10,6 +10,7 @@ import Timing, {
 import Ticker from '../timing/Ticker.js';
 import Animation from '../animation/Animation.js';
 import AnimationFrameTicker from '../timing/AnimationFrameTicker.js';
+import { DestroyOptions } from './public.js';
 
 type Entry = {
 	type: 'label' | 'animation' | 'timeline';
@@ -185,7 +186,7 @@ export default class Timeline {
 
 			const pos = this.entries[i - 1 - entry.relativeOffset]?.end ?? 0;
 
-			let start = offset.calculate(pos);
+			const start = offset.calculate(pos);
 			if (start < 0) throw new Error('cannot go in the past start < 0');
 
 			let end = start;
@@ -325,17 +326,17 @@ export default class Timeline {
 		this.ticker.applyTargets();
 	}
 
-	destroy() {
+	destroy(opts: DestroyOptions) {
 		for (const entry of this.entries) {
 			if (entry.type === 'timeline') {
-				entry.value.destroy();
+				entry.value.destroy(opts);
 				continue;
 			}
 
 			if (entry.type !== 'animation') continue;
 
 			const animation = entry.value;
-			animation.destroy();
+			animation.destroy(opts);
 		}
 
 		this.entries = [];

package/src/timeline/public.ts

@@ -38,12 +38,21 @@ export type TimelineProps = {
 	// alternate
 	// reversed
 
+	/**
+	 * When set will keep all values when destroy is called
+	 */
+	keepValues?: boolean;
+
 	// other properties
 	[key: string]: any;
 };
 
 export type Offset = number | string | Stagger<number | string>;
 
+export type DestroyOptions = {
+	keepValues?: boolean;
+};
+
 export default class PublicTimeline {
 	/**
 	 * @ignore
@@ -60,13 +69,14 @@ export default class PublicTimeline {
 	private _triggeredStart: boolean;
 
 	private _state: number;
-	private _renderedOnce: boolean;
 	private _runningTicker: any;
 	private _responsiveBlocks: { responsive: () => void }[];
 	private _responsiveEvent: any;
 	private _smoothSeek: SmoothSeek | null;
 	private _seekTo: number;
 
+	private _destroyOpts: DestroyOptions;
+
 	constructor(props: TimelineProps = {}) {
 		this._defaults = takeProp(props, 'defaults', {});
 		this._responsive = takeProp(props, 'responsive', true);
@@ -81,6 +91,12 @@ export default class PublicTimeline {
 		);
 		this._seekTo = 0;
 
+		this._destroyOpts = {
+			// we set this to undefined so we can have other default values
+			// for example in chnobli-svelte
+			keepValues: takeProp(props, 'keepValues', undefined),
+		};
+
 		this._inner = new Timeline(props);
 
 		// 'start', 'end'
@@ -88,7 +104,6 @@ export default class PublicTimeline {
 		this._triggeredStart = false;
 
 		this._state = STATE_PAUSED;
-		this._renderedOnce = false;
 		this._runningTicker = null;
 		this._responsiveBlocks = [];
 		if (this._responsive) {
@@ -227,7 +242,7 @@ export default class PublicTimeline {
 		this._inner.init();
 
 		if (this._smoothSeek) {
-			this._smoothSeek.update(this._inner.timing.positionLinear(), pos);
+			this._smoothSeek.update(this._inner.timing.positionAbsolute(), pos);
 
 			if (this._state !== STATE_PLAYING) this._state = STATE_SEEK;
 		} else {
@@ -331,9 +346,11 @@ export default class PublicTimeline {
 	/**
 	 * Destroys this timeline and resets all props
 	 */
-	destroy() {
+	destroy(opts: DestroyOptions = {}) {
+		opts.keepValues = opts.keepValues ?? this._destroyOpts.keepValues;
+
 		this._stopTicker();
-		this._inner.destroy();
+		this._inner.destroy(opts);
 		this._events.destroy();
 		this._responsiveEvent?.remove();
 		this._responsiveBlocks = [];
@@ -360,7 +377,7 @@ export default class PublicTimeline {
 		const smoothSeekEnded = () =>
 			!this._smoothSeek || this._smoothSeek.state >= STATE_ENDED;
 
-		this._runningTicker = this._inner.ticker.add(change => {
+		this._runningTicker = this._inner.ticker.add((change, api) => {
 			if (!this._triggeredStart) {
 				// todo check that we are at the start
 				if (this._inner.timing.state <= STATE_BEFORE) {
@@ -385,11 +402,19 @@ export default class PublicTimeline {
 			}
 
 			this._inner.render();
+			const pos = this._inner.timing.position;
+			api.onApplied(() => {
+				this._events.trigger('update', pos);
+			});
 
 			// we rendered once let's stop
 			const renderOnce = this._state === STATE_RENDER_ONCE;
 
-			if (renderOnce || (timingEnded() && smoothSeekEnded())) {
+			if (
+				renderOnce ||
+				(smoothSeekEnded() &&
+					(this._state === STATE_SEEK || timingEnded()))
+			) {
 				this._maybeTriggerEndEvent();
 
 				this._state = STATE_PAUSED;
@@ -413,12 +438,9 @@ export default class PublicTimeline {
 	 * @ignore
 	 */
 	_onResponsive(
-		a: { width: number; height: number },
-		b: { remove: () => void },
+		_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();
 	}
 }

package/src/timing/AnimationFrameTicker.ts

@@ -91,16 +91,21 @@ export default class AnimationFrameTicker implements Ticker {
 		this._previousTick = elapsed;
 
 		// const changes = new PropertyChanges;
+		const onApplied: (() => void)[] = [];
 
 		for (const fn of this._listeners) {
 			fn(change, {
-				// changes,
 				remove: () => this.remove(fn),
+				onApplied: fnOnApplied => onApplied.push(fnOnApplied),
 			});
 		}
 
 		this._targets.apply();
 
+		for (const fn of onApplied) {
+			fn();
+		}
+
 		requestAnimationFrame(a => this._tick(a));
 	}
 }

package/src/timing/TestTicker.ts

@@ -81,15 +81,21 @@ export default class TestTicker implements Ticker {
 		}
 		this._previousTick = elapsed;
 
+		const onApplied: (() => void)[] = [];
+
 		for (const fn of this._listeners) {
 			fn(change, {
-				// changes,
 				remove: () => this.remove(fn),
+				onApplied: fn => onApplied.push(fn),
 			});
 		}
 
 		this.targets.apply();
 
+		for (const fn of onApplied) {
+			fn();
+		}
+
 		if (this._listeners.size === 0) {
 			this.running = false;
 			this._previousTick = null;

package/src/timing/Ticker.ts

@@ -1,6 +1,10 @@
 import { Target } from '../target/Target.js';
 
-export type Callback = (change: number, api: { remove: () => void }) => void;
+export type CallbackApi = {
+	remove: () => void;
+	onApplied: (fn: () => void) => void;
+};
+export type Callback = (change: number, api: CallbackApi) => void;
 
 export default interface Ticker {
 	registerTarget(target: any): Target;

package/src/timing/Timing.ts

@@ -36,67 +36,84 @@ export type TimingProps = {
  * because it is like one frame, so it's an image
  */
 export default class Timing {
-	// removes the relevant properties from the props
-
+	/**
+	 * The duration of a single iteration
+	 */
 	iterDuration: number;
+
+	/**
+	 * The total duration of the timing
+	 */
 	duration: number;
 
 	ease: (t: number) => number;
+	/**
+	 * The number of repeats
+	 *
+	 * -1 is infinite
+	 */
 	repeat: number;
+
+	/**
+	 * If the iteration should alternate
+	 */
 	alternate: boolean;
+
+	/**
+	 * If the iteration should be reversed
+	 */
 	reversed: boolean;
 
+	/**
+	 * The position of the current iteration
+	 *
+	 * will never be outside of the range 0-1 (inclusive)
+	 */
 	position: number;
+	/**
+	 * The state of the timing
+	 */
 	state: number;
 
-	private _progress: number;
-
-	/*
-	seeking
-	if repeat is infinite
-	seek will only control the current iteration
-	if repeat is finite
-	seek will control the entire time
-
+	/**
+	 * Progress is a value which always counts up
+	 * does not take alternate or easing into account
+	 */
+	private progress: number;
 
-	{
-		duration: in ms
-		ease: easeFunction
-		repeat: -1 - x,
-		alternate
-	}
-	*/
 	constructor(props: TimingProps) {
 		// these vars are only readonly
 		// use functions to update them
 
-		this.iterDuration = props.duration;
-		this.duration = props.duration;
-
 		this.ease = props.ease ?? (t => t);
 		this.repeat = props.repeat ?? 0;
 		this.alternate = props.alternate ?? true;
 		this.reversed = props.reversed ?? false;
 
-		this.position = this.duration > 0 ? 0 : 1;
-		this.state = STATE_BEFORE;
-
-		// progress does not take alternation into account and has no easing
-		// this always increments up
-		this._progress = 0;
+		this.iterDuration = 0;
+		this.duration = 0;
+		this.setDuration(props.duration);
 
-		// scrub
+		this.position = 0;
+		this.state = STATE_BEFORE;
+		this.progress = 0;
+		this.seek(-1);
 	}
 
 	setDuration(iterDuration: number) {
 		this.iterDuration = iterDuration;
 
 		this.duration = this.iterDuration;
-		if (this.repeat > -1) {
+		if (this.isFinite()) {
 			this.duration = (this.repeat + 1) * this.iterDuration;
 		}
 	}
 
+	/**
+	 * Returns the current position in milliseconds
+	 *
+	 * This is equivalent to position * iteration duration
+	 */
 	positionMs() {
 		// todo should this not return pos * duration?
 		return this.position * this.iterDuration;
@@ -110,13 +127,19 @@ export default class Timing {
 	 * required
 	 */
 	positionMsUnbounded() {
-		const outOfBounds =
-			this.state <= STATE_BEFORE || this.state >= STATE_AFTER;
+		let reversed = this.reversed;
+
+		if (this._shouldInvert()) reversed = !reversed;
 
-		if (!outOfBounds) return this.position * this.iterDuration;
+		let pos = this.position;
+
+		if (this.state <= STATE_BEFORE) {
+			pos = reversed ? 2 : -1;
+		} else if (this.state >= STATE_AFTER) {
+			pos = reversed ? -1 : 2;
+		}
 
-		if (this.position === 0) return -1;
-		return this.position * this.iterDuration + 1;
+		return pos * this.iterDuration;
 	}
 
 	isFinite() {
@@ -131,56 +154,60 @@ export default class Timing {
 			return;
 		}
 
-		this._updateProgress(this._progress + change / this.iterDuration);
+		if (this.isFinite()) {
+			this._updateProgress(
+				this.positionAbsolute() + change / this.iterDuration,
+			);
+		} else {
+			// to make sure we don't mess up the alternate
+			this._updateProgress(
+				Math.max(0, this.progress) + change / this.iterDuration,
+			);
+		}
 	}
 
 	seekMs(ms: number) {
-		if (this.iterDuration <= 0) {
-			this._updateProgress(Math.sign(ms));
-			return;
-		}
-
-		this._updateProgress(ms / this.iterDuration);
-
-		// return this.seek(this.normalizeMs(ms));
+		return this.seek(this.normalizeMs(ms));
 	}
 
+	/**
+	 * Returns the position of time (ms) position
+	 */
 	normalizeMs(ms: number) {
 		if (this.iterDuration <= 0) {
 			return Math.sign(ms);
 		}
 
-		const pos = ms / this.iterDuration;
-
-		if (this.isFinite()) {
-			return pos / (this.repeat + 1);
-		}
-
-		return pos;
+		return ms / this.duration;
 	}
 
-	// todo how to call this
-	positionLinear(): number {
+	// Returns the position without easing or reversing
+	//
+	// Returns 0..=(repeat + 1)
+	positionAbsolute(): number {
 		if (this.isFinite()) {
-			return this._progress / (this.repeat + 1);
+			return Math.min(this.repeat + 1, Math.max(0, this.progress));
 		}
 
-		return this._progress;
+		// the iterations should be inclusive
+		const prog = Math.max(0, this.progress) % 1;
+		if (prog === 0 && this.progress > 0) return 1;
+		return prog;
 	}
 
 	// should be between 0-1 if outside might change the state
 	seek(pos: number) {
-		if (this.repeat <= 0) {
-			this._updateProgress(pos);
-		} else {
-			// finite
+		if (this.isFinite()) {
 			this._updateProgress(pos * (this.repeat + 1));
+		} else {
+			// to make sure we don't mess up the alternate
+			this._updateProgress(Math.floor(this.progress) + pos);
 		}
 	}
 
 	savePosition(): Position {
 		return {
-			progress: this._progress,
+			progress: this.progress,
 		};
 	}
 
@@ -188,48 +215,46 @@ export default class Timing {
 		this._updateProgress(pos.progress);
 	}
 
+	/**
+	 * Sets the alternate
+	 */
 	setAlternate(alternate: boolean) {
 		if (this.alternate == alternate) return;
 
-		// make sure the reversed is updated according to the current inversion
-		this.reversed = alternate == this._shouldInvert();
+		this.reversed = !this.reversed;
 		this.alternate = alternate;
 	}
 
 	reverse() {
 		this.reversed = !this.reversed;
 
-		const wrapAround = (p: number) => {
-			if (this.repeat > -1) return p % (this.repeat + 1);
-			return p;
-		};
-
-		let p;
-		if (this.state <= STATE_BEFORE) {
-			p = 2;
-		} else if (this.state >= STATE_AFTER) {
-			p = -1;
-			// check if the values should be reversed
-		} else if (this.reversed != this._shouldInvert()) {
-			let decimal = 1 - (this._progress % 1);
-			p = wrapAround(Math.floor(this._progress) + decimal);
+		if (this.isFinite()) {
+			this._updateProgress(this.repeat + 1 - this.progress);
 		} else {
-			p = wrapAround(this._progress);
+			const fract = this.progress % 1;
+			this._updateProgress(Math.floor(this.progress) + 1 - fract);
 		}
-
-		this._updateProgress(p);
 	}
 
 	_shouldInvert() {
-		return this.alternate && Math.floor(this._progress) % 2 === 1;
+		return (
+			this.alternate &&
+			Math.floor(this.progress) % 2 === 1 &&
+			this.progress % 1 !== 0
+		);
 	}
 
+	/**
+	 * Updates the progress and the state
+	 *
+	 * newProgress should follow the same rules as _progress
+	 */
 	_updateProgress(newProgress: number) {
 		// if duration is zero the position is always 1
 		// and the state is either BEFORE or AFTER
 		if (this.iterDuration <= 0) {
 			newProgress = Math.sign(newProgress);
-			this._progress = newProgress;
+			this.progress = newProgress;
 			this.position = 1;
 
 			if (newProgress < 0) this.state = STATE_BEFORE;
@@ -238,15 +263,19 @@ export default class Timing {
 			return;
 		}
 
-		this._progress = newProgress;
+		this.progress = newProgress;
 
+		// update state
+		//
+		// is this not wrong if we are in reversed?
+		//
 		// since infinite repeat can never end let's ignore it
-		if (this.repeat > -1) {
+		if (this.isFinite()) {
 			const end = this.repeat + 1;
-			if (this._progress > end) {
-				this._progress = end;
+			if (this.progress > end) {
+				this.progress = end + 1;
 				this.state = STATE_AFTER;
-			} else if (this._progress === end) {
+			} else if (this.progress === end) {
 				this.state = STATE_ENDED;
 			} else {
 				this.state = STATE_RUNNING;
@@ -256,20 +285,27 @@ export default class Timing {
 		}
 
 		// override state if not running
-		if (this._progress < 0) {
-			this._progress = 0;
+		if (this.progress < 0) {
+			this.progress = -1;
 			this.state = STATE_BEFORE;
-		} else if (this._progress === 0) {
+		} else if (this.progress === 0) {
 			this.state = STATE_START;
 		}
 
 		// now calculate the position
-		this.position = this._progress % 1;
+		this.position = this.positionAbsolute() % 1;
+
+		// the iterations should be inclusive
+		if (this.position === 0 && this.progress > 0) {
+			this.position = 1;
+		}
+
+		// alternate
+		if (this._shouldInvert()) this.position = 1 - this.position;
 
 		// calc if we are in a reversed iteration or not
 		// and we are we should invert the position
-		if (this.reversed != this._shouldInvert())
-			this.position = 1 - this.position;
+		if (this.reversed) this.position = 1 - this.position;
 
 		this.position = this.ease(this.position);
 	}