chnobli 0.1.2 → 0.1.4

package/src/tests/usecases.test.js

@@ -0,0 +1,64 @@
+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 { el } from '../target/testdomnode.js';
+
+describe('usecases', () => {
+	it('accordion', () => {
+		const ticker = new TestTicker;
+		const respEv = new TestResponsiveEvent;
+
+		const itm = el();
+		const ctn = el();
+		ctn.computedStyle.maxHeight = 'none';
+		ctn.scrollHeight = '100px';
+
+		const tl = timeline()
+			.set(itm, {
+				cls: 'open'
+			})
+			.add(ctn, {
+				maxHeight: responsive(el => el.scrollHeight),
+				duration: 100
+			});
+
+		tl.play();
+		ticker.run(1);
+		expect(ctn.style.maxHeight).toBe('1.000px');
+		expect(itm.classList.contains('open')).toBe(true);
+
+		// // on click
+		tl.play();
+		ticker.run(4);
+		expect(ctn.style.maxHeight).toBe('5.000px');
+		expect(itm.classList.contains('open')).toBe(true);
+
+		ticker.run();
+		expect(ctn.style.maxHeight).toBe('100.000px');
+		expect(itm.classList.contains('open')).toBe(true);
+
+		// now a resize comes
+		ctn.scrollHeight = '200px';
+		tl.update();
+		expect(ctn.style.maxHeight).toBe('200.000px');
+		expect(itm.classList.contains('open')).toBe(true);
+
+		// on click
+		tl.reverse();
+		tl.play();
+		ticker.run(12);
+		expect(ctn.style.maxHeight).toBe('176.000px');
+		expect(itm.classList.contains('open')).toBe(true);
+
+		ctn.scrollHeight = '150px';
+		respEv.resize(1000, 1000);
+		expect(ctn.style.maxHeight).toBe('132.000px');
+		expect(itm.classList.contains('open')).toBe(true);
+
+		ticker.run();
+		expect(ctn.style.maxHeight).toBe(undefined);
+		expect(itm.classList.contains('open')).toBe(false);
+	});
+});

package/src/tests/values.test.js

@@ -0,0 +1,162 @@
+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, fromTo } from '../utils/utils.js';
+import { el, getRootElement } from '../target/testdomnode.js';
+import { timeout } from 'fire/util.js';
+
+describe('values', () => {
+	it('rem unit', () => {
+		const ticker = new TestTicker;
+
+		const root = getRootElement();
+		root.computedStyle.fontSize = '13px';
+
+		const div = el();
+		const tl = timeline()
+			.add(div, {
+				width: '10rem',
+				duration: 5
+			})
+			.add(div, {
+				width: 20,
+				duration: 5
+			})
+			.play();
+
+		ticker.run(0);
+		expect(div.style.width).toBe('0.000rem');
+
+		ticker.run();
+		expect(div.style.width).toBe('20.000rem');
+	});
+
+	it('percent unit', () => {
+		const ticker = new TestTicker;
+
+		const div = el();
+		div.computedStyle.width = '10px';
+		const tl = timeline()
+			.add(div, {
+				x: '10%',
+				width: '50%',
+				duration: 10
+			})
+			.play();
+
+		ticker.run(0);
+		expect(div.style.transform).toBe('translate3d(0.000%,0.000px,0.000px)');
+		expect(div.style.width).toBe('100.000%');
+
+		ticker.run();
+		expect(div.style.transform).toBe('translate3d(10.000%,0.000px,0.000px)');
+		expect(div.style.width).toBe('50.000%');
+	});
+
+	it('multiple values', () => {
+		const ticker = new TestTicker;
+
+		const root = getRootElement();
+		root.computedStyle.fontSize = '10px';
+
+		const div = el();
+		div.computedStyle.padding = '5px';
+		const tl = timeline()
+			.add(div, {
+				padding: '10px 20rem',
+				duration: 10
+			})
+			.play();
+
+		ticker.run(0);
+		expect(div.style.padding).toBe('5.000px 0.500rem');
+
+		ticker.run();
+		expect(div.style.padding).toBe('10.000px 20.000rem');
+	});
+
+	it('display', () => {
+		const ticker = new TestTicker;
+
+		const div = el();
+		div.computedStyle.display = 'block';
+		const tl = timeline()
+			.add(div, {
+				display: 'none',
+				position: from('absolute'),
+				visibility: fromTo('hidden', 'visible'),
+				duration: 10
+			})
+			.play();
+
+		ticker.run(0);
+		expect(div.style.display).toBe(undefined);
+		expect(div.style.position).toBe('absolute');
+		expect(div.style.visibility).toBe('hidden');
+
+		ticker.run();
+		expect(div.style.display).toBe('none');
+		expect(div.style.position).toBe(undefined);
+		expect(div.style.visibility).toBe('visible');
+
+		tl.seek(-1);
+		ticker.run();
+		expect(div.style.display).toBe(undefined);
+		expect(div.style.position).toBe(undefined);
+		expect(div.style.visibility).toBe(undefined);
+	});
+
+	it('colors', () => {
+		const ticker = new TestTicker;
+		const div = el();
+		div.computedStyle.color = 'rgb(120, 130, 20)';
+
+		const tl = timeline()
+			.add(div, {
+				color: 'black',
+				backgroundColor: 'hsl(10, 80%, 40%)',
+				duration: 10
+			})
+			.play();
+
+		ticker.run(0);
+		expect(div.style.color).toBe('rgba(120, 130, 20, 1.000)');
+		expect(div.style.backgroundColor).toBe('rgba(255, 255, 255, 1.000)');
+
+		ticker.run(5);
+		expect(div.style.color).toBe('rgba(60, 65, 10, 1.000)');
+		expect(div.style.backgroundColor).toBe('rgba(220, 152, 138, 1.000)');
+
+		ticker.run();
+		expect(div.style.color).toBe('rgba(0, 0, 0, 1.000)');
+		expect(div.style.backgroundColor).toBe('rgba(184, 48, 20, 1.000)');
+	});
+
+	it('css-vars', () => {
+		const ticker = new TestTicker;
+		const div = el();
+		div.computedStyle['--color'] = 'rgb(120, 130, 20)';
+		div.computedStyle['--border'] = '20px';
+
+		const tl = timeline()
+			.add(div, {
+				'--color': 'black',
+				'--border': '1px 20px',
+				duration: 10
+			})
+			.play();
+
+		ticker.run(0);
+		expect(div.style['--color']).toBe('rgba(120, 130, 20, 1.000)');
+		expect(div.style['--border']).toBe('20.000px 20.000px');
+
+		ticker.run(5);
+		expect(div.style['--color']).toBe('rgba(60, 65, 10, 1.000)');
+		expect(div.style['--border']).toBe('10.500px 20.000px');
+
+		ticker.run();
+		expect(div.style['--color']).toBe('rgba(0, 0, 0, 1.000)');
+		expect(div.style['--border']).toBe('1.000px 20.000px');
+	});
+});

package/src/timeline/public.js

@@ -1,8 +1,9 @@
 import { takeProp } from '../utils/internal.js';
 import Timeline from './timeline.js';
-import { STATE_BEFORE, STATE_AFTER } from '../timing/timing.js';
+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';
 
 const STATE_PAUSED = 0;
 const STATE_RENDER_ONCE = 1;
@@ -11,20 +12,52 @@ const STATE_PLAYING = 2;
 export default class PublicTimeline {
 	constructor(props = {}) {
 		this._defaults = takeProp(props, 'defaults', {});
+		this._responsive = takeProp(props, 'responsive', true);
+
+		if (typeof this._responsive !== 'boolean')
+			throw new Error('responsive can only be a boolean');
+		if ('duration' in props)
+			throw new Error('a timeline does not accept a duration');
+
 		this._inner = new Timeline(props);
 
 		// 'start', 'end'
 		this._events = new Events;
 
 		this._state = STATE_PAUSED;
+		this._renderedOnce = false;
 		this._runningTicker = null;
+		this._responsiveBlocks = [];
+		if (this._responsive) {
+			this._responsiveEvent = ResponsiveEvent.global()?.add((...args) => {
+				this._onResponsive(...args);
+			});
+
+			// setup callback so we can notify our listeners
+			this._inner.setBeforeResponsiveFn(() => {
+				this._responsiveBlocks.forEach(block => {
+					block.responsive();
+				});
+			});
+		} else {
+			this._responsiveEvent = null;
+		}
 	}
 
+	/**
+	 * 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) {
 		if (Array.from(targets).length === 0)
 			targets = [targets];
@@ -52,12 +85,41 @@ export default class PublicTimeline {
 		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;
 	}
 
+	/**
+	 * Adds a responsive function call which get's called before the responsive
+	 * functions in properties
+	 */
+	addResponsive(responsive) {
+		if (!this._responsiveEvent)
+			throw new Error('this timeline is not responsive');
+
+		if (Array.isArray(responsive)) {
+			responsive.forEach(resp => this.addResponsive(resp));
+			return this;
+		}
+
+		if (typeof responsive.responsive !== 'function')
+			throw new Error('expected a responsive() function');
+
+		this._responsiveBlocks.push(responsive);
+
+		return this;
+	}
+
+	/**
+	 * Starts to play the timeline if it hasn't started
+	 */
 	play() {
 		if (this._state === STATE_PLAYING)
 			return;
@@ -69,6 +131,9 @@ export default class PublicTimeline {
 		return this;
 	}
 
+	/**
+	 * Pause the timeline at the current position
+	 */
 	pause() {
 		if (this._state === STATE_PAUSED)
 			return;
@@ -78,7 +143,25 @@ export default class PublicTimeline {
 		this._stopTicker();
 	}
 
-	// 0-1
+	/**
+	 * Seeks to a position in the timeline
+	 */
+	seekMs(ms) {
+		this._inner.init();
+
+		this._inner.seekMs(ms);
+
+		if (this._state !== STATE_PLAYING)
+			this._state = STATE_RENDER_ONCE;
+
+		this._startTicker();
+	}
+
+	/**
+	 * Seeks to a normalized position in the timeline
+	 * 
+	 * @param pos = number between 0 and 1
+	 */
 	seek(pos) {
 		this._inner.init();
 
@@ -90,23 +173,94 @@ export default class PublicTimeline {
 		this._startTicker();
 	}
 
+	// seek in Range (useful for scroll timelines)
+	// seek(startOffset, endOffset, pos)
+
+	/**
+	 * Resets the current timeline to the start
+	 * without changing anything
+	 */
 	reset() {
 		this._inner.seek(0);
 	}
 
+	/**
+	 * Resets every used prop to it's previous value
+	 */
+	resetProps() {
+		const reversed = this._inner.timing.reverse;
+		this._inner.timing.reverse = false;
+		this._inner.seek(-1);
+		this._inner.render();
+		this._inner.ticker.applyTargets();
+
+		this._inner.timing.reverse = reversed;
+		this._inner.seek(-1);
+	}
+
+	/**
+	 * Recalculates all values this should be called for example after a resize
+	 */
+	update() {
+		this._inner.update();
+	}
+
+	/**
+	 * Returns wether the timeline is set to reversed
+	 */
+	isReversed() {
+		return this._inner.timing.reversed;
+	}
+
+	/**
+	 * Set's the timeline to a specific direction
+	 */
+	setReversed(reversed) {
+		if (this.isReversed() == reversed)
+			return;
+		this.reverse();
+	}
+
+	/**
+	 * Reverses the order of the current timeline
+	 */
 	reverse() {
 		this._inner.timing.reverse();
 	}
 
-	// start, update, end -> () => // remove Event
+	/**
+	 * Listen on events
+	 * 
+	 * returns a function to remove the event listener
+	 * 
+	 * ## Events
+	 * 
+	 * ### end
+	 * Get's executed once the timeline comes to the end
+	 * Does not get executed during seeking
+	 * 
+	 */
 	on(event, fn) {
 		return this._events.add(event, fn);
 	}
 
+	// not wroking
 	onPromise(event) {
 		return this._events.wait(event);
 	}
 
+	/**
+	 * Destroys this timeline and resets all props
+	 */
+	destroy() {
+		this._stopTicker();
+		this._inner.destroy();
+		this._events.destroy();
+		this._responsiveEvent?.remove();
+		this._responsiveBlocks = [];
+		this._inner = null;
+	}
+
 	_startTicker() {
 		if (this._runningTicker)
 			return;
@@ -114,16 +268,30 @@ export default class PublicTimeline {
 		this._inner.init();
 
 		this._runningTicker = this._inner.ticker.add(change => {
-			if (this._inner.timing.state === STATE_BEFORE) {
-				this._events.trigger('start');
-			}
+			if (this._inner.timing.state >= STATE_ENDED) {
+				if (!this._renderedOnce) {
+					this._renderedOnce = true;
+					this._inner.render();
+				}
 
-			if (this._inner.timing.state === STATE_AFTER) {
+				if (this._state === STATE_PLAYING)
+					this._events.trigger('end');
+
+				this._state = STATE_PAUSED;
 				this._stopTicker();
-				this._events.trigger('end');
-				return;
+				return
 			}
 
+			// if (this._inner.timing.state <= STATE_START) {
+			// 	this._events.trigger('start');
+			// }
+
+			// if (this._inner.timing.state >= STATE_ENDED) {
+			// 	this._stopTicker();
+			// 	this._events.trigger('end');
+			// 	return;
+			// }
+
 			if (this._state === STATE_PLAYING)
 				this._inner.advance(change);
 
@@ -131,6 +299,15 @@ export default class PublicTimeline {
 
 			this._inner.render();
 
+			if (this._inner.timing.state >= STATE_ENDED) {
+				if (this._state === STATE_PLAYING)
+					this._events.trigger('end');
+
+				this._state = STATE_PAUSED;
+				this._stopTicker();
+				return
+			}
+
 			// we rendered once let's stop
 			if (this._state === STATE_RENDER_ONCE) {
 				this._state = STATE_PAUSED;
@@ -147,8 +324,10 @@ export default class PublicTimeline {
 		this._runningTicker = null;
 	}
 
-	// update() {
-	// 	console.log('render');
-	// 	this._inner.render();
-	// }
+	_onResponsive(_obj) {
+		// // make sure we don't render something if we never did
+		// if (!this._renderedOnce)
+		// 	return;
+		this._inner.update();
+	}
 }

package/src/timeline/timeline.js

@@ -1,11 +1,17 @@
 import { takeProp } from '../utils/internal.js';
 import Timing, {
 	parseEase, parseRepeat, parseAlternate, parseReversed,
-	STATE_RUNNING
+	STATE_BEFORE, STATE_ENDED
 } from '../timing/timing.js';
 import Ticker from '../timing/ticker.js';
 import Animation from '../animation/animation.js';
 
+/**
+ * Timeline is the most versatile class
+ * 
+ * A timeline can contain multiple animation, ordered one after the other or
+ * offset.
+ */
 export default class Timeline {
 	/*
 	{
@@ -29,6 +35,7 @@ export default class Timeline {
 		// { type: label|animation, value: {}, offset, start: x, end: y, render }
 		this.entries = [];
 
+		this._beforeResponsiveFn = () => {};
 		this._initialized = false;
 		this._renderQueue = null;
 	}
@@ -62,12 +69,23 @@ export default class Timeline {
 		return this;
 	}
 
+	// set's a function which get's called before any responsive call
+	setBeforeResponsiveFn(fn) {
+		this._beforeResponsiveFn = fn;
+	}
+
 	advance(change) {
 		this.timing.advance(change);
 
 		this._updateTimings();
 	}
 
+	seekMs(ms) {
+		this.timing.seekMs(ms);
+
+		this._updateTimings();
+	}
+
 	seek(pos) {
 		this.timing.seek(pos);
 
@@ -116,43 +134,44 @@ export default class Timeline {
 
 		this.timing.setDuration(duration);
 
-		this._initAnimations();
+		this._beforeResponsiveFn();
 
-		// console.log(this.entries.map(e => e.value._props[0]));
+		this._initAnimations();
 	}
 
-	_initAnimations() {
-		// we don't won't to have a reversed timing
+	_initAnimations(reset = false) {
+		// we don't wan't to have a reversed timing
 		const reversed = this.timing.reversed;
 		this.timing.reversed = false;
 
-		// now initialize all animtaions
+		// now initialize all animations
+		// 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');
 		startOrdered.sort((a, b) => a.start - b.start);
 
 		for (let i = 0; i < startOrdered.length; i++) {
 			const entry = startOrdered[i];
 
-			this.timing.seek(entry.start / this.timing.iterDuration);
+			this.timing.seekMs(entry.start);
 
-			const pos = this.timing.position * this.timing.iterDuration;
+			const pos = this.timing.positionMs();
 
 			// seek all previous and render
 			for (let y = 0; y < i; y++) {
 				const prevEntry = startOrdered[y];
 				const prevAnimation = prevEntry.value;
 
-				const p = (pos - prevEntry.start) / prevAnimation.duration;
-
-				prevAnimation.seek(p);
+				prevAnimation.seekMs(pos - prevEntry.start);
 				prevAnimation.render();
 			}
 
-			entry.value.init();
+			entry.value.init(reset);
 		}
 
-		this.timing.seek(-1);
 		this.timing.reversed = reversed;
+		this.timing.seek(-1);
 		startOrdered.forEach(e => {
 			e.value.seek(-1);
 			e.value.render();
@@ -185,29 +204,64 @@ export default class Timeline {
 			active: []
 		};
 
-		const pos = this.timing.position * this.timing.iterDuration;
+		const pos = this.timing.positionMsUnbounded();
 
 		for (const entry of this.entries) {
 			if (entry.type !== 'animation')
 				continue;
 
 			const animation = entry.value;
+			animation.seekMs(pos - entry.start);
 
-			const p = (pos - entry.start) / animation.duration;
-
-			const prevState = animation.timing.state;
-
-			animation.seek(p);
-
-			if (p > 1) {
+			if (animation.timing.state >= STATE_ENDED) {
 				this._renderQueue.passed.push(animation);
-			} else if (p < 0) {
+			} else if (animation.timing.state <= STATE_BEFORE) {
 				this._renderQueue.upcoming.push(animation);
 			} else {
 				this._renderQueue.active.push(animation);
 			}
 		}
 	}
+
+	update() {
+		if (!this._initialized)
+			return;
+
+		const pos = this.timing.savePosition();
+		const reversed = this.timing.reversed;
+		this.timing.reversed = false;
+
+		this.timing.seek(-1);
+		this._updateTimings();
+		this.render();
+		this.ticker.applyTargets();
+
+		this._beforeResponsiveFn();
+
+		// we now have removed every style we set
+		// we should be able to recalculate everything now
+		this._initAnimations(true);
+
+		this.timing.reversed = reversed;
+		this.timing.restorePosition(pos);
+		this._updateTimings();
+		this.render();
+		this.ticker.applyTargets();
+	}
+
+	destroy() {
+		for (const entry of this.entries) {
+			if (entry.type !== 'animation')
+				continue;
+
+			const animation = entry.value;
+			animation.destroy();
+		}
+
+		this.entries = [];
+		this._beforeResponsiveFn = null;
+		this.ticker.applyTargets();
+	}
 }