chnobli 0.1.4 → 0.1.6

package/src/animation/{animation.js → Animation.ts}

@@ -1,18 +1,24 @@
-import {
-	newTiming, STATE_BEFORE, STATE_AFTER
-} from '../timing/timing.js';
-
-import { newProperty } from './property.js';
+import Timing, { newTiming, STATE_BEFORE, STATE_AFTER } from '../timing/Timing';
 
+import Property, { ParseableValue, newProperty } from '../property/Property';
+import Ticker from '../timing/Ticker';
+import { Target } from '../target/Target';
 
 export default class Animation {
-	// targets;
-	// #timing;
+	timing: Timing;
+	target: Target;
+	props: Record<string, PropertyAnimation<any>>;
+
+	private _ticker: Ticker;
+
+	private _prevTimingState: number;
+	private _props: PropertyAnimation<any>[];
+	private _initialized: boolean;
 
 	/*
 	props
 	*/
-	constructor(target, ticker, props = {}) {
+	constructor(target: any, ticker: Ticker, props: Record<string, any> = {}) {
 		this.timing = newTiming(props);
 		this._ticker = ticker;
 		this.target = ticker.registerTarget(target);
@@ -21,45 +27,39 @@ export default class Animation {
 		this._props = [];
 		this._initialized = false;
 
+		this.props = {};
+
 		for (const prop in props) {
-			if (prop in this)
-				throw new Error('prop: ' + prop + ' is not allowed');
-
-			this[prop] = new PropertyAnimation(
-				prop,
-				props[prop],
-				this
-			);
-			this._props.push(this[prop]);
+			this.props[prop] = new PropertyAnimation(prop, props[prop], this);
+			this._props.push(this.props[prop]);
 		}
 	}
 
-	advance(change) {
+	advance(change: number) {
 		this._prevTimingState = this.timing.state;
 		this.timing.advance(change);
 	}
 
-	seekMs(ms) {
+	seekMs(ms: number) {
 		this._prevTimingState = this.timing.state;
 		this.timing.seekMs(ms);
 	}
 
-	seek(pos) {
+	seek(pos: number) {
 		this._prevTimingState = this.timing.state;
 		this.timing.seek(pos);
 	}
 
-	isFinite() {
+	isFinite(): boolean {
 		return this.timing.isFinite();
 	}
 
-	get duration() {
+	get duration(): number {
 		return this.timing.duration;
 	}
 
 	init(reset = false) {
-		if (this._initialized && !reset)
-			return;
+		if (this._initialized && !reset) return;
 		this._initialized = true;
 
 		for (const prop of this._props) {
@@ -75,7 +75,7 @@ export default class Animation {
 				prop.restoreBefore(this.target);
 			}
 
-			// to render before we need to remove 
+			// to render before we need to remove
 
 			return;
 		} else if (this.timing.state === STATE_AFTER) {
@@ -96,18 +96,26 @@ export default class Animation {
 			prop.restoreBefore(this.target);
 		}
 
-		this._ticker.unregisterTarget(this.target.target);
+		this._ticker.unregisterTarget(this.target.inner());
 	}
 }
 
-function maybeResponsiveValue(prop, val) {
-	if (typeof val === 'object' && 'responsive' in val)
-		return val.responsive;
+function maybeResponsiveValue<V>(prop: Property<V>, val: any): V {
+	if (typeof val === 'object' && 'responsive' in val) return val.responsive;
 	return prop.parseValue(val);
 }
 
-class PropertyAnimation {
-	constructor(prop, value, animation) {
+class PropertyAnimation<V> {
+	prop: Property<V>;
+
+	private staticValueFn: boolean;
+	private valueFn: ((pos: number) => ParseableValue) | null;
+
+	private iniResponsive: any;
+	private iniFrom: V | null;
+	private iniTo: V | null;
+
+	constructor(prop: string, value: any, animation: Animation) {
 		this.prop = newProperty(prop, animation.target.type());
 		// we will get the from the targets
 
@@ -124,15 +132,14 @@ class PropertyAnimation {
 			if ('to' in value)
 				this.iniTo = maybeResponsiveValue(this.prop, value.to);
 
-			if ('responsive' in value)
-				this.iniResponsive = value.responsive;
+			if ('responsive' in value) this.iniResponsive = value.responsive;
 
 			if (!this.iniFrom && !this.iniTo && !this.iniResponsive)
 				throw new Error('from or to expected');
 		} else if (typeof value === 'function') {
 			if (!this.prop.allowsValueFn()) {
 				throw new Error(
-					'prop ' + prop + ' does not allow value functions'
+					'prop ' + prop + ' does not allow value functions',
 				);
 			}
 
@@ -144,11 +151,10 @@ class PropertyAnimation {
 	}
 
 	// calculate from and to position
-	init(target) {
+	init(target: Target) {
 		// there is nothing to initialize since on every render we call the
 		// value Fn
-		if (this.staticValueFn)
-			return;
+		if (this.staticValueFn) return;
 
 		this.valueFn = null;
 		let from = null;
@@ -156,20 +162,18 @@ class PropertyAnimation {
 
 		// init via responsive fn
 		if (this.iniResponsive) {
-			const value = this.iniResponsive(target.target);
+			// todo this access to target can't be
+			const value = this.iniResponsive((target as any).target);
 
 			if (typeof value === 'object') {
-				if ('from' in value)
-					from = this.prop.parseValue(value.from);
-				if ('to' in value)
-					to = this.prop.parseValue(value.to);
+				if ('from' in value) from = this.prop.parseValue(value.from);
+				if ('to' in value) to = this.prop.parseValue(value.to);
 
-				if (!from && !to)
-					throw new Error('from or to expected');
+				if (!from && !to) throw new Error('from or to expected');
 			} else if (typeof value === 'function') {
 				if (!this.prop.allowsValueFn()) {
 					throw new Error(
-						`prop ${this.prop.name} does not allow value functions`
+						`prop ${this.prop.name} does not allow value functions`,
 					);
 				}
 
@@ -183,28 +187,26 @@ class PropertyAnimation {
 		// init from
 		if (!from) {
 			if (typeof this.iniFrom === 'function')
-				from = this.prop.parseValue(this.iniFrom(target.target));
-			else
-				from = this.iniFrom;
+				from = this.prop.parseValue(this.iniFrom(target.inner()));
+			else from = this.iniFrom;
 		}
 
 		// init to
 		if (!to) {
 			if (typeof this.iniTo === 'function')
-				to = this.prop.parseValue(this.iniTo(target.target));
-			else
-				to = this.iniTo;
+				to = this.prop.parseValue(this.iniTo(target.inner()));
+			else to = this.iniTo;
 		}
 
 		this.prop.init(target, from, to);
 	}
 
-	restoreBefore(target) {
+	restoreBefore(target: Target) {
 		// todo this might not be enough
 		this.prop.removeValue(target);
 	}
 
-	render(pos, target) {
+	render(pos: number, target: Target) {
 		if (this.valueFn) {
 			this.prop.setValue(target, this.prop.parseValue(this.valueFn(pos)));
 			return;
@@ -263,4 +265,4 @@ tl.addGroup()
 
 tl.add()
 
-*/
+*/

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

@@ -1,16 +1,18 @@
-import { takeProp } from '../utils/internal.js';
-import Timeline from '../timeline/public.js';
-import { staggerMap } from '../stagger/stagger.js';
+import { takeProp } from '../utils/internal';
+import Timeline from '../timeline/public';
+import { staggerMap } from '../stagger/stagger';
 
 /**
  * The animation consist of a timeline with just one animation
  * This allows to reuse a lot of code
- * 
+ *
  * ## Props
- * 
+ *
  */
 export default class PublicAnimation {
-	constructor(targets, props = {}) {
+	private _tl: Timeline;
+
+	constructor(targets: any, props: Record<string, any> = {}) {
 		const autoplay = parseAutoplay(takeProp(props, 'autoplay', true));
 		const delay = takeProp(props, 'delay', 0);
 
@@ -23,10 +25,13 @@ export default class PublicAnimation {
 		props.ease = ease;
 		props.duration = duration;
 
-		this._tl.add(targets, props, staggerMap(delay, v => '+=' + v));
+		this._tl.add(
+			targets,
+			props,
+			staggerMap(delay, v => '+=' + v),
+		);
 
-		if (autoplay)
-			this._tl.play();
+		if (autoplay) this._tl.play();
 	}
 
 	play() {
@@ -40,16 +45,16 @@ export default class PublicAnimation {
 	/**
 	 * Seeks to a position in the timeline
 	 */
-	seekMs(ms) {
+	seekMs(ms: number) {
 		this._tl.seekMs(ms);
 	}
 
 	/**
 	 * Seeks to a normalized position in the timeline
-	 * 
+	 *
 	 * @param pos = number between 0 and 1
 	 */
-	seek(pos) {
+	seek(pos: number) {
 		this._tl.seek(pos);
 	}
 
@@ -75,7 +80,6 @@ export default class PublicAnimation {
 		this._tl.update();
 	}
 
-
 	/**
 	 * Returns wether the timeline is set to reversed
 	 */
@@ -86,7 +90,7 @@ export default class PublicAnimation {
 	/**
 	 * Set's the timeline to a specific direction
 	 */
-	setReversed(reversed) {
+	setReversed(reversed: boolean) {
 		this._tl.setReversed(reversed);
 	}
 
@@ -97,12 +101,12 @@ export default class PublicAnimation {
 		this._tl.reverse();
 	}
 
-	on(event, fn) {
+	on(event: string, fn: (...args: any[]) => void) {
 		return this._tl.on(event, fn);
 	}
 
 	// not wroking
-	onPromise(event) {
+	onPromise(event: string) {
 		return this._tl.onPromise(event);
 	}
 
@@ -111,13 +115,14 @@ export default class PublicAnimation {
 	 */
 	destroy() {
 		this._tl.destroy();
+		// @ts-ignore
 		this._tl = null;
 	}
 }
 
-function parseAutoplay(autoplay) {
+function parseAutoplay(autoplay: any): boolean {
 	if (autoplay !== true && autoplay !== false)
 		throw new Error('autoplay needs to be true|false');
 
 	return autoplay;
-}
+}

package/src/{chnobli.js → chnobli.ts}

@@ -1,30 +1,29 @@
-import Animation from './animation/public.js';
-import Timeline from './timeline/public.js';
-import Scroll from './scroll/public.js';
-import Stagger from './stagger/stagger.js';
-
+import Animation from './animation/public';
+import Timeline from './timeline/public';
+import Scroll from './scroll/public';
+import Stagger from './stagger/stagger';
 
 // todo maybe add, to, from and fromTo to the animate function
 
 /**
  * Creates a simple animation
- * 
+ *
  * ## Properties
- * 
+ *
  */
-export function animate(targets, props = {}) {
+export function animate(targets: any, props: Record<string, any> = {}) {
 	return new Animation(targets, props);
 }
 
-export function timeline(props = {}) {
+export function timeline(props: Record<string, any> = {}) {
 	return new Timeline(props);
 }
 
-export function stagger(value) {
+export function stagger(value: any) {
 	return new Stagger(value);
 }
 
-export function scroll(props = {}) {
+export function scroll(props: Record<string, any> = {}) {
 	return new Scroll(props);
 }
 
@@ -66,4 +65,4 @@ animate(target, {
 	alternate
 })
 
-*/
+*/

package/src/property/BasicProperty.ts

@@ -0,0 +1,91 @@
+import Value from '../values/Value';
+import Property, { ParseableValue } from './Property';
+import { Target } from '../target/Target';
+
+export default class BasicProperty implements Property<Value> {
+	/**
+	 * The name of the property
+	 */
+	name: string;
+
+	/**
+	 * The value at the start
+	 */
+	from: Value | null;
+
+	/**
+	 * The value at the end
+	 */
+	to: Value | null;
+
+	constructor(name: string) {
+		// this is the property name
+		this.name = name;
+
+		this.from = null;
+		this.to = null;
+	}
+
+	allowsValueFn() {
+		return true;
+	}
+
+	/**
+	 * From or to might be null
+	 */
+	init(target: Target, from: Value | null, to: Value | null) {
+		if (!from) from = this.getValue(target);
+
+		if (!to) to = this.getValue(target);
+
+		if (!from || !to)
+			throw new Error('could not determine from or to value');
+
+		const [nFrom, nTo] = target.unifyValues(this.name, from, to);
+
+		this.from = nFrom;
+		this.to = nTo;
+	}
+
+	/**
+	 * Gets called with the value of a property
+	 *
+	 * For examply during initializiation
+	 */
+	parseValue(val: ParseableValue): Value {
+		if (typeof val !== 'string')
+			throw new Error('only strings are supported');
+
+		return Value.parse(val);
+	}
+
+	defaultValue(): Value {
+		throw new Error('default value for ' + this.name + ' not known');
+	}
+
+	// try to access the value from the target
+	getValue(target: Target): Value {
+		const val = target.getValue(this.name);
+		if (typeof val === 'undefined' || val === null)
+			return this.defaultValue();
+
+		return val;
+	}
+
+	/**
+	 * Pos needs to be between 0 and 1
+	 */
+	interpolate(pos: number): Value {
+		const dif = this.to!.num - this.from!.num;
+
+		return this.from!.cloneAdd(pos * dif);
+	}
+
+	setValue(target: Target, val: Value) {
+		return target.setValue(this.name, val);
+	}
+
+	removeValue(target: Target) {
+		return target.removeValue(this.name);
+	}
+}

package/src/property/ClassProperty.ts

@@ -0,0 +1,132 @@
+import { Target } from '../target/Target';
+import Property, { type ParseableValue } from './Property';
+
+export type Interpolated = {
+	add: string[];
+	remove: string[];
+};
+
+/**
+ * In most cases we wan't to add the class at pos 0
+ * and in reverse remove it at pos 0
+ *
+ * so this behaviour should be in str|{ to }
+ *
+ * If we wan't to remove the class at pos 1
+ * and in reverse add it at pos 1
+ * we do it in { from }
+ */
+export default class ClassProperty implements Property<string[], Interpolated> {
+	name: string;
+
+	from!: string[];
+	to!: string[];
+
+	private preStates!: Map<string, boolean>;
+	private states!: Map<string, boolean>;
+
+	constructor(name: string) {
+		this.name = name;
+	}
+
+	allowsValueFn(): boolean {
+		return false;
+	}
+
+	init(target: Target, from: string[] | null, to: string[] | null) {
+		this.from = from ?? [];
+		this.to = to ?? [];
+
+		this.preStates = new Map();
+		this.states = new Map();
+
+		for (const cls of [...this.from, ...this.to]) {
+			const exists = target.hasClass(cls);
+			this.preStates.set(cls, exists);
+			this.states.set(cls, exists);
+		}
+	}
+
+	parseValue(val: ParseableValue): string[] {
+		if (Array.isArray(val)) {
+			return val.map(v => {
+				if (typeof v !== 'string')
+					throw new Error('cls only accepts strings[]');
+
+				return v;
+			});
+		}
+
+		if (typeof val === 'string') return [val];
+
+		throw new Error('cls only accepts strings and strings[]');
+	}
+
+	getValue(_target: Target): string[] | null {
+		throw new Error('unused');
+	}
+
+	interpolate(pos: number): Interpolated {
+		/**
+		 * ## to
+		 * add the class at pos >0
+		 * and in reverse remove it at pos 0
+		 *
+		 * ## from
+		 * remove the class at pos <1
+		 * and in reverse add it at pos 1
+		 */
+
+		let obj: Interpolated = {
+			add: [],
+			remove: [],
+		};
+
+		if (pos <= 0) {
+			obj.remove = this.to;
+		} else {
+			obj.add = this.to;
+		}
+
+		if (pos >= 1) {
+			obj.remove = this.from;
+		} else {
+			obj.add = [...obj.add, ...this.from];
+		}
+
+		return obj;
+	}
+
+	setValue(target: Target, val: Interpolated) {
+		let { add, remove } = val;
+		add = add ?? [];
+		remove = remove ?? [];
+
+		if (!Array.isArray(add) || !Array.isArray(remove))
+			throw new Error('add or remove expected');
+
+		add.forEach(cls => {
+			const exists = this.states.get(cls);
+			if (!exists) {
+				target.addClass(cls);
+				this.states.set(cls, true);
+			}
+		});
+
+		remove.forEach(cls => {
+			const exists = this.states.get(cls);
+			if (exists) {
+				target.removeClass(cls);
+				this.states.set(cls, false);
+			}
+		});
+	}
+
+	removeValue(target: Target) {
+		this.preStates.forEach((exists, cls) => {
+			if (exists) target.addClass(cls);
+			else target.removeClass(cls);
+		});
+		this.states = new Map(this.preStates);
+	}
+}

package/src/property/Property.ts

@@ -0,0 +1,33 @@
+import { Target } from '../target/Target';
+import TransformProperty, { TRANSFORM_PROPS } from './TransformProperty';
+import TransformXYProperty from './TransformXYProperty';
+import StyleProperty, { STYLE_PROPS } from './StyleProperty';
+import ClassProperty from './ClassProperty';
+
+export type ParseableValue = string | number | (string | number)[];
+
+export default interface Property<V, I = V> {
+	name: string;
+
+	allowsValueFn(): boolean;
+
+	init(target: Target, from: V | null, to: V | null): void;
+
+	parseValue(value: ParseableValue): V;
+	interpolate(pos: number): I;
+	setValue(target: Target, value: I): void;
+	removeValue(target: Target): void;
+}
+
+export function newProperty(prop: string, targetType = ''): Property<any> {
+	if (targetType !== 'dom')
+		throw new Error('only dom is supported as target');
+
+	if (prop in TRANSFORM_PROPS) return new TransformProperty(prop);
+	if (prop === 'xy') return new TransformXYProperty(prop);
+	if (prop.startsWith('--')) return new StyleProperty(prop);
+	if (prop in STYLE_PROPS) return new StyleProperty(prop);
+	if (prop === 'cls') return new ClassProperty(prop);
+
+	throw new Error('unknown prop ' + prop);
+}