feat: improving carousel

assets/js/carousel.js

@@ -0,0 +1,74 @@
+const carousels = document.querySelectorAll("[data-carousel]");
+
+carousels.forEach((carousel) => {
+    const prev = carousel.querySelector("[data-direction=previous]");
+    const next = carousel.querySelector("[data-direction=next]");
+    const paginationDots = carousel.querySelectorAll("[data-pagination-dot]");
+    const scrollContainer = carousel.querySelector("[data-scroll]");
+    const scrollItems = [...scrollContainer.querySelectorAll("[data-item]")];
+
+    const options = {
+        root: scrollContainer,
+        rootMargin: `0px`,
+        threshold: 0.9,
+    };
+
+    const setActiveIndex = (index) => {
+        paginationDots.forEach((dot) => {
+            dot.setAttribute("aria-selected", false);
+        });
+
+        paginationDots[index].setAttribute("aria-selected", true);
+    };
+
+    setActiveIndex(0)
+
+    const onIntersect = (entries, observer) => {
+        entries.forEach((entry, index) => {
+            if (entry.isIntersecting) {
+                const visibleItem = entry.target;
+                if (visibleItem.dataset.itemIndex) {
+                    setActiveIndex(Number.parseInt(visibleItem.dataset.itemIndex));
+                } else {
+                    setActiveIndex(0);
+                }
+            }
+        });
+    };
+
+    const observer = new IntersectionObserver(onIntersect, options);
+
+    scrollItems.forEach((item) => {
+        observer.observe(item);
+    });
+
+    const onPrevNextClick = (event) => {
+        event.preventDefault();
+
+        const target = event.currentTarget;
+        const distance = scrollContainer.offsetWidth;
+        const direction = target.dataset.direction;
+        const scrollTo = direction === "next" ? distance : distance * -1;
+
+        scrollContainer.scrollBy({ left: scrollTo, behavior: "smooth" });
+    };
+
+    const onPaginationClick = (event) => {
+        event.preventDefault();
+
+        const distance = scrollContainer.offsetWidth;
+        const target = event.currentTarget;
+
+        if (target.dataset.paginationIndex) {
+            const index = Number.parseInt(target.dataset.paginationIndex);
+            scrollContainer.scrollTo({ left: distance * index, behavior: "smooth" });
+        }
+    };
+
+    prev.addEventListener("click", onPrevNextClick);
+    next.addEventListener("click", onPrevNextClick);
+
+    paginationDots.forEach((dot) => {
+        dot.addEventListener("click", onPaginationClick);
+    });
+});

layouts/partials/carousel.html

@@ -6,7 +6,7 @@
 {{ end }}
 {{ if gt (len $images) 1 }}
     {{ $output = slice `
-        <div class="relative overflow-hidden rounded">
+        <div class="relative rounded" data-carousel>
         <button
             class="flex h-11 w-11 items-center justify-center rounded-full bg-gray-100 text-gray-400 z-1 absolute left-0 top-1/2 z-10 ml-4 -translate-y-1/2"
             data-direction="previous"
@@ -33,37 +33,36 @@
         </button>
         <div
             class="relative flex w-full snap-x snap-mandatory overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&amp;::-webkit-scrollbar]:hidden"
+            data-scroll
         >
     `}}
-    {{ range $images }}
-        {{ $output = $output | append `
+    {{ range $key, $image := $images }}
+        {{ $output = $output | append (printf `
         <div
-            data-item="true"
-            data-item-index="2"
+            data-item
+            data-item-index="%d"
             class="w-full shrink-0 snap-center"
-        >`}}
-        {{ $output = $output | append . }}
+        >` $key) }}
+        {{ $output = $output | append $image }}
         {{ $output = $output | append `</div>` }}
     {{ end }}
     {{ $output = $output | append `
         </div>
         <div class="mt-4 flex flex-wrap justify-center gap-2">
+    `}}
+    {{ range $index, $image := $images }}
+        {{ $output = $output | append (printf `
             <button
-            data-item-index="0"
-            class="400 h-4 w-4 rounded-full focus:outline-none focus-visible:ring-2 bg-purple-400 focus-visible:ring-purple-200"
-            ></button>
-            <button
-            data-item-index="1"
-            class="400 h-4 w-4 rounded-full focus:outline-none focus-visible:ring-2 bg-purple-200 focus-visible:ring-purple-400"
-            ></button>
-            <button
-            data-item-index="2"
-            class="400 h-4 w-4 rounded-full focus:outline-none focus-visible:ring-2 bg-purple-200 focus-visible:ring-purple-400"
-            ></button>
+              data-pagination-dot
+              data-pagination-index="%d"
+              class="h-4 w-4 rounded-full focus:outline-none focus-visible:ring-2 bg-purple-200 focus-visible:ring-purple-400 aria-selected:bg-purple-400 aria-selected:focus-visible:ring-purple-200">
+            </button>
+        ` $index) }}
+    {{ end }}
+    {{ $output = $output | append `
         </div>
         </div>
-        `
-    }}
+    `}}
     {{ $output = delimit $output "" }}
 {{ end }}
 {{ return $output }}

layouts/partials/head.html

@@ -4,4 +4,7 @@
 <link href="{{ "css/styles.css" | relURL }}?{{ now.Unix }}" rel="stylesheet">
 <link rel="authorization_endpoint" href="https://micro.blog/indieauth/auth">
 <link rel="token_endpoint" href="https://micro.blog/indieauth/token">
-<link rel="micropub" href="https://micro.blog/micropub">
+<link rel="micropub" href="https://micro.blog/micropub">
+
+{{ $js := slice (resources.Get "js/main.js") (resources.Get "js/carousel.js") | resources.Concat "js/bundle.js" | js.Build }}
+<script type="text/javascript" src="{{ $js.Permalink }}" defer></script>