chnobli 0.1.9 → 0.1.11

package/src/utils/Events.ts

@@ -29,7 +29,7 @@ export default class Events {
 	}
 
 	trigger(event: string, ...args: any[]) {
-		let list = this.listeners.get(event);
+		const list = this.listeners.get(event);
 		if (!list) return;
 		list.trigger(...args);
 	}

package/src/utils/motionpath.ts

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

package/src/utils/utils.ts

@@ -1,4 +1,3 @@
-import { Callback } from '../responsive/ResponsiveEvent.js';
 import { curve } from './motionpath.js';
 
 export { curve };
@@ -100,15 +99,6 @@ export function words(
  * get the offset to the current page page
  */
 export function pageOffset(el: HTMLElement) {
-	if ('offsetTop' in el) {
-		return {
-			top: el.offsetTop,
-			left: el.offsetLeft,
-			width: el.offsetWidth,
-			height: el.offsetHeight,
-		};
-	}
-
 	const rect = (el as HTMLElement).getBoundingClientRect();
 	return {
 		top: window.scrollY + rect.top,

package/src/values/ColorValue.ts

@@ -134,6 +134,7 @@ function parseHsl(hsl: string): RGBA {
 
 /// expects [h, s, l, a]
 function hslToRgba(hsla: HSLA): RGBA {
+	// eslint-disable-next-line prefer-const
 	let [h, s, l, a] = hsla;
 
 	// normalize

package/src/values/Value.ts

@@ -1,4 +1,4 @@
-const REGEX = /^(\d+\.?\d*|\.\d+)(\w*|%)$/;
+const REGEX = /^(-?\d+\.?\d*|\.\d+)(\w*|%)$/;
 
 export default class Value {
 	num: number;

package/.eslintrc.cjs

@@ -1,39 +0,0 @@
-module.exports = {
-	"env": {
-		"browser": true,
-		"es2021": true
-	},
-	"extends": "eslint:recommended",
-	"overrides": [
-		{
-			"env": {
-				"node": true
-			},
-			"files": [
-				".eslintrc.{js,cjs}"
-			],
-			"parserOptions": {
-				"sourceType": "script"
-			}
-		}
-	],
-	"parserOptions": {
-		"ecmaVersion": "latest",
-		"sourceType": "module"
-	},
-	"rules": {
-		"no-unused-vars": [
-		  "error",
-		  {
-			"varsIgnorePattern": "^_",
-			"argsIgnorePattern": "^_"
-		  }
-		],
-		"no-constant-condition": [
-			"error",
-			{
-				"checkLoops": false
-			}
-		]
-	}
-}

package/src/animator.js

@@ -1,187 +0,0 @@
-/* eslint no-unused-vars: 0 */
-
-import { quadInOut, quadOut } from './easing/index.js';
-import { range } from 'fire/util.js';
-
-const START = 0;
-const RUNNING = 1;
-const ENDING = 2;
-const ENDED = 3;
-
-export default class Animator {
-	constructor(el, props) {
-		this.el = el;
-
-		this.running = false;
-
-		this.props = [];
-
-		this.prevTime = null;
-
-
-		for (const propName in props) {
-			const prop = new PropertyAnimator(propName, props[propName], el);
-			this.props.push(prop);
-			this[propName] = prop;
-		}
-	}
-
-	// if the animation loop has not started starts it
-	run() {
-		// if running
-		if (this.prevTime !== null)
-			return;
-
-		requestAnimationFrame(a => this._tick(a));
-	}
-
-	_tick(elapsed) {
-		if (this.prevTime === null)
-			this.prevTime = elapsed;
-
-		const change = elapsed - this.prevTime;
-		this.prevTime = elapsed;
-
-		const transforms = [];
-		const cssVars = [];
-
-		let stillRunning = false;
-
-		for (const prop of this.props) {
-			prop._tick(change);
-
-			if (prop.state < ENDED)
-				stillRunning = true;
-
-			if (prop.name === 'translateY' || prop.name === 'scale')
-				transforms.push(prop);
-			else if (prop.name.startsWith('--'))
-				cssVars.push(prop);
-			else
-				throw new Error('unknown prop ' + prop.name);
-		}
-
-		if (!stillRunning) {
-			this.prevTime = null;
-			return;
-		}
-
-		if (transforms.some(t => t.state  < ENDED)) {
-			this.el.style.transform = transforms.map(t => {
-				const v = t._toTransformValue();
-				return v;
-			}).join(' ');
-		}
-
-		for (const prop of cssVars) {
-			if (prop.state < ENDED)
-				this.el.style.setProperty(prop.name, prop._toCssValue());
-		}
-
-		requestAnimationFrame(a => this._tick(a));
-	}
-}
-
-
-class PropertyAnimator {
-	constructor(name, type, el) {
-		this.name = name;
-		this.type = type;
-
-		this.fromV = null;
-		this.currentV = null;
-		this.toV = null;
-
-		this.easing = quadInOut;
-
-		this.elapsed = 0;
-		this.duration = 0;
-		this.state = ENDED;
-	}
-
-	set(val) {
-		this.fromV = val;
-		this.currentV = val;
-		this.toV = val;
-
-		this.elapsed = 0;
-		this.duration = 0;
-		this.state = START;
-	}
-
-	to(val, dur = null) {
-		this.fromV = this.currentV;
-		this.toV = val;
-
-		if (this.state === RUNNING)
-			this.easing = quadOut;
-		else
-			this.easing = quadInOut;
-
-		this.elapsed = 0;
-		this.duration = dur ?? 500;
-		this.state = START;
-	}
-
-	_tick(change) {
-		if (this.state >= ENDING)
-			return this.state = ENDED;
-
-		this.elapsed += change;
-
-		const dur = Math.max(this.duration, 1);
-		const t = Math.min(this.elapsed / dur, 1);
-		if (t >= 1)
-			this.state = ENDED;
-		else
-			this.state = RUNNING;
-
-		const et = this.easing(t);
-
-		if (this.type === 'num') {
-			const dif = this.toV - this.fromV;
-			this.currentV = this.fromV + dif * et;
-		} else if (this.type === 'hex') {
-			if (!Array.isArray(this.fromV))
-				this.fromV = hexToRgb(this.fromV);
-			if (!Array.isArray(this.toV))
-				this.toV = hexToRgb(this.toV);
-
-			// now animate
-			this.currentV = this.fromV.map((from, i) => {
-				return from + (this.toV[i] - from) * et;
-			});
-		}
-	}
-
-	_toTransformValue() {
-		let v = this.currentV;
-		if (this.name === 'translateY')
-			v += 'px';
-
-		return `${this.name}(${v})`;
-	}
-
-	_toCssValue() {
-		if (this.type === 'hex')
-			return `rgba(${this.currentV.map(v => Math.round(v)).join()}, 1)`;
-		throw new Error('to css value');
-	}
-}
-
-
-function hexToRgb(val) {
-	if (!val.startsWith('#') || val.length !== 7)
-		throw new Error('expected a hex value with 6 characters');
-
-	const hex = val.substring(1);
-
-	const values = range(0, 3)
-		.map(i => parseInt(hex.substring(i * 2, i * 2 + 2), 16));
-
-	return values;
-}
-
-// function rgbToHex(rgb) {
-// 	return 
-// }