From 0504ba54e3ddd0729318fce46b1d9eb5c80945b8 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 2 Apr 2023 10:01:03 -0700
Subject: [PATCH] Carousel script debugging

---
 assets/scripts/photo_carousel.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/assets/scripts/photo_carousel.js b/assets/scripts/photo_carousel.js
index d7ae0b2..db4c3b3 100644
--- a/assets/scripts/photo_carousel.js
+++ b/assets/scripts/photo_carousel.js
@@ -164,6 +164,7 @@ class PhotoParametersTable {
     #getElementWithQuerySelector(query) {
         const element = this.tableElement.querySelector(query);
         if (!element) {
+            console.error(`Couldn't find ${query} element in`, this.tableElement);
             return null;
         }
         return element;
@@ -216,13 +217,19 @@ document.addEventListener("DOMContentLoaded", (event) => {
         let carouselItems = Array.from(carouselElement.querySelectorAll("ul > li")).map(item => {
             let itemRect = item.getClientRects()[0];
             let relativeX = itemRect.x - carouselRect.x;
+            console.debug("Item at relative x:", relativeX);
             return new CarouselItem(item, relativeX);
         });
 
+        let previousTimeoutID = null;
         let previousScrollLeft = null;
         let isScrollingLeft = true;
 
         carouselElement.querySelector("ul").addEventListener("scroll", event => {
+            if (previousTimeoutID) {
+                clearTimeout(previousTimeoutID);
+            }
+
             const target = event.target;
             const scrollLeft = target.scrollLeft;
 
@@ -236,6 +243,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
             }
             previousScrollLeft = scrollLeft;
 
+            console.debug("isScrollingLeft =", isScrollingLeft);
+
             carouselItems.forEach(item => {
                 const itemRelativeXCoordinate = isScrollingLeft ? item.relativeX - scrollLeft : item.relativeMaxX - scrollLeft;
 
@@ -245,6 +254,8 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
                 if (   (isScrollingLeft && (!itemWasLeftOfContainerCenter && itemIsLeftOfContainerCenter))
                     || (!isScrollingLeft && (itemWasLeftOfContainerCenter && !itemIsLeftOfContainerCenter))) {
+                    console.debug("Item crossed container center", item);
+
                     if (captionElement) {
                         captionElement.innerHTML = item.title;
                     }
@@ -259,6 +270,11 @@ document.addEventListener("DOMContentLoaded", (event) => {
                     photoParams.setExposureTime(item.exposureTime);
                 }
             });
+
+            previousTimeoutID = setTimeout(() => {
+                console.debug(carouselItems);
+                previousScrollLeft = null;
+            }, 500);
         });
     });
 });