@canvas3/nuxt 0.0.9 → 0.1.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-nuxt-layout",
   "configKey": "canvas3Layout",
-  "version": "0.0.9",
+  "version": "0.1.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.0"

package/dist/runtime/directives/set-data-attributes.d.ts

@@ -1,3 +1,2 @@
 import type { Directive } from 'vue';
-export type AttrsType = Record<string, number | string>;
 export declare const vSetDataAttribute: Directive;

package/dist/runtime/types/directives.public.d.ts

@@ -1,10 +1,10 @@
-import type { DirectiveBinding, ObjectDirective } from 'vue'
-import type { Canvas3ImageBinding, scrollActionBindOptionType } from '#canvas3-nuxt/types/types'
+import type { ObjectDirective } from 'vue'
+import type { AttrsType, Canvas3ImageBinding, scrollActionBindOptionType } from '#canvas3-nuxt/types/types'
 
 interface Canvas3Directives {
   vCanvas3Image: ObjectDirective<HTMLImageElement, Canvas3ImageBinding>
   vActionOnScroll: ObjectDirective<HTMLElement, scrollActionBindOptionType>
-  vSetDataAttributes: ObjectDirective<HTMLElement, DirectiveBinding>
+  vSetDataAttributes: ObjectDirective<HTMLElement, AttrsType>
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

package/dist/runtime/types/types.d.ts

@@ -113,4 +113,5 @@ export type Canvas3ImageBindType = {
     uniforms?: MeshMaterialUniform | undefined;
     activateMeshUniforms?: MeshMaterialUniform;
 };
+export type AttrsType = Record<string, number | string>;
 export {};

package/dist/runtime/utils/canvas3/helpers.d.ts

@@ -12,3 +12,5 @@ export declare function setScrollActiveElements(elNode: HTMLElement, meshIds: st
 export declare function elementNearViewport(bounds: DOMRect, margin?: number): boolean;
 export declare const lerp: (a: number, b: number, n: number) => number;
 export declare function getShaderMaterial(mesh: Mesh): ShaderMaterial;
+export declare function hasTransformTranslate(el: HTMLElement): boolean;
+export declare function setElTransformTranslate(el: HTMLElement, x?: number, y?: number, z?: number): void;

package/dist/runtime/utils/canvas3/helpers.js

@@ -94,3 +94,24 @@ export const lerp = (a, b, n) => (1 - n) * a + n * b;
 export function getShaderMaterial(mesh) {
   return mesh.material;
 }
+const TRANSLATE_REGEX = /translate3d\([^)]*\)|translateX\([^)]*\)|translateY\([^)]*\)|translate\([^)]*\)/;
+export function hasTransformTranslate(el) {
+  const current = el.style.transform || "";
+  return TRANSLATE_REGEX.test(current);
+}
+export function setElTransformTranslate(el, x = 0, y = 0, z = 0) {
+  const current = el.style.transform || "";
+  const newTranslate = `translate3d(${x}px,${y}px,${z}px)`;
+  if (!current || current === "none") {
+    el.style.transform = newTranslate;
+    return;
+  }
+  if (hasTransformTranslate(el)) {
+    el.style.transform = current.replace(
+      TRANSLATE_REGEX,
+      newTranslate
+    );
+  } else {
+    el.style.transform = `${current} ${newTranslate}`.trim();
+  }
+}

package/dist/runtime/utils/canvas3/scroll.js

@@ -1,6 +1,7 @@
 import {
   elementNearViewport,
   lerp,
+  setElTransformTranslate,
   setScrollActiveElements
 } from "./helpers.js";
 export default class Scroll {
@@ -51,7 +52,7 @@ export default class Scroll {
           item.bounds = item.elNode.getBoundingClientRect();
           item.containerBottom = item.containerEl.getBoundingClientRect().bottom;
         } else {
-          item.elNode.style.transform = `translate3d(0,0px,0)`;
+          setElTransformTranslate(item.elNode, 0, 0);
         }
       }
     }
@@ -119,9 +120,9 @@ export default class Scroll {
           const fixToOriginPx = window.innerHeight * fixToOrigin;
           if (item.childEl && bounds.top < itemMargin + fixToOriginPx && containerBounds.bottom > itemMargin + fixToOriginPx + item.childElBounds.height) {
             const fixedPositionPx = itemMargin - bounds.top + fixToOriginPx;
-            item.childEl.style.transform = `translate3d(0,${fixedPositionPx}px,0)`;
+            setElTransformTranslate(item.childEl, 0, fixedPositionPx);
           } else if (item.childEl && bounds.top > itemMargin + fixToOriginPx && item.childEl.style.transform !== `translate3d(0px, 0px, 0px)`) {
-            item.childEl.style.transform = `translate3d(0px, 0px, 0px)`;
+            setElTransformTranslate(item.childEl, 0, 0);
           }
         } else {
           const speedTrack = elementNearViewport(
@@ -131,18 +132,18 @@ export default class Scroll {
           );
           if (speedTrack) {
             const speed = (window.innerHeight - bounds.top) * item.options.scrollSpeed.value;
-            item.elNode.style.transform = `translate3d(0,${speed}px,0)`;
+            setElTransformTranslate(item.elNode, 0, speed);
           }
         }
       } else {
         item.elNode.style.transition = `linear translate3d 0.3s`;
-        item.elNode.style.transform = `translate3d(0,0,0)`;
+        setElTransformTranslate(item.elNode, 0, 0);
       }
     }
   }
   setScrollPosition() {
     if (Math.round(this.scrollToRender) !== Math.round(this.current) || this.scrollToRender < 10) {
-      this.DOM.scrollable.style.transform = `translate3d(0,${-1 * this.scrollToRender}px,0)`;
+      setElTransformTranslate(this.DOM.scrollable, 0, -1 * this.scrollToRender);
     }
   }
   scrollRenderToFluid(scrollTo) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas3/nuxt",
-  "version": "0.0.9",
+  "version": "0.1.2",
   "publishConfig": {
     "access": "public"
   },