carousel

1---
2import type { HTMLAttributes } from "astro/types"
3import type { EmblaOptionsType } from "embla-carousel"
4 
5import { cn } from "@/lib/utils"
6 
7type Props = HTMLAttributes<"div"> & {
8  opts?: EmblaOptionsType
9  orientation?: "horizontal" | "vertical"
10}
11 
12const {
13  class: className,
14  opts,
15  orientation = "horizontal",
16  ...props
17} = Astro.props
18 
19const resolvedOpts: EmblaOptionsType = {
20  ...opts,
21  axis: orientation === "horizontal" ? "x" : "y",
22}
23---
24 
25<div
26  data-slot="carousel"
27  data-orientation={orientation}
28  data-carousel-options={JSON.stringify(resolvedOpts)}
29  class={cn("group/carousel relative", className)}
30  role="region"
31  aria-roledescription="carousel"
32  {...props}
33>
34  <slot />
35</div>
36 
37<script>
38  import EmblaCarousel, {
39    type EmblaCarouselType,
40    type EmblaOptionsType,
41  } from "embla-carousel"
42 
43  type CarouselRoot = HTMLElement & {
44    __fulldevCarouselApi?: EmblaCarouselType
45  }
46 
47  type CarouselInstance = {
48    cleanup: () => void
49  }
50 
51  type CarouselStore = Map<CarouselRoot, CarouselInstance>
52 
53  declare global {
54    interface Window {
55      __fulldevCarouselInitialized?: boolean
56      __fulldevCarouselStore?: CarouselStore
57    }
58  }
59 
60  if (!window.__fulldevCarouselInitialized) {
61    window.__fulldevCarouselInitialized = true
62    window.__fulldevCarouselStore ??= new Map<CarouselRoot, CarouselInstance>()
63 
64    const store = window.__fulldevCarouselStore
65 
66    const getDetails = (api: EmblaCarouselType) => ({
67      api,
68      canScrollPrev: api.canScrollPrev(),
69      canScrollNext: api.canScrollNext(),
70      selectedScrollSnap: api.selectedScrollSnap(),
71      scrollSnapList: api.scrollSnapList(),
72    })
73 
74    const emit = (
75      root: CarouselRoot,
76      type: "carousel:init" | "carousel:select",
77      api: EmblaCarouselType
78    ) => {
79      root.dispatchEvent(
80        new CustomEvent(type, {
81          detail: getDetails(api),
82        })
83      )
84    }
85 
86    const parseOptions = (root: CarouselRoot): EmblaOptionsType => {
87      const rawOptions = root.getAttribute("data-carousel-options")
88 
89      if (!rawOptions) {
90        return {}
91      }
92 
93      try {
94        return JSON.parse(rawOptions) as EmblaOptionsType
95      } catch {
96        return {}
97      }
98    }
99 
100    const syncButton = (button: Element | null, enabled: boolean) => {
101      if (!(button instanceof HTMLButtonElement)) {
102        return
103      }
104 
105      if (button.dataset.manualDisabled === "true") {
106        button.disabled = true
107        return
108      }
109 
110      button.disabled = !enabled
111// … truncated