Carousel script debugging

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);
         });
     });
 });