chnobli 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chnobli",
-	"version": "0.1.3",
+	"version": "0.1.5",
 	"author": "Sören Meier <info@soerenmeier.ch>",
 	"type": "module",
 	"scripts": {

package/src/animation/property.js

@@ -144,8 +144,8 @@ export class TransformXY extends Property {
 	}
 
 	getValue(target) {
-		const x = target.getTransformValue('translateX');
-		const y = target.getTransformValue('translateY');
+		const x = target.getTransformValue('x');
+		const y = target.getTransformValue('y');
 
 		const def = this.defaultValue();
 
@@ -156,13 +156,13 @@ export class TransformXY extends Property {
 	}
 
 	setValue(target, val) {
-		target.setTransformValue('translateX', val.x.withDefaultUnit('px'));
-		target.setTransformValue('translateY', val.y.withDefaultUnit('px'));
+		target.setTransformValue('x', val.x.withDefaultUnit('px'));
+		target.setTransformValue('y', val.y.withDefaultUnit('px'));
 	}
 
 	removeValue(target) {
-		target.removeTransformValue('translateX');
-		target.removeTransformValue('translateY');
+		target.removeTransformValue('x');
+		target.removeTransformValue('y');
 	}
 }
 

package/src/tests/properties.test.js

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import TestTicker from '../timing/testticker.js';
 import TestResponsiveEvent from '../responsive/testevent.js';
 import { animate, timeline } from '../chnobli.js';
-import { responsive } from '../utils/utils.js';
+import { responsive, curve } from '../utils/utils.js';
 import { el } from '../target/testdomnode.js';
 import { timeout } from 'fire/util.js';
 
@@ -147,4 +147,32 @@ describe('properties', () => {
 		respEv.resize();
 		expect(div.style.width).toBe('33.333px');
 	});
+
+	it('xy', () => {
+		const ticker = new TestTicker;
+
+		const div = el();
+		const tl = timeline()
+			.add(div, {
+				xy: curve([
+					{ x: 0, y: 10 },
+					{ x: 100, y: 10 },
+					{ x: 50, y: 20 }
+				]),
+				duration: 10
+			});
+
+		tl.play();
+		ticker.run(0);
+		expect(div.style.transform)
+			.toBe('translate3d(0.000px,10.000px,0.000px)');
+
+		ticker.run(5);
+		expect(div.style.transform)
+			.toBe('translate3d(100.000px,10.000px,0.000px)');
+
+		ticker.run();
+		expect(div.style.transform)
+			.toBe('translate3d(50.000px,20.000px,0.000px)');
+	});
 });

package/src/tests/timeline.test.js

@@ -231,4 +231,43 @@ describe('timeline', () => {
 		ticker.run();
 		expect(endCounter).toBe(4);
 	});
+
+	it('nested timeline', () => {
+		const ticker = new TestTicker;
+
+		const target = el();
+		const tl = timeline()
+			.add(target, {
+				width: 50,
+				duration: 10
+			})
+			.nest(tl => {
+				tl.add(target, {
+					opacity: 0,
+					duration: 5
+				})
+				.add(target, {
+					opacity: 1,
+					duration: 5
+				});
+			})
+			.add(target, {
+				height: 50,
+				duration: 10
+			})
+			.play();
+
+		ticker.run(0);
+		expect(target.style.width).toBe('0.000px');
+		ticker.run(10);
+		expect(target.style.width).toBe('50.000px');
+		expect(target.style.opacity).toBe('1.000');
+		ticker.run(5);
+		expect(target.style.opacity).toBe('0.000');
+		ticker.run(5);
+		expect(target.style.opacity).toBe('1.000');
+		expect(target.style.height).toBe('0.000px');
+		ticker.run(10);
+		expect(target.style.height).toBe('50.000px');
+	});
 });

package/src/timeline/nested.js

@@ -0,0 +1,61 @@
+import { takeProp } from '../utils/internal.js';
+import Timeline from './timeline.js';
+import { timelineAdd } from './public.js';
+
+
+export default class NestedTimeline {
+	constructor(props = {}) {
+		this._defaults = takeProp(props, 'defaults', {});
+
+		if ('duration' in props)
+			throw new Error('a timeline does not accept a duration');
+
+		this._inner = new Timeline(props);
+	}
+
+	/**
+	 * Set's properties
+	 * offset can be staggered, a number, a label or a string `+=10`
+	 */
+	set(targets, props, offset = null) {
+		// for the moment let's just add as usual but set the duration to 0
+		return this.add(targets, { ...props, duration: 0 }, offset);
+	}
+
+	/**
+	 * Add an animation to the timeline
+	 * 
+	 * offset can be staggered, a number, a label or a string `+=10`
+	 */
+	add(targets, props, offset = null) {
+		timelineAdd(this, targets, props, offset);
+
+		return this;
+	}
+
+	/**
+	 * Adds a label at to the current nOffse
+	 *
+	 * This label can then be used in offsets
+	 */
+	label(label, offset = null) {
+		this._inner.label(label, offset);
+
+		return this;
+	}
+
+	/**
+	 * Allows to nest timelines
+	 * 
+	 * fn: (timeline)
+	 */
+	nest(fn, opts = {}, offset = null) {
+		const tl = new NestedTimeline(opts);
+
+		fn(tl);
+
+		this._inner.addTimeline(tl._inner, offset);
+
+		return this;
+	}
+}

package/src/timeline/public.js

@@ -4,6 +4,7 @@ import { STATE_ENDED } from '../timing/timing.js';
 import { callStagger } from '../stagger/stagger.js';
 import Events from '../utils/events.js';
 import ResponsiveEvent from '../responsive/event.js';
+import NestedTimeline from './nested.js';
 
 const STATE_PAUSED = 0;
 const STATE_RENDER_ONCE = 1;
@@ -59,28 +60,7 @@ export default class PublicTimeline {
 	 * offset can be staggered, a number, a label or a string `+=10`
 	 */
 	add(targets, props, offset = null) {
-		if (Array.from(targets).length === 0)
-			targets = [targets];
-		else
-			targets = Array.from(targets);
-
-		let i = -1;
-		for (const target of targets) {
-			i++;
-
-			const nProps = {
-				...this._defaults,
-				...props
-			};
-
-			for (const prop in nProps) {
-				nProps[prop] = callStagger(nProps[prop], i, targets.length);
-			}
-
-			const nOffset = callStagger(offset, i);
-
-			this._inner.add(target, nProps, nOffset, i);
-		}
+		timelineAdd(this, targets, props, offset);
 
 		return this;
 	}
@@ -96,6 +76,21 @@ export default class PublicTimeline {
 		return this;
 	}
 
+	/**
+	 * Allows to nest timelines
+	 * 
+	 * fn: (timeline)
+	 */
+	nest(fn, opts = {}, offset = null) {
+		const tl = new NestedTimeline(opts);
+
+		fn(tl);
+
+		this._inner.addTimeline(tl._inner, offset);
+
+		return this;
+	}
+
 	/**
 	 * Adds a responsive function call which get's called before the responsive
 	 * functions in properties
@@ -330,4 +325,33 @@ export default class PublicTimeline {
 		// 	return;
 		this._inner.update();
 	}
+}
+
+/**
+ * Add an animation to the timeline
+ * tl needs to have _defaults, and _inner
+ */
+export function timelineAdd(tl, targets, props, offset = null) {
+	if (Array.from(targets).length === 0)
+		targets = [targets];
+	else
+		targets = Array.from(targets);
+
+	let i = -1;
+	for (const target of targets) {
+		i++;
+
+		const nProps = {
+			...tl._defaults,
+			...props
+		};
+
+		for (const prop in nProps) {
+			nProps[prop] = callStagger(nProps[prop], i, targets.length);
+		}
+
+		const nOffset = callStagger(offset, i);
+
+		tl._inner.add(target, nProps, nOffset, i);
+	}
 }

package/src/timeline/timeline.js

@@ -40,6 +40,12 @@ export default class Timeline {
 		this._renderQueue = null;
 	}
 
+	isFinite() {
+		return !this.entries.some(e => {
+			return e.type === 'animation' && !e.value.isFinite();
+		});
+	}
+
 	// relative represents the point which the offset should be taken
 	// if relative 1 is done the offset will be taken from the previous - 1
 	add(targets, props, offset = null, relative = 0) {
@@ -58,6 +64,18 @@ export default class Timeline {
 		return this;
 	}
 
+	addTimeline(tl, offset = null) {
+		if (!tl.isFinite())
+			throw new Error('the animation needs to be finite');
+
+		this.entries.push({
+			type: 'timeline',
+			value: tl,
+			offset: new Offset(offset),
+			relativeOffset: 0
+		});
+	}
+
 	label(label, offset = null) {
 		this.entries.push({
 			type: 'label',
@@ -123,6 +141,11 @@ export default class Timeline {
 			if (entry.type === 'animation')
 				end += entry.value.duration;
 
+			if (entry.type === 'timeline') {
+				entry.value.init();
+				end += entry.value.timing.duration;
+			}
+
 			if (entry.type === 'label')
 				labels[entry.value] = start;
 
@@ -148,7 +171,9 @@ export default class Timeline {
 		// initialization means
 		// we need to define which value should be used as the from and the to
 		// value
-		const startOrdered = this.entries.filter(e => e.type === 'animation');
+		const startOrdered = this.entries.filter(e => {
+			return e.type === 'animation' || e.type === 'timeline';
+		});
 		startOrdered.sort((a, b) => a.start - b.start);
 
 		for (let i = 0; i < startOrdered.length; i++) {
@@ -207,7 +232,7 @@ export default class Timeline {
 		const pos = this.timing.positionMsUnbounded();
 
 		for (const entry of this.entries) {
-			if (entry.type !== 'animation')
+			if (entry.type !== 'animation' && entry.type !== 'timeline')
 				continue;
 
 			const animation = entry.value;
@@ -251,6 +276,11 @@ export default class Timeline {
 
 	destroy() {
 		for (const entry of this.entries) {
+			if (entry.type === 'timeline') {
+				entry.value.destroy();
+				continue
+			}
+
 			if (entry.type !== 'animation')
 				continue;
 

package/src/utils/utils.js

@@ -43,13 +43,45 @@ export function chars(element) {
 	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);
 }
 
 /**