Revert carousel.js where the movement is fluid

Fer-Bar · May 23, 2024 · b760da6 · b760da6
1 parent cc93f98
commit b760da6
Showing 1 changed file with 57 additions and 43 deletions.
diff --git a/pet/static/pet/js/carousel.js b/pet/static/pet/js/carousel.js
@@ -1,59 +1,47 @@
+const wrapper = document.querySelector(".wrapper-carousel");
 const carousel = document.querySelector(".carousel-secondary");
+const firstCardWidth = carousel.querySelector(".card-secondary").offsetWidth;
 const arrowBtns = document.querySelectorAll(".wrapper-carousel i");
-let carouselChildren = [...carousel.children];
-const cardCount = carouselChildren.length;
+const carouselChildren = [...carousel.children];
 
-let isDragging = false, startX, startScrollLeft;
+let isDragging = false, isAutoPlay = false, startX, startScrollLeft, timeoutId;
 
-function getFirstCardWidth() {
-    return carousel.querySelector("ul > li.card-secondary").offsetWidth; // 1st secondary-card
-}
+// Get the number of cards that can fit in the carousel at once
+let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);
 
-function getCardPerView() {
-    return Math.round(carousel.offsetWidth / getFirstCardWidth());
-}
+// Insert copies of the last few cards to beginning of carousel for infinite scrolling
+carouselChildren.slice(-cardPerView).reverse().forEach(card => {
+    carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
+});
 
-// Add event listeners for the arrow buttons to scroll the carousel left and right
-function addArrowButtonListeners() {
-    arrowBtns.forEach(btn => {
-        btn.addEventListener("click", () => {
-            let firstCardWidth = getFirstCardWidth();
-            carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
+// Insert copies of the first few cards to end of carousel for infinite scrolling
+carouselChildren.slice(0, cardPerView).forEach(card => {
+    carousel.insertAdjacentHTML("beforeend", card.outerHTML);
+});
 
-            if (btn.id === "left") {
-                // Remove the last card and add it to the beginning
-                let lastCard = carouselChildren.pop();
-                carouselChildren.unshift(lastCard);
-                carousel.insertBefore(lastCard, carousel.firstChild);
-            } else {
-                // Remove the first card and add it to the end
-                let firstCard = carouselChildren.shift();
-                carouselChildren.push(firstCard);
-                carousel.removeChild(firstCard);
-                carousel.appendChild(firstCard);
-            }
-        });
-    });
-}
+// Scroll the carousel at appropriate position to hide first few duplicate cards on Firefox
+carousel.classList.add("no-transition");
+carousel.scrollLeft = carousel.offsetWidth;
+carousel.classList.remove("no-transition");
 
-function checkArrowVisibility() {
-    let cardPerView = getCardPerView();
-    if (cardCount >= cardPerView) {
-        arrowBtns.forEach(btn => btn.style.display = "block");
-    } else {
-        arrowBtns.forEach(btn => btn.style.display = "none");
-    }
-}
+// Add event listeners for the arrow buttons to scroll the carousel left and right
+arrowBtns.forEach(btn => {
+    btn.addEventListener("click", () => {
+        carousel.scrollLeft += btn.id === "left" ? -firstCardWidth : firstCardWidth;
+    });
+});
 
 const dragStart = (e) => {
     isDragging = true;
     carousel.classList.add("dragging");
+    // Records the initial cursor and scroll position of the carousel
     startX = e.pageX;
     startScrollLeft = carousel.scrollLeft;
 }
 
 const dragging = (e) => {
-    if(!isDragging) return;
+    if(!isDragging) return; // if isDragging is false return from here
+    // Updates the scroll position of the carousel based on the cursor movement
     carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
 }
 
@@ -62,9 +50,35 @@ const dragStop = () => {
     carousel.classList.remove("dragging");
 }
 
-addArrowButtonListeners();
-window.addEventListener("load", checkArrowVisibility);
-window.addEventListener("resize", checkArrowVisibility);
+const infiniteScroll = () => {
+    // If the carousel is at the beginning, scroll to the end
+    if(carousel.scrollLeft === 0) {
+        carousel.classList.add("no-transition");
+        carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
+        carousel.classList.remove("no-transition");
+    }
+    // If the carousel is at the end, scroll to the beginning
+    else if(Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
+        carousel.classList.add("no-transition");
+        carousel.scrollLeft = carousel.offsetWidth;
+        carousel.classList.remove("no-transition");
+    }
+
+    // Clear existing timeout & start autoplay if mouse is not hovering over carousel
+    clearTimeout(timeoutId);
+    if(!wrapper.matches(":hover")) autoPlay();
+}
+
+const autoPlay = () => {
+    if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false
+    // Autoplay the carousel after every 2500 ms
+    timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 2500);
+}
+autoPlay();
+
 carousel.addEventListener("mousedown", dragStart);
 carousel.addEventListener("mousemove", dragging);
-document.addEventListener("mouseup", dragStop);
+document.addEventListener("mouseup", dragStop);
+carousel.addEventListener("scroll", infiniteScroll);
+wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
+wrapper.addEventListener("mouseleave", autoPlay);