chnobli 0.1.2 → 0.1.3

package/src/tests/timeline.test.js

@@ -0,0 +1,234 @@
+import { describe, expect, it } from 'vitest';
+import TestTicker from '../timing/testticker.js';
+import { animate, timeline } from '../chnobli.js';
+import { el } from '../target/testdomnode.js';
+
+describe('timeline', () => {
+	it('empty timeline', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		tl.play();
+		const finished = ticker.run();
+		expect(finished).toBe(true);
+	});
+
+	it('single timeline', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.play();
+
+		ticker.run(0);
+		expect(target.style.transform)
+			.toBe('translate3d(0.000px,0.000px,0.000px)');
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe('');
+	});
+
+	it('timeline set', () => {
+		const ticker = new TestTicker;
+
+		const target = el();
+		const tl = timeline()
+			.set(target, {
+				x: 10
+			});
+		tl.play();
+
+		ticker.run(0);
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+	});
+
+	it('offsetTimeline timeline', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10
+		})
+		tl.play();
+
+		ticker.run(10);
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+		ticker.run(1);
+		expect(target.style.transform)
+			.toBe('translate3d(11.000px,0.000px,0.000px)');
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+	});
+
+	it('timeline seeking', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10
+		})
+
+		tl.seekMs(10);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.seekMs(11);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(11.000px,0.000px,0.000px)');
+
+		tl.seekMs(20);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+
+		tl.seekMs(8);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(8.000px,0.000px,0.000px)');
+	});
+
+	it('seeking after', () => {
+		const ticker = new TestTicker;
+
+		const target = el();
+		const ani = animate(target, {
+			autoplay: false,
+			duration: 10,
+			x: 10
+		});
+		ani.seek(2);
+
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+	});
+
+	it('timeline controls', () => {
+		const ticker = new TestTicker;
+
+		const tl = timeline();
+		const target = el();
+		tl.add(target, {
+			x: 10,
+			duration: 10
+		});
+		tl.add(target, {
+			x: 20,
+			duration: 10
+		})
+
+		tl.seekMs(10);
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.play();
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+
+		tl.reset();
+		tl.play();
+		ticker.run(10);
+		expect(target.style.transform)
+			.toBe('translate3d(10.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		ticker.run(5);
+		expect(target.style.transform)
+			.toBe('translate3d(5.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		ticker.run();
+		expect(target.style.transform)
+			.toBe('translate3d(20.000px,0.000px,0.000px)');
+
+		tl.reverse();
+		tl.play();
+		ticker.run();
+		expect(target.style.transform).toBe('');
+	});
+
+	it('timeline events', () => {
+		const ticker = new TestTicker;
+
+		const target = el();
+		const tl = timeline()
+			.add(target, {
+				x: 50,
+				duration: 10
+			})
+			.add(target, {
+				y: 50,
+				duration: 10
+			});
+
+		let endCounter = 0;
+		tl.on('end', () => endCounter += 1);
+
+		tl.play();
+		ticker.run(5);
+		expect(endCounter).toBe(0);
+
+		ticker.run();
+		expect(endCounter).toBe(1);
+
+		tl.play();
+		ticker.run();
+		// not sure this is the behaviour we wan't
+		expect(endCounter).toBe(2);
+
+		tl.reverse();
+		ticker.run();
+		expect(endCounter).toBe(2);
+		expect(target.style.transform)
+			.toBe('translate3d(50.000px,50.000px,0.000px)');
+
+		tl.play();
+		ticker.run();
+		expect(endCounter).toBe(3);
+		expect(target.style.transform).toBe('');
+
+		tl.play();
+		ticker.run();
+		expect(endCounter).toBe(4);
+	});
+});

package/src/tests/timing.test.js

@@ -0,0 +1,270 @@
+import { describe, expect, it } from 'vitest';
+import Timing, {
+	STATE_BEFORE, STATE_START, STATE_RUNNING, STATE_ENDED, STATE_AFTER
+} from '../timing/timing.js';
+
+describe('timing', () => {
+	it('zero duration', () => {
+		// if duration is zero the position is always 1
+		// and the state is either BEFORE or AFTER
+		const timing = new Timing({
+			duration: 0
+		});
+		expect(timing.duration).toBe(0);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(-1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(0);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seek(.5);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seek(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seek(2);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(-1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seekMs(0);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(.5);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+	});
+
+	it('short timing', () => {
+		const timing = new Timing({
+			duration: 1
+		});
+		expect(timing.duration).toBe(1);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(-1);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seek(0);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_START);
+
+		timing.seek(.5);
+		expect(timing.position).toBe(.5);
+		expect(timing.state).toBe(STATE_RUNNING);
+
+		timing.seek(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_ENDED);
+
+		timing.seek(2);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+
+		timing.seekMs(-1);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_BEFORE);
+
+		timing.seekMs(0);
+		expect(timing.position).toBe(0);
+		expect(timing.state).toBe(STATE_START);
+
+		timing.seekMs(.5);
+		expect(timing.position).toBe(.5);
+		expect(timing.state).toBe(STATE_RUNNING);
+
+		timing.seekMs(1);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_ENDED);
+
+		timing.seekMs(2);
+		expect(timing.position).toBe(1);
+		expect(timing.state).toBe(STATE_AFTER);
+	});
+
+	it('state management', () => {
+		const timing = new Timing({
+			duration: 100
+		});
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(.2);
+
+		timing.advance(20);
+		expect(timing.positionMs()).toBe(40);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(.4);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(Math.floor(timing.position * 10) / 10).toBe(.6);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(.8);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_ENDED);
+		expect(timing.position).toBe(1);
+
+		timing.advance(20);
+		expect(timing.state).toBe(STATE_AFTER);
+		expect(timing.position).toBe(1);
+	});
+
+	it('reverse', () => {
+		const timing = new Timing({
+			duration: 100
+		});
+
+		expect(timing.state).toBe(STATE_BEFORE);
+		expect(timing.position).toBe(0);
+
+		// <
+		timing.reverse();
+		expect(timing.state).toBe(STATE_AFTER);
+		expect(timing.position).toBe(0);
+
+		// >
+		timing.reverse();
+		expect(timing.state).toBe(STATE_BEFORE);
+		expect(timing.position).toBe(0);
+
+		// >
+		timing.advance(25);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.reverse();
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.advance(24);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position.toFixed(3)).toBe('0.010');
+
+		// <
+		timing.advance(1);
+		expect(timing.state).toBe(STATE_ENDED);
+		expect(timing.position).toBe(0);
+
+		// >
+		timing.reverse();
+		expect(timing.state).toBe(STATE_START);
+		expect(timing.position).toBe(0);
+
+		// ><
+		timing.seek(0.75);
+		timing.reverse();
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.advance(10);
+		expect(timing.position).toBe(0.65);
+
+
+		const timing2 = new Timing({
+			duration: 100
+		});
+
+		timing2.advance(100);
+		expect(timing2.state).toBe(STATE_ENDED);
+		expect(timing2.position).toBe(1);
+
+		timing2.reverse();
+		expect(timing2.state).toBe(STATE_START);
+		expect(timing2.position).toBe(1);
+
+		timing2.seek(-1);
+		expect(timing2.state).toBe(STATE_BEFORE);
+		expect(timing2.position).toBe(1);
+
+		timing2.seek(.25);
+		expect(timing2.state).toBe(STATE_RUNNING);
+		expect(timing2.position).toBe(.75);
+	});
+
+	it('repeat', () => {
+		const timing = new Timing({
+			duration: 100,
+			repeat: -1
+		});
+
+		// >
+		timing.advance(25);
+		expect(timing.state).toBe(STATE_RUNNING);
+		expect(timing.position).toBe(0.25);
+
+		// ><
+		timing.advance(100);
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <>
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// >
+		timing.advance(50);
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.reverse();
+		expect(timing.position).toBe(0.75);
+
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <>
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// >
+		timing.setAlternate(false);
+		timing.advance(50);
+		expect(timing.position).toBe(0.75);
+
+		// >
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.reverse();
+		expect(timing.position).toBe(0.25);
+
+		// <
+		timing.advance(50);
+		expect(timing.position).toBe(0.75);
+
+		// <
+		timing.setAlternate(true);
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+
+		// <>
+		timing.advance(50);
+		expect(timing.position).toBe(0.25);
+	});
+});

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');
+	});
+});