eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Carousel script debugging

Browse source
This commit is contained in:
Eryn Wells 2023-04-02 10:01:03 -07:00
parent a053e7d14d
commit 0504ba54e3
1 changed files with 16 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/scripts/photo_carousel.js
View file

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