chnobli 0.1.7 → 0.1.9

package/src/scroll/Scroll.ts

@@ -1,9 +1,29 @@
-import PublicTimeline from '../timeline/public';
-import { takeProp } from '../utils/internal';
-import { pageOffset } from '../utils/utils';
-import ScrollEvent from './ScrollEvent';
+import PublicTimeline, { Offset } from '../timeline/public.js';
+import { pageOffset } from '../utils/utils.js';
+import ScrollEvent from './ScrollEvent.js';
 
 /*
+run timelines based on the scroll position
+
+scroll allows to specify a start and end trigger
+which then makes sure the timeline is always in sync with
+the scroll position
+
+{
+	start: myDiv,
+	// when the top of myDiv is at the top of the viewport
+	end: {
+		target: myDiv,
+		offset: 'bottom',
+		view: 'bottom'
+	}
+	// when the bottom of myDiv is at the bottom of the viewport
+}
+
+
+
+
+
 run animation when in view (start stop resume when different events happen)
 
 
@@ -24,57 +44,76 @@ scroll pin (once in trigger zone, elements keeps it position relative to start o
 parallax
 */
 
-type StartEndOffset = {
+export type ScrollTrigger =
+	| {
+			target: HTMLElement;
+			offset?: OffsetValue;
+			view?: OffsetValue;
+	  }
+	| HTMLElement;
+
+export type OffsetValue = 'top' | 'center' | 'bottom' | number;
+
+export type ParsedScrollTrigger = {
 	target: HTMLElement;
 	offset: number;
-};
-
-export type Start = {
-	y: number;
 	view: number;
+	position: Position;
 };
 
-export type End = {
+export type ScrollOffset = {
+	// the offset in pixels
 	y: number;
+	// the offset in percentage (0-1)
 	view: number;
+	// position
+	position: number;
 };
 
-export default class Scroll {
-	private _start: StartEndOffset;
-	private _end: StartEndOffset | null;
-	private _globalEvent: ScrollEvent;
+export type Position = number | string;
 
-	start: Start;
-	end: End;
+export default class ScrollTimeline {
+	private _initialized: boolean;
+	private _globalEvent: ScrollEvent;
+	private _rmEvent: () => void;
 
+	private _triggers: ParsedScrollTrigger[];
 	private timelines: PublicTimeline[];
-	private _rmEvent: () => void;
-	private _initialized: boolean;
+	offsets: ScrollOffset[];
 
-	constructor(props = {}) {
-		// { target, offset }
-		this._start = parseStart(takeProp(props, 'start', null));
-		// { target, offset }
-		this._end = parseEnd(takeProp(props, 'end', null));
+	constructor() {
+		this._initialized = false;
 		this._globalEvent = ScrollEvent.global();
+		this._rmEvent = this._globalEvent.add(y => this._onScroll(y)).remove;
 
-		this.start = {
-			// px
-			y: 0,
-			// percentage
-			view: parseOffset(takeProp(props, 'startView', 'top')),
-		};
-		this.end = {
-			// px
-			y: 0,
-			// percentage
-			view: parseOffset(takeProp(props, 'endView', 'bottom')),
-		};
-
+		this._triggers = [];
 		this.timelines = [];
+		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._rmEvent = this._globalEvent.add(y => this._onScroll(y)).remove;
-		this._initialized = false;
+	/**
+	 * Add a trigger to the timeline
+	 *
+	 * Providing an offset at which point the trigger should end
+	 *
+	 * If it is the first trigger it is not allowed to be set?
+	 */
+	add(trigger: ScrollTrigger, position?: Position) {
+		this._triggers.push(
+			parseTrigger(trigger, position, this._triggers.length),
+		);
 	}
 
 	addTimeline(timeline: PublicTimeline) {
@@ -82,77 +121,113 @@ export default class Scroll {
 	}
 
 	init() {
-		const startOffset = pageOffset(this._start.target);
-		this.start.y =
-			startOffset.top + startOffset.height * this._start.offset;
-
-		if (this._end) {
-			const offset = pageOffset(this._end.target);
-			this.end.y = offset.top + offset.height * this._end.offset;
-		} else {
-			this.end.y = this.start.y + pageOffset(this._start.target).height;
+		// 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);
+
+			const y = offset.top + offset.height * t.offset;
+
+			if (y < previousY) throw new Error('offsets are not in order');
+
+			let position;
+			if (typeof t.position === 'string') {
+				if (this.timelines.length !== 1)
+					throw new Error(
+						'labels can only be used with one timeline',
+					);
+
+				position = this.timelines[0].labelPosition(t.position);
+			} else if (t.position >= 0 || t.position <= 1) {
+				position = t.position;
+			} else {
+				throw new Error('position should be between 0 and 1');
+			}
+
+			return {
+				y,
+				view: t.view,
+				position,
+			};
+		});
+
+		if (this.offsets.length < 1)
+			throw new Error('scroll timeline needs at least one trigger');
+
+		if (this.offsets.length === 1) {
+			this.offsets.push({
+				y:
+					this.offsets[0].y +
+					pageOffset(this._triggers[0].target).height,
+				view: 1,
+				position: 1,
+			});
 		}
 	}
 
-	_onScroll({ y, height }: { y: number; height: number }) {
+	private _onScroll({ y, height }: { y: number; height: number }) {
 		if (!this._initialized) {
 			this.init();
 			this._initialized = true;
 		}
 
-		const start = this.start.y + height * this.start.view;
-		const end = this.end.y + height * this.end.view;
+		// 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 dif = end - start;
-		const x = 1 - (end - y) / dif;
+			const startY = start.y + height * start.view;
+			const endY = end.y + height * end.view;
 
-		for (const timeline of this.timelines) {
-			timeline.seek(x);
-		}
-	}
-}
+			const dif = endY - startY;
+			const x = 1 - (endY - y) / dif;
 
-function parseStart(val: any): StartEndOffset {
-	// might be an object { target, offset }
-	if (!val) {
-		throw new Error(
-			'unknown start property use an html element or an object',
-		);
-	}
-
-	let element = null;
-	let offset = 'top';
+			for (const timeline of this.timelines) {
+				// calc pos range
+				const pos =
+					start.position + (end.position - start.position) * x;
 
-	if (typeof val === 'object') {
-		if (val instanceof HTMLElement) element = val;
-		else if ('target' in val) {
-			element = val.target;
-			if (typeof val.offset !== 'undefined') offset = val.offset;
-		} else {
-			throw new Error('start unknown ' + val);
+				timeline.seek(pos);
+			}
 		}
-	} else {
-		throw new Error('unknown start val');
 	}
-
-	return {
-		target: element,
-		offset: parseOffset(offset),
-	};
 }
 
-function parseEnd(val: any): StartEndOffset | null {
+/**
+ * Parse the start property
+ *
+ * can be an HTMLElement or an object { target, offset }
+ *
+ * the default offset is top
+ * the default view is top
+ */
+function parseTrigger(
+	val: ScrollTrigger,
+	position: Position | undefined,
+	i: number,
+): ParsedScrollTrigger {
 	// might be an object { target, offset }
-	if (!val) return null;
+	if (!val) {
+		throw new Error('unknown property use an html element or an object');
+	}
 
 	let element = null;
-	let offset = 'top';
+	let offset: OffsetValue = 'top';
+	let view: OffsetValue = i == 0 ? 'top' : 'bottom';
 
 	if (typeof val === 'object') {
-		if (val instanceof HTMLElement) element = val;
-		else if ('target' in val) {
+		if (val instanceof HTMLElement) {
+			element = val;
+		} else if ('target' in val) {
 			element = val.target;
 			if (typeof val.offset !== 'undefined') offset = val.offset;
+			if (typeof val.view !== 'undefined') view = val.view;
 		} else {
 			throw new Error('start unknown ' + val);
 		}
@@ -163,21 +238,30 @@ function parseEnd(val: any): StartEndOffset | null {
 	return {
 		target: element,
 		offset: parseOffset(offset),
+		view: parseOffset(view),
+		position: position ?? (i == 0 ? 0 : 1),
 	};
 }
 
-function parseOffset(val: any): number {
+/**
+ * Parse the offset value
+ *
+ * can be a string (top, center, bottom) or a number (0-1)
+ *
+ * 0 = top
+ * 0.5 = center
+ * 1 = bottom
+ */
+function parseOffset(val: OffsetValue): number {
 	if (typeof val === 'string') {
 		if (val === 'top') return 0;
-
 		if (val === 'center') return 0.5;
-
 		if (val === 'bottom') return 1;
 
 		throw new Error('unknown view value ' + val);
 	}
 
-	if (typeof val !== 'number') {
+	if (typeof val !== 'number' || val < 0 || val > 1) {
 		throw new Error(
 			'view expecting to be a top/center/bottom or a percent value',
 		);

package/src/scroll/index.ts

@@ -0,0 +1,8 @@
+import Scroll from './public.js';
+
+/**
+ * Create a scroll animation
+ */
+export function scroll(): Scroll {
+	return new Scroll();
+}

package/src/scroll/public.ts

@@ -1,20 +1,31 @@
-import PublicTimeline from '../timeline/public';
-import Scroll from './Scroll';
+import { Timeline } from '../chnobli.js';
+// import Scroll from './Scroll.js';
+import ScrollTimeline, { Position, ScrollTrigger } from './Scroll.js';
 
-export default class PublicScroll {
-	private _inner: Scroll;
+export default class Scroll {
+	private _inner: ScrollTimeline;
 
-	/*
-	{
-		start: el | px
-		startView: 'top'
+	constructor() {
+		this._inner = new ScrollTimeline();
 	}
-	*/
-	constructor(props: Record<string, any> = {}) {
-		this._inner = new Scroll(props);
+
+	/**
+	 * Add a trigger to the timeline
+	 *
+	 * Providing an offset at which point the trigger should end
+	 */
+	add(trigger: ScrollTrigger, position?: Position): this {
+		this._inner.add(trigger, position);
+
+		return this;
 	}
 
-	add(timeline: PublicTimeline) {
+	/**
+	 * Add a timeline to the scroll
+	 */
+	addTimeline(timeline: Timeline): this {
 		this._inner.addTimeline(timeline);
+
+		return this;
 	}
 }

package/src/stagger/stagger.ts

@@ -3,31 +3,48 @@
  * allowing to easely offset each target by a few pixels
  */
 
-function isStagger(value: any) {
+function isStagger<O>(value: any): value is Stagger<O> {
+	const v = value as any;
+
 	return (
-		typeof value === 'object' &&
-		value !== null &&
-		typeof value.__isStagger__ === 'function'
+		typeof v === 'object' &&
+		v !== null &&
+		typeof v.__isStagger__ === 'function'
 	);
 }
 
-export function callStagger(value: any, i: number, l: any = null) {
-	if (isStagger(value)) return value.call(i, l);
+export function callStagger<O>(
+	value: O | Stagger<O>,
+	i: number,
+	length?: number,
+): O {
+	if (isStagger(value)) return value.call(i, length);
 
 	return value;
 }
 
-export function staggerMap(value: any, fn: (v: any) => any) {
-	if (isStagger(value))
-		return new Stagger((...args: any[]) => fn(value.call(...args)));
+export function staggerMap<O, NO>(
+	value: O | Stagger<O>,
+	fn: (val: O) => NO,
+): NO | Stagger<NO> {
+	if (isStagger(value)) {
+		return new Stagger((i: number, length?: number) =>
+			fn(value.call(i, length)),
+		);
+	}
 
 	return fn(value);
 }
 
-export default class Stagger {
-	private fn: (...args: any[]) => any;
+export type StaggerValue<O> = (i: number, length?: number) => O;
+
+export default class Stagger<O> {
+	private fn: StaggerValue<O>;
 
-	constructor(value: any) {
+	/**
+	 * @ignore
+	 */
+	constructor(value: StaggerValue<O>) {
 		if (typeof value === 'function') {
 			this.fn = value;
 			return;
@@ -37,9 +54,12 @@ export default class Stagger {
 		throw new Error('unknown stagger value ' + value);
 	}
 
-	call(...args: any[]) {
-		return this.fn(...args);
+	call(i: number, length?: number): O {
+		return this.fn(i, length);
 	}
 
+	/**
+	 * @ignore
+	 */
 	__isStagger__() {}
 }

package/src/target/BaseTarget.old.ts

@@ -1,5 +1,5 @@
-import Value from '../values/Value';
-import StyleValue from '../values/StyleValue';
+import Value from '../values/Value.js';
+import StyleValue from '../values/StyleValue.js';
 
 export default class BaseTarget<T> {
 	target: T;

package/src/target/DomTarget.ts

@@ -1,6 +1,6 @@
-import Value from '../values/Value';
-import StyleValue from '../values/StyleValue';
-import { Target } from './Target';
+import Value from '../values/Value.js';
+import StyleValue from '../values/StyleValue.js';
+import { Target } from './Target.js';
 
 export type Element = HTMLElement | SVGElement;
 

package/src/target/ObjectTarget.ts

@@ -0,0 +1,124 @@
+import StyleValue from '../values/StyleValue.js';
+import Value from '../values/Value.js';
+import { Target } from './Target.js';
+
+export default class ObjectTarget implements Target {
+	private target: Record<string, any>;
+
+	// private _extFns: ExternalFunctions;
+
+	// private transformValues: Map<string, (Value | null)[]>;
+	private styleValues: Map<string, StyleValue | undefined>;
+	// private values: Map<string, Value>;
+
+	/**
+	 * target a dom node or svg
+	 *
+	 * extFns: {getComputedStyle, getRootElement}
+	 */
+	constructor(target: Record<string, any>) {
+		this.target = target;
+
+		this.styleValues = new Map();
+		// this.values = new Map();
+	}
+
+	inner() {
+		return this.target;
+	}
+
+	type() {
+		return 'object';
+	}
+
+	getValue(name: string): Value | null {
+		// return this.values.get(name) ?? null;
+		throw new Error('not supported');
+	}
+
+	setValue(name: string, value: Value) {
+		// this.values.set(name, value);
+		throw new Error('not supported');
+	}
+
+	removeValue(name: string) {
+		// this.values.delete(name);
+		throw new Error('not supported');
+	}
+
+	getTransformValue(name: string): Value | null {
+		throw new Error('not supported');
+	}
+
+	setTransformValue(name: string, value: Value) {
+		throw new Error('not supported');
+	}
+
+	removeTransformValue(name: string) {
+		throw new Error('not supported');
+	}
+
+	getStyleValue(name: string): StyleValue | null {
+		const v = this.styleValues.get(name) ?? null;
+
+		if (v !== null) return v;
+
+		const styleV = this.target[name];
+		if (typeof styleV === 'undefined' || styleV === null) {
+			return styleV;
+		}
+
+		try {
+			const value = StyleValue.parse(styleV);
+			this.styleValues.set(name, value);
+
+			return value;
+		} catch (e) {
+			console.log('could not parse value', styleV);
+			return v;
+		}
+	}
+
+	setStyleValue(name: string, value: StyleValue): void {
+		this.styleValues.set(name, value);
+	}
+
+	removeStyleValue(name: string): void {
+		this.styleValues.set(name, undefined);
+	}
+
+	hasClass(name: string): boolean {
+		throw new Error('not supported');
+	}
+
+	addClass(name: string): void {
+		throw new Error('not supported');
+	}
+
+	removeClass(name: string): void {
+		throw new Error('not supported');
+	}
+
+	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;
+
+		if (!b.unit && a.unit) b.unit = a.unit;
+
+		return [a, b];
+	}
+
+	apply() {
+		// style
+		for (const [k, v] of this.styleValues.entries()) {
+			if (v === undefined) {
+				console.log('delete', k);
+				delete this.target[k];
+				this.styleValues.delete(k);
+			} else {
+				this.target[k] = v.toMixed();
+			}
+		}
+	}
+}

package/src/target/Target.ts

@@ -1,6 +1,15 @@
-import Value from '../values/Value';
-import DomTarget from './DomTarget';
-import StyleValue from '../values/StyleValue';
+import Value from '../values/Value.js';
+import DomTarget from './DomTarget.js';
+import StyleValue from '../values/StyleValue.js';
+import type TestDomNode from './TestDomNode.js';
+import ObjectTarget from './ObjectTarget.js';
+
+export type Targets = AnimationTarget | AnimationTarget[];
+export type AnimationTarget =
+	| HTMLElement
+	| SVGElement
+	| TestDomNode
+	| Record<string, any>;
 
 export function newTarget(target: any): Target {
 	if (typeof window === 'undefined') {
@@ -19,6 +28,10 @@ export function newTarget(target: any): Target {
 		}
 	}
 
+	if (typeof target === 'object' && target !== null) {
+		return new ObjectTarget(target);
+	}
+
 	throw new Error('unknown target');
 }