Carousel (#1711)

* fix: carousel navigation

* carousel styling with classes

* fix: rabbitcode suggestions

* fix: more rabbitcode suggestions

* fix: even more rabbitcode suggestions

* fix: even more rabbitcode suggestions

Author: jjagielka

src/lib/carousel/Carousel.svelte

@@ -1,26 +1,47 @@
 <script lang="ts">
   import { type CarouselProps, type State, Slide } from "$lib";
-  import { getTheme } from "$lib/theme/themeUtils";
+  import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
   import clsx from "clsx";
   import { onMount, setContext } from "svelte";
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
 
   const SLIDE_DURATION_RATIO = 0.25;
 
-  let { children, slide, images, index = $bindable(0), slideDuration = 1000, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, onchange, divClass, isPreload = false, ...restProps }: CarouselProps = $props();
+  let { children, slide, images, index = $bindable(0), slideDuration = 1000, slideFit, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, classes, onchange, isPreload = false, ...restProps }: CarouselProps = $props();
 
+  warnThemeDeprecation("Carousel", { imgClass }, { imgClass: "slide" });
+
+  const styling = $derived(classes ?? { slide: imgClass });
+
+  // // Theme context
   const theme = getTheme("carousel");
 
-  const _state: State = $state({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date() });
+  let { base, slide: slideCls } = $derived(carousel());
+
+  const changeSlide = (n: number) => {
+    if (images.length === 0) return;
+
+    if (n % images.length === _state.index) return;
+
+    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return;
+
+    _state.forward = n >= _state.index;
+    _state.index = (images.length + n) % images.length;
+    _state.lastSlideChange = new Date();
+
+    index = _state.index; // Update the bindable index
+    onchange?.(images[_state.index]);
+  };
+
+  const _state: State = $state({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date(), changeSlide });
 
   setContext("state", _state);
 
   let initialized = false;
 
   $effect(() => {
-    index = _state.index;
-    onchange?.(images[index]);
+    changeSlide(index);
   });
 
   onMount(() => {
@@ -29,23 +50,11 @@
   });
 
   const nextSlide = () => {
-    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-
-    _state.forward = true;
-    _state.index = _state.index >= images.length - 1 ? 0 : _state.index + 1;
-    _state.lastSlideChange = new Date();
-
-    return _state;
+    changeSlide(_state.index + 1);
   };
 
   const prevSlide = () => {
-    if (!canChangeSlide({ lastSlideChange: _state.lastSlideChange, slideDuration, slideDurationRatio: SLIDE_DURATION_RATIO })) return _state;
-
-    _state.forward = false;
-    _state.index = _state.index <= 0 ? images.length - 1 : _state.index - 1;
-    _state.lastSlideChange = new Date();
-
-    return _state;
+    changeSlide(_state.index - 1);
   };
 
   const loop = (node: HTMLElement) => {
@@ -79,7 +88,7 @@
 
   const getPositionFromEvent = (evt: MouseEvent | TouchEvent) => {
     const mousePos = (evt as MouseEvent)?.clientX;
-    if (mousePos) return mousePos;
+    if (mousePos !== undefined) return mousePos;
 
     let touchEvt = evt as TouchEvent;
     if (/^touch/.test(touchEvt?.type)) {
@@ -164,15 +173,14 @@
 
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
-<div bind:this={carouselDiv} class={clsx("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
-  <div {...restProps} class={carousel({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme, className) })} {@attach loop}>
-    {#if slide}
-      {@render slide({ index, Slide })}
-    {:else}
-      <Slide image={images[index]} class={clsx(imgClass)} {transition} />
-    {/if}
-  </div>
-  {@render children?.(index)}
+<div bind:this={carouselDiv} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0" {...restProps} class={base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme?.base, className) })} {@attach loop}>
+  {#if slide}
+    {@render slide({ index: _state.index, Slide })}
+  {:else}
+    <Slide image={images[_state.index]} fit={slideFit} class={slideCls({ class: clsx(theme?.slide, styling.slide) })} {transition} />
+  {/if}
+
+  {@render children?.(_state.index)}
 </div>
 
 <!--
@@ -190,7 +198,7 @@
 @prop duration = 0
 @prop "aria-label": ariaLabel = "Draggable Carousel"
 @prop disableSwipe = false
-@prop imgClass = ""
+@prop imgClass = "" // deprecated; use classes.slide instead
 @prop class: className
 @prop onchange
 @prop divClass

src/lib/carousel/CarouselIndicators.svelte

@@ -13,17 +13,14 @@
   const { base, indicator } = $derived(carouselIndicators({ position }));
 
   function goToIndex(newIndex: number) {
-    const currentIndex = _state.index;
-    _state.index = newIndex;
-    _state.forward = newIndex >= currentIndex;
-    _state.lastSlideChange = new Date();
+    _state.changeSlide(newIndex);
   }
 </script>
 
 <div class={base({ class: clsx(theme?.base, className) })} {...restProps}>
   {#each _state.images as _, idx}
     {@const selected = _state.index === idx}
-    <button onclick={() => goToIndex(idx)}>
+    <button type="button" onclick={() => goToIndex(idx)} aria-current={selected ? "true" : undefined} aria-label={`Go to slide ${idx + 1}`}>
       {#if children}
         {@render children({ selected, index: idx })}
       {:else}

src/lib/carousel/Controls.svelte

@@ -3,7 +3,6 @@
   import { getTheme } from "$lib/theme/themeUtils";
   import clsx from "clsx";
   import { getContext } from "svelte";
-  import { canChangeSlide } from "./CarouselSlide";
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
@@ -12,20 +11,7 @@
   const _state = getContext<State>("state");
 
   function changeSlide(forward: boolean) {
-    const { lastSlideChange, slideDuration } = _state;
-    if (!canChangeSlide({ lastSlideChange, slideDuration, slideDurationRatio: 0.75 })) {
-      return;
-    }
-
-    if (forward) {
-      _state.forward = true;
-      _state.index = _state.index >= _state.images.length - 1 ? 0 : _state.index + 1;
-    } else {
-      _state.forward = false;
-      _state.index = _state.index <= 0 ? _state.images.length - 1 : _state.index - 1;
-    }
-    _state.lastSlideChange = new Date();
-    return _state;
+    _state.changeSlide(forward ? _state.index + 1 : _state.index - 1);
   }
 </script>
 

src/lib/carousel/Slide.svelte

@@ -8,7 +8,7 @@
 
   const _state = getContext<State>("state");
 
-  let { image, transition, class: className, ...restProps }: SlideProps = $props();
+  let { image, transition, fit, class: className, ...restProps }: SlideProps = $props();
 
   const theme = getTheme("slide");
 
@@ -28,7 +28,7 @@
     duration: _state.slideDuration
   });
 
-  let imgClass = slide({ class: clsx(theme, className) });
+  let imgClass = slide({ fit, class: clsx(theme, className) });
 </script>
 
 {#if transition}

src/lib/carousel/Thumbnails.svelte

@@ -1,52 +1,38 @@
 <script lang="ts">
-  import { type State, Thumbnail, type ThumbnailsProps } from "$lib";
+  import { Thumbnail, type ThumbnailsProps } from "$lib";
   import { getTheme } from "$lib/theme/themeUtils";
   import clsx from "clsx";
-  import { getContext } from "svelte";
   import { thumbnails } from "./theme";
 
   let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
 
   const theme = getTheme("thumbnails");
 
-  const _state = getContext<State>("state");
-  if (!_state) {
-    console.error("State is undefined. Make sure to provide state context or pass it as a prop.");
-  }
-
-  let lastClickedAt = new Date();
+  // Initialize so the first click is never throttled
+  let lastClickedAt = -Infinity;
 
   const btnClick = (newIndex: number) => {
-    if (new Date().getTime() - lastClickedAt.getTime() < throttleDelay) {
+    const now = Date.now();
+    if (now - lastClickedAt < throttleDelay) {
       console.warn("Thumbnail action throttled");
       return;
     }
-    if (_state) {
-      const currentIndex = _state.index;
-
-      _state.index = newIndex;
-      _state.forward = newIndex >= currentIndex;
-      _state.lastSlideChange = new Date();
 
-      // Update the bound index
-      index = newIndex;
-    } else {
-      // Fallback behavior if state is not available
-      index = newIndex;
-      lastClickedAt = new Date();
-      console.warn("State update skipped - no valid state available");
-    }
+    lastClickedAt = now;
+    index = newIndex;
   };
 
   $effect(() => {
-    index = (index + images.length) % images.length;
+    if (images.length > 0) {
+      index = (index + images.length) % images.length;
+    }
   });
 </script>
 
 <div class={thumbnails({ class: clsx(theme, className) })}>
   {#each images as image, idx}
     {@const selected = index === idx}
-    <button onclick={() => btnClick(idx)} aria-label={ariaLabel}>
+    <button onclick={() => btnClick(idx)} aria-label={ariaLabel} aria-current={selected ? "true" : undefined}>
       {#if children}
         {@render children({ image, selected, imgClass: clsx(imgClass), Thumbnail })}
       {:else}

src/lib/carousel/theme.ts

@@ -1,9 +1,13 @@
+import type { Classes } from "$lib/theme/themeUtils";
 import { tv, type VariantProps } from "tailwind-variants";
 
-export type CarouselVariants = VariantProps<typeof carousel>;
+export type CarouselVariants = VariantProps<typeof carousel> & Classes<typeof carousel>;
 
 export const carousel = tv({
-  base: "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96",
+  slots: {
+    base: "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96",
+    slide: ""
+  },
   variants: {},
   compoundVariants: [],
   defaultVariants: {}
@@ -22,7 +26,6 @@ export const carouselIndicators = tv({
     position: {
       top: { base: "top-5" },
       bottom: { base: "bottom-5" },
-      withThumbnails: { base: "bottom-24" }
     }
   }
 });
@@ -57,6 +60,20 @@ export const thumbnail = tv({
   }
 });
 
+export type SlideVariants = VariantProps<typeof slide>;
+
 export const slide = tv({
-  base: "absolute block w-full! h-full object-cover"
+  base: "absolute block w-full h-full",
+  variants: {
+    fit: {
+      contain: "object-contain",
+      cover: "object-cover",
+      fill: "object-fill",
+      none: "object-none",
+      "scale-down": "object-scale-down"
+    }
+  },
+  defaultVariants: {
+    fit: "cover"
+  }
 });