@animini/target-dom - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

CHANGELOG.md

 # @animini/target-dom
 
+## 0.2.5
+
+### Patch Changes
+
+- 0885116: Add string interpolation
+- Updated dependencies [0885116]
+  - @animini/core@0.2.5
+
 ## 0.2.4
@@ -4,0 +12,0 @@

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

@@ -51,3 +51,5 @@ 'use strict';
 
-const parse = (value, key, el) => {
+const parse = (value, animated) => {
+  var _animated$el;
+
   let [_value, unit] = core.parseUnitValue(value);
@@ -58,3 +60,3 @@ if (isNaN(_value)) return value;
     case '%':
-      const parent = el === null || el === void 0 ? void 0 : el.offsetParent;
+      const parent = (_animated$el = animated.el) === null || _animated$el === void 0 ? void 0 : _animated$el.offsetParent;
       const size = (key === 'top' ? parent === null || parent === void 0 ? void 0 : parent.offsetHeight : parent === null || parent === void 0 ? void 0 : parent.offsetWidth) || 0;
@@ -85,3 +87,3 @@ return _value * size / 100;
 const transform = {
-  parse(value, key, element) {
+  parse(value, animated) {
     let [_value, unit] = core.parseUnitValue(value);
@@ -91,3 +93,3 @@
       case '%':
-        return _value * parseFloat(getComputedStyle(element)[key === 'x' ? 'width' : 'height']) / 100;
+        return _value * parseFloat(getComputedStyle(animated.el)[animated.key === 'x' ? 'width' : 'height']) / 100;
 
@@ -106,8 +108,75 @@ case 'vw':
 
+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 = {
+  onInit(a) {
+    a.i = core.interpolate(a.value);
+  },
+
+  parse(value, a) {
+    if (SIDES_KEYS.includes(a.key)) {
+      value = getSidesValues(value);
+    }
+
+    return core.parseNumbers(value);
+  },
+
+  parseInitial(_value, a) {
+    return a.i.values;
+  },
+
+  format(value, a) {
+    return a.i.compute(value);
+  }
+
+};
+
 const _excluded = ["x", "y", "scale"];
-const TRANSFORM_KEYS = {
-  scale: 1,
-  x: 1,
-  y: 1
-};
 const ADAPTERS = {
@@ -125,3 +194,7 @@ color,
   x: transform,
-  y: transform
+  y: transform,
+  clipPath: string,
+  boxShadow: string,
+  padding: string,
+  margin: string
 };
@@ -152,4 +225,6 @@ const NO_ADAPTER = ['opacity', 'scale'];
 
-    if (key in TRANSFORM_KEYS) {
-      value = getTranslateValues(style)[key];
+    if (TRANSFORM_KEYS.includes(key)) {
+      value = getTransformValues(style.transform)[key];
+    } else if (SIDES_KEYS.includes(key)) {
+      value = getSidesValues(style[key]);
     } else {
@@ -164,34 +239,2 @@ value = style[key];
 
-function getTranslateValues(style) {
-  const matrix = style.transform;
-
-  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]
-  };
-}
-
 exports.dom = dom;

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

@@ -51,3 +51,5 @@ 'use strict';
 
-const parse = (value, key, el) => {
+const parse = (value, animated) => {
+  var _animated$el;
+
   let [_value, unit] = core.parseUnitValue(value);
@@ -58,3 +60,3 @@ if (isNaN(_value)) return value;
     case '%':
-      const parent = el === null || el === void 0 ? void 0 : el.offsetParent;
+      const parent = (_animated$el = animated.el) === null || _animated$el === void 0 ? void 0 : _animated$el.offsetParent;
       const size = (key === 'top' ? parent === null || parent === void 0 ? void 0 : parent.offsetHeight : parent === null || parent === void 0 ? void 0 : parent.offsetWidth) || 0;
@@ -85,3 +87,3 @@ return _value * size / 100;
 const transform = {
-  parse(value, key, element) {
+  parse(value, animated) {
     let [_value, unit] = core.parseUnitValue(value);
@@ -91,3 +93,3 @@
       case '%':
-        return _value * parseFloat(getComputedStyle(element)[key === 'x' ? 'width' : 'height']) / 100;
+        return _value * parseFloat(getComputedStyle(animated.el)[animated.key === 'x' ? 'width' : 'height']) / 100;
 
@@ -106,8 +108,75 @@ case 'vw':
 
+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 = {
+  onInit(a) {
+    a.i = core.interpolate(a.value);
+  },
+
+  parse(value, a) {
+    if (SIDES_KEYS.includes(a.key)) {
+      value = getSidesValues(value);
+    }
+
+    return core.parseNumbers(value);
+  },
+
+  parseInitial(_value, a) {
+    return a.i.values;
+  },
+
+  format(value, a) {
+    return a.i.compute(value);
+  }
+
+};
+
 const _excluded = ["x", "y", "scale"];
-const TRANSFORM_KEYS = {
-  scale: 1,
-  x: 1,
-  y: 1
-};
 const ADAPTERS = {
@@ -125,3 +194,7 @@ color,
   x: transform,
-  y: transform
+  y: transform,
+  clipPath: string,
+  boxShadow: string,
+  padding: string,
+  margin: string
 };
@@ -152,4 +225,6 @@ const NO_ADAPTER = ['opacity', 'scale'];
 
-    if (key in TRANSFORM_KEYS) {
-      value = getTranslateValues(style)[key];
+    if (TRANSFORM_KEYS.includes(key)) {
+      value = getTransformValues(style.transform)[key];
+    } else if (SIDES_KEYS.includes(key)) {
+      value = getSidesValues(style[key]);
     } else {
@@ -164,34 +239,2 @@ value = style[key];
 
-function getTranslateValues(style) {
-  const matrix = style.transform;
-
-  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]
-  };
-}
-
 exports.dom = dom;

dist/animini-target-dom.esm.js

@@ -1,2 +0,2 @@
-import { parseColor, parseUnitValue } from '@animini/core';
+import { parseColor, parseUnitValue, interpolate, parseNumbers } from '@animini/core';
 
@@ -47,3 +47,5 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
-const parse = (value, key, el) => {
+const parse = (value, animated) => {
+  var _animated$el;
+
   let [_value, unit] = parseUnitValue(value);
@@ -54,3 +56,3 @@ if (isNaN(_value)) return value;
     case '%':
-      const parent = el === null || el === void 0 ? void 0 : el.offsetParent;
+      const parent = (_animated$el = animated.el) === null || _animated$el === void 0 ? void 0 : _animated$el.offsetParent;
       const size = (key === 'top' ? parent === null || parent === void 0 ? void 0 : parent.offsetHeight : parent === null || parent === void 0 ? void 0 : parent.offsetWidth) || 0;
@@ -81,3 +83,3 @@ return _value * size / 100;
 const transform = {
-  parse(value, key, element) {
+  parse(value, animated) {
     let [_value, unit] = parseUnitValue(value);
@@ -87,3 +89,3 @@
       case '%':
-        return _value * parseFloat(getComputedStyle(element)[key === 'x' ? 'width' : 'height']) / 100;
+        return _value * parseFloat(getComputedStyle(animated.el)[animated.key === 'x' ? 'width' : 'height']) / 100;
 
@@ -102,8 +104,75 @@ case 'vw':
 
+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 = {
+  onInit(a) {
+    a.i = interpolate(a.value);
+  },
+
+  parse(value, a) {
+    if (SIDES_KEYS.includes(a.key)) {
+      value = getSidesValues(value);
+    }
+
+    return parseNumbers(value);
+  },
+
+  parseInitial(_value, a) {
+    return a.i.values;
+  },
+
+  format(value, a) {
+    return a.i.compute(value);
+  }
+
+};
+
 const _excluded = ["x", "y", "scale"];
-const TRANSFORM_KEYS = {
-  scale: 1,
-  x: 1,
-  y: 1
-};
 const ADAPTERS = {
@@ -121,3 +190,7 @@ color,
   x: transform,
-  y: transform
+  y: transform,
+  clipPath: string,
+  boxShadow: string,
+  padding: string,
+  margin: string
 };
@@ -148,4 +221,6 @@ const NO_ADAPTER = ['opacity', 'scale'];
 
-    if (key in TRANSFORM_KEYS) {
-      value = getTranslateValues(style)[key];
+    if (TRANSFORM_KEYS.includes(key)) {
+      value = getTransformValues(style.transform)[key];
+    } else if (SIDES_KEYS.includes(key)) {
+      value = getSidesValues(style[key]);
     } else {
@@ -160,34 +235,2 @@ value = style[key];
 
-function getTranslateValues(style) {
-  const matrix = style.transform;
-
-  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]
-  };
-}
-
 export { dom };

dist/declarations/src/adapters/index.d.ts

 export { color } from './color';
 export { generic } from './generic';
 export { transform } from './transform';
+export { string } from './string';

dist/declarations/src/types.d.ts

@@ -7,2 +7,8 @@ import { Adapter } from '@animini/core';
 };
+export declare type Transform = {
+    scale: number;
+    x: number;
+    y: number;
+    z: number;
+};
 export declare type DomAdapter = Adapter<HTMLElement>;

package.json

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

src/adapters/generic.ts

 import { parseUnitValue } from '@animini/core'
 import { DomAdapter } from '../types'
 
-const parse: DomAdapter['parse'] = (value, key, el) => {
+const parse: DomAdapter['parse'] = (value, animated) => {
   let [_value, unit] = parseUnitValue(value)
@@ -9,3 +9,3 @@ if (isNaN(_value)) return value
     case '%':
-      const parent = el?.offsetParent
+      const parent = animated.el?.offsetParent
       // @ts-expect-error
@@ -12,0 +12,0 @@ const size = (key === 'top' ? parent?.offsetHeight : parent?.offsetWidth) || 0

src/adapters/index.ts

 export { color } from './color'
 export { generic } from './generic'
 export { transform } from './transform'
+export { string } from './string'

src/adapters/transform.ts

@@ -5,7 +5,7 @@ import { parseUnitValue } from '@animini/core'
 export const transform: DomAdapter = {
-  parse(value, key, element) {
+  parse(value, animated) {
     let [_value, unit] = parseUnitValue(value)
     switch (unit) {
       case '%':
-        return (_value * parseFloat(getComputedStyle(element!)[key === 'x' ? 'width' : 'height'])) / 100
+        return (_value * parseFloat(getComputedStyle(animated.el!)[animated.key === 'x' ? 'width' : 'height'])) / 100
       case 'vw':
@@ -12,0 +12,0 @@ return (_value * window.innerWidth) / 100

src/targetDom.ts

@@ -1,7 +0,6 @@
-import { color, generic, transform } from './adapters'
-import { DomAdapter, Styles } from './types'
+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'
 
-const TRANSFORM_KEYS = { scale: 1, x: 1, y: 1 }
-
 const ADAPTERS: Partial<Record<keyof Styles, DomAdapter>> = {
@@ -19,3 +18,7 @@ color,
   x: transform,
-  y: transform
+  y: transform,
+  clipPath: string,
+  boxShadow: string,
+  padding: string,
+  margin: string
 }
@@ -43,4 +46,6 @@
     const adapter = ADAPTERS[key as any] || (!NO_ADAPTER.includes(key as string) ? generic : undefined)
-    if (key in TRANSFORM_KEYS) {
-      value = getTranslateValues(style)[key as keyof Transform]
+    if (TRANSFORM_KEYS.includes(key as string)) {
+      value = getTransformValues(style.transform)[key as keyof Transform]
+    } else if (SIDES_KEYS.includes(key as string)) {
+      value = getSidesValues(style[key as any])
     } else {
@@ -52,24 +57,1 @@ value = style[key as any]
 }
-
-type Transform = { scale: number; x: number; y: number; z: number }
-
-function getTranslateValues(style: CSSStyleDeclaration): Transform {
-  const matrix = style.transform
-
-  // No transform property. Simply return 0 values.
-  if (matrix === 'none' || typeof matrix === 'undefined') {
-    return { scale: 1, x: 0, y: 0, z: 0 }
-  }
-
-  // Can either be 2d or 3d transform
-  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 }
-  }
-
-  // if (matrixType === '3d') {
-  return { scale: ~~matrixValues[0], x: ~~matrixValues[12], y: ~~matrixValues[13], z: ~~matrixValues[14] }
-  // }
-}

src/types.ts

@@ -10,2 +10,4 @@ import { Adapter } from '@animini/core'
 
+export type Transform = { scale: number; x: number; y: number; z: number }
+
 export type DomAdapter = Adapter<HTMLElement>

No alert changes

Improved metrics

Total package byte prevSize

23683

increased by24.54%

Number of package files

25

increased by19.05%

Lines of code

758

increased by26.12%

Dependency changes

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

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

• Updated@animini/core@0.2.5