chnobli 0.1.10 → 0.1.12

package/src/tests/scroll.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import ScrollTimeline from '../scroll/Scroll.js';
+
+function scrollWith(offsets: [number, number, number][]) {
+	const s = new ScrollTimeline();
+	s.offsets = offsets.map(([y, view, position]) => ({ y, view, position }));
+	return (y: number) => (s as any).calcPosition({ y, height: 100 });
+}
+
+describe('scroll', () => {
+	it('position', () => {
+		// from 0 to 900, like a page that can't scroll past the end
+		const pos = scrollWith([
+			[0, 0, 0],
+			[900, 0, 1],
+		]);
+
+		expect(pos(-1)).toBe(-1);
+		expect(pos(0)).toBe(0);
+		expect(pos(450)).toBe(0.5);
+		expect(pos(900)).toBe(1);
+		expect(pos(901)).toBe(2);
+	});
+
+	it('position with three offsets', () => {
+		const pos = scrollWith([
+			[0, 0, 0],
+			[200, 1, 0.5],
+			[500, 0, 1],
+		]);
+
+		expect(pos(100)).toBe(0.5);
+		expect(pos(300)).toBe(0.75);
+		expect(pos(500)).toBe(1);
+	});
+});

package/src/tests/timeline.test.ts

@@ -254,7 +254,7 @@ describe('timeline', () => {
 		const ticker = new TestTicker();
 
 		const target = el();
-		const tl = timeline()
+		const _tl = timeline()
 			.add(target, {
 				width: 50,
 				duration: 10,

package/src/tests/timing.test.ts

@@ -150,6 +150,7 @@ describe('timing', () => {
 		timing.reverse();
 		expect(timing.state).toBe(STATE_BEFORE);
 		expect(timing.position).toBe(0);
+		expect(timing.positionAbsolute()).toBe(0);
 
 		// >
 		timing.advance(25);
@@ -270,4 +271,35 @@ describe('timing', () => {
 		timing.advance(50);
 		expect(timing.position).toBe(0.25);
 	});
+
+	it('forward and back', () => {
+		const timing = new Timing({
+			duration: 100,
+			reversed: true,
+		});
+		// I wan't the start value to be 0
+		timing.seek(1);
+		expect(timing.reversed).toBe(true);
+		expect(timing.state).toBe(STATE_ENDED);
+		expect(timing.position).toBe(0);
+
+		timing.reverse();
+		expect(timing.state).toBe(STATE_START);
+		timing.advance(25);
+		expect(timing.reversed).toBe(false);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		timing.reverse();
+		timing.advance(20);
+		expect(timing.reversed).toBe(true);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position.toFixed(2)).toBe('0.05');
+
+		timing.reverse();
+		timing.advance(20);
+		expect(timing.reversed).toBe(false);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position.toFixed(2)).toBe('0.25');
+	});
 });

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;