chnobli 0.1.5 → 0.1.6

package/src/responsive/event.js

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

package/src/scroll/event.js

@@ -1,41 +0,0 @@
-export default class ScrollEvent {
-	constructor() {
-		this._listeners = new Set;
-
-		window.addEventListener('scroll', e => this._onScroll(e));
-	}
-
-	static global() {
-		if (typeof window === 'undefined')
-			return null;
-
-		if (typeof window.chnobliScroll === 'undefined')
-			window.chnobliScroll = new ScrollEvent;
-		return window.chnobliScroll;
-	}
-
-	add(fn) {
-		this._listeners.add(fn);
-
-		return {
-			remove: () => {
-				this.remove(fn);
-			}
-		};
-	}
-
-	remove(fn) {
-		this._listeners.delete(fn);
-	}
-
-	_onScroll(_e) {
-		for (const fn of this._listeners) {
-			fn({
-				y: window.scrollY,
-				height: window.innerHeight
-			}, {
-				remove: () => this.remove(fn)
-			});
-		}
-	}
-}

package/src/scroll/public.js

@@ -1,17 +0,0 @@
-import Scroll from './scroll.js';
-
-export default class PublicScroll {
-	/*
-	{
-		start: el | px
-		startView: 'top'
-	}
-	*/
-	constructor(props = {}) {
-		this._inner = new Scroll(props);
-	}
-
-	add(timeline) {
-		this._inner.addTimeline(timeline);
-	}
-}

package/src/stagger/stagger.js

@@ -1,42 +0,0 @@
-/**
- * Staggering allows to have a different value for every target
- * allowing to easely offset each target by a few pixels
- */
-
-function isStagger(value) {
-	return typeof value === 'object' &&
-		value !== null &&
-		typeof value.__isStagger__ === 'function';
-}
-
-export function callStagger(value, i, l) {
-	if (isStagger(value))
-		return value.call(i, l);
-
-	return value;
-}
-
-export function staggerMap(value, fn) {
-	if (isStagger(value))
-		return new Stagger((...args) => fn(value.call(...args)));
-
-	return fn(value);
-}
-
-export default class Stagger {
-	constructor(value) {
-		if (typeof value === 'function') {
-			this.fn = value;
-			return;
-		}
-
-		// if (value === )
-		throw new Error('unknown stagger value ' + value);
-	}
-
-	call(...args) {
-		return this.fn(...args);
-	}
-
-	__isStagger__() {}
-}

package/src/target/domtarget.js

@@ -1,266 +0,0 @@
-import BaseTarget from './basetarget.js';
-import Value from '../values/value.js';
-import StyleValue from '../values/stylevalue.js';
-
-
-export default class DomTarget extends BaseTarget {
-	/**
-	 * target a dom node or svg
-	 * 
-	 * extFns: {getComputedStyle, getRootElement}
-	 */
-	constructor(target, extFns) {
-		super(target);
-
-		this._extFns = extFns;
-
-		// for the moment 
-
-		this.transformValues = new Map;
-		this.styleValues = new Map;
-		this.values = new Map;
-	}
-
-	type() {
-		return 'dom';
-	}
-
-	getValue(name) {
-		return this.values.get(name);
-	}
-
-	setValue(name, value) {
-		this.values.set(name, value);
-	}
-
-	removeValue(name) {
-		this.values.delete(name);
-	}
-
-	getTransformValue(name) {
-		const [fn, idx] = TRANSFORM_PROPS[name] ?? [];
-		if (!fn)
-			return null;
-
-		const r = this.transformValues.get(fn);
-		return r?.[idx ?? 0] ?? null;
-	}
-
-	setTransformValue(name, value) {
-		const [fn, idx] = TRANSFORM_PROPS[name] ?? [];
-		if (!fn)
-			throw new Error('unknown transform ' + name);
-
-		let vals = this.transformValues.get(fn);
-		if (!vals)
-			vals = Array(TRANSFORM_FUNCTIONS[fn].length).fill(null);
-
-		if (idx === null)
-			vals = vals.map(() => value.clone());
-		else
-			vals[idx] = value;
-
-		this.transformValues.set(fn, vals);
-	}
-
-	removeTransformValue(name) {
-		const [fn, idx] = TRANSFORM_PROPS[name] ?? [];
-		if (!fn)
-			return;
-
-		if (idx === null) {
-			this.transformValues.delete(fn);
-			return;
-		}
-
-		let vals = this.transformValues.get(fn);
-		if (!vals)
-			return;
-
-		vals[idx] = null;
-
-		if (vals.every(v => v === null))
-			this.transformValues.delete(fn);
-	}
-
-	getStyleValue(name) {
-		const v = this.styleValues.get(name);
-
-		if (typeof v === 'undefined' || v === null) {
-			// let's try to get it from the dom
-			const style = this._extFns.getComputedStyle(this.target);
-			const styleV = style.getPropertyValue(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;
-			}
-		} else
-			return v;
-	}
-
-	setStyleValue(name, value) {
-		this.styleValues.set(name, value);
-	}
-
-	removeStyleValue(name) {
-		this.styleValues.set(name, undefined);
-	}
-
-	hasClass(name) {
-		return this.target.classList.contains(name);
-	}
-
-	addClass(name) {
-		return this.target.classList.add(name);
-	}
-
-	removeClass(name) {
-		return this.target.classList.remove(name);
-	}
-
-	_getRem() {
-		const rootEl = this._extFns.getRootElement();
-		const style = this._extFns.getComputedStyle(rootEl);
-		const fontSize = Value.parse(style.fontSize, 'px');
-		if (fontSize.unit !== 'px')
-			throw new Error('rem could not be determined');
-
-		return fontSize.num;
-	}
-
-	_convertToPx(name, value) {
-		if (value.num === 0)
-			return new Value(0, 'px');
-
-		switch (value.unit) {
-			case 'px':
-				return value;
-			case 'rem':
-				return new Value(value.num * this._getRem(), 'px');
-			default:
-				throw new Error(
-					`cannot convert ${name} from ${value.unit} to px`
-				);
-		}
-	}
-
-	// value needs to be a unit with pixels
-	_convertFromPx(name, value, unit) {
-		if (value.num === 0)
-			return new Value(0, unit);
-
-		let v;
-		switch (unit) {
-			case 'px':
-				return value;
-
-			case 'rem':
-				return new Value(value.num / this._getRem(), 'rem');
-
-			case '%':
-				v = this.getStyleValue(name).intoValue();
-				if (v.unit !== 'px')
-					throw new Error('cannot get style value of ' + name);
-
-				return new Value((value.num / v.num) * 100, '%');
-
-			default:
-				throw new Error(
-					`cannot convert ${name} from px to ${unit}`
-				);
-		}
-	}
-
-	unifyValues(name, a, b) {
-		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;
-
-		const aPx = this._convertToPx(name, a);
-		const aBUnit = this._convertFromPx(name, aPx, b.unit);
-
-		return [aBUnit, b];
-	}
-
-	apply() {
-		this.target.style.transform = Array.from(this.transformValues.entries())
-			.map(([k, vals]) => {
-				// since we allow null in default Values we now need to make
-				// sure either a value or a default value are set for the
-				// transform function
-
-				const defVals = TRANSFORM_FUNCTIONS[k];
-				if (vals.length !== defVals.length)
-					throw new Error('transform values don\'t match');
-
-				const nArray = Array(vals.length);
-
-				for (let i = 0; i < vals.length; i++) {
-					let val = vals[i];
-
-					if (val === null)
-						val = new Value(defVals[i][0]);
-
-					nArray[i] = val.withDefaultUnit(defVals[i][1]);
-				}
-
-				return `${k}(${nArray.join(',')})`;
-			})
-			.join(' ');
-
-		// style
-		for (const [k, v] of this.styleValues.entries()) {
-			if (v === undefined) {
-				this.target.style.removeProperty(k);
-				// is this a problem?
-				this.styleValues.delete(k);
-			} else {
-				this.target.style.setProperty(k, v.toString());
-			}
-		}
-
-		// values
-		for (const [k, _v] of this.values.entries()) {
-			console.log('what todo with this ' + k);
-		}
-	}
-}
-
-
-const TRANSFORM_PROPS = {
-	'x': ['translate3d', 0],
-	'y': ['translate3d', 1],
-	'z': ['translate3d', 2],
-	'scale': ['scale3d', null],
-	'scaleX': ['scale3d', 0],
-	'scaleY': ['scale3d', 1],
-	'scaleZ': ['scale3d', 2],
-	'rotate': ['rotate3d', null],
-	'rotateX': ['rotate3d', 0],
-	'rotateY': ['rotate3d', 1],
-	'rotateZ': ['rotate3d', 2],
-	'skew': ['skew', 0],
-	'skewX': ['skew', 0],
-	'skewY': ['skew', 1]
-};
-
-const TRANSFORM_FUNCTIONS = {
-	'translate3d': [[0, 'px'], [0, 'px'], [0, 'px']],
-	'scale3d': [[1, null], [1, null], [1, null]],
-	'rotate3d': [[0, 'deg'], [0, 'deg'], [0, 'deg']],
-	'skew': [[0, 'deg'], [0, 'deg']]
-};

package/src/target/target.js

@@ -1,22 +0,0 @@
-import DomTarget from './domtarget.js';
-
-
-export function newTarget(target) {
-	if (typeof window === 'undefined') {
-		if (typeof target.__simulatedDom__ === 'function') {
-			return new DomTarget(target, {
-				getComputedStyle: target.__getComputedStyleFn__(),
-				getRootElement: target.__getRootElementFn__()
-			});
-		}
-	} else {
-		if (target instanceof HTMLElement || target instanceof SVGElement) {
-			return new DomTarget(target, {
-				getComputedStyle: e => window.getComputedStyle(e),
-				getRootElement: () => document.documentElement
-			});
-		}
-	}
-
-	throw new Error('unknown target');
-}

package/src/utils/internal.js

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

package/src/utils/utils.js

@@ -1,107 +0,0 @@
-import { curve } from './motionpath.js';
-
-export { curve };
-
-/**
- * Explicitly tells a property to animate the to value
- */
-export function to(to) {
-	return { to };
-}
-
-/**
- * Explicitly tells a property to animate the from value
- */
-export function from(from) {
-	return { from };
-}
-
-/**
- * Explicitly tells a property to animate with the from and to values
- */
-export function fromTo(from, to) {
-	return { from, to };
-}
-
-/**
- * makes a value reactive to `Timeline::update` calls or resizes
- */
-export function responsive(fn) {
-	return { responsive: fn };
-}
-
-/**
- * Converts an element with text into span with chars
- */
-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 => {
-		if (c.trim().length === 0) {
-			element.appendChild(document.createTextNode(c));
-			return null;
-		}
-
-		const span = document.createElement('span');
-		span.textContent = c;
-		span.style.display = 'inline-block';
-		element.appendChild(span);
-
-		return span;
-	}).filter(c => !!c);
-}
-
-/**
- * Converts an element with text into span with words
- */
-export function words(element) {
-	if (element.dataset.processedWords)
-		return Array.from(element.children);
-
-	const words = element.textContent.split(/(\s+)/);
-
-	element.textContent = '';
-	element.dataset.processedWords = 'yes';
-
-	return words.map(word => {
-		if (word.trim().length === 0) {
-			element.appendChild(document.createTextNode(word));
-			return null;
-		}
-
-		const span = document.createElement('span');
-		span.textContent = word;
-		span.style.display = 'inline-block';
-		element.appendChild(span);
-
-		return span;
-	}).filter(w => !!w);
-}
-
-/**
- * get the offset to the current page 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/values/stylevalue.js

@@ -1,148 +0,0 @@
-import Value from './value.js';
-import ColorValue from './colorvalue.js';
-
-const AT_THE_END_VALUES = ['none', 'hidden'];
-
-/**
- * A value from a style property
- * 
- * might be a textual representation like none|auto|block|var(--abc)
- * might be a value with unit or not
- * might be multiple values `10 20px 4rem`
- * 
- * values like hidden|none|null|undefined are market as at the end
- * which means they should be set at the end
- */
-export default class StyleValue {
-	/**
-	 * Creates a style value
-	 *
-	 * ## value must be one of the following
-	 * - string (meaning this is of kind text)
-	 * - number (meaning this is of kind values with one value)
-	 * - array (meaning this is of kind values and each array element needs to
-	 * be a Value)
-	 * - ColorValue
-	 */
-	constructor(value) {
-		if (typeof value === 'string') {
-			this.kind = 'text';
-			value = value.trim();
-		} else if (typeof value === 'number') {
-			this.kind = 'values';
-			value = [Value.parse(value)];
-		} else if (Array.isArray(value)) {
-			this.kind = 'values';
-		} else if (value instanceof ColorValue) {
-			this.kind = 'color';
-		} else {
-			throw new Error('unknown style value ' + value);
-		}
-
-		this.values = value;
-
-		/**
-		 * If this is true the value should be set at the end of a animation
-		 * this only works with kind === text
-		 */
-		this.textAtTheEnd = this.kind === 'text'
-			? AT_THE_END_VALUES.includes(this.values)
-			: false;
-	}
-
-
-	static parse(v) {
-		if (typeof v === 'number')
-			return new StyleValue(v);
-
-		if (Array.isArray(v)) {
-			const val = v.map(v => Value.parse(v));
-			return new StyleValue(val);
-		}
-
-		if (typeof v !== 'string')
-			throw new Error('expected a string as style value ' + v);
-
-		// let's first try to make it a color
-		if (ColorValue.mightBeAColor(v))
-			return new StyleValue(ColorValue.parse(v));
-
-		const split = v.split(' ').map(v => v.trim()).filter(v => !!v);
-		if (split.length === 0)
-			throw new Error('style value cannot be empty');
-
-		if (split.length === 1) {
-			try {
-				const val = Value.parse(split[0]);
-				return new StyleValue([val]);
-			} catch (e) {
-				// console.log('failed to parse first style value ', e);
-				return new StyleValue(split[0]);
-			}
-		}
-
-		return new StyleValue(split.map(v => Value.parse(v)));
-	}
-
-	/// only works if the kind is values
-	get length() {
-		if (this.kind !== 'values')
-			throw new Error('only works with kind values');
-
-		return this.values.length;
-	}
-
-	extendToLength(length) {
-		if (this.length >= length)
-			return;
-
-		this.values = Array(length).fill(this.values).flat();
-	}
-
-	/**
-	 * Throws if the this does not contain exactly one value
-	 */
-	intoValue() {
-		if (this.length !== 1)
-			throw new Error('style value does not contain only one value');
-
-		return this.values[0];
-	}
-
-	clone() {
-		if (this.kind === 'text')
-			return new StyleValue(this.values);
-
-		if (this.kind === 'color')
-			return new StyleValue(this.values.clone());
-
-		return new StyleValue(this.values.map(v => v.clone()));
-	}
-
-	/// if this is called with a text value nothing happens
-	withDefaultUnit(unit) {
-		if (this.kind === 'text')
-			return new StyleValue(this.values);
-
-		if (this.kind === 'color')
-			return new StyleValue(this.values.clone());
-
-		return new StyleValue(this.values.map(v => v.withDefaultUnit(unit)));
-	}
-
-	toString() {
-		switch (this.kind) {
-			case 'text':
-				return this.values;
-
-			case 'color':
-				return this.values.toString();
-
-			case 'values':
-				return this.values.join(' ');
-
-			default:
-				throw new Error('unknown kind ' + this.kind);
-		}
-	}
-}