chnobli 0.1.0 → 0.1.2

package/src/timing/timing.js

@@ -0,0 +1,195 @@
+import Ease from './ease.js';
+import { takeProp } from '../utils/internal.js';
+
+export const STATE_BEFORE = 0;
+export const STATE_START = 1;
+export const STATE_RUNNING = 2;
+export const STATE_ENDED = 3;
+export const STATE_AFTER = 4;
+
+export default class Timing {
+	// removes the relevant properties from the props
+
+	/*
+	seeking
+	if repeat is infinite
+	seek will only control the current iteration
+	if repeat is finite
+	seek will control the entire time
+
+
+	{
+		duration: in ms
+		ease: easeFunction
+		repeat: -1 - x,
+		alternate
+	}
+	*/
+	constructor(props) {
+		this.setDuration(props.duration);
+		this.ease = props.ease ?? (t => t);
+		this.repeat = props.repeat ?? 0;
+		this.alternate = props.alternate ?? true;
+		this.reversed = props.reversed ?? false;
+
+		this.position = 0;
+		this.state = STATE_BEFORE;
+
+		// progress does not take alternation into account and has no easing
+		// this always increments up until it overflows
+		this._progress = 0;
+		// this._reversed = false;
+
+		// scrub
+	}
+
+	setDuration(iterDuration) {
+		this.iterDuration = iterDuration;
+
+		this.duration = this.iterDuration;
+		if (this.repeat > -1) {
+			this.duration = (this.repeat + 1) * this.iterDuration;
+		}
+	}
+
+	isFinite() {
+		return this.repeat > -1;
+	}
+
+	advance(change) {
+		if (this.state >= STATE_AFTER)
+			return;
+
+		this._updateProgress(this._progress + change / this.iterDuration);
+	}
+
+	// should be between 0-1 if outside might change the state
+	seek(pos) {
+		if (this.repeat <= 0) {
+			this._updateProgress(pos);
+		} else {
+		// finite
+			this._updateProgress(pos * (this.repeat + 1));
+		}
+	}
+
+	reverse() {
+		this.reversed = !this.reversed;
+
+		let p = Math.floor(this._progress);
+		p = p + (1 - (this._progress - p));
+
+		this._updateProgress(p);
+	}
+
+	_updateProgress(newProgress) {
+		this._progress = newProgress;
+
+		// since infite repeat can never end let's ignore it
+		if (this.repeat > -1) {
+			const end = this.repeat + 1;
+			if (this._progress > end) {
+				this._progress = end;
+				this.state = STATE_AFTER;
+			} else if (this._progress === end) {
+				this.state = STATE_ENDED;
+			} else {
+				this.state = STATE_RUNNING;
+			}
+		} else {
+			this.state = STATE_RUNNING;
+		}
+
+		// override state if not running
+		if (this._progress < 0) {
+			this._progress = 0;
+			this.state = STATE_BEFORE;
+		} else if (this._progress === 0) {
+			this.state = STATE_START;
+		}
+
+
+		let reversed = this.reversed;
+
+		// calc if we are in a reversed iteration or not
+		if (this.alternate) {
+			let shouldInverse = Math.floor(this._progress) % 2 === 1;
+			if (shouldInverse)
+				reversed = !reversed;
+		}
+
+		// now calculate the position
+
+		this.position = this._progress % 1;
+
+		if (reversed)
+			this.position = 1 - this.position;
+
+		this.position = this.ease(this.position);
+	}
+}
+
+export function newTiming(props) {
+	const nProps = {
+		duration: parseDuration(takeProp(props, 'duration', 1000)),
+		ease: parseEase(takeProp(props, 'ease', null)),
+		repeat: parseRepeat(takeProp(props, 'repeat', false)),
+		alternate: parseAlternate(takeProp(props, 'alternate', true))
+	};
+	// this._delay = parseDelay(takeProp(props, 'delay', 0));
+
+	return new Timing(nProps);
+}
+
+export function parseDuration(dur) {
+	if (typeof dur !== 'number')
+		throw new Error('duration is not a number');
+
+	// convert s to ms
+	dur = Math.round(dur);
+
+	return Math.max(dur, 1);
+}
+
+export function parseEase(ease) {
+	if (ease !== null && typeof ease !== 'function')
+		throw new Error('ease needs to be null or a function');
+
+	return ease;
+}
+
+export function parseRepeat(repeat) {
+	if (
+		repeat !== true && repeat !== false &&
+		(typeof repeat !== 'number' || repeat < 0)
+	)
+		throw new Error('repeat needs to be true|false|0+');
+
+	if (repeat === true)
+		repeat = -1;
+	else if (repeat === false)
+		repeat = 0;
+
+	return repeat;
+}
+
+export function parseDelay(delay) {
+	if (typeof delay !== 'number' || delay < 0)
+		throw new Error('delay needs to be 0+');
+
+	return delay;
+}
+
+export function parseAlternate(alternate) {
+	if (alternate !== true && alternate !== false)
+		throw new Error('alternate needs to be true|false');
+
+	return alternate;
+}
+
+export function parseReversed(reversed) {
+	if (reversed !== true && reversed !== false)
+		throw new Error('reversed needs to be true|false');
+
+	return reversed;
+}

package/src/utils/events.js

@@ -0,0 +1,35 @@
+import Listeners from 'fire/util/listeners.js';
+
+export default class Events {
+	constructor() {
+		this.listeners = new Map;
+	}
+
+	add(event, fn) {
+		let list = this.listeners.get(event);
+		if (!list) {
+			list = new Listeners;
+			this.listeners.set(event, list);
+		}
+
+		return list.add(fn);
+	}
+
+	wait(event) {
+		return new Promise(resolve => {
+			let rm = () => {};
+			const call = a => {
+				rm();
+				resolve(a);
+			};
+			rm = this.add(event, call);
+		});
+	}
+
+	trigger(event, ...args) {
+		let list = this.listeners.get(event);
+		if (!list)
+			return;
+		list.trigger(...args);
+	}
+}

package/src/utils/internal.js

@@ -0,0 +1,7 @@
+
+export function takeProp(props, name, def = null) {
+	const v = props[name] ?? def;
+	delete props[name];
+
+	return v;
+}

package/src/utils/motionpath.js

@@ -0,0 +1,44 @@
+function catmullRom(p0, p1, p2, p3, t, p1Tension, p2Tension) {
+	let v0 = (p2 - p0) * p1Tension;
+	let v1 = (p3 - p1) * p2Tension;
+	let t2 = t * t;
+	let t3 = t2 * t;
+
+	return (2 * p1 - 2 * p2 + v0 + v1) *
+		t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
+}
+
+export function curve(points, tension = 1, opts = {}) {
+	if (points.length <= 1)
+		throw new Error('curve expects at least 2 points');
+
+	let startEndStraight = opts.startEndStraight ?? true;
+	if (startEndStraight) {
+		points[0].straight = true;
+		points[points.length - 1].straight = true;
+	}
+
+	return t => {
+		const segment = Math.floor(t * (points.length - 1));
+		const localT = (t * (points.length - 1)) - segment;
+
+		const p0 = points[Math.max(0, segment - 1)];
+		const p1 = points[segment];
+		const p2 = points[Math.min(points.length - 1, segment + 1)];
+		const p3 = points[Math.min(points.length - 1, segment + 2)];
+
+		let p1Tension = tension;
+		let p2Tension = tension;
+
+		if (p1.straight)
+			p1Tension = 0;
+
+		if (p2.straight)
+			p2Tension = 0;
+
+		return {
+			x: catmullRom(p0.x, p1.x, p2.x, p3.x, localT, p1Tension, p2Tension),
+			y: catmullRom(p0.y, p1.y, p2.y, p3.y, localT, p1Tension, p2Tension)
+		};
+	};
+}

package/src/utils/target.js

@@ -0,0 +1,164 @@
+import Value from './value.js';
+
+const DEBUG_SET_GET = false;
+
+export default class Target {
+	constructor(target) {
+		this.target = target;
+
+		// this might be an object, a dom node
+		// what about arrays?
+	}
+
+	type() {
+		return 'unknown';
+	}
+
+	getValue(name) {
+		throw new Error('cannot get value of ' + name);
+	}
+
+	setValue(name, value) {
+		throw new Error('cannot set value of ' + name);
+	}
+
+	removeValue(name) {
+		throw new Error('cannot remove value of ' + name);
+	}
+
+	getTransformValue(name) {
+		return this.getValue(name);
+	}
+
+	setTransformValue(name, value) {
+		return this.setValue(name, value);
+	}
+
+	removeTransformValue(name) {
+		return this.removeValue(name);
+	}
+
+	getStyleValue(name) {
+		return this.getValue(name);
+	}
+
+	setStyleValue(name, value) {
+		return this.setValue(name, value);
+	}
+
+	removeStyleValue(name) {
+		return this.removeValue(name);
+	}
+
+	apply() {}
+}
+
+export class DomTarget extends Target {
+	constructor(target) {
+		super(target);
+
+		// for the moment 
+
+		this.transformValues = new Map;
+		this.styleValues = new Map;
+		this.values = new Map;
+	}
+
+	type() {
+		return 'dom';
+	}
+
+	getValue(name) {
+		if (DEBUG_SET_GET)
+			console.log('get', name);
+
+		return this.values.get(name);
+	}
+
+	setValue(name, value) {
+		if (DEBUG_SET_GET)
+			console.log('set', name, value);
+
+		this.values.set(name, value);
+	}
+
+	removeValue(name) {
+		this.values.delete(name);
+	}
+
+	getTransformValue(name) {
+		if (DEBUG_SET_GET)
+			console.log('get', name);
+
+		return this.transformValues.get(name);
+	}
+
+	setTransformValue(name, value) {
+		if (DEBUG_SET_GET)
+			console.log('set', name, value);
+
+		this.transformValues.set(name, value);
+	}
+
+	removeTransformValue(name) {
+		this.transformValues.delete(name);
+	}
+
+	getStyleValue(name) {
+		if (DEBUG_SET_GET)
+			console.log('get', name);
+
+		const v = this.styleValues.get(name);
+
+		if (typeof v === 'undefined' || v === null) {
+			// let's try to get it from the dom
+			const style = getComputedStyle(this.target);
+			const styleV = style[name];
+
+			try {
+				const value = Value.parse(styleV);
+				this.styleValues.set(name, value);
+
+				return value;
+			} catch (e) {
+				console.log('could not parse value', styleV);
+				return v;
+			}
+		} else
+			return v;
+	}
+
+	setStyleValue(name, value) {
+		if (DEBUG_SET_GET)
+			console.log('set', name, value);
+
+		this.styleValues.set(name, value);
+	}
+
+	removeStyleValue(name) {
+		this.styleValues.delete(name);
+	}
+
+	apply() {
+		this.target.style.transform = Array.from(this.transformValues.entries())
+			.map(([k, v]) => `${k}(${v})`)
+			.join(' ');
+
+		// style
+		for (const [k, v] of this.styleValues.entries()) {
+			this.target.style[k] = v;
+		}
+
+		// values
+		for (const [k, v] of this.values.entries()) {
+			console.log('what todo with this ' + k);
+		}
+	}
+}
+
+export function newTarget(target) {
+	if (target instanceof HTMLElement || target instanceof SVGElement)
+		return new DomTarget(target);
+
+	throw new Error('unknown target');
+}

package/src/utils/utils.js

@@ -0,0 +1,55 @@
+import { curve } from './motionpath.js';
+
+export { curve };
+
+export function to(to) {
+	return { to };
+}
+
+export function from(from) {
+	return { from };
+}
+
+export function fromTo(from, to) {
+	return { from, to };
+}
+
+// converts some element 
+export function chars(element) {
+	if (element.dataset.processedChars)
+		return Array.from(element.children);
+
+	const chars = element.textContent.split('');
+
+	element.textContent = '';
+	element.dataset.processedChars = 'yes';
+
+	return chars.map(c => {
+		const span = document.createElement('span');
+		span.textContent = c;
+		span.style.display = 'inline-block';
+		element.appendChild(span);
+
+		return span;
+	});
+}
+
+// get the offset to the page
+export function pageOffset(el) {
+	if ('offsetTop' in el) {
+		return {
+			top: el.offsetTop,
+			left: el.offsetLeft,
+			width: el.offsetWidth,
+			height: el.offsetHeight
+		};
+	}
+
+	const rect = el.getBoundingClientRect();
+	return {
+		top: window.scrollY + rect.top,
+		left: window.scrollX + rect.left,
+		width: rect.width,
+		height: rect.height
+	};
+}

package/src/utils/value.js

@@ -0,0 +1,38 @@
+const UNITS = ['px', 'vw', 'vh', 'rem', 'em', 'rem', 'deg', 'rad'];
+
+const REGEX = /^(\d*\.?\d*)(\w*)$/;
+
+export default class Value {
+	constructor(num, unit = null) {
+		this.num = num;
+		this.unit = unit;
+	}
+
+	static parse(v, defUnit = null) {
+		if (typeof v === 'number') {
+			return new Value(v, defUnit);
+		}
+
+		const [_v, num, unit] = REGEX.exec(v);
+
+		if (unit && !UNITS.includes(unit))
+			throw new Error('unknown unit ' + unit);
+
+		return new Value(parseFloat(num), unit ? unit : null);
+	}
+
+	clone(newNum = null) {
+		if (newNum !== null)
+			return new Value(newNum, this.unit);
+		
+		return new Value(this.num, this.unit);
+	}
+
+	cloneAdd(add) {
+		return new Value(this.num + add, this.unit);
+	}
+
+	toString() {
+		return this.num.toFixed(3) + (this.unit ?? '');
+	}
+}