@studiometa/js-toolkit 2.0.0-alpha.9 → 2.0.0-beta.4

package/utils/index.d.ts

@@ -1,13 +1,35 @@
-import * as collide from "./collide/index.js";
-import * as css from "./css/index.js";
+import { matrix } from "./css/index.js";
+import { transition } from "./css/index.js";
+import { collidePointRect } from "./collide/index.js";
+import { collideRectRect } from "./collide/index.js";
+import { boundingRectToCircle } from "./collide/index.js";
+import { collideCircleRect } from "./collide/index.js";
+import { collideCircleCircle } from "./collide/index.js";
+import { collidePointCircle } from "./collide/index.js";
+import { objectToURLSearchParams } from "./history.js";
+import { push as historyPush } from "./history.js";
+import { replace as historyReplace } from "./history.js";
+import { clamp } from "./math/index.js";
+import { clamp01 } from "./math/index.js";
+import { damp } from "./math/index.js";
+import { inertiaFinalValue } from "./math/index.js";
+import { lerp } from "./math/index.js";
+import { map } from "./math/index.js";
+import { round } from "./math/index.js";
+import { withLeadingCharacters } from "./string/index.js";
+import { withLeadingSlash } from "./string/index.js";
+import { withoutLeadingCharacters } from "./string/index.js";
+import { withoutLeadingCharactersRecursive } from "./string/index.js";
+import { withoutLeadingSlash } from "./string/index.js";
+import { withoutTrailingCharacters } from "./string/index.js";
+import { withoutTrailingCharactersRecursive } from "./string/index.js";
+import { withoutTrailingSlash } from "./string/index.js";
+import { withTrailingCharacters } from "./string/index.js";
+import { withTrailingSlash } from "./string/index.js";
 import debounce from "./debounce.js";
 import focusTrap from "./focusTrap.js";
-import * as history from "./history.js";
 import keyCodes from "./keyCodes.js";
-import * as math from "./math/index.js";
 import memoize from "./memoize.js";
 import nextFrame from "./nextFrame.js";
-import * as object from "./object/index.js";
-import * as string from "./string/index.js";
 import throttle from "./throttle.js";
-export { collide, css, debounce, focusTrap, history, keyCodes, math, memoize, nextFrame, object, string, throttle };
+export { matrix, transition, collidePointRect, collideRectRect, boundingRectToCircle, collideCircleRect, collideCircleCircle, collidePointCircle, objectToURLSearchParams, historyPush, historyReplace, clamp, clamp01, damp, inertiaFinalValue, lerp, map, round, withLeadingCharacters, withLeadingSlash, withoutLeadingCharacters, withoutLeadingCharactersRecursive, withoutLeadingSlash, withoutTrailingCharacters, withoutTrailingCharactersRecursive, withoutTrailingSlash, withTrailingCharacters, withTrailingSlash, debounce, focusTrap, keyCodes, memoize, nextFrame, throttle };

package/utils/index.js

@@ -1,13 +1,17 @@
-import * as collide from './collide/index.js';
-import * as css from './css/index.js';
-import * as history from './history.js';
-import * as math from './math/index.js';
-import * as object from './object/index.js';
-import * as string from './string/index.js';
 import debounce from './debounce.js';
 import focusTrap from './focusTrap.js';
 import keyCodes from './keyCodes.js';
 import memoize from './memoize.js';
 import nextFrame from './nextFrame.js';
 import throttle from './throttle.js';
-export { collide, css, debounce, focusTrap, history, keyCodes, math, memoize, nextFrame, object, string, throttle };
+import { matrix, transition } from './css/index.js';
+import { collidePointRect, collideRectRect, boundingRectToCircle, collideCircleRect, collideCircleCircle, collidePointCircle } from './collide/index.js';
+import { objectToURLSearchParams, push as historyPush, replace as historyReplace } from './history.js';
+import { clamp, clamp01, damp, inertiaFinalValue, lerp, map, round } from './math/index.js';
+import { withLeadingCharacters, withLeadingSlash, withoutLeadingCharacters, withoutLeadingCharactersRecursive, withoutLeadingSlash, withoutTrailingCharacters, withoutTrailingCharactersRecursive, withoutTrailingSlash, withTrailingCharacters, withTrailingSlash } from './string/index.js';
+export { matrix, transition };
+export { collidePointRect, collideRectRect, boundingRectToCircle, collideCircleRect, collideCircleCircle, collidePointCircle };
+export { objectToURLSearchParams, historyPush, historyReplace };
+export { clamp, clamp01, damp, inertiaFinalValue, lerp, map, round };
+export { withLeadingCharacters, withLeadingSlash, withoutLeadingCharacters, withoutLeadingCharactersRecursive, withoutLeadingSlash, withoutTrailingCharacters, withoutTrailingCharactersRecursive, withoutTrailingSlash, withTrailingCharacters, withTrailingSlash };
+export { debounce, focusTrap, keyCodes, memoize, nextFrame, throttle };

package/utils/math/damp.d.ts

@@ -1,9 +1,10 @@
 /**
  * Get the next damped value for a given factor.
  *
- * @param  {Number} targetValue The final value.
- * @param  {Number} currentValue The current value.
- * @param  {Number=} [factor=0.5] The factor used to reach the target value.
- * @return {Number} The next value.
+ * @param  {number} targetValue The final value.
+ * @param  {number} currentValue The current value.
+ * @param  {number=} [factor=0.5] The factor used to reach the target value.
+ * @param  {number=} [precision=0.01] The precision used to calculate the latest value.
+ * @return {number} The next value.
  */
-export default function damp(targetValue: number, currentValue: number, factor?: number | undefined): number;
+export default function damp(targetValue: number, currentValue: number, factor?: number | undefined, precision?: number | undefined): number;

package/utils/math/damp.js

@@ -1,4 +1,5 @@
 export default function damp(targetValue, currentValue) {
   var factor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
-  return Math.abs(targetValue - currentValue) < 0.001 ? targetValue : currentValue + (targetValue - currentValue) * factor;
+  var precision = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0.01;
+  return Math.abs(targetValue - currentValue) < precision ? targetValue : currentValue + (targetValue - currentValue) * factor;
 }

package/utils/math/index.d.ts

@@ -1,7 +1,8 @@
 import clamp from "./clamp.js";
 import clamp01 from "./clamp01.js";
 import damp from "./damp.js";
+import inertiaFinalValue from "./inertiaFinalValue.js";
 import lerp from "./lerp.js";
 import map from "./map.js";
 import round from "./round.js";
-export { clamp, clamp01, damp, lerp, map, round };
+export { clamp, clamp01, damp, inertiaFinalValue, lerp, map, round };

package/utils/math/index.js

@@ -1,7 +1,8 @@
 import clamp from './clamp.js';
 import clamp01 from './clamp01.js';
 import damp from './damp.js';
+import inertiaFinalValue from './inertiaFinalValue.js';
 import lerp from './lerp.js';
 import map from './map.js';
 import round from './round.js';
-export { clamp, clamp01, damp, lerp, map, round };
+export { clamp, clamp01, damp, inertiaFinalValue, lerp, map, round };

package/utils/math/inertiaFinalValue.d.ts

@@ -3,7 +3,7 @@
  *
  * @param  {Number} initialValue The final value.
  * @param  {Number} initialDelta The current value.
- * @param  {Number=} [factor=0.85] The speed to reach the target value.
+ * @param  {Number=} [dampFactor=0.85] The speed to reach the target value.
  * @return {Number} The next value.
  */
-export default function inertiaFinalValue(initialValue: number, initialDelta: number, factor?: number | undefined): number;
+export default function inertiaFinalValue(initialValue: number, initialDelta: number, dampFactor?: number | undefined): number;

package/utils/math/inertiaFinalValue.js

@@ -1,8 +1,8 @@
 export default function inertiaFinalValue(initialValue, initialDelta) {
-  var factor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.85;
+  var dampFactor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.85;
 
-  if (factor >= 1 || factor <= 0) {
-    throw new Error("The `factor` parameter must be a number greater than 0 and smaller than 1, `".concat(factor, "` given."));
+  if (dampFactor >= 1 || dampFactor <= 0) {
+    throw new Error("The `factor` parameter must be a number greater than 0 and smaller than 1, `".concat(dampFactor, "` given."));
   }
 
   var delta = initialDelta;
@@ -10,7 +10,7 @@ export default function inertiaFinalValue(initialValue, initialDelta) {
 
   while (Math.abs(delta) > 0.1) {
     finalValue += delta;
-    delta *= factor;
+    delta *= dampFactor;
   }
 
   return finalValue;

package/utils/scrollTo.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Handler for the click event on anchor links
+ *
+ * @param {HTMLElement|string} selectorElement The target element.
+ * @param {{ offset?: number, dampFactor?: number }} [options] Options for the scroll.
+ * @return {Promise<number>} A promising resolving with the target scroll position.
+ */
+export default function scrollTo(selectorElement: HTMLElement | string, { offset, dampFactor }?: {
+    offset?: number;
+    dampFactor?: number;
+}): Promise<number>;

package/utils/scrollTo.js

@@ -0,0 +1,75 @@
+import damp from './math/damp.js';
+export default function scrollTo(selectorElement) {
+  var {
+    offset = 0,
+    dampFactor = 0.2
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var targetElement = null;
+
+  if (selectorElement instanceof HTMLElement) {
+    targetElement = selectorElement;
+  } else {
+    targetElement = document.querySelector(selectorElement);
+  }
+
+  if (!targetElement) {
+    return Promise.resolve(window.pageYOffset);
+  }
+
+  var sizes = targetElement.getBoundingClientRect();
+  var scrollMargin = getComputedStyle(targetElement).scrollMarginTop || '0';
+  var max = document.body.offsetHeight - window.innerHeight;
+  var scrollTarget = sizes.top + window.pageYOffset + parseInt(scrollMargin, 10) + offset;
+
+  if (scrollTarget > max) {
+    scrollTarget = max;
+  }
+
+  return new Promise(resolve => {
+    var isScrolling = false;
+    var scroll = window.pageYOffset;
+    var dampScroll = window.pageYOffset;
+
+    function eventHandler() {
+      isScrolling = false;
+    }
+
+    function end() {
+      window.removeEventListener('wheel', eventHandler);
+      window.removeEventListener('touchmove', eventHandler);
+      resolve(window.pageYOffset);
+    }
+
+    function loop() {
+      if (!isScrolling) {
+        return end();
+      }
+
+      dampScroll = damp(scroll, dampScroll, dampFactor);
+      window.scrollTo({
+        top: dampScroll
+      });
+
+      if (dampScroll === scroll) {
+        isScrolling = false;
+      }
+
+      return requestAnimationFrame(loop);
+    }
+
+    function start(target) {
+      isScrolling = true;
+      dampScroll = window.pageYOffset;
+      scroll = target;
+      window.addEventListener('wheel', eventHandler, {
+        passive: true
+      });
+      window.addEventListener('touchmove', eventHandler, {
+        passive: true
+      });
+      loop();
+    }
+
+    start(scrollTarget);
+  });
+}