@bygghammar/cms-platform 0.90.0-m7.9 → 0.91.0

package/src/ui/MobileCarousel.tsx

@@ -0,0 +1,289 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { Pause, Play } from "lucide-react";
+
+/**
+ * A phone-sized horizontal carousel that becomes an ordinary grid from the
+ * `sm` breakpoint up.
+ *
+ * The scrolling is the browser's own: a scroll-snapping overflow container
+ * with momentum, so a swipe feels native and nothing is simulated in
+ * JavaScript. The script here only tracks which slide is centred, moves the
+ * container when a dot is clicked, and optionally advances on a timer — which
+ * is why this needs no carousel dependency.
+ *
+ * Above `sm` the same markup is a grid: the desktop and tablet layouts a block
+ * already had are untouched, the indicator and the autoplay controls are
+ * hidden, and no timer runs.
+ */
+
+/** Sensible bounds for an author-set autoplay interval. */
+export const MIN_AUTOPLAY_MS = 2000;
+export const MAX_AUTOPLAY_MS = 30000;
+export const DEFAULT_AUTOPLAY_MS = 5000;
+
+export function clampAutoplayMs(value: unknown): number {
+  const n = Number(value);
+  if (!Number.isFinite(n) || n <= 0) return DEFAULT_AUTOPLAY_MS;
+  return Math.min(MAX_AUTOPLAY_MS, Math.max(MIN_AUTOPLAY_MS, Math.round(n)));
+}
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+/**
+ * Slides are found by attribute, never by child index: the track also holds the
+ * element that names it, and counting that as a slide would leave the indicator
+ * pointing one card ahead of the one the reader is actually looking at.
+ */
+const SLIDE_SELECTOR = ":scope > [data-cms-slide]";
+
+function slideElements(track: HTMLElement): HTMLElement[] {
+  return Array.from(track.querySelectorAll<HTMLElement>(SLIDE_SELECTOR));
+}
+
+/** Which slide currently sits nearest the middle of the visible track. */
+function centredSlide(track: HTMLElement): number {
+  const mid = track.scrollLeft + track.clientWidth / 2;
+  let best = 0;
+  let bestDistance = Infinity;
+  slideElements(track).forEach((el, i) => {
+    const distance = Math.abs(el.offsetLeft + el.clientWidth / 2 - mid);
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      best = i;
+    }
+  });
+  return best;
+}
+
+export type MobileCarouselProps = {
+  /** One node per slide. Order is the reading order. */
+  children: ReactNode[];
+  /** Accessible name for the carousel as a whole. */
+  label?: string;
+  /** Grid classes applied from `sm` up, e.g. `sm:grid-cols-2 lg:grid-cols-3`. */
+  gridClassName?: string;
+  /** Gap utilities shared by both layouts. */
+  gapClassName?: string;
+  /** Extra classes for each slide. */
+  slideClassName?: string;
+  /** Advance on a timer while the carousel is on screen. */
+  autoplay?: boolean;
+  autoplayMs?: number;
+  /** Slide width on phones, as a CSS width. */
+  slideWidth?: string;
+};
+
+export function MobileCarousel({
+  children,
+  label = "Carousel",
+  gridClassName = "sm:grid-cols-2",
+  gapClassName = "gap-6",
+  slideClassName = "",
+  autoplay = false,
+  autoplayMs = DEFAULT_AUTOPLAY_MS,
+  slideWidth = "85%",
+}: MobileCarouselProps) {
+  const slides = children;
+  const count = slides.length;
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [index, setIndex] = useState(0);
+  const [userPaused, setUserPaused] = useState(false);
+  /** Bumped by any interaction, which restarts the autoplay timer. */
+  const [interaction, setInteraction] = useState(0);
+  const [onScreen, setOnScreen] = useState(false);
+  const [reduced, setReduced] = useState(false);
+  const labelId = useId();
+
+  useEffect(() => {
+    setReduced(prefersReducedMotion());
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => setReduced(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+
+  /* Which slide is centred. Read from the scroll position, so a swipe, a dot
+     click and the timer all end up agreeing. */
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      setIndex(centredSlide(track));
+    };
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(measure);
+    };
+    track.addEventListener("scroll", onScroll, { passive: true });
+    measure();
+    return () => {
+      track.removeEventListener("scroll", onScroll);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [count]);
+
+  /* Autoplay only matters while the carousel is actually on screen. */
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track || typeof IntersectionObserver === "undefined") {
+      setOnScreen(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => setOnScreen(entries.some((e) => e.isIntersecting)),
+      { threshold: 0.35 },
+    );
+    io.observe(track);
+    return () => io.disconnect();
+  }, []);
+
+  const goTo = useCallback(
+    (next: number, smooth = true) => {
+      const track = trackRef.current;
+      if (!track || count === 0) return;
+      const target = ((next % count) + count) % count;
+      const el = slideElements(track)[target];
+      if (!el) return;
+      const left = el.offsetLeft - (track.clientWidth - el.clientWidth) / 2;
+      track.scrollTo({ left, behavior: smooth && !reduced ? "smooth" : "auto" });
+      setIndex(target);
+    },
+    [count, reduced],
+  );
+
+  /* One timer, restarted whenever the reader touches anything. Paused for
+     reduced motion, for a hidden tab, off screen, or on request. */
+  useEffect(() => {
+    if (!autoplay || reduced || userPaused || !onScreen || count < 2) return;
+    if (typeof window === "undefined") return;
+    // Only phones show the carousel; above `sm` the grid needs no timer.
+    if (typeof window.matchMedia === "function" && window.matchMedia("(min-width: 640px)").matches) {
+      return;
+    }
+    const ms = clampAutoplayMs(autoplayMs);
+    const id = window.setInterval(() => {
+      if (typeof document !== "undefined" && document.hidden) return;
+      const track = trackRef.current;
+      if (!track) return;
+      goTo(centredSlide(track) + 1);
+    }, ms);
+    return () => window.clearInterval(id);
+  }, [autoplay, autoplayMs, reduced, userPaused, onScreen, count, interaction, goTo]);
+
+  const noteInteraction = useCallback(() => setInteraction((n) => n + 1), []);
+
+  if (count === 0) return null;
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="carousel"
+      aria-label={label}
+      className="relative"
+      onPointerDown={noteInteraction}
+      onTouchStart={noteInteraction}
+    >
+      <div
+        ref={trackRef}
+        tabIndex={0}
+        aria-labelledby={labelId}
+        onKeyDown={(e) => {
+          if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+          e.preventDefault();
+          noteInteraction();
+          goTo(index + (e.key === "ArrowRight" ? 1 : -1));
+        }}
+        className={[
+          // Phones: a snapping scroller. The negative margin lets slides bleed
+          // to the screen edge without the page itself scrolling sideways.
+          "relative -mx-6 flex snap-x snap-mandatory overflow-x-auto px-6",
+          // `motion-safe:` and not plain `scroll-smooth`: a stylesheet's
+          // scroll-behavior overrides `scrollTo({ behavior: "auto" })`, so the
+          // reduced-motion preference has to be honoured in the CSS as well.
+          "motion-safe:scroll-smooth",
+          "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sea",
+          // From `sm` up it is the grid the block always had.
+          "sm:mx-0 sm:grid sm:snap-none sm:overflow-visible sm:px-0",
+          gapClassName,
+          gridClassName,
+        ].join(" ")}
+      >
+        <span id={labelId} className="sr-only">
+          {label}
+        </span>
+        {slides.map((slide, i) => (
+          <div
+            key={i}
+            role="group"
+            aria-roledescription="slide"
+            aria-label={`${i + 1} of ${count}`}
+            data-cms-slide=""
+            style={{ ["--cms-slide-w" as string]: slideWidth }}
+            className={`w-[var(--cms-slide-w)] shrink-0 snap-center sm:w-auto sm:shrink ${slideClassName}`}
+          >
+            {slide}
+          </div>
+        ))}
+      </div>
+
+      {count > 1 ? (
+        <div className="mt-6 flex items-center justify-center gap-3 sm:hidden">
+          <div className="flex items-center gap-2">
+            {slides.map((_, i) => (
+              <button
+                key={i}
+                type="button"
+                aria-label={`Go to slide ${i + 1} of ${count}`}
+                aria-current={i === index ? "true" : undefined}
+                onClick={() => {
+                  noteInteraction();
+                  goTo(i);
+                }}
+                className={`size-2.5 rounded-full border transition-colors ${
+                  i === index ? "border-sea bg-sea" : "border-ink/25 bg-ink/15"
+                }`}
+              />
+            ))}
+          </div>
+          {autoplay && !reduced ? (
+            <button
+              type="button"
+              onClick={() => {
+                noteInteraction();
+                setUserPaused((p) => !p);
+              }}
+              aria-pressed={userPaused}
+              className="ml-1 inline-flex size-7 items-center justify-center rounded-full border border-ink/20 text-ink/60 hover:border-sea hover:text-ink"
+            >
+              {userPaused ? <Play className="size-3.5" /> : <Pause className="size-3.5" />}
+              <span className="sr-only">
+                {userPaused ? "Start automatic slideshow" : "Pause automatic slideshow"}
+              </span>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div aria-live="polite" aria-atomic="true" className="sr-only">
+        {`Slide ${index + 1} of ${count}`}
+      </div>
+    </div>
+  );
+}