rename x/y internal values to translateX/translateY

Author: jscottsmith

src/classes/Bounds.test.ts

@@ -13,10 +13,14 @@ describe.each([
       originTotalDistX: 1700,
     },
     {
-      y0: { value: 0, unit: 'px' },
-      y1: { value: 0, unit: 'px' },
-      x1: { value: 0, unit: 'px' },
-      x0: { value: 0, unit: 'px' },
+      translateY: [
+        { value: 0, unit: 'px' },
+        { value: 0, unit: 'px' },
+      ],
+      translateX: [
+        { value: 0, unit: 'px' },
+        { value: 0, unit: 'px' },
+      ],
     },
     { width: 1000, height: 100 },
     {
@@ -40,10 +44,14 @@ describe.each([
       originTotalDistX: 700,
     },
     {
-      y0: { value: -10, unit: '%' },
-      y1: { value: 10, unit: '%' },
-      x1: { value: -10, unit: '%' },
-      x0: { value: 10, unit: '%' },
+      translateY: [
+        { value: -10, unit: '%' },
+        { value: 10, unit: '%' },
+      ],
+      translateX: [
+        { value: 10, unit: '%' },
+        { value: -10, unit: '%' },
+      ],
     },
     { width: 500, height: 500 },
     {
@@ -69,10 +77,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: '%',
-      y0: { value: 50, unit: '%' },
-      y1: { value: -50, unit: '%' },
-      x0: { value: 0, unit: '%' },
-      x1: { value: 0, unit: '%' },
+      translateY: [
+        { value: 50, unit: '%' },
+        { value: -50, unit: '%' },
+      ],
+      translateX: [
+        { value: 0, unit: '%' },
+        { value: 0, unit: '%' },
+      ],
     },
     { width: 805, height: 675 },
     {
@@ -98,10 +110,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: '%',
-      y0: { value: 50, unit: '%' },
-      y1: { value: -50, unit: '%' },
-      x0: { value: 0, unit: '%' },
-      x1: { value: 0, unit: '%' },
+      translateY: [
+        { value: 50, unit: '%' },
+        { value: -50, unit: '%' },
+      ],
+      translateX: [
+        { value: 0, unit: '%' },
+        { value: 0, unit: '%' },
+      ],
     },
     { width: 1024, height: 675 },
     {
@@ -127,10 +143,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: '%',
-      y0: { value: 0, unit: '%' },
-      y1: { value: 0, unit: '%' },
-      x0: { value: -50, unit: '%' },
-      x1: { value: 50, unit: '%' },
+      translateY: [
+        { value: 0, unit: '%' },
+        { value: 0, unit: '%' },
+      ],
+      translateX: [
+        { value: -50, unit: '%' },
+        { value: 50, unit: '%' },
+      ],
     },
     { width: 1024, height: 675 },
     {
@@ -156,10 +176,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: '%',
-      y0: { value: 50, unit: '%' },
-      y1: { value: -50, unit: '%' },
-      x0: { value: 50, unit: '%' },
-      x1: { value: -50, unit: '%' },
+      translateY: [
+        { value: 50, unit: '%' },
+        { value: -50, unit: '%' },
+      ],
+      translateX: [
+        { value: 50, unit: '%' },
+        { value: -50, unit: '%' },
+      ],
     },
     { width: 1024, height: 813 },
     {
@@ -185,10 +209,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: '%',
-      y0: { value: -50, unit: '%' },
-      y1: { value: 50, unit: '%' },
-      x0: { value: -50, unit: '%' },
-      x1: { value: 50, unit: '%' },
+      translateY: [
+        { value: -50, unit: '%' },
+        { value: 50, unit: '%' },
+      ],
+      translateX: [
+        { value: -50, unit: '%' },
+        { value: 50, unit: '%' },
+      ],
     },
     { width: 1024, height: 813 },
     {
@@ -214,10 +242,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: '%',
-      y0: { value: 50, unit: '%' },
-      y1: { value: -50, unit: '%' },
-      x0: { value: 50, unit: '%' },
-      x1: { value: -50, unit: '%' },
+      translateY: [
+        { value: 50, unit: '%' },
+        { value: -50, unit: '%' },
+      ],
+      translateX: [
+        { value: 50, unit: '%' },
+        { value: -50, unit: '%' },
+      ],
     },
     { width: 1024, height: 813 },
     {
@@ -243,10 +275,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: 'px',
-      y0: { value: 85, unit: 'px' },
-      y1: { value: -85, unit: 'px' },
-      x0: { value: 0, unit: '%' },
-      x1: { value: 0, unit: '%' },
+      translateY: [
+        { value: 85, unit: 'px' },
+        { value: -85, unit: 'px' },
+      ],
+      translateX: [
+        { value: 0, unit: '%' },
+        { value: 0, unit: '%' },
+      ],
     },
     { width: 979, height: 643 },
     {
@@ -272,10 +308,14 @@ describe.each([
     {
       xUnit: '%',
       yUnit: 'px',
-      y0: { value: -200, unit: 'px' },
-      y1: { value: 125, unit: 'px' },
-      x0: { value: 0, unit: '%' },
-      x1: { value: 0, unit: '%' },
+      translateY: [
+        { value: -200, unit: 'px' },
+        { value: 125, unit: 'px' },
+      ],
+      translateX: [
+        { value: 0, unit: '%' },
+        { value: 0, unit: '%' },
+      ],
     },
     { width: 891, height: 643 },
     {

src/classes/Bounds.ts

@@ -11,7 +11,10 @@ export class Bounds {
   right: number;
 
   constructor(rect: Rect, offsets: ParallaxStartEndOffsets, view: View) {
-    const { y0, y1, x1, x0 } = offsets;
+    const {
+      translateY: [y0, y1],
+      translateX: [x0, x1],
+    } = offsets;
 
     // Y offsets
     const yPercent = y1.unit === '%' && y0.unit === '%';

src/classes/Element.test.ts

@@ -8,7 +8,7 @@ const DEFAULT_OPTIONS = {
   elInner: document.createElement('div'),
   elOuter: document.createElement('div'),
   scrollAxis: ScrollAxis.vertical,
-  props: { x0: 0, x1: 0, y0: 0, y1: 0 },
+  props: { translateX: [0, 0], translateY: [0, 0] },
 };
 
 describe('Expect the Element class', () => {
@@ -19,7 +19,11 @@ describe('Expect the Element class', () => {
 
   it('to update props and return the instance', () => {
     const element = new Element(DEFAULT_OPTIONS);
-    const updates = { disabled: true, x0: 100, x1: 100, y0: 0, y1: 0 };
+    const updates = {
+      disabled: true,
+      translateX: [100, 100],
+      translateY: [0, 0],
+    };
     const instance = element.updateProps(updates);
     expect(instance.props).toMatchObject(updates);
     expect(instance).toBeInstanceOf(Element);

src/classes/ParallaxController.test.ts

@@ -12,10 +12,8 @@ const OPTIONS = {
   elOuter: document.createElement('div'),
   props: {
     disabled: false,
-    x1: 0,
-    x0: 0,
-    y1: 0,
-    y0: 0,
+    translateX: [0, 0],
+    translateY: [0, 0],
   },
 };
 
@@ -66,19 +64,21 @@ describe('Expect the ParallaxController', () => {
       percent: 100,
       updatePosition: expect.any(Function),
       offsets: {
-        x1: { unit: '%', value: 0 },
-        x0: { unit: '%', value: 0 },
+        translateY: [
+          { unit: '%', value: 0 },
+          { unit: '%', value: 0 },
+        ],
+        translateX: [
+          { unit: '%', value: 0 },
+          { unit: '%', value: 0 },
+        ],
         xUnit: '%',
-        y1: { unit: '%', value: 0 },
-        y0: { unit: '%', value: 0 },
         yUnit: '%',
       },
       props: {
         disabled: false,
-        x1: 0,
-        x0: 0,
-        y1: 0,
-        y0: 0,
+        translateX: [0, 0],
+        translateY: [0, 0],
       },
     };
     expect(element).toMatchObject(expectedElement);
@@ -116,13 +116,11 @@ describe('Expect the ParallaxController', () => {
       elOuter: document.createElement('div'),
       props: {
         disabled: false,
-        x1: '100px',
-        x0: '-10%',
-        y1: '50px',
-        y0: 100, // defaults to %
+        translateX: ['-10%', '100px'],
+        translateY: [100, '50px'],
       },
     };
-
+    // @ts-expect-error
     expect(() => controller.createElement(incorrectOffsets)).toThrowError(
       'Must provide matching units for the min and max offset values of each axis.'
     );

src/classes/ParallaxController.ts

@@ -28,10 +28,8 @@ export type ParallaxControllerOptions = {
 
 export type ParallaxElementProperties = {
   disabled?: boolean;
-  x0: string | number;
-  x1: string | number;
-  y0: string | number;
-  y1: string | number;
+  translateX: string[] | number[];
+  translateY: string[] | number[];
 };
 
 export type CreateElementOptions = {

src/components/Parallax.test.tsx

@@ -74,7 +74,7 @@ describe('Expect the <Parallax> component', () => {
     expect(controller.createElement).toBeCalledWith({
       elInner: expect.any(HTMLElement),
       elOuter: expect.any(HTMLElement),
-      props: { disabled: false, x0: 0, x1: 0, y0: -100, y1: 100 },
+      props: { disabled: false, translateX: [0, 0], translateY: [-100, 100] },
     });
   });
 
@@ -116,10 +116,8 @@ describe('Expect the <Parallax> component', () => {
 
     expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
       disabled: false,
-      x0: 100,
-      x1: -100,
-      y0: -100,
-      y1: 100,
+      translateX: [100, -100],
+      translateY: [-100, 100],
     });
 
     const newProps = { disabled: false, x: [-40, -60], y: [10, 80] };
@@ -130,10 +128,8 @@ describe('Expect the <Parallax> component', () => {
 
     expect(controller.updateElementPropsById).toBeCalledWith(element.id, {
       disabled: false,
-      x0: -40,
-      x1: -60,
-      y0: 10,
-      y1: 80,
+      translateX: [-40, -60],
+      translateY: [10, 80],
     });
 
     // only update with valid props

src/components/Parallax.tsx

@@ -8,15 +8,29 @@ import { useController } from '../hooks/useController';
 
 export interface ParallaxProps {
   /**
-   * Offsets on x-axis in % or px. If no unit is passed percent is assumed. Percent is based on
+   * Start and end translation on x-axis in % or px. If no unit is passed percent is assumed. Percent is based on
    * the elements width.
+   *
+   * Example:
+   *
+   * x={[-100, 100]}
+   *
+   * First value is the starting translation
+   * Second value is the ending translation
    */
-  x?: Array<string | number>;
+  x?: string[] | number[];
   /**
-   * Offsets on y-axis in % or px. If no unit is passed percent is assumed. Percent is based on
-   * the elements width.
+   * Start and end translation on y-axis in % or px. If no unit is passed percent is assumed. Percent is based on
+   * the elements height.
+   *
+   * Example:
+   *
+   * y={[-100, 100]}
+   *
+   * First value is the starting translation
+   * Second value is the ending translation
    */
-  y?: Array<string | number>;
+  y?: string[] | number[];
   /**
    * Optionally pass additional class names to be added to the outermost parallax element.
    */
@@ -56,7 +70,7 @@ function useVerifyController(controller: ParallaxController) {
   }, [controller]);
 }
 
-function Parallax(props: PropsWithChildren<ParallaxProps>) {
+export function Parallax(props: PropsWithChildren<ParallaxProps>) {
   const controller = useController();
   const refInner = useRef<HTMLElement>();
   const refOuter = useRef<HTMLElement>();
@@ -71,13 +85,9 @@ function Parallax(props: PropsWithChildren<ParallaxProps>) {
         disabled: props.disabled,
         // Defaults set in Parallax.defaultProps
         // @ts-expect-error
-        x0: props.x[0],
-        // @ts-expect-error
-        x1: props.x[1],
+        translateX: props.x,
         // @ts-expect-error
-        y0: props.y[0],
-        // @ts-expect-error
-        y1: props.y[1],
+        translateY: props.y,
       },
     };
   }
@@ -128,5 +138,3 @@ Parallax.defaultProps = {
   x: [0, 0],
   y: [0, 0],
 };
-
-export { Parallax };