chnobli 0.1.7 → 0.1.9

package/src/timing/TestTicker.ts

@@ -1,5 +1,5 @@
-import { GlobalTargets } from './AnimationFrameTicker';
-import Ticker, { Callback } from './Ticker';
+import { GlobalTargets } from './AnimationFrameTicker.js';
+import Ticker, { Callback } from './Ticker.js';
 
 export default class TestTicker implements Ticker {
 	private _listeners: Set<Callback>;

package/src/timing/Ticker.ts

@@ -1,4 +1,4 @@
-import { Target } from '../target/Target';
+import { Target } from '../target/Target.js';
 
 export type Callback = (change: number, api: { remove: () => void }) => void;
 

package/src/timing/Timing.ts

@@ -1,4 +1,4 @@
-import { takeProp } from '../utils/internal';
+import { takeProp } from '../utils/internal.js';
 
 export const STATE_BEFORE = 0;
 /// start only occurs if the current position is exactly 0 or 1 if reversed
@@ -12,6 +12,14 @@ export type Position = {
 	progress: number;
 };
 
+export type TimingProps = {
+	duration: number;
+	ease?: (t: number) => number;
+	repeat?: number;
+	alternate?: boolean;
+	reversed?: boolean;
+};
+
 /**
  * This class handles everything timing related
  *
@@ -58,7 +66,7 @@ export default class Timing {
 		alternate
 	}
 	*/
-	constructor(props: Record<string, any>) {
+	constructor(props: TimingProps) {
 		// these vars are only readonly
 		// use functions to update them
 
@@ -90,6 +98,7 @@ export default class Timing {
 	}
 
 	positionMs() {
+		// todo should this not return pos * duration?
 		return this.position * this.iterDuration;
 	}
 
@@ -132,6 +141,31 @@ export default class Timing {
 		}
 
 		this._updateProgress(ms / this.iterDuration);
+
+		// return this.seek(this.normalizeMs(ms));
+	}
+
+	normalizeMs(ms: number) {
+		if (this.iterDuration <= 0) {
+			return Math.sign(ms);
+		}
+
+		const pos = ms / this.iterDuration;
+
+		if (this.isFinite()) {
+			return pos / (this.repeat + 1);
+		}
+
+		return pos;
+	}
+
+	// todo how to call this
+	positionLinear(): number {
+		if (this.isFinite()) {
+			return this._progress / (this.repeat + 1);
+		}
+
+		return this._progress;
 	}
 
 	// should be between 0-1 if outside might change the state
@@ -241,7 +275,7 @@ export default class Timing {
 	}
 }
 
-export function newTiming(props: Record<string, any>) {
+export function newTiming(props: Record<string, any>): Timing {
 	const nProps = {
 		duration: parseDuration(takeProp(props, 'duration', 1000)),
 		ease: parseEase(takeProp(props, 'ease', null)),
@@ -253,7 +287,7 @@ export function newTiming(props: Record<string, any>) {
 	return new Timing(nProps);
 }
 
-export function parseDuration(dur: any) {
+export function parseDuration(dur: any): number {
 	if (typeof dur !== 'number') throw new Error('duration is not a number');
 
 	dur = Math.round(dur);

package/src/utils/internal.ts

@@ -1,8 +1,11 @@
-export function takeProp(
+/**
+ * Take a property from an object and delete it from the object.
+ */
+export function takeProp<T>(
 	props: Record<string, any>,
 	name: string,
-	def: any = null,
-): any {
+	def: T,
+): T {
 	const v = props[name] ?? def;
 	delete props[name];
 

package/src/utils/utils.ts

@@ -1,5 +1,5 @@
-import { Callback } from '../responsive/ResponsiveEvent';
-import { curve } from './motionpath';
+import { Callback } from '../responsive/ResponsiveEvent.js';
+import { curve } from './motionpath.js';
 
 export { curve };
 
@@ -59,10 +59,24 @@ export function chars(element: HTMLElement) {
 		.filter(c => !!c);
 }
 
+export type WordCallback = (element: HTMLElement, word: string) => HTMLElement;
+
+function defWordCallback(element: HTMLElement, word: string): HTMLElement {
+	const span = document.createElement('span');
+	span.textContent = word;
+	span.style.display = 'inline-block';
+	element.appendChild(span);
+
+	return span;
+}
+
 /**
  * Converts an element with text into span with words
  */
-export function words(element: HTMLElement) {
+export function words(
+	element: HTMLElement,
+	cb: WordCallback = defWordCallback,
+) {
 	if (element.dataset.processedWords) return Array.from(element.children);
 
 	const words = element.textContent!.split(/(\s+)/);
@@ -77,12 +91,7 @@ export function words(element: HTMLElement) {
 				return null;
 			}
 
-			const span = document.createElement('span');
-			span.textContent = word;
-			span.style.display = 'inline-block';
-			element.appendChild(span);
-
-			return span;
+			return cb(element, word);
 		})
 		.filter(w => !!w);
 }

package/src/values/ColorValue.ts

@@ -1,4 +1,4 @@
-import { COLORS } from './defaultcolors';
+import { COLORS } from './defaultcolors.js';
 
 export type RGBA = [number, number, number, number];
 export type HSLA = [number, number, number, number];

package/src/values/StyleValue.ts

@@ -1,5 +1,5 @@
-import Value from './Value';
-import ColorValue from './ColorValue';
+import Value from './Value.js';
+import ColorValue from './ColorValue.js';
 
 const AT_THE_END_VALUES = ['none', 'hidden'];
 
@@ -168,7 +168,7 @@ export default class StyleValue {
 		);
 	}
 
-	toString() {
+	toString(): string {
 		switch (this.inner.kind) {
 			case 'text':
 				return this.inner.values;
@@ -183,4 +183,16 @@ export default class StyleValue {
 				throw new Error('unknown kind ' + this.kind);
 		}
 	}
+
+	// returns the value as a number if possible otherwise as a string
+	toMixed(): string | number {
+		if (this.inner.kind !== 'values' || this.inner.values.length !== 1)
+			return this.toString();
+
+		// length already checks that kind is values
+		const val = (this.inner.values as Value[])[0];
+
+		if (val.unit) return this.toString();
+		return val.num;
+	}
 }

package/tsconfig.build.json

@@ -2,8 +2,8 @@
 	"compilerOptions": {
 		"target": "ESNext",
 		"useDefineForClassFields": true,
-		"module": "ESNext",
-		"moduleResolution": "Bundler",
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
 		"declaration": true,
 		"declarationMap": true,
 		"sourceMap": true,

package/tsconfig.json

@@ -2,12 +2,11 @@
 	"compilerOptions": {
 		"target": "ESNext",
 		"useDefineForClassFields": true,
-		"module": "ESNext",
-		"moduleResolution": "Bundler",
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
 		"declaration": true,
 		"declarationMap": true,
 		"sourceMap": true,
-		"baseUrl": ".",
 		"allowJs": true,
 		"checkJs": false,
 		"isolatedModules": true,

package/.editorconfig

@@ -1,11 +0,0 @@
-[*]
-end_of_line = lf
-
-[*{yaml}]
-indent_style = tab
-indent_size = 2
-
-[*{js,ts,json,ts,md}]
-indent_size = 4
-charset = utf-8
-indent_style = tab

package/.github/workflows/ci.yaml

@@ -1,34 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    branches: [ master ]
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v3
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Lint
-      run: npm run lint
-
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v3
-
-    - name: Install dependencies
-      run: npm ci
-
-    - name: Run tests
-      run: npm run test:once

package/.prettierignore

@@ -1,4 +0,0 @@
-/*.md
-/*.json
-/*.yaml
-/.github/*

package/.prettierrc

@@ -1,6 +0,0 @@
-{
-	"tabWidth": 4,
-	"useTabs": true,
-	"singleQuote": true,
-	"arrowParens": "avoid"
-}

package/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-    "editor.formatOnPaste": true,
-    "editor.formatOnSave": true
-}

package/LICENSE.md

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Sören Meier
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,5 +0,0 @@
-
-## Chnobli js
-
-## Version 0.1 unstable
-Version 0.1 is unstable the api might change at any version number

package/auto-docs/easing.js.html

@@ -1,342 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>JSDoc: Source: easing.js</title>
-
-    <script src="scripts/prettify/prettify.js"> </script>
-    <script src="scripts/prettify/lang-css.js"> </script>
-    <!--[if lt IE 9]>
-      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
-    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
-</head>
-
-<body>
-
-<div id="main">
-
-    <h1 class="page-title">Source: easing.js</h1>
-
-    
-
-
-
-    
-    <section>
-        <article>
-            <pre class="prettyprint source linenums"><code>/*
-Adapted from https://github.com/sveltejs/svelte
-Distributed under MIT License https://github.com/sveltejs/svelte/blob/main/LICENSE.md
-*/
-
-import bezierEasing from 'bezier-easing';
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function linear(t) {
-	return t;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function backInOut(t) {
-	const s = 1.70158 * 1.525;
-	if ((t *= 2) &lt; 1) return 0.5 * (t * t * ((s + 1) * t - s));
-	return 0.5 * ((t -= 2) * t * ((s + 1) * t + s) + 2);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function backIn(t) {
-	const s = 1.70158;
-	return t * t * ((s + 1) * t - s);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function backOut(t) {
-	const s = 1.70158;
-	return --t * t * ((s + 1) * t + s) + 1;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function bounceOut(t) {
-	const a = 4.0 / 11.0;
-	const b = 8.0 / 11.0;
-	const c = 9.0 / 10.0;
-	const ca = 4356.0 / 361.0;
-	const cb = 35442.0 / 1805.0;
-	const cc = 16061.0 / 1805.0;
-	const t2 = t * t;
-	return t &lt; a
-		? 7.5625 * t2
-		: t &lt; b
-		? 9.075 * t2 - 9.9 * t + 3.4
-		: t &lt; c
-		? ca * t2 - cb * t + cc
-		: 10.8 * t * t - 20.52 * t + 10.72;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function bounceInOut(t) {
-	return t &lt; 0.5 ? 0.5 * (1.0 - bounceOut(1.0 - t * 2.0)) : 0.5 * bounceOut(t * 2.0 - 1.0) + 0.5;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function bounceIn(t) {
-	return 1.0 - bounceOut(1.0 - t);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function circInOut(t) {
-	if ((t *= 2) &lt; 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
-	return 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function circIn(t) {
-	return 1.0 - Math.sqrt(1.0 - t * t);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function circOut(t) {
-	return Math.sqrt(1 - --t * t);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function cubicInOut(t) {
-	return t &lt; 0.5 ? 4.0 * t * t * t : 0.5 * Math.pow(2.0 * t - 2.0, 3.0) + 1.0;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function cubicIn(t) {
-	return t * t * t;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function cubicOut(t) {
-	const f = t - 1.0;
-	return f * f * f + 1.0;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function elasticInOut(t) {
-	return t &lt; 0.5
-		? 0.5 * Math.sin(((+13.0 * Math.PI) / 2) * 2.0 * t) * Math.pow(2.0, 10.0 * (2.0 * t - 1.0))
-		: 0.5 *
-				Math.sin(((-13.0 * Math.PI) / 2) * (2.0 * t - 1.0 + 1.0)) *
-				Math.pow(2.0, -10.0 * (2.0 * t - 1.0)) +
-				1.0;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function elasticIn(t) {
-	return Math.sin((13.0 * t * Math.PI) / 2) * Math.pow(2.0, 10.0 * (t - 1.0));
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function elasticOut(t) {
-	return Math.sin((-13.0 * (t + 1.0) * Math.PI) / 2) * Math.pow(2.0, -10.0 * t) + 1.0;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function expoInOut(t) {
-	return t === 0.0 || t === 1.0
-		? t
-		: t &lt; 0.5
-		? +0.5 * Math.pow(2.0, 20.0 * t - 10.0)
-		: -0.5 * Math.pow(2.0, 10.0 - t * 20.0) + 1.0;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function expoIn(t) {
-	return t === 0.0 ? t : Math.pow(2.0, 10.0 * (t - 1.0));
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function expoOut(t) {
-	return t === 1.0 ? t : 1.0 - Math.pow(2.0, -10.0 * t);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quadInOut(t) {
-	t /= 0.5;
-	if (t &lt; 1) return 0.5 * t * t;
-	t--;
-	return -0.5 * (t * (t - 2) - 1);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quadIn(t) {
-	return t * t;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quadOut(t) {
-	return -t * (t - 2.0);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quartInOut(t) {
-	return t &lt; 0.5 ? +8.0 * Math.pow(t, 4.0) : -8.0 * Math.pow(t - 1.0, 4.0) + 1.0;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quartIn(t) {
-	return Math.pow(t, 4.0);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quartOut(t) {
-	return Math.pow(t - 1.0, 3.0) * (1.0 - t) + 1.0;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quintInOut(t) {
-	if ((t *= 2) &lt; 1) return 0.5 * t * t * t * t * t;
-	return 0.5 * ((t -= 2) * t * t * t * t + 2);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quintIn(t) {
-	return t * t * t * t * t;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function quintOut(t) {
-	return --t * t * t * t * t + 1;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function sineInOut(t) {
-	return -0.5 * (Math.cos(Math.PI * t) - 1);
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function sineIn(t) {
-	const v = Math.cos(t * Math.PI * 0.5);
-	if (Math.abs(v) &lt; 1e-14) return 1;
-	else return 1 - v;
-}
-
-/**
- * @param {number} t
- * @returns {number}
- */
-export function sineOut(t) {
-	return Math.sin((t * Math.PI) / 2);
-}
-
-export function cubicBezier(x1, y1, x2, y2) {
-	return bezierEasing(x1, y1, x2, y2);
-}</code></pre>
-        </article>
-    </section>
-
-
-
-
-</div>
-
-<nav>
-    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#backIn">backIn</a></li><li><a href="global.html#backInOut">backInOut</a></li><li><a href="global.html#backOut">backOut</a></li><li><a href="global.html#bounceIn">bounceIn</a></li><li><a href="global.html#bounceInOut">bounceInOut</a></li><li><a href="global.html#bounceOut">bounceOut</a></li><li><a href="global.html#circIn">circIn</a></li><li><a href="global.html#circInOut">circInOut</a></li><li><a href="global.html#circOut">circOut</a></li><li><a href="global.html#cubicIn">cubicIn</a></li><li><a href="global.html#cubicInOut">cubicInOut</a></li><li><a href="global.html#cubicOut">cubicOut</a></li><li><a href="global.html#elasticIn">elasticIn</a></li><li><a href="global.html#elasticInOut">elasticInOut</a></li><li><a href="global.html#elasticOut">elasticOut</a></li><li><a href="global.html#expoIn">expoIn</a></li><li><a href="global.html#expoInOut">expoInOut</a></li><li><a href="global.html#expoOut">expoOut</a></li><li><a href="global.html#linear">linear</a></li><li><a href="global.html#quadIn">quadIn</a></li><li><a href="global.html#quadInOut">quadInOut</a></li><li><a href="global.html#quadOut">quadOut</a></li><li><a href="global.html#quartIn">quartIn</a></li><li><a href="global.html#quartInOut">quartInOut</a></li><li><a href="global.html#quartOut">quartOut</a></li><li><a href="global.html#quintIn">quintIn</a></li><li><a href="global.html#quintInOut">quintInOut</a></li><li><a href="global.html#quintOut">quintOut</a></li><li><a href="global.html#sineIn">sineIn</a></li><li><a href="global.html#sineInOut">sineInOut</a></li><li><a href="global.html#sineOut">sineOut</a></li></ul>
-</nav>
-
-<br class="clear">
-
-<footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Sat Jan 13 2024 11:54:27 GMT+0100 (Central European Standard Time)
-</footer>
-
-<script> prettyPrint(); </script>
-<script src="scripts/linenumber.js"> </script>
-</body>
-</html>