chnobli 0.1.4 → 0.1.6

package/src/property/StyleProperty.ts

@@ -0,0 +1,273 @@
+import StyleValue from '../values/StyleValue';
+import Property, { ParseableValue } from './Property';
+import Value from '../values/Value';
+import { Target } from '../target/Target';
+import ColorValue, { RGBA } from '../values/ColorValue';
+
+export const STYLE_PROPS: Record<string, string | [number, string | null]> = {
+	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: [1, null],
+	padding: 'px',
+	margin: 'px',
+	color: '#000',
+	backgroundColor: '#fff',
+};
+
+export default class StyleProperty
+	implements Property<StyleValue, StyleValue | null>
+{
+	name: string;
+
+	from: StyleValue | null;
+	to: StyleValue | null;
+
+	unit: string | null;
+
+	kind: 'text' | 'color' | 'values' | null;
+	// if the kind text is set
+	// from and to are text
+
+	private _defaultValue: StyleValue | null;
+
+	constructor(name: string) {
+		this.name = name;
+
+		this.from = null;
+		this.to = null;
+
+		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;
+	}
+
+	allowsValueFn(): boolean {
+		return true;
+	}
+
+	init(target: Target, from: StyleValue | null, to: StyleValue | null) {
+		// 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 of kind 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');
+
+		// at this point from and to are values and both have some 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 as Value[])[i];
+			const t = (to.values as Value[])[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: ParseableValue): StyleValue {
+		return StyleValue.parse(val);
+	}
+
+	defaultValue(): StyleValue | null {
+		return this._defaultValue?.clone() ?? null;
+	}
+
+	getValue(target: Target): StyleValue | null {
+		const val = target.getStyleValue(this.name);
+		if (!val) return this.defaultValue();
+
+		return val;
+	}
+
+	interpolate(pos: number): StyleValue | null {
+		switch (this.kind) {
+			case 'text':
+				return this._interpolateText(pos);
+
+			case 'color':
+				return this._interpolateColor(pos);
+
+			default:
+				return this._interpolateValues(pos);
+		}
+	}
+
+	// only call this if kind is text
+	private _interpolateText(pos: number): StyleValue | null {
+		/*
+		## 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');
+	}
+
+	// only call this if kind is color
+	private _interpolateColor(pos: number) {
+		const vals = [];
+
+		for (let i = 0; i < 4; i++) {
+			const f = (this.from!.values as ColorValue).values[i];
+			const t = (this.to!.values as ColorValue).values[i];
+
+			const dif = t - f;
+
+			vals.push(f + pos * dif);
+		}
+
+		return new StyleValue(new ColorValue(vals as RGBA));
+	}
+
+	// only call this if kind is values
+	// both values should be the same length
+	private _interpolateValues(pos: number) {
+		const vals = [];
+
+		const from = this.from!.values as Value[];
+		const to = this.to!.values as Value[];
+
+		for (let i = 0; i < from.length; i++) {
+			const f = from[i];
+			const t = to[i];
+
+			const dif = t.num - f.num;
+
+			vals.push(f.cloneAdd(pos * dif));
+		}
+
+		return new StyleValue(vals);
+	}
+
+	setValue(target: Target, val: StyleValue | null) {
+		if (!val) return target.removeStyleValue(this.name);
+
+		return target.setStyleValue(this.name, val.withDefaultUnit(this.unit));
+	}
+
+	removeValue(target: Target) {
+		return target.removeStyleValue(this.name);
+	}
+}

package/src/property/TransformProperty.ts

@@ -0,0 +1,56 @@
+import Value from '../values/Value';
+import BasicProperty from './BasicProperty';
+import { ParseableValue } from './Property';
+import { Target } from '../target/Target';
+
+export const TRANSFORM_PROPS: Record<string, [number, string | null]> = {
+	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 default class TransformProperty extends BasicProperty {
+	private _defaultValue: Value;
+
+	constructor(name: string) {
+		super(name);
+
+		this._defaultValue = new Value(...TRANSFORM_PROPS[name]);
+	}
+
+	parseValue(val: ParseableValue) {
+		if (typeof val !== 'string' && typeof val !== 'number')
+			throw new Error(
+				`Failed to parse value '${val}' for property '${this.name}'`,
+			);
+
+		return Value.parse(val);
+	}
+
+	defaultValue() {
+		return this._defaultValue.clone();
+	}
+
+	getValue(target: Target) {
+		return target.getTransformValue(this.name) ?? this.defaultValue();
+	}
+
+	setValue(target: Target, val: Value) {
+		target.setTransformValue(this.name, val);
+	}
+
+	removeValue(target: Target) {
+		target.removeTransformValue(this.name);
+	}
+}

package/src/property/TransformXYProperty.ts

@@ -0,0 +1,88 @@
+import Value from '../values/Value';
+import Property, { ParseableValue } from './Property';
+import { Target } from '../target/Target';
+
+export type XYValue = {
+	x: Value;
+	y: Value;
+};
+
+export default class TransformXYProperty implements Property<XYValue> {
+	name: string;
+
+	from!: XYValue;
+	to!: XYValue;
+
+	constructor(name: string) {
+		this.name = name;
+	}
+
+	allowsValueFn(): boolean {
+		return true;
+	}
+
+	init(target: Target, from: XYValue | null, to: XYValue | 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 [fromX, toX] = target.unifyValues('x', from.x, to.x);
+		const [fromY, toY] = target.unifyValues('y', from.y, to.y);
+
+		this.from = { x: fromX, y: fromY };
+		this.to = { x: toX, y: toY };
+	}
+
+	parseValue(val: any) {
+		if (Array.isArray(val)) val = { x: val[0], y: val[1] };
+
+		const { x, y } = val;
+
+		return {
+			x: Value.parse(x),
+			y: Value.parse(y),
+		};
+	}
+
+	defaultValue() {
+		return {
+			x: new Value(0, 'px'),
+			y: new Value(0, 'px'),
+		};
+	}
+
+	getValue(target: Target): XYValue {
+		const x = target.getTransformValue('x');
+		const y = target.getTransformValue('y');
+
+		const def = this.defaultValue();
+
+		return {
+			x: x ? x : def.x,
+			y: y ? y : def.y,
+		};
+	}
+
+	interpolate(pos: number): XYValue {
+		const difX = this.to.x.num - this.from.x.num;
+		const difY = this.to.y.num - this.from.y.num;
+
+		return {
+			x: this.from.x.cloneAdd(pos * difX),
+			y: this.from.y.cloneAdd(pos * difY),
+		};
+	}
+
+	setValue(target: Target, val: XYValue) {
+		target.setTransformValue('x', val.x.withDefaultUnit('px'));
+		target.setTransformValue('y', val.y.withDefaultUnit('px'));
+	}
+
+	removeValue(target: Target) {
+		target.removeTransformValue('x');
+		target.removeTransformValue('y');
+	}
+}

package/src/responsive/ResponsiveEvent.ts

@@ -0,0 +1,60 @@
+export type Callback = (
+	a: { width: number; height: number },
+	b: { remove: () => void },
+) => void;
+
+export default class ResponsiveEvent {
+	private _listeners: Set<Callback>;
+
+	constructor() {
+		this._listeners = new Set();
+
+		window.addEventListener('resize', e => this._onResize(e));
+	}
+
+	static global(): ResponsiveEvent | null {
+		// allow to define a test ticker
+		// @ts-ignore
+		if (typeof globalThis !== 'undefined' && globalThis.chnobliResponsive)
+			// @ts-ignore
+			return globalThis.chnobliResponsive;
+
+		if (typeof window === 'undefined') return null;
+
+		// @ts-ignore
+		if (typeof window.chnobliResponsive === 'undefined')
+			// @ts-ignore
+			window.chnobliResponsive = new ResponsiveEvent();
+		// @ts-ignore
+		return window.chnobliResponsive;
+	}
+
+	// fn({ width, height }, { remove() })
+	add(fn: Callback) {
+		this._listeners.add(fn);
+
+		return {
+			remove: () => {
+				this.remove(fn);
+			},
+		};
+	}
+
+	remove(fn: Callback) {
+		this._listeners.delete(fn);
+	}
+
+	_onResize(_e: Event) {
+		for (const fn of this._listeners) {
+			fn(
+				{
+					width: window.innerWidth,
+					height: window.innerHeight,
+				},
+				{
+					remove: () => this.remove(fn),
+				},
+			);
+		}
+	}
+}

package/src/responsive/{testevent.js → TestEvent.ts}

@@ -1,31 +1,33 @@
+import { Callback } from './ResponsiveEvent';
+
 export default class TestResponsiveEvent {
+	private _listeners: Set<Callback>;
+
 	constructor() {
-		this._listeners = new Set;
+		this._listeners = new Set();
 
+		// @ts-ignore
 		globalThis.chnobliResponsive = this;
 	}
 
 	// fn({ width, height }, { remove() })
-	add(fn) {
+	add(fn: Callback) {
 		this._listeners.add(fn);
 
 		return {
 			remove: () => {
 				this.remove(fn);
-			}
+			},
 		};
 	}
 
-	remove(fn) {
+	remove(fn: Callback) {
 		this._listeners.delete(fn);
 	}
 
-	resize(width, height) {
+	resize(width: number, height: number) {
 		for (const fn of this._listeners) {
-			fn(
-				{ width, height },
-				{ remove: () => this.remove(fn) }
-			);
+			fn({ width, height }, { remove: () => this.remove(fn) });
 		}
 	}
-}
+}

package/src/scroll/{scroll.js → Scroll.ts}

@@ -1,6 +1,7 @@
-import { takeProp } from '../utils/internal.js';
-import { pageOffset } from '../utils/utils.js';
-import ScrollEvent from './event.js';
+import PublicTimeline from '../timeline/public';
+import { takeProp } from '../utils/internal';
+import { pageOffset } from '../utils/utils';
+import ScrollEvent from './ScrollEvent';
 
 /*
 run animation when in view (start stop resume when different events happen)
@@ -23,8 +24,33 @@ scroll pin (once in trigger zone, elements keeps it position relative to start o
 parallax
 */
 
+type StartEndOffset = {
+	target: HTMLElement;
+	offset: number;
+};
+
+export type Start = {
+	y: number;
+	view: number;
+};
+
+export type End = {
+	y: number;
+	view: number;
+};
 
 export default class Scroll {
+	private _start: StartEndOffset;
+	private _end: StartEndOffset | null;
+	private _globalEvent: ScrollEvent;
+
+	start: Start;
+	end: End;
+
+	private timelines: PublicTimeline[];
+	private _rmEvent: () => void;
+	private _initialized: boolean;
+
 	constructor(props = {}) {
 		// { target, offset }
 		this._start = parseStart(takeProp(props, 'start', null));
@@ -36,14 +62,14 @@ export default class Scroll {
 			// px
 			y: 0,
 			// percentage
-			view: parseOffset(takeProp(props, 'startView', 'top'))
+			view: parseOffset(takeProp(props, 'startView', 'top')),
 		};
 		this.end = {
 			// px
 			y: 0,
 			// percentage
-			view: parseOffset(takeProp(props, 'endView', 'bottom'))
-		}
+			view: parseOffset(takeProp(props, 'endView', 'bottom')),
+		};
 
 		this.timelines = [];
 
@@ -51,14 +77,14 @@ export default class Scroll {
 		this._initialized = false;
 	}
 
-	addTimeline(timeline) {
+	addTimeline(timeline: PublicTimeline) {
 		this.timelines.push(timeline);
 	}
 
 	init() {
 		const startOffset = pageOffset(this._start.target);
-		this.start.y = startOffset.top +
-			startOffset.height * this._start.offset;
+		this.start.y =
+			startOffset.top + startOffset.height * this._start.offset;
 
 		if (this._end) {
 			const offset = pageOffset(this._end.target);
@@ -68,7 +94,7 @@ export default class Scroll {
 		}
 	}
 
-	_onScroll({ y, height }) {
+	_onScroll({ y, height }: { y: number; height: number }) {
 		if (!this._initialized) {
 			this.init();
 			this._initialized = true;
@@ -86,11 +112,11 @@ export default class Scroll {
 	}
 }
 
-function parseStart(val) {
+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'
+			'unknown start property use an html element or an object',
 		);
 	}
 
@@ -98,12 +124,10 @@ function parseStart(val) {
 	let offset = 'top';
 
 	if (typeof val === 'object') {
-		if (val instanceof HTMLElement)
-			element = 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.offset !== 'undefined') offset = val.offset;
 		} else {
 			throw new Error('start unknown ' + val);
 		}
@@ -113,25 +137,22 @@ function parseStart(val) {
 
 	return {
 		target: element,
-		offset: parseOffset(offset)
+		offset: parseOffset(offset),
 	};
 }
 
-function parseEnd(val) {
+function parseEnd(val: any): StartEndOffset | null {
 	// might be an object { target, offset }
-	if (!val)
-		return null;
+	if (!val) return null;
 
 	let element = null;
 	let offset = 'top';
 
 	if (typeof val === 'object') {
-		if (val instanceof HTMLElement)
-			element = 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.offset !== 'undefined') offset = val.offset;
 		} else {
 			throw new Error('start unknown ' + val);
 		}
@@ -141,29 +162,26 @@ function parseEnd(val) {
 
 	return {
 		target: element,
-		offset: parseOffset(offset)
+		offset: parseOffset(offset),
 	};
 }
 
-function parseOffset(val) {
+function parseOffset(val: any): number {
 	if (typeof val === 'string') {
-		if (val === 'top')
-			return 0;
+		if (val === 'top') return 0;
 
-		if (val === 'center')
-			return .5;
+		if (val === 'center') return 0.5;
 
-		if (val === 'bottom')
-			return 1;
+		if (val === 'bottom') return 1;
 
 		throw new Error('unknown view value ' + val);
 	}
 
-	if (!(typeof val === 'number')) {
+	if (typeof val !== 'number') {
 		throw new Error(
-			'view expecting to be a top/center/bottom or a percent value'
+			'view expecting to be a top/center/bottom or a percent value',
 		);
 	}
 
 	return val;
-}	
+}