Handle card hover images in js not css so they can break the bounding…

… box Now that tables have display:block so that they can right-scroll we need to handle hover images differently so they don't get clipped by overflow:hidden.
PennyDreadfulMTG · Nov 8, 2024 · 2378c09 · 2378c09
1 parent f3cd922
commit 2378c09
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/gatherling/gatherling.js b/gatherling/gatherling.js
@@ -101,18 +101,43 @@ function formatDate(originalDate, start, timeZone, locale, short) {
   return `${formattedDate} • ${formattedTime}`;
 }
 
-export { formatDate };
+function initTime() {
+  const timeElements = document.querySelectorAll('time[datetime]');
+  timeElements.forEach(timeElement => {
+      const isoDate = timeElement.getAttribute('datetime');
+      const originalDate = luxon.DateTime.fromISO(isoDate);
+      const start = luxon.DateTime.now();
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      const locale = navigator.language || navigator.languages[0]; // Fallback to languages array if needed
+      const short = !timeElement.classList.contains('long');
+      const formattedDate = formatDate(originalDate, start, timeZone, locale, short);
+      timeElement.textContent = formattedDate;
+  });
+}
 
-if (typeof window !== 'undefined') {
-    const timeElements = document.querySelectorAll('time[datetime]');
-    timeElements.forEach(timeElement => {
-        const isoDate = timeElement.getAttribute('datetime');
-        const originalDate = luxon.DateTime.fromISO(isoDate);
-        const start = luxon.DateTime.now();
-        const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-        const locale = navigator.language || navigator.languages[0]; // Fallback to languages array if needed
-        const short = !timeElement.classList.contains('long');
-        const formattedDate = formatDate(originalDate, start, timeZone, locale, short);
-        timeElement.textContent = formattedDate;
+function initHoverImage() {
+  document.querySelectorAll('.cardHoverImageWrapper').forEach(wrapper => {
+    wrapper.addEventListener('mouseenter', function() {
+        const hoverImage = this.querySelector('.linkCardHoverImage');
+        const rect = this.getBoundingClientRect();
+
+        // Adjust the hover image position based on card's position in the viewport, with your offsets
+        hoverImage.style.position = 'fixed';
+        hoverImage.style.left = `${rect.left + 160}px`; // Offset 150px to the right of the card
+        hoverImage.style.top = `${rect.top - 160}px`; // Offset -155px above the card
+        hoverImage.style.display = 'block';
+    });
+
+    wrapper.addEventListener('mouseleave', function() {
+        const hoverImage = this.querySelector('.linkCardHoverImage');
+        hoverImage.style.display = 'none';
     });
+  });
+}
+
+export { formatDate, initHoverImage };
+
+if (typeof window !== 'undefined') {
+  initTime();
+  initHoverImage();
 }
diff --git a/gatherling/styles/css/stylesheet.css b/gatherling/styles/css/stylesheet.css
@@ -431,25 +431,9 @@ a.create_deck_link {
     color: var(--link-emphasis-text-color);
 }
 
-/* autocard */
-.cardHoverImageWrapper {
-    position: relative;
-    display: inline-block;
-}
-
-.linkCardHoverImage {
-    position: absolute;
-    left: 150px;
-    top: -155px;
-    z-index: 20;
-}
-
 .cardHoverImageWrapper .linkCardHoverImage {
     display: none;
-}
-
-.cardHoverImageWrapper:hover .linkCardHoverImage {
-    display: block;
+    z-index: 20;
 }
 
 .crop {