chnobli 0.1.10 → 0.1.12

package/src/scroll/Scroll.ts

@@ -1,7 +1,18 @@
-import PublicTimeline, { Offset } from '../timeline/public.js';
+import ResponsiveEvent from '../responsive/ResponsiveEvent.js';
+import PublicTimeline from '../timeline/public.js';
+import Events from '../utils/Events.js';
 import { pageOffset } from '../utils/utils.js';
 import ScrollEvent from './ScrollEvent.js';
 
+export type DestroyOptions = {
+	/// defaults to true
+	timelines?: boolean;
+};
+
+const DEF_DESTROY_OPTS: DestroyOptions = {
+	timelines: true,
+};
+
 /*
 run timelines based on the scroll position
 
@@ -54,11 +65,13 @@ export type ScrollTrigger =
 
 export type OffsetValue = 'top' | 'center' | 'bottom' | number;
 
+export type State = 'before' | 'in' | 'after';
+
 export type ParsedScrollTrigger = {
 	target: HTMLElement;
 	offset: number;
 	view: number;
-	position: Position;
+	position: Position | undefined;
 };
 
 export type ScrollOffset = {
@@ -72,35 +85,45 @@ export type ScrollOffset = {
 
 export type Position = number | string;
 
+type LastSeek = {
+	pos: number;
+	state: State;
+};
+
 export default class ScrollTimeline {
 	private _initialized: boolean;
-	private _globalEvent: ScrollEvent;
-	private _rmEvent: () => void;
+	private _globalEvent: ScrollEvent | null;
+	private _scrollEvent: () => void;
+	private _responsiveEvent: any;
 
 	private _triggers: ParsedScrollTrigger[];
+	private _events: Events;
+	private lastEvPos: number;
 	private timelines: PublicTimeline[];
+	private state: State;
+	private lastSeek: LastSeek | undefined;
 	offsets: ScrollOffset[];
 
+	private debugMarkers: HTMLElement[];
+	private debugPrefix?: string;
+
 	constructor() {
 		this._initialized = false;
 		this._globalEvent = ScrollEvent.global();
-		this._rmEvent = this._globalEvent.add(y => this._onScroll(y)).remove;
+		this._scrollEvent =
+			this._globalEvent?.add(y => this._onScroll(y)).remove ?? (() => {});
+		this._responsiveEvent = ResponsiveEvent.global()?.add((a, b) => {
+			this._onResponsive(a, b);
+		});
 
 		this._triggers = [];
+		this._events = new Events();
+		this.lastEvPos = NaN;
 		this.timelines = [];
+		this.state = 'in';
 		this.offsets = [];
 
-		// this.timeline = timeline;
-		// this._triggers = triggers.map(parseTrigger);
-		// this.offsets = this._triggers.map(t => {
-		// 	return {
-		// 		y: 0,
-		// 		view: t.view,
-		// 	};
-		// });
-
-		// if (this.offsets.length < 2)
-		// 	throw new Error('scroll timeline needs at least two triggers');
+		this.debugMarkers = [];
 	}
 
 	/**
@@ -120,21 +143,38 @@ export default class ScrollTimeline {
 		this.timelines.push(timeline);
 	}
 
-	init() {
+	on(event: string, fn: (...args: any[]) => void): () => void {
+		return this._events.add(event, fn);
+	}
+
+	/// Returns true if the init function was executed
+	init(): boolean {
+		if (this._initialized) return false;
+
+		this._initialized = true;
+
 		// todo we need to calculate the position for each timeline
 		//
 		// calculate the positions and offsets
 		// if we are missing one extend them
 
-		let previousY = -1;
-
-		this.offsets = this._triggers.map(t => {
-			const offset = pageOffset(t.target);
+		if (this._triggers.length < 1)
+			throw new Error('scroll timeline needs at least one trigger');
 
-			const y = offset.top + offset.height * t.offset;
+		if (this._triggers.length === 1) {
+			this._triggers.push({
+				target: this._triggers[0].target,
+				offset: 1,
+				view: 1,
+				position: 1,
+			});
+		}
 
-			if (y < previousY) throw new Error('offsets are not in order');
+		const positionStep = 1 / (this._triggers.length - 1);
 
+		// first calculate position and view
+		let prevPos = 0;
+		this.offsets = this._triggers.map((t, i) => {
 			let position;
 			if (typeof t.position === 'string') {
 				if (this.timelines.length !== 1)
@@ -143,59 +183,172 @@ export default class ScrollTimeline {
 					);
 
 				position = this.timelines[0].labelPosition(t.position);
-			} else if (t.position >= 0 || t.position <= 1) {
+			} else if (typeof t.position === 'number') {
 				position = t.position;
 			} else {
-				throw new Error('position should be between 0 and 1');
+				position = i * positionStep;
 			}
 
+			if (position < prevPos)
+				throw new Error('positions are not in order');
+			prevPos = position;
+
 			return {
-				y,
+				y: 0,
 				view: t.view,
 				position,
 			};
 		});
 
-		if (this.offsets.length < 1)
-			throw new Error('scroll timeline needs at least one trigger');
+		this.initY();
 
-		if (this.offsets.length === 1) {
-			this.offsets.push({
-				y:
-					this.offsets[0].y +
-					pageOffset(this._triggers[0].target).height,
-				view: 1,
-				position: 1,
-			});
+		return true;
+	}
+
+	private initY() {
+		let previousY = -1;
+		this.offsets.forEach((offset, i) => {
+			const t = this._triggers[i];
+
+			const pOffset = pageOffset(t.target);
+			const y = pOffset.top + pOffset.height * t.offset;
+
+			if (y < previousY) throw new Error('offsets are not in order');
+			previousY = y;
+
+			offset.y = y;
+		});
+	}
+
+	update() {
+		// execute initY to check if elements have moved
+		if (!this.init()) this.initY();
+
+		// todo this position should come from the GlobalEvent
+		this._onScroll({
+			y: window.scrollY,
+			height: window.innerHeight,
+		});
+	}
+
+	destroy(opts: DestroyOptions = {}) {
+		opts = { ...DEF_DESTROY_OPTS, ...opts };
+
+		this._scrollEvent();
+		this._events.destroy();
+		this._responsiveEvent?.remove();
+
+		if (opts.timelines) {
+			for (const timeline of this.timelines) {
+				timeline.destroy();
+			}
+		}
+
+		for (const marker of this.debugMarkers) {
+			marker.remove();
 		}
+		this.debugMarkers = [];
+	}
+
+	debug(prefix?: string) {
+		this.init();
+
+		this.debugPrefix = prefix;
+
+		const height = window.innerHeight;
+
+		this.offsets.forEach((offset, i) => {
+			const y = offset.y - height * offset.view;
+
+			const marker = document.createElement('span');
+			marker.textContent =
+				(prefix ? prefix + ' ' : '') + i + ': ' + offset.position;
+			marker.style.position = 'absolute';
+			marker.style.display = 'block';
+			marker.style.right = '0';
+			marker.style.top = y + 'px';
+			marker.style.minWidth = '50px';
+			marker.style.height = '2px';
+			marker.style.paddingRight = '10px';
+			marker.style.backgroundColor = 'red';
+			marker.style.zIndex = '100000';
+
+			document.body.appendChild(marker);
+			this.debugMarkers.push(marker);
+		});
 	}
 
 	private _onScroll({ y, height }: { y: number; height: number }) {
-		if (!this._initialized) {
-			this.init();
-			this._initialized = true;
+		this.init();
+
+		const pos = this.calcPosition({ y, height });
+		const clampPos = Math.min(1, Math.max(0, pos));
+		const state = pos < 0 ? 'before' : pos > 1 ? 'after' : 'in';
+
+		// we need to trigger once
+		// if the pos is not the same and but pos can have 3 states
+		// under (<0), in (0-1) or over (>1)
+		// each state should be triggered once
+		if (this.lastSeek?.pos === clampPos && this.lastSeek?.state === state) {
+			return;
 		}
 
+		this.lastSeek = { pos: clampPos, state };
+
+		this._events.trigger('update', clampPos, state);
+
+		for (const timeline of this.timelines) {
+			timeline.seek(pos);
+		}
+	}
+
+	/**
+	 * @ignore
+	 */
+	private _onResponsive(
+		_a: { width: number; height: number },
+		_b: { remove: () => void },
+	) {
+		this.update();
+
+		// reposition debug Markers
+		if (this.debugMarkers.length) {
+			for (const marker of this.debugMarkers) {
+				marker.remove();
+			}
+
+			this.debug(this.debugPrefix);
+		}
+	}
+
+	private calcPosition({ y, height }: { y: number; height: number }): number {
+		// check if it's outside of the bounds
+		const first = this.offsets[0];
+		if (y < first.y - height * first.view) return -1;
+
+		const last = this.offsets[this.offsets.length - 1];
+		if (y > last.y - height * last.view) return 2;
+
 		// find the matching offset
 		// rolling window
 		for (let i = 1; i < this.offsets.length; i++) {
 			const start = this.offsets[i - 1];
 			const end = this.offsets[i];
 
-			const startY = start.y + height * start.view;
-			const endY = end.y + height * end.view;
-
-			const dif = endY - startY;
-			const x = 1 - (endY - y) / dif;
+			const startY = start.y - height * start.view;
+			const endY = end.y - height * end.view;
 
-			for (const timeline of this.timelines) {
-				// calc pos range
-				const pos =
-					start.position + (end.position - start.position) * x;
+			// the end is included, at the bottom of the page y can't get
+			// past the last offset
+			if (y >= startY && y <= endY) {
+				const dif = endY - startY;
+				const x = dif === 0 ? 1 : 1 - (endY - y) / dif;
 
-				timeline.seek(pos);
+				return start.position + (end.position - start.position) * x;
 			}
 		}
+
+		return -1;
 	}
 }
 
@@ -239,7 +392,7 @@ function parseTrigger(
 		target: element,
 		offset: parseOffset(offset),
 		view: parseOffset(view),
-		position: position ?? (i == 0 ? 0 : 1),
+		position,
 	};
 }
 
@@ -261,7 +414,7 @@ function parseOffset(val: OffsetValue): number {
 		throw new Error('unknown view value ' + val);
 	}
 
-	if (typeof val !== 'number' || val < 0 || val > 1) {
+	if (typeof val !== 'number') {
 		throw new Error(
 			'view expecting to be a top/center/bottom or a percent value',
 		);

package/src/scroll/ScrollEvent.ts

@@ -10,6 +10,7 @@ export default class ScrollEvent {
 		this._listeners = new Set();
 
 		window.addEventListener('scroll', e => this._onScroll(e));
+		window.addEventListener('resize', e => this._onScroll(e));
 	}
 
 	static global() {

package/src/scroll/index.ts

@@ -1,5 +1,8 @@
+import type { Position, ScrollTrigger } from './Scroll.js';
 import Scroll from './public.js';
 
+export { Scroll, ScrollTrigger, Position };
+
 /**
  * Create a scroll animation
  */

package/src/scroll/public.ts

@@ -1,6 +1,9 @@
 import { Timeline } from '../chnobli.js';
-// import Scroll from './Scroll.js';
-import ScrollTimeline, { Position, ScrollTrigger } from './Scroll.js';
+import ScrollTimeline, {
+	DestroyOptions,
+	Position,
+	ScrollTrigger,
+} from './Scroll.js';
 
 export default class Scroll {
 	private _inner: ScrollTimeline;
@@ -28,4 +31,34 @@ export default class Scroll {
 
 		return this;
 	}
+
+	/**
+	 * Listen on events
+	 *
+	 * returns a function to remove the event listener
+	 *
+	 * ## Events
+	 *
+	 * ### Update
+	 * The scroll position has been updated passes in a number between 0 and 1
+	 *
+	 */
+	on(event: string, fn: (...args: any[]) => void): () => void {
+		return this._inner.on(event, fn);
+	}
+
+	update() {
+		this._inner.update();
+	}
+
+	/**
+	 * Destroy the scroll
+	 */
+	destroy(opts: DestroyOptions = {}) {
+		this._inner.destroy(opts);
+	}
+
+	debug(prefix?: string) {
+		this._inner.debug(prefix);
+	}
 }

package/src/target/DomTarget.ts

@@ -84,7 +84,7 @@ export default class DomTarget implements Target {
 			return;
 		}
 
-		let vals = this.transformValues.get(fn);
+		const vals = this.transformValues.get(fn);
 		if (!vals) return;
 
 		vals[idx] = null;

package/src/target/ObjectTarget.ts

@@ -9,6 +9,7 @@ export default class ObjectTarget implements Target {
 
 	// private transformValues: Map<string, (Value | null)[]>;
 	private styleValues: Map<string, StyleValue | undefined>;
+	private firstValues: Map<string, StyleValue | undefined>;
 	// private values: Map<string, Value>;
 
 	/**
@@ -20,6 +21,7 @@ export default class ObjectTarget implements Target {
 		this.target = target;
 
 		this.styleValues = new Map();
+		this.firstValues = new Map();
 		// this.values = new Map();
 	}
 
@@ -31,30 +33,30 @@ export default class ObjectTarget implements Target {
 		return 'object';
 	}
 
-	getValue(name: string): Value | null {
+	getValue(_name: string): Value | null {
 		// return this.values.get(name) ?? null;
 		throw new Error('not supported');
 	}
 
-	setValue(name: string, value: Value) {
+	setValue(_name: string, _value: Value) {
 		// this.values.set(name, value);
 		throw new Error('not supported');
 	}
 
-	removeValue(name: string) {
+	removeValue(_name: string) {
 		// this.values.delete(name);
 		throw new Error('not supported');
 	}
 
-	getTransformValue(name: string): Value | null {
+	getTransformValue(_name: string): Value | null {
 		throw new Error('not supported');
 	}
 
-	setTransformValue(name: string, value: Value) {
+	setTransformValue(_name: string, _value: Value) {
 		throw new Error('not supported');
 	}
 
-	removeTransformValue(name: string) {
+	removeTransformValue(_name: string) {
 		throw new Error('not supported');
 	}
 
@@ -71,6 +73,7 @@ export default class ObjectTarget implements Target {
 		try {
 			const value = StyleValue.parse(styleV);
 			this.styleValues.set(name, value);
+			this.firstValues.set(name, value);
 
 			return value;
 		} catch (e) {
@@ -87,19 +90,19 @@ export default class ObjectTarget implements Target {
 		this.styleValues.set(name, undefined);
 	}
 
-	hasClass(name: string): boolean {
+	hasClass(_name: string): boolean {
 		throw new Error('not supported');
 	}
 
-	addClass(name: string): void {
+	addClass(_name: string): void {
 		throw new Error('not supported');
 	}
 
-	removeClass(name: string): void {
+	removeClass(_name: string): void {
 		throw new Error('not supported');
 	}
 
-	unifyValues(name: string, a: Value, b: Value): [Value, Value] {
+	unifyValues(_name: string, a: Value, b: Value): [Value, Value] {
 		if (a.unit === b.unit) return [a, b];
 
 		if (!a.unit && b.unit) a.unit = b.unit;
@@ -113,9 +116,12 @@ export default class ObjectTarget implements Target {
 		// style
 		for (const [k, v] of this.styleValues.entries()) {
 			if (v === undefined) {
-				console.log('delete', k);
-				delete this.target[k];
-				this.styleValues.delete(k);
+				const first = this.firstValues.get(k);
+				if (typeof first !== 'undefined') {
+					this.target[k] = first.toMixed();
+				} else {
+					delete this.target[k];
+				}
 			} else {
 				this.target[k] = v.toMixed();
 			}

package/src/target/TestDomNode.ts

@@ -45,11 +45,11 @@ export default class TestDomNode {
 
 	__simulatedDom__() {}
 
-	__getComputedStyleFn__() {
+	__getComputedStyleFn__(): typeof TestDomNode.getComputedStyle {
 		return TestDomNode.getComputedStyle;
 	}
 
-	__getRootElementFn__() {
+	__getRootElementFn__(): typeof getRootElement {
 		return getRootElement;
 	}
 }
@@ -58,7 +58,7 @@ export function el() {
 	return new TestDomNode();
 }
 
-export function getRootElement() {
+export function getRootElement(): TestDomNode {
 	if (!ROOT_ELEMENT) ROOT_ELEMENT = el();
 	return ROOT_ELEMENT;
 }

package/src/tests/properties.test.ts

@@ -1,7 +1,7 @@
 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 { timeline } from '../chnobli.js';
 import { responsive, curve, fromTo } from '../utils/utils.js';
 import { el } from '../target/TestDomNode.js';
 import { timeout } from 'fire/utils';
@@ -60,7 +60,7 @@ describe('properties', () => {
 		}
 
 		let resolveCleanupProm: any;
-		let cleanupProm = new Promise(
+		const cleanupProm = new Promise(
 			resolve => (resolveCleanupProm = resolve),
 		);
 		const cleanup = new FinalizationRegistry(key => {
@@ -79,6 +79,47 @@ describe('properties', () => {
 		expect(res).toBe('div');
 	});
 
+	it('keep values', () => {
+		const ticker = new TestTicker();
+
+		const div = el();
+		const tl = timeline()
+			.add(div, {
+				x: 100,
+				duration: 10,
+			})
+			.play();
+
+		ticker.run(5);
+		expect(div.style.transform).toBe(
+			'translate3d(50.000px,0.000px,0.000px)',
+		);
+
+		tl.destroy({ keepValues: true });
+		expect(div.style.transform).toBe(
+			'translate3d(50.000px,0.000px,0.000px)',
+		);
+
+		const tl2 = timeline()
+			.add(div, {
+				x: 100,
+				duration: 10,
+			})
+			.play();
+		expect(div.style.transform).toBe(
+			'translate3d(50.000px,0.000px,0.000px)',
+		);
+
+		ticker.run();
+		expect(div.style.transform).toBe(
+			'translate3d(100.000px,0.000px,0.000px)',
+		);
+		tl2.destroy({ keepValues: true });
+		expect(div.style.transform).toBe(
+			'translate3d(100.000px,0.000px,0.000px)',
+		);
+	});
+
 	it('update timeline', () => {
 		const ticker = new TestTicker();
 		const respEv = new TestResponsiveEvent();
@@ -206,7 +247,7 @@ describe('properties', () => {
 		tl.reverse();
 		tl.play();
 		ticker.run();
-		expect(obj.x).toBe(undefined);
+		expect(obj.x).toBe(0);
 		expect(obj.width).toBe(undefined);
 	});
 
@@ -230,4 +271,46 @@ describe('properties', () => {
 		ticker.run();
 		expect(div.style.width).toBe(undefined);
 	});
+
+	// fails until #7 is fixed
+	it.fails('restore before', () => {
+		const ticker = new TestTicker();
+
+		const div = el();
+		const tl = timeline().add(div, {
+			x: 100,
+			duration: 10,
+		});
+
+		tl.seek(0.95);
+
+		ticker.run();
+		expect(div.style.transform).toBe(
+			'translate3d(95.000px,0.000px,0.000px)',
+		);
+
+		const tl2 = timeline().add(div, {
+			x: 100,
+			duration: 10,
+		});
+		tl2._inner.init();
+
+		ticker.run();
+		expect(div.style.transform).toBe(
+			'translate3d(95.000px,0.000px,0.000px)',
+		);
+
+		timeline()
+			.add(
+				{ opacity: 0 },
+				{
+					opacity: 1,
+				},
+			)
+			.play();
+		ticker.run();
+		expect(div.style.transform).toBe(
+			'translate3d(95.000px,0.000px,0.000px)',
+		);
+	});
 });