this repo has no description
www.baileykane.co/
Remove complex event listener logic in favor of handling everything in DragToRotateElement
-50
-50
pages/library-cards.js
-50
pages/library-cards.js
···
17
17
};
18
18
19
19
useEffect(() => {
20
-
// console.log("STARTING");
21
-
// console.log("selected:", selectedCard);
22
-
// console.log("all:", allCards);
23
-
// console.log("librarycardlist:", libraryCardsList);
24
-
25
-
const setRotation = (x, y) => {
26
-
if (!selectedCard) return;
27
-
28
-
selectedCard.style.setProperty("--rotateX", -1 * y + "deg");
29
-
selectedCard.style.setProperty("--rotateY", -1 * x + "deg");
30
-
};
31
-
32
-
function handleMouseMove(event) {
33
-
if (!selectedCard) return;
34
-
35
-
const x = event.clientX;
36
-
const y = event.clientY;
37
-
38
-
const rect = selectedCard.getBoundingClientRect();
39
-
const middleX = (rect.left + rect.right) / 2;
40
-
const middleY = (rect.top + rect.bottom) / 2;
41
-
42
-
// Optional: Use this to only move the card if mouse is near the card
43
-
// if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
44
-
// selectedCard.style.setProperty("--rotateX", "0deg");
45
-
// selectedCard.style.setProperty("--rotateY", "0deg");
46
-
// return;
47
-
// }
48
-
49
-
const offsetX = ((x - middleX) / middleX) * 45;
50
-
const offsetY = ((y - middleY) / middleY) * 45;
51
-
52
-
setRotation(offsetX, offsetY);
53
-
}
54
-
55
20
setAllCards(document.querySelectorAll(".library-card"));
56
21
57
22
if (allCards) {
58
23
allCards.forEach((element) => {
59
-
// console.log("Removing event listener for:", element);
60
-
element.style.setProperty("--rotateX", "0deg");
61
-
element.style.setProperty("--rotateY", "0deg");
62
24
element.classList.remove("library-card-selected");
63
25
});
64
26
}
65
27
66
-
document.removeEventListener("mousemove", handleMouseMove);
67
-
68
28
if (selectedCard) {
69
-
document.addEventListener("mousemove", handleMouseMove);
70
29
selectedCard.classList.add("library-card-selected");
71
30
}
72
-
73
-
// console.log("ENDING");
74
-
// console.log("selected:", selectedCard);
75
-
// console.log("all:", allCards);
76
-
77
-
// Ensures the event listener is removed when the component is unmounted
78
-
return () => {
79
-
document.removeEventListener("mousemove", handleMouseMove);
80
-
};
81
31
}, [selectedCard, libraryCardsList]);
82
32
83
33
return (