From d3f9e3761ad2f45818a61ea61340d1c916981906 Mon Sep 17 00:00:00 2001
From: Jakob Rosenberg <jakobrosenberg@gmail.com>
Date: Sun, 26 May 2024 22:20:57 +0200
Subject: [PATCH] feat: Carousel

---
 lib/runtime/helpers/dedicated/Carousel.svelte | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 lib/runtime/helpers/dedicated/Carousel.svelte

diff --git a/lib/runtime/helpers/dedicated/Carousel.svelte b/lib/runtime/helpers/dedicated/Carousel.svelte
new file mode 100644
index 00000000..5ce55ce3
--- /dev/null
+++ b/lib/runtime/helpers/dedicated/Carousel.svelte
@@ -0,0 +1,51 @@
+<script>
+    import { url } from '../index.js'
+    import { RouteOnScroll } from './RouteOnScroll/index.js'
+    /** @type {ConstructorParameters<typeof RouteOnScroll>['0']}*/
+    export let options = { direction: 'horizontal' }
+
+    // const routeOnScroll = new RouteOnScroll($url, {
+    const routeOnScroll = new RouteOnScroll({
+        scrollEvent: 'scroll', // or "scrollend"
+        threshold: 100, // don't trigger until we're within 100px of the page
+        direction: 'horizontal',
+        strategy: 'withinThreshold',
+        ...options,
+    })
+</script>
+
+<div
+    class={$$props.class}
+    data-routify-carousel={routeOnScroll.direction}
+    data-routify-scroll-lock
+    use:$routeOnScroll>
+    <slot />
+</div>
+
+<style>
+    /**
+    *    Scroll snap
+    */
+    [data-routify-carousel] {
+        display: grid;
+        overflow: auto;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+    [data-routify-carousel] > :global(*) {
+        scroll-snap-align: start;
+    }
+    [data-routify-carousel='horizontal'] {
+        grid-auto-flow: column;
+        grid-auto-columns: 100%;
+        scroll-snap-type: x mandatory;
+    }
+    [data-routify-carousel='vertical'] {
+        grid-auto-flow: row;
+        grid-auto-rows: 100%;
+        scroll-snap-type: y mandatory;
+    }
+</style>