From d087205134d2a45ba747d02e0f13f11481597ff7 Mon Sep 17 00:00:00 2001
From: ryohidaka <39184410+ryohidaka@users.noreply.github.com>
Date: Mon, 6 May 2024 16:47:56 +0900
Subject: [PATCH] fix!: Fix target attribute of cube face element

---
 src/example/main.ts | 23 +++++++++++------------
 src/utils/dom.ts    |  6 ++++--
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/example/main.ts b/src/example/main.ts
index ca4142a..2699c96 100644
--- 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
index 6a82f93..968f96d 100644
--- 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) => {