@animini/target-dom - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

CHANGELOG.md

 # @animini/target-dom
 
+## 0.2.6
+
+### Patch Changes
+
+- c838bf8: Support for scrollTop / scrollLeft
+- Updated dependencies [c838bf8]
+  - @animini/core@0.2.6
+
 ## 0.2.5
@@ -4,0 +12,0 @@

dist/animini-target-dom.cjs.dev.js

@@ -51,2 +51,52 @@ 'use strict';
 
+const TRANSFORM_KEYS = ['scale', 'x', 'y'];
+const SIDES_KEYS = ['inset', 'margin', 'padding'];
+const SCROLL_KEYS = ['scrollLeft', 'scrollTop'];
+function getSidesValues(value) {
+  const n = value.split(' ');
+
+  switch (n.length) {
+    case 3:
+      return value + ' ' + n[2];
+
+    case 2:
+      return value + ' ' + value;
+
+    case 1:
+      return value + ' ' + value + ' ' + value + ' ' + value;
+
+    default:
+      return value;
+  }
+}
+function getTransformValues(matrix) {
+  if (matrix === 'none' || typeof matrix === 'undefined') {
+    return {
+      scale: 1,
+      x: 0,
+      y: 0,
+      z: 0
+    };
+  }
+
+  const matrixType = matrix.includes('3d') ? '3d' : '2d';
+  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
+
+  if (matrixType === '2d') {
+    return {
+      scale: ~~matrixValues[0],
+      x: ~~matrixValues[4],
+      y: ~~matrixValues[5],
+      z: 0
+    };
+  }
+
+  return {
+    scale: ~~matrixValues[0],
+    x: ~~matrixValues[12],
+    y: ~~matrixValues[13],
+    z: ~~matrixValues[14]
+  };
+}
+
 const parse = (value, animated) => {
@@ -77,4 +127,4 @@ var _animated$el;
 
-  format(value) {
-    if (!isNaN(value)) return value + 'px';
+  format(value, animated) {
+    if (!isNaN(value) && !SCROLL_KEYS.includes(animated.key)) return value + 'px';
     return value;
@@ -106,51 +156,2 @@ },
 
-const TRANSFORM_KEYS = ['scale', 'x', 'y'];
-const SIDES_KEYS = ['margin', 'padding'];
-function getSidesValues(value) {
-  const n = value.split(' ');
-
-  switch (n.length) {
-    case 3:
-      return value + ' ' + n[2];
-
-    case 2:
-      return value + ' ' + value;
-
-    case 1:
-      return value + ' ' + value + ' ' + value + ' ' + value;
-
-    default:
-      return value;
-  }
-}
-function getTransformValues(matrix) {
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return {
-      scale: 1,
-      x: 0,
-      y: 0,
-      z: 0
-    };
-  }
-
-  const matrixType = matrix.includes('3d') ? '3d' : '2d';
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
-
-  if (matrixType === '2d') {
-    return {
-      scale: ~~matrixValues[0],
-      x: ~~matrixValues[4],
-      y: ~~matrixValues[5],
-      z: 0
-    };
-  }
-
-  return {
-    scale: ~~matrixValues[0],
-    x: ~~matrixValues[12],
-    y: ~~matrixValues[13],
-    z: ~~matrixValues[14]
-  };
-}
-
 const string = {
@@ -179,3 +180,3 @@ onInit(a) {
 
-const _excluded = ["x", "y", "scale"];
+const _excluded = ["x", "y", "scale", "scrollTop", "scrollLeft"];
 const ADAPTERS = {
@@ -197,3 +198,4 @@ color,
   padding: string,
-  margin: string
+  margin: string,
+  inset: string
 };
@@ -206,3 +208,5 @@ const NO_ADAPTER = ['opacity', 'scale'];
       y,
-      scale
+      scale,
+      scrollTop,
+      scrollLeft
     } = values,
@@ -215,2 +219,4 @@ rest = _objectWithoutProperties(values, _excluded);
 
+    if (scrollTop !== undefined) el.scrollTop = scrollTop;
+    if (scrollLeft !== undefined) el.scrollLeft = scrollTop;
     if (x === undefined && y === undefined && scale === undefined) return;
@@ -226,3 +232,5 @@ if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform');
 
-    if (TRANSFORM_KEYS.includes(key)) {
+    if (SCROLL_KEYS.includes(key)) {
+      value = element[key];
+    } else if (TRANSFORM_KEYS.includes(key)) {
       value = getTransformValues(style.transform)[key];
@@ -229,0 +237,0 @@ } else if (SIDES_KEYS.includes(key)) {

dist/animini-target-dom.cjs.prod.js

@@ -51,2 +51,52 @@ 'use strict';
 
+const TRANSFORM_KEYS = ['scale', 'x', 'y'];
+const SIDES_KEYS = ['inset', 'margin', 'padding'];
+const SCROLL_KEYS = ['scrollLeft', 'scrollTop'];
+function getSidesValues(value) {
+  const n = value.split(' ');
+
+  switch (n.length) {
+    case 3:
+      return value + ' ' + n[2];
+
+    case 2:
+      return value + ' ' + value;
+
+    case 1:
+      return value + ' ' + value + ' ' + value + ' ' + value;
+
+    default:
+      return value;
+  }
+}
+function getTransformValues(matrix) {
+  if (matrix === 'none' || typeof matrix === 'undefined') {
+    return {
+      scale: 1,
+      x: 0,
+      y: 0,
+      z: 0
+    };
+  }
+
+  const matrixType = matrix.includes('3d') ? '3d' : '2d';
+  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
+
+  if (matrixType === '2d') {
+    return {
+      scale: ~~matrixValues[0],
+      x: ~~matrixValues[4],
+      y: ~~matrixValues[5],
+      z: 0
+    };
+  }
+
+  return {
+    scale: ~~matrixValues[0],
+    x: ~~matrixValues[12],
+    y: ~~matrixValues[13],
+    z: ~~matrixValues[14]
+  };
+}
+
 const parse = (value, animated) => {
@@ -77,4 +127,4 @@ var _animated$el;
 
-  format(value) {
-    if (!isNaN(value)) return value + 'px';
+  format(value, animated) {
+    if (!isNaN(value) && !SCROLL_KEYS.includes(animated.key)) return value + 'px';
     return value;
@@ -106,51 +156,2 @@ },
 
-const TRANSFORM_KEYS = ['scale', 'x', 'y'];
-const SIDES_KEYS = ['margin', 'padding'];
-function getSidesValues(value) {
-  const n = value.split(' ');
-
-  switch (n.length) {
-    case 3:
-      return value + ' ' + n[2];
-
-    case 2:
-      return value + ' ' + value;
-
-    case 1:
-      return value + ' ' + value + ' ' + value + ' ' + value;
-
-    default:
-      return value;
-  }
-}
-function getTransformValues(matrix) {
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return {
-      scale: 1,
-      x: 0,
-      y: 0,
-      z: 0
-    };
-  }
-
-  const matrixType = matrix.includes('3d') ? '3d' : '2d';
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
-
-  if (matrixType === '2d') {
-    return {
-      scale: ~~matrixValues[0],
-      x: ~~matrixValues[4],
-      y: ~~matrixValues[5],
-      z: 0
-    };
-  }
-
-  return {
-    scale: ~~matrixValues[0],
-    x: ~~matrixValues[12],
-    y: ~~matrixValues[13],
-    z: ~~matrixValues[14]
-  };
-}
-
 const string = {
@@ -179,3 +180,3 @@ onInit(a) {
 
-const _excluded = ["x", "y", "scale"];
+const _excluded = ["x", "y", "scale", "scrollTop", "scrollLeft"];
 const ADAPTERS = {
@@ -197,3 +198,4 @@ color,
   padding: string,
-  margin: string
+  margin: string,
+  inset: string
 };
@@ -206,3 +208,5 @@ const NO_ADAPTER = ['opacity', 'scale'];
       y,
-      scale
+      scale,
+      scrollTop,
+      scrollLeft
     } = values,
@@ -215,2 +219,4 @@ rest = _objectWithoutProperties(values, _excluded);
 
+    if (scrollTop !== undefined) el.scrollTop = scrollTop;
+    if (scrollLeft !== undefined) el.scrollLeft = scrollTop;
     if (x === undefined && y === undefined && scale === undefined) return;
@@ -226,3 +232,5 @@ if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform');
 
-    if (TRANSFORM_KEYS.includes(key)) {
+    if (SCROLL_KEYS.includes(key)) {
+      value = element[key];
+    } else if (TRANSFORM_KEYS.includes(key)) {
       value = getTransformValues(style.transform)[key];
@@ -229,0 +237,0 @@ } else if (SIDES_KEYS.includes(key)) {

dist/animini-target-dom.esm.js

@@ -47,2 +47,52 @@ import { parseColor, parseUnitValue, interpolate, parseNumbers } from '@animini/core';
 
+const TRANSFORM_KEYS = ['scale', 'x', 'y'];
+const SIDES_KEYS = ['inset', 'margin', 'padding'];
+const SCROLL_KEYS = ['scrollLeft', 'scrollTop'];
+function getSidesValues(value) {
+  const n = value.split(' ');
+
+  switch (n.length) {
+    case 3:
+      return value + ' ' + n[2];
+
+    case 2:
+      return value + ' ' + value;
+
+    case 1:
+      return value + ' ' + value + ' ' + value + ' ' + value;
+
+    default:
+      return value;
+  }
+}
+function getTransformValues(matrix) {
+  if (matrix === 'none' || typeof matrix === 'undefined') {
+    return {
+      scale: 1,
+      x: 0,
+      y: 0,
+      z: 0
+    };
+  }
+
+  const matrixType = matrix.includes('3d') ? '3d' : '2d';
+  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
+
+  if (matrixType === '2d') {
+    return {
+      scale: ~~matrixValues[0],
+      x: ~~matrixValues[4],
+      y: ~~matrixValues[5],
+      z: 0
+    };
+  }
+
+  return {
+    scale: ~~matrixValues[0],
+    x: ~~matrixValues[12],
+    y: ~~matrixValues[13],
+    z: ~~matrixValues[14]
+  };
+}
+
 const parse = (value, animated) => {
@@ -73,4 +123,4 @@ var _animated$el;
 
-  format(value) {
-    if (!isNaN(value)) return value + 'px';
+  format(value, animated) {
+    if (!isNaN(value) && !SCROLL_KEYS.includes(animated.key)) return value + 'px';
     return value;
@@ -102,51 +152,2 @@ },
 
-const TRANSFORM_KEYS = ['scale', 'x', 'y'];
-const SIDES_KEYS = ['margin', 'padding'];
-function getSidesValues(value) {
-  const n = value.split(' ');
-
-  switch (n.length) {
-    case 3:
-      return value + ' ' + n[2];
-
-    case 2:
-      return value + ' ' + value;
-
-    case 1:
-      return value + ' ' + value + ' ' + value + ' ' + value;
-
-    default:
-      return value;
-  }
-}
-function getTransformValues(matrix) {
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return {
-      scale: 1,
-      x: 0,
-      y: 0,
-      z: 0
-    };
-  }
-
-  const matrixType = matrix.includes('3d') ? '3d' : '2d';
-  const matrixValues = matrix.match(/matrix.*\((.+)\)/)[1].split(', ');
-
-  if (matrixType === '2d') {
-    return {
-      scale: ~~matrixValues[0],
-      x: ~~matrixValues[4],
-      y: ~~matrixValues[5],
-      z: 0
-    };
-  }
-
-  return {
-    scale: ~~matrixValues[0],
-    x: ~~matrixValues[12],
-    y: ~~matrixValues[13],
-    z: ~~matrixValues[14]
-  };
-}
-
 const string = {
@@ -175,3 +176,3 @@ onInit(a) {
 
-const _excluded = ["x", "y", "scale"];
+const _excluded = ["x", "y", "scale", "scrollTop", "scrollLeft"];
 const ADAPTERS = {
@@ -193,3 +194,4 @@ color,
   padding: string,
-  margin: string
+  margin: string,
+  inset: string
 };
@@ -202,3 +204,5 @@ const NO_ADAPTER = ['opacity', 'scale'];
       y,
-      scale
+      scale,
+      scrollTop,
+      scrollLeft
     } = values,
@@ -211,2 +215,4 @@ rest = _objectWithoutProperties(values, _excluded);
 
+    if (scrollTop !== undefined) el.scrollTop = scrollTop;
+    if (scrollLeft !== undefined) el.scrollLeft = scrollTop;
     if (x === undefined && y === undefined && scale === undefined) return;
@@ -222,3 +228,5 @@ if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform');
 
-    if (TRANSFORM_KEYS.includes(key)) {
+    if (SCROLL_KEYS.includes(key)) {
+      value = element[key];
+    } else if (TRANSFORM_KEYS.includes(key)) {
       value = getTransformValues(style.transform)[key];
@@ -225,0 +233,0 @@ } else if (SIDES_KEYS.includes(key)) {

dist/declarations/src/types.d.ts

@@ -6,2 +6,4 @@ import { Adapter } from '@animini/core';
     scale: number;
+    scrollTop: number | string;
+    scrollLeft: number | string;
 };
@@ -8,0 +10,0 @@ export declare type Transform = {

dist/declarations/src/utils.d.ts

 import { Transform } from './types';
 export declare const TRANSFORM_KEYS: string[];
 export declare const SIDES_KEYS: string[];
+export declare const SCROLL_KEYS: string[];
 export declare function getSidesValues(value: string): string;
 export declare function getTransformValues(matrix: string): Transform;

package.json

 {
   "name": "@animini/target-dom",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "animini target for the dom",
@@ -16,4 +16,4 @@ "keywords": [],
   "dependencies": {
-    "@animini/core": "0.2.5"
+    "@animini/core": "0.2.6"
   }
 }

src/adapters/generic.ts

 import { parseUnitValue } from '@animini/core'
 import { DomAdapter } from '../types'
+import { SCROLL_KEYS } from '../utils'
 
@@ -23,4 +24,4 @@ const parse: DomAdapter['parse'] = (value, animated) => {
   parse,
-  format(value: number) {
-    if (!isNaN(value as any)) return value + 'px'
+  format(value: number, animated) {
+    if (!isNaN(value as any) && !SCROLL_KEYS.includes(animated.key!)) return value + 'px'
     return value
@@ -27,0 +28,0 @@ },

src/adapters/string.ts

@@ -14,3 +14,3 @@ import { interpolate, Animated, parseNumbers } from '@animini/core'
   parse(value, a) {
-    if (SIDES_KEYS.includes(a.key as string)) {
+    if (SIDES_KEYS.includes(a.key!)) {
       value = getSidesValues(value)
@@ -17,0 +17,0 @@ }

src/targetDom.ts

 import { color, generic, transform, string } from './adapters'
 import { DomAdapter, Styles, Transform } from './types'
 import { Target } from '@animini/core'
-import { getSidesValues, getTransformValues, SIDES_KEYS, TRANSFORM_KEYS } from './utils'
+import { getSidesValues, getTransformValues, SCROLL_KEYS, SIDES_KEYS, TRANSFORM_KEYS } from './utils'
 
@@ -22,3 +22,4 @@ const ADAPTERS: Partial<Record<keyof Styles, DomAdapter>> = {
   padding: string,
-  margin: string
+  margin: string,
+  inset: string
 }
@@ -30,3 +31,3 @@
   setValues(values, el) {
-    const { x, y, scale, ...rest } = values
+    const { x, y, scale, scrollTop, scrollLeft, ...rest } = values
     for (let key in rest) {
@@ -36,2 +37,6 @@ // @ts-expect-error
     }
+
+    if (scrollTop !== undefined) el.scrollTop = scrollTop as number
+    if (scrollLeft !== undefined) el.scrollLeft = scrollTop as number
+
     if (x === undefined && y === undefined && scale === undefined) return
@@ -48,3 +53,6 @@ if (!x && !y && (scale === void 0 || scale === 1)) el.style.removeProperty('transform')
     const adapter = ADAPTERS[key as any] || (!NO_ADAPTER.includes(key as string) ? generic : undefined)
-    if (TRANSFORM_KEYS.includes(key as string)) {
+    if (SCROLL_KEYS.includes(key as string)) {
+      // @ts-expect-error
+      value = element[key]
+    } else if (TRANSFORM_KEYS.includes(key as string)) {
       value = getTransformValues(style.transform)[key as keyof Transform]
@@ -51,0 +59,0 @@ } else if (SIDES_KEYS.includes(key as string)) {

src/types.ts

@@ -8,2 +8,4 @@ import { Adapter } from '@animini/core'
   scale: number
+  scrollTop: number | string
+  scrollLeft: number | string
 }
@@ -10,0 +12,0 @@

src/utils.ts

 import { Transform } from './types'
 
 export const TRANSFORM_KEYS = ['scale', 'x', 'y']
-export const SIDES_KEYS = ['margin', 'padding']
+export const SIDES_KEYS = ['inset', 'margin', 'padding']
+export const SCROLL_KEYS = ['scrollLeft', 'scrollTop']
 
@@ -6,0 +7,0 @@ export function getSidesValues(value: string) {

No alert changes

Improved metrics

Total package byte prevSize

25562

increased by7.93%

Lines of code

795

increased by4.88%

Dependency changes

• + Added@animini/core@0.2.6(transitive)

• - Removed@animini/core@0.2.5(transitive)

• Updated@animini/core@0.2.6