From 081186c8f0752007afded50e209a05fb7e6e6cd6 Mon Sep 17 00:00:00 2001
From: Ben Visness <bvisness@gmail.com>
Date: Tue, 2 Aug 2022 15:14:29 -0500
Subject: [PATCH] Add automatic scrolling behavior to jam carousel

---
 public/js/carousel.js                      |  7 ++++++-
 src/templates/src/project_index.html       |  4 +++-
 src/templates/src/wheeljam_2022_index.html | 10 +++++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/public/js/carousel.js b/public/js/carousel.js
index d251cd7..4daaa46 100644
--- a/public/js/carousel.js
+++ b/public/js/carousel.js
@@ -1,4 +1,7 @@
-function initCarousel(container, durationMS = 0) {
+function initCarousel(container, options = {}) {
+    const durationMS = options.durationMS ?? 0;
+    const onChange = options.onChange ?? (() => {});
+
     const numCarouselItems = container.querySelectorAll('.carousel-item').length;
     const buttonContainer = container.querySelector('.carousel-buttons');
 
@@ -25,6 +28,8 @@ function initCarousel(container, durationMS = 0) {
         buttons[i].classList.add('active');
 
         current = i;
+
+        onChange(current);
     }
 
     function activateNext() {
diff --git a/src/templates/src/project_index.html b/src/templates/src/project_index.html
index ea28d42..36eef58 100644
--- a/src/templates/src/project_index.html
+++ b/src/templates/src/project_index.html
@@ -71,6 +71,8 @@
 	</div>
 
 	<script>
-		initCarousel(document.querySelector('.project-carousel'), 10000);
+		initCarousel(document.querySelector('.project-carousel'), {
+			durationMS: 10000,
+		});
 	</script>
 {{ end }}
diff --git a/src/templates/src/wheeljam_2022_index.html b/src/templates/src/wheeljam_2022_index.html
index be6962d..ea2bcfb 100644
--- a/src/templates/src/wheeljam_2022_index.html
+++ b/src/templates/src/wheeljam_2022_index.html
@@ -428,7 +428,15 @@
     </div>
 
     <script>
-        const { next, prev } = initCarousel(document.querySelector('.carousel-container'));
+        const carouselContainer = document.querySelector('.carousel-container');
+
+        const { next, prev } = initCarousel(carouselContainer, {
+            onChange() {
+                if (carouselContainer.getBoundingClientRect().top < 0) {
+                    carouselContainer.scrollIntoView({ behavior: 'smooth' });
+                }
+            },
+        });
 
         document.querySelector('.carousel-thinger.next')
             .addEventListener('click', () => {