fix!: Fix target attribute of cube face element

ryohidaka · May 6, 2024 · d087205 · d087205
1 parent e314a47
commit d087205
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/src/example/main.ts b/src/example/main.ts
@@ -4,18 +4,16 @@ import { init, onRotate, getFaceByIndex } from "../";
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
   <div>
     <div id="cube-3d">
-    <div><h1>1</h1></div>
-    <div><h1>2</h1></div>
-    <div><h1>3</h1></div>
-  </div>
-  <style>
-    #cube-3d-base > div {
-      box-sizing: border-box;
-      border: 0.5px solid black;
-      color: blue;
-      background-color: rgb(255 255 255 / 0.5);
-    }
-  </style>
+      <div data-cube-face>
+        <img src="https://picsum.photos/800" />
+      </div>
+      <div data-cube-face>
+        <img src="https://picsum.photos/800" />
+      </div>
+      <div data-cube-face>
+        <img src="https://picsum.photos/800" />
+      </div>
+    </div>
   </div>
 `;
 
@@ -24,6 +22,7 @@ init("cube-3d", {
   width: 500,
   height: 500,
   initialRotation: 0,
+  swipeIntensity: 5,
 });
 
 // Register a callback for when the rotation changes

diff --git a/src/utils/dom.ts b/src/utils/dom.ts
@@ -54,8 +54,10 @@ export const getFaceElements = (
   targetElement: HTMLElement,
   width: number,
 ): NodeListOf<HTMLDivElement> => {
-  // Retrieve all div elements within the target element
-  const faceElements = targetElement.querySelectorAll("div");
+  // Retrieve all elements with the attribute "data-cube-face" within the target element
+  const faceElements = targetElement.querySelectorAll(
+    "[data-cube-face]",
+  ) as NodeListOf<HTMLElement>;
 
   // Apply common styles to all face elements
   faceElements.forEach((element) => {