Improve news animation

Author: shravanngoswamii

_includes/news.qmd

@@ -3,6 +3,7 @@ listing:
 - id: news
   contents:
     - "news/posts/*/index.qmd"
+  max-items: 10
   sort: date desc
   type: grid
   grid-columns: 3
@@ -29,39 +30,43 @@ listing:
     display: none !important;
   }
 
-  /* carousel wrapper */
   #carousel-container {
     width: 100%;
     overflow: hidden;
     position: relative;
   }
-  /* focus outline for accessibility */
   #carousel-container:focus {
     outline: 2px solid #007acc;
     outline-offset: 4px;
   }
 
-  /* sliding track */
   #carousel-track {
     display: flex;
     align-items: flex-start;
-    transition: transform 0.5s ease;
+    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
     will-change: transform;
   }
 
   /* each slide sizing & height animation */
   #carousel-track > .g-col-1 {
-    flex: 0 0 33.3333%;
+    flex: 0 0 33.3333%; /* Default for desktop (3 columns) */
     padding: 1rem;
     box-sizing: border-box;
     display: block !important;
     transition: height 0.3s ease;
   }
 
-  /* single‑column on mobile */
+  /* Tablet/iPad size: 2 columns */
+  @media (max-width: 1024px) and (min-width: 769px) {
+    #carousel-track > .g-col-1 {
+      flex: 0 0 50%; /* 2 columns */
+    }
+  }
+
+  /* Single-column on smaller mobile */
   @media (max-width: 768px) {
     #carousel-track > .g-col-1 {
-      flex: 0 0 100%;
+      flex: 0 0 100%; /* 1 column */
     }
   }
 
@@ -79,73 +84,124 @@ listing:
 </style>
 
 <script>
-  // initialize carousel after DOM is ready
   document.addEventListener('DOMContentLoaded', function () {
     const listing = document.getElementById('listing-news');
     if (!listing) return;
-    listing.classList.add('enhanced-carousel'); // flag JS enhancement
 
-    const items = Array.from(
+    const originalItems = Array.from(
       listing.querySelectorAll('.list.grid.quarto-listing-cols-3 > .g-col-1')
-    ); // collect slides
-    const N = items.length; // total number of slides
-    if (!N) return;
-
-    // create carousel wrapper with accessibility roles
-    const carouselContainer = document.createElement('div');
-    carouselContainer.id = 'carousel-container';
-    carouselContainer.setAttribute('role', 'region');
-    carouselContainer.setAttribute('aria-live', 'polite');
-    carouselContainer.setAttribute('tabindex', '0');
-
-    // create track element
-    const carouselTrack = document.createElement('div');
-    carouselTrack.id = 'carousel-track';
-
-    items.forEach(i => carouselTrack.appendChild(i)); // move slides into track
-    carouselContainer.appendChild(carouselTrack);
-    listing.parentNode.insertBefore(carouselContainer, listing.nextSibling); // insert carousel
-
-    // determine items per view (responsive)
-    function getItemsPerView() { return window.innerWidth < 768 ? 1 : 3; }
-    let itemsPerView = getItemsPerView();
-    if (N <= itemsPerView) { // handle few slides
-      const h = Math.max(...items.map(i => i.offsetHeight));
-      carouselContainer.style.height = h + 'px';
+    );
+    const N_original = originalItems.length;
+
+    // Helper to get items per view (cached on first call, recalculated on resize)
+    function getItemsPerView() {
+      const width = window.innerWidth;
+      if (width <= 768) { // Mobile
+        return 1;
+      } else if (width > 768 && width <= 1024) { // Tablet/iPad
+        return 2;
+      } else { // Desktop
+        return 3;
+      }
+    }
+
+    // If there are too few items to scroll, just display them statically.
+    // This check now uses the initial itemsPerView.
+    if (N_original <= getItemsPerView()) {
+      listing.classList.remove('enhanced-carousel');
       return;
     }
 
+    // Add enhanced-carousel class only if the carousel is actually being initialized
+    listing.classList.add('enhanced-carousel');
+
+    let carouselContainer = document.getElementById('carousel-container');
+    let carouselTrack = document.getElementById('carousel-track');
+
+    // Initialize carousel elements if they don't exist (first load or after a full re-init on resize)
+    if (!carouselContainer) {
+      carouselContainer = document.createElement('div');
+      carouselContainer.id = 'carousel-container';
+      carouselContainer.setAttribute('role', 'region');
+      carouselContainer.setAttribute('aria-live', 'polite');
+      carouselContainer.setAttribute('tabindex', '0');
+
+      carouselTrack = document.createElement('div');
+      carouselTrack.id = 'carousel-track';
+      carouselContainer.appendChild(carouselTrack);
+      listing.parentNode.insertBefore(carouselContainer, listing.nextSibling);
+    } else {
+        // Clear existing children from track if re-initializing on resize
+        while(carouselTrack.firstChild) {
+            carouselTrack.removeChild(carouselTrack.firstChild);
+        }
+    }
+
+    let itemsPerView = getItemsPerView(); // Initial calculation
+    const numClones = Math.max(itemsPerView, 1);
+
+    const clonedItems = [];
+    for (let i = 0; i < numClones; i++) {
+        const clone = originalItems[i % N_original].cloneNode(true);
+        clone.setAttribute('aria-hidden', 'true');
+        clonedItems.push(clone);
+    }
+
+    originalItems.forEach(i => {
+        carouselTrack.appendChild(i);
+        i.setAttribute('aria-hidden', 'false');
+    });
+    clonedItems.forEach(i => carouselTrack.appendChild(i));
+
+    const allItems = [...originalItems, ...clonedItems];
+
     let currentIndex = 0;
-    let maxIndex = N - itemsPerView;
     let shiftPercent = 100 / itemsPerView;
-    const displayDuration = 2000; // slide interval
+    const displayDuration = 2000;
+    const transitionDuration = 700;
 
-    // normalize visible slide heights
     function recalcHeight() {
-      items.forEach(i => i.style.height = 'auto');
-      const vis = items.slice(currentIndex, currentIndex + itemsPerView);
-      const h = Math.max(...vis.map(i => i.offsetHeight));
+      for (let i = currentIndex; i < Math.min(currentIndex + itemsPerView, allItems.length); i++) {
+          allItems[i].style.height = 'auto';
+      }
+
+      const vis = allItems.slice(currentIndex, currentIndex + itemsPerView);
+      const h = vis.length > 0 ? Math.max(...vis.map(i => i.offsetHeight)) : 0;
       vis.forEach(i => i.style.height = h + 'px');
       carouselContainer.style.height = h + 'px';
     }
 
-    // move track and adjust heights
-    function updateSlide(idx) {
+    function updateSlide(idx, instant = false) {
+      if (instant) {
+        carouselTrack.style.transition = 'none';
+      } else {
+        carouselTrack.style.transition = `transform ${transitionDuration / 1000}s cubic-bezier(0.25, 1, 0.5, 1)`;
+      }
+
       carouselTrack.style.transform = `translateX(-${idx * shiftPercent}%)`;
       recalcHeight();
+
+      allItems.forEach((item, i) => {
+          if (i >= currentIndex && i < currentIndex + itemsPerView) {
+              item.setAttribute('aria-hidden', 'false');
+          } else {
+              item.setAttribute('aria-hidden', 'true');
+          }
+      });
+
+      if (!instant && idx >= N_original) {
+        setTimeout(() => {
+          currentIndex = 0;
+          updateSlide(currentIndex, true);
+        }, transitionDuration);
+      }
     }
 
-    // slide controls
     function nextSlide() {
-      currentIndex = currentIndex < maxIndex ? currentIndex + 1 : 0;
-      updateSlide(currentIndex);
-    }
-    function prevSlide() {
-      currentIndex = currentIndex > 0 ? currentIndex - 1 : maxIndex;
+      currentIndex++;
       updateSlide(currentIndex);
     }
 
-    // initial render
     recalcHeight();
     updateSlide(0);
 
@@ -168,26 +224,24 @@ listing:
       }
     });
 
-    // keyboard navigation
-    carouselContainer.addEventListener('keydown', e => {
-      if (e.key === 'ArrowRight') { nextSlide(); e.preventDefault(); }
-      if (e.key === 'ArrowLeft')  { prevSlide(); e.preventDefault(); }
-    });
-
-    // debounce on window resize
     let resizeTimeout = null;
     window.addEventListener('resize', () => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        const v = getItemsPerView();
-        if (v !== itemsPerView) {
-          itemsPerView = v;
-          maxIndex = N - itemsPerView;
-          shiftPercent = 100 / itemsPerView;
-          currentIndex = Math.min(currentIndex, maxIndex);
+        const newItemsPerView = getItemsPerView();
+
+        if (newItemsPerView !== itemsPerView || N_original <= newItemsPerView) {
+            clearInterval(intervalId);
+            carouselContainer.remove();
+            document.dispatchEvent(new Event('DOMContentLoaded'));
+            return;
         }
+
+        itemsPerView = newItemsPerView;
+        shiftPercent = 100 / itemsPerView;
+        currentIndex = Math.min(currentIndex, N_original - 1);
         recalcHeight();
-        updateSlide(currentIndex);
+        updateSlide(currentIndex, true);
       }, 150);
     });
   });