chnobli 0.1.2 → 0.1.3

package/src/animation/property.js

@@ -1,11 +1,44 @@
-import Value from '../utils/value.js';
+import Value from '../values/value.js';
+import ColorValue from '../values/colorvalue.js';
+import StyleValue from '../values/stylevalue.js';
 
 export default class Property {
 	constructor(name) {
 		// 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, from, to) {
+		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) {
 		return Value.parse(val);
 	}
@@ -23,65 +56,66 @@ export default class Property {
 		return val;
 	}
 
+	/**
+	 * Pos needs to be between 0 and 1
+	 */
+	interpolate(pos) {
+		const dif = this.to.num - this.from.num;
+
+		return this.from.cloneAdd(pos * dif);
+	}
+
 	setValue(target, val) {
 		return target.setValue(this.name, val);
 	}
 
 	removeValue(target) {
-		// todo remove
 		return target.removeValue(this.name);
 	}
 }
 
-const TRANSFORM_PROPS = ['x', 'y', 'scale', 'scaleX', 'scaleY', 'rotate'];
+const TRANSFORM_PROPS = {
+	'x': [0, 'px'],
+	'y': [0, 'px'],
+	'z': [0, 'px'],
+	'scale': [1, null],
+	'scaleX': [1, null],
+	'scaleY': [1, null],
+	'scaleZ': [1, null],
+	'rotate': [0, 'deg'],
+	'rotateX': [0, 'deg'],
+	'rotateY': [0, 'deg'],
+	'rotateZ': [0, 'deg'],
+	'skew': [0, 'deg'],
+	'skewX': [0, 'deg'],
+	'skewY': [0, 'deg']
+};
 
 export class Transform extends Property {
 	constructor(name) {
 		super(name);
 
-		if (name === 'x' || name === 'y') {
-			this._defUnit = 'px';
-			this._defVal = 0;
-			this._transformFunction = 'translate' + name.toUpperCase();
-		// } else if (name === 'rotation') {
-		// 	this.defUnit = 'deg';
-		// 	this.defVal = 0;
-		} else if (name.startsWith('scale')) {
-			this._defUnit = null;
-			this._defVal = 1;
-			this._transformFunction = name;
-		} else if (name === 'rotate') {
-			this._defUnit = 'deg';
-			this._defVal = 0;
-			this._transformFunction = name;
-		} else {
-			throw new Error('unknown prop ' + name);
-		}
+		this._defaultValue = new Value(...TRANSFORM_PROPS[name]);
 	}
 
 	parseValue(val) {
-		return Value.parse(val, this._defUnit);
+		return Value.parse(val);
 	}
 
 	defaultValue() {
-		return new Value(this._defVal, this._defUnit);
+		return this._defaultValue.clone();
 	}
 
 	getValue(target) {
-		const val = target.getTransformValue(this._transformFunction);
-		if (typeof val === 'undefined' || val === null)
-			return this.defaultValue();
-
-		return val;
+		return target.getTransformValue(this.name) ?? this.defaultValue();
 	}
 
 	setValue(target, val) {
-		return target.setTransformValue(this._transformFunction, val);
+		target.setTransformValue(this.name, val);
 	}
 
 	removeValue(target) {
-		// todo remove
-		return target.removeTransformValue(this._transformFunction);
+		target.removeTransformValue(this.name);
 	}
 }
 
@@ -97,8 +131,8 @@ export class TransformXY extends Property {
 		const { x, y } = val;
 
 		return {
-			x: Value.parse(val.x, 'px'),
-			y: Value.parse(val.y, 'px')
+			x: Value.parse(x),
+			y: Value.parse(y)
 		};
 	}
 
@@ -122,8 +156,8 @@ export class TransformXY extends Property {
 	}
 
 	setValue(target, val) {
-		target.setTransformValue('translateX', val.x);
-		target.setTransformValue('translateY', val.y);
+		target.setTransformValue('translateX', val.x.withDefaultUnit('px'));
+		target.setTransformValue('translateY', val.y.withDefaultUnit('px'));
 	}
 
 	removeValue(target) {
@@ -133,30 +167,142 @@ export class TransformXY extends Property {
 }
 
 const STYLE_PROPS = {
+	'position': 'static',
+	'display': 'block',
+	'visibility': 'visible',
+	'minWidth': 'px',
 	'width': 'px',
+	'maxWidth': 'px',
+	'minHeight': 'px',
 	'height': 'px',
+	'maxHeight': 'px',
 	'top': 'px',
 	'left': 'px',
 	'right': 'px',
 	'bottom': 'px',
-	'opacity': null,
+	'opacity': [1, null],
+	'padding': 'px',
+	'margin': 'px',
+	'color': '#000',
+	'backgroundColor': '#fff'
 }
 
 export class StyleProp extends Property {
 	constructor(name) {
 		super(name);
 
-		this.unit = STYLE_PROPS[name];
+		const def = STYLE_PROPS[name];
+		if (Array.isArray(def)) {
+			this._defaultValue = new StyleValue([new Value(def[0], def[1])]);
+			this.unit = def[1];
+		} else if (def === 'px') {
+			this._defaultValue = new StyleValue([new Value(0, def)]);
+			this.unit = def;
+		} else if (typeof def !== 'undefined') {
+			this._defaultValue = StyleValue.parse(def);
+			this.unit = null;
+		} else {
+			this._defaultValue = null;
+			this.unit = null;
+		}
+
+		// text|color|values
+		this.kind = null;
+	}
+
+	init(target, from, to) {
+		// this check is probably not necessary?
+		if (!from && !to)
+			throw new Error('either from or to need to be defined');
+
+		/*
+		if the user inputed a text value both need to be treated as text
+		and interpolated as classes or in reverse if they are negative values
+
+		if the user inputed a value both need to be treated as values and need
+		to match in length
+		*/
+
+		if (from?.kind === 'text' || to?.kind === 'text') {
+			if (from && from.kind !== 'text')
+				throw new Error('from is expected to be a text because to is');
+
+			if (to && to.kind !== 'text')
+				throw new Error('to is expected to be a text because from is');
+
+			this.kind = 'text';
+			this.from = from;
+			this.to = to;
+			return;
+		}
+
+		// get the current value
+		if (!from)
+			from = this.getValue(target);
+
+		// get the current value
+		if (!to)
+			to = this.getValue(target);
+
+		if (!from || !to)
+			throw new Error('from or to could not be defined, specified ' + 
+				'it with fromTo');
+
+		// if one is a color both need to be a color
+		if (from.kind === 'color' || to.kind === 'color') {
+			if (from.kind !== to.kind)
+				throw new Error('expected two colors');
+
+			this.kind = 'color';
+			this.from = from;
+			this.to = to;
+			return;
+		}
+
+		// check that both are values
+		if (from.kind === 'text')
+			from = this.defaultValue();
+
+		if (to.kind === 'text')
+			to = this.defaultValue();
+
+		if (from.length === 0 || to.length === 0)
+			throw new Error('from or to has zero values');
+
+		// either from or to needs to be 1 to work 
+
+		if (from.length !== to.length && from.length !== 1 && to.length !== 1)
+			throw new Error('from or to need to match in length or be one');
+
+		const newLength = Math.max(from.length, to.length);
+		from.extendToLength(newLength);
+		to.extendToLength(newLength);
+
+		// now let's try to unify each value
+		const fromVals = [];
+		const toVals = [];
+
+		// now we need to make sure the values are the same
+		for (let i = 0; i < newLength; i++) {
+			const f = from.values[i];
+			const t = to.values[i];
+
+			const [nFrom, nTo] = target.unifyValues(this.name, f, t);
+			fromVals.push(nFrom);
+			toVals.push(nTo);
+		}
+
+		this.kind = 'values';
+		this.from = new StyleValue(fromVals);
+		this.to = new StyleValue(toVals);
 	}
 
 	parseValue(val) {
-		// maybe keep it unitless as long as possible, maybe until we need to
-		// write it
-		return Value.parse(val, this.unit);
+		return StyleValue.parse(val);
 	}
 
 	defaultValue() {
-		return new Value(0, this.unit);
+		return this._defaultValue?.clone();
 	}
 
 	getValue(target) {
@@ -167,8 +313,99 @@ export class StyleProp extends Property {
 		return val;
 	}
 
+	interpolate(pos) {
+		switch (this.kind) {
+			case 'text':
+				return this._interpolateText(pos);
+
+			case 'color':
+				return this._interpolateColor(pos);
+
+			default:
+				return this._interpolateValues(pos);
+		}
+	}
+
+	_interpolateText(pos) {
+		/*
+		## if both values are set
+
+		<=0 the from value will be set
+		>0 the to value will be set
+
+
+		## if only one text is set
+
+		if the to value is 
+
+
+		the text in the to value will be set >0
+		the text in the to value will be removed in <=0
+
+		the text in the from value will be set <1
+		the text in the from value will be removed in >=1
+		*/
+		if (this.from && this.to) {
+			if (pos <= 0)
+				return this.from.clone();
+
+			return this.to.clone();
+		}
+
+		if (this.to) {
+			if (pos <= 0)
+				return null;
+
+			return this.to.clone();
+		}
+
+		if (this.from) {
+			if (pos >= 1)
+				return null;
+
+			return this.from.clone();
+		}
+
+		throw new Error('expected from or to');
+	}
+
+	_interpolateColor(pos) {
+		const vals = [];
+
+		for (let i = 0; i < 4; i++) {
+			const f = this.from.values.values[i];
+			const t = this.to.values.values[i];
+
+			const dif = t - f;
+
+			vals.push(f + pos * dif);
+		}
+
+		return new StyleValue(new ColorValue(vals));
+	}
+
+	_interpolateValues(pos) {
+		// both values should be the same length
+
+		const vals = [];
+
+		for (let i = 0; i < this.from.values.length; i++) {
+			const f = this.from.values[i];
+			const t = this.to.values[i];
+
+			const dif = t.num - f.num;
+
+			vals.push(f.cloneAdd(pos * dif));
+		}
+
+		return new StyleValue(vals);
+	}
+
 	setValue(target, val) {
-		return target.setStyleValue(this.name, val);
+		if (!val)
+			return target.removeStyleValue(this.name);
+
+		return target.setStyleValue(this.name, val.withDefaultUnit(this.unit));
 	}
 
 	removeValue(target) {
@@ -176,16 +413,144 @@ export class StyleProp extends Property {
 	}
 }
 
+/**
+ * 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 class ClassNameProp extends Property {
+	constructor(name) {
+		super(name);
+	}
+
+	allowsValueFn() {
+		return false;
+	}
+
+	init(target, from, to) {
+		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) {
+		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[]');
+	}
+
+	defaultValue() {
+		throw new Error('unused');
+	}
+
+	getValue(_target) {
+		throw new Error('unused');
+	}
+
+	interpolate(pos) {
+		/**
+		 * ## 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 = {
+			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, val) {
+		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) {
+		this.preStates.forEach((exists, cls) => {
+			if (exists)
+				target.addClass(cls);
+			else
+				target.removeClass(cls);
+		});
+		this.states = new Map(this.preStates);
+	}
+}
+
 export function newProperty(prop, targetType = '') {
 	if (targetType !== 'dom')
 		throw new Error('only dom is supported as target');
 
-	if (TRANSFORM_PROPS.includes(prop))
+	if (prop in TRANSFORM_PROPS)
 		return new Transform(prop);
 	if (prop === 'xy')
 		return new TransformXY(prop);
+	if (prop.startsWith('--'))
+		return new StyleProp(prop);
 	if (prop in STYLE_PROPS)
 		return new StyleProp(prop);
+	if (prop === 'cls')
+		return new ClassNameProp(prop);
 
 	throw new Error('unknown prop ' + prop);
 }

package/src/animation/public.js

@@ -1,8 +1,14 @@
 import { takeProp } from '../utils/internal.js';
 import Timeline from '../timeline/public.js';
-import { parseDelay } from '../timing/timing.js';
 import { staggerMap } from '../stagger/stagger.js';
 
+/**
+ * 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 = {}) {
 		const autoplay = parseAutoplay(takeProp(props, 'autoplay', true));
@@ -31,18 +37,82 @@ export default class PublicAnimation {
 		this._tl.pause();
 	}
 
-	// 0-1
+	/**
+	 * Seeks to a position in the timeline
+	 */
+	seekMs(ms) {
+		this._tl.seekMs(ms);
+	}
+
+	/**
+	 * Seeks to a normalized position in the timeline
+	 * 
+	 * @param pos = number between 0 and 1
+	 */
 	seek(pos) {
 		this._tl.seek(pos);
 	}
 
+	/**
+	 * Resets the current timeline to the start
+	 * without changing anything
+	 */
 	reset() {
 		this._tl.reset();
 	}
 
+	/**
+	 * Resets every used prop to it's previous value
+	 */
+	resetProps() {
+		this._tl.resetProps();
+	}
+
+	/**
+	 * Recalculates all values this should be called for example after a resize
+	 */
+	update() {
+		this._tl.update();
+	}
+
+
+	/**
+	 * Returns wether the timeline is set to reversed
+	 */
+	isReversed() {
+		return this._tl.isReversed();
+	}
+
+	/**
+	 * Set's the timeline to a specific direction
+	 */
+	setReversed(reversed) {
+		this._tl.setReversed(reversed);
+	}
+
+	/**
+	 * Reverses the order of the current timeline
+	 */
 	reverse() {
 		this._tl.reverse();
 	}
+
+	on(event, fn) {
+		return this._tl.on(event, fn);
+	}
+
+	// not wroking
+	onPromise(event) {
+		return this._tl.onPromise(event);
+	}
+
+	/**
+	 * Destroys this timeline and resets all props
+	 */
+	destroy() {
+		this._tl.destroy();
+		this._tl = null;
+	}
 }
 
 function parseAutoplay(autoplay) {

package/src/animator.js

@@ -1,3 +1,5 @@
+/* eslint no-unused-vars: 0 */
+
 import { quadInOut, quadOut } from './easing/index.js';
 import { range } from 'fire/util.js';
 

package/src/chnobli.js

@@ -1,12 +1,17 @@
 import Animation from './animation/public.js';
 import Timeline from './timeline/public.js';
 import Scroll from './scroll/public.js';
-import { stagger as _stagger } from './stagger/stagger.js';
+import Stagger from './stagger/stagger.js';
 
 
 // todo maybe add, to, from and fromTo to the animate function
 
-
+/**
+ * Creates a simple animation
+ * 
+ * ## Properties
+ * 
+ */
 export function animate(targets, props = {}) {
 	return new Animation(targets, props);
 }
@@ -16,7 +21,7 @@ export function timeline(props = {}) {
 }
 
 export function stagger(value) {
-	return _stagger(value);
+	return new Stagger(value);
 }
 
 export function scroll(props = {}) {