Carousel

package carousel import (	"context"	"strconv" 	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/utils") type Orientation string const (	OrientationHorizontal Orientation = "horizontal"	OrientationVertical   Orientation = "vertical") type ctxKey string const orientationKey ctxKey = "carouselOrientation" func orientation(ctx context.Context) Orientation {	if o, ok := ctx.Value(orientationKey).(Orientation); ok && o != "" {		return o	}	return OrientationHorizontal} type Align string const (	AlignStart  Align = "start"	AlignCenter Align = "center"	AlignEnd    Align = "end") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Orientation of the scroll axis. Defaults to horizontal.	Orientation Orientation	// Align of the snapped slide within the viewport (embla's align	// option). Defaults to center, like embla.	Align Align	// Loop wraps from the last slide back to the first.	Loop bool	// Autoplay advances the slides automatically (the embla autoplay	// plugin pendant); pauses while hovered.	Autoplay bool	// Interval between autoplay steps in ms. Defaults to 5000.	Interval int} type ContentProps struct {	Class      string	Attributes templ.Attributes} type ItemProps struct {	ID         string	Class      string	Attributes templ.Attributes} type PreviousProps struct {	ID         string	Class      string	Attributes templ.Attributes} type NextProps struct {	ID         string	Class      string	Attributes templ.Attributes} templ Carousel(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Orientation == "" {		{{ p.Orientation = OrientationHorizontal }}	}	if p.Interval == 0 {		{{ p.Interval = 5000 }}	}	{{ ctx = context.WithValue(ctx, orientationKey, p.Orientation) }}	<div		if p.ID != "" {			id={ p.ID }		}		role="region"		aria-roledescription="carousel"		data-slot="carousel"		data-tui-carousel		data-tui-carousel-orientation={ string(p.Orientation) }		if p.Align != "" {			data-tui-carousel-align={ string(p.Align) }		}		data-tui-carousel-loop={ strconv.FormatBool(p.Loop) }		data-tui-carousel-autoplay={ strconv.FormatBool(p.Autoplay) }		data-tui-carousel-interval={ strconv.Itoa(p.Interval) }		class={ utils.CN("relative", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div data-slot="carousel-content" data-tui-carousel-viewport class="overflow-hidden">		<div			data-tui-carousel-track			class={				utils.CN(					"flex",					utils.IfElse(orientation(ctx) == OrientationHorizontal, "-ml-4", "-mt-4 flex-col"),					p.Class,				),			}			{ p.Attributes... }		>			{ children... }		</div>	</div>} templ Item(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		role="group"		aria-roledescription="slide"		data-slot="carousel-item"		data-tui-carousel-item		class={			utils.CN(				"min-w-0 shrink-0 grow-0 basis-full",				utils.IfElse(orientation(ctx) == OrientationHorizontal, "pl-4", "pt-4"),				p.Class,			),		}		{ p.Attributes... }	>		{ children... }	</div>} templ Previous(props ...PreviousProps) {	{{ var p PreviousProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	@button.Button(button.Props{		ID:      p.ID,		Variant: button.VariantOutline,		Size:    button.SizeIconSm,		Class: utils.CN(			"cn-carousel-previous absolute touch-manipulation",			utils.IfElse(				orientation(ctx) == OrientationHorizontal,				"inset-y-0 -left-12 my-auto",				"-top-12 left-1/2 -translate-x-1/2 rotate-90",			),			p.Class,		),		Attributes: utils.MergeAttributes(templ.Attributes{			"data-slot":             "carousel-previous",			"data-tui-carousel-prev": true,		}, p.Attributes),	}) {		@icon.ChevronLeft(icon.Props{Class: "cn-rtl-flip"})		<span class="sr-only">Previous slide</span>	}} templ Next(props ...NextProps) {	{{ var p NextProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	@button.Button(button.Props{		ID:      p.ID,		Variant: button.VariantOutline,		Size:    button.SizeIconSm,		Class: utils.CN(			"cn-carousel-next absolute touch-manipulation",			utils.IfElse(				orientation(ctx) == OrientationHorizontal,				"inset-y-0 -right-12 my-auto",				"-bottom-12 left-1/2 -translate-x-1/2 rotate-90",			),			p.Class,		),		Attributes: utils.MergeAttributes(templ.Attributes{			"data-slot":             "carousel-next",			"data-tui-carousel-next": true,		}, p.Attributes),	}) {		@icon.ChevronRight(icon.Props{Class: "cn-rtl-flip"})		<span class="sr-only">Next slide</span>	}}

(function () {  "use strict";   // Embla-pendant engine: slides snap content-flush to the viewport, drags  // track the pointer 1:1 with edge resistance, and the animation runs  // embla's own physics, per 60fps step the velocity is attracted towards  // the target and damped by friction. Same defaults as embla.  const DURATION = 25; // embla's duration option, attraction = diff / DURATION  const FRICTION = 0.68;  const STEP_MS = 1000 / 60;  const MOMENTUM_MS = 140; // how far a release projects the current velocity  const RESISTANCE = 0.35; // drag resistance beyond the edges   const instances = new WeakMap();   function setup(root) {    if (instances.has(root)) return;    const viewport = root.querySelector("[data-tui-carousel-viewport]");    const track = root.querySelector("[data-tui-carousel-track]");    if (!viewport || !track) return;     const state = {      root,      viewport,      track,      index: 0,      offset: 0,      target: 0,      velocity: 0,      raf: null,      horizontal: root.getAttribute("data-tui-carousel-orientation") !== "vertical",      align: root.getAttribute("data-tui-carousel-align") || "center",      loop: root.getAttribute("data-tui-carousel-loop") === "true",      autoplay: root.getAttribute("data-tui-carousel-autoplay") === "true",      interval: parseInt(root.getAttribute("data-tui-carousel-interval"), 10) || 5000,      timer: null,    };    instances.set(root, state);     track.addEventListener("pointerdown", (e) => onDragStart(state, e));    root.addEventListener("keydown", (e) => {      if (e.key === "ArrowLeft") {        e.preventDefault();        scrollPrev(state);      } else if (e.key === "ArrowRight") {        e.preventDefault();        scrollNext(state);      }    });     if (state.autoplay) {      startAutoplay(state);      root.addEventListener("mouseenter", () => stopAutoplay(state));      root.addEventListener("mouseleave", () => startAutoplay(state));    }     update(state, false);  }   function items(state) {    return [...state.track.querySelectorAll("[data-tui-carousel-item]")].filter(      (item) => item.parentElement === state.track,    );  }   // Snap offsets per slide relative to the first slide, so the gutter margin  // on the track cancels against the slide padding and content sits flush.  // The last snaps are clamped so the track end aligns with the viewport  // edge (embla's trimSnaps).  function snaps(state) {    const its = items(state);    if (!its.length) return [0];    const base = state.horizontal ? its[0].offsetLeft : its[0].offsetTop;    const last = its[its.length - 1];    const end =      (state.horizontal ? last.offsetLeft + last.offsetWidth : last.offsetTop + last.offsetHeight) -      base;    const viewportSize = state.horizontal      ? state.viewport.clientWidth      : state.viewport.clientHeight;    // The slide boxes carry the gutter as leading padding, the visible    // content ends one gutter before the last box edge.    const style = getComputedStyle(its[0]);    const gutter = parseFloat(state.horizontal ? style.paddingLeft : style.paddingTop) || 0;    const max = Math.max(0, end - gutter - viewportSize);    const points = [];    for (const item of its) {      const start = (state.horizontal ? item.offsetLeft : item.offsetTop) - base;      const size = (state.horizontal ? item.offsetWidth : item.offsetHeight) - gutter;      let offset = start;      if (state.align === "center") offset = start - (viewportSize - size) / 2;      else if (state.align === "end") offset = start - (viewportSize - size);      // Clamp into the scrollable range (embla's trimSnaps), edge slides      // collapse onto the flush bounds and dedupe.      offset = Math.max(0, Math.min(offset, max));      if (!points.length || points[points.length - 1] < offset - 0.5) points.push(offset);    }    return points.length ? points : [0];  }   function render(state) {    state.track.style.transform = state.horizontal      ? "translate3d(" + -state.offset + "px, 0, 0)"      : "translate3d(0, " + -state.offset + "px, 0)";  }   function stopEngine(state) {    cancelAnimationFrame(state.raf);    state.raf = null;  }   // Embla's scroll body: every 60fps step the velocity is pulled towards the  // target and damped, which gives the fast start and floaty settle.  function startEngine(state) {    stopEngine(state);    let last = performance.now();    let carry = 0;    const tick = (now) => {      carry += now - last;      last = now;      while (carry >= STEP_MS) {        carry -= STEP_MS;        const diff = state.target - state.offset;        state.velocity += diff / DURATION;        state.velocity *= FRICTION;        state.offset += state.velocity;      }      if (Math.abs(state.target - state.offset) < 0.05 && Math.abs(state.velocity) < 0.05) {        state.offset = state.target;        state.velocity = 0;        render(state);        state.raf = null;        return;      }      render(state);      state.raf = requestAnimationFrame(tick);    };    state.raf = requestAnimationFrame(tick);  }   function update(state, animate) {    const points = snaps(state);    state.index = Math.max(0, Math.min(state.index, points.length - 1));    state.target = points[state.index];    if (animate) {      startEngine(state);    } else {      stopEngine(state);      state.offset = state.target;      state.velocity = 0;      render(state);    }     const prev = state.root.querySelector("[data-tui-carousel-prev]");    const next = state.root.querySelector("[data-tui-carousel-next]");    if (prev) prev.disabled = !state.loop && state.index === 0;    if (next) next.disabled = !state.loop && state.index >= points.length - 1;     // Expose the selection like embla's select event, attributes for CSS and    // a bubbling event for scripts.    state.root.setAttribute("data-tui-carousel-selected", state.index + 1);    state.root.setAttribute("data-tui-carousel-count", points.length);    state.root.dispatchEvent(      new CustomEvent("carousel-select", {        bubbles: true,        detail: { selected: state.index + 1, count: points.length },      })    );  }   function scrollPrev(state) {    const count = snaps(state).length;    if (state.index > 0) {      state.index -= 1;    } else if (state.loop) {      state.index = count - 1;    } else {      return;    }    update(state, true);  }   function scrollNext(state) {    const count = snaps(state).length;    if (state.index < count - 1) {      state.index += 1;    } else if (state.loop) {      state.index = 0;    } else {      return;    }    update(state, true);  }   // ----- drag -----------------------------------------------------------------   function onDragStart(state, e) {    if (e.button !== 0) return;    stopAutoplay(state);    stopEngine(state);    const points = snaps(state);    const max = points[points.length - 1];    const startCoord = state.horizontal ? e.clientX : e.clientY;    const startOffset = state.offset;    let lastCoord = startCoord;    let lastTime = performance.now();    let velocity = 0;    let moved = false;     const onMove = (ev) => {      const coord = state.horizontal ? ev.clientX : ev.clientY;      const now = performance.now();      if (now > lastTime) velocity = (coord - lastCoord) / (now - lastTime);      lastCoord = coord;      lastTime = now;      moved = true;       // The track follows the pointer, with resistance beyond the edges.      let offset = startOffset - (coord - startCoord);      if (offset < 0) offset = offset * RESISTANCE;      if (offset > max) offset = max + (offset - max) * RESISTANCE;      state.offset = offset;      render(state);    };    const onUp = () => {      window.removeEventListener("pointermove", onMove);      window.removeEventListener("pointerup", onUp);      if (!moved) return;      // Project the momentum, settle on the nearest snap and carry the drag      // velocity into the engine (embla's force application).      const projected = state.offset - velocity * MOMENTUM_MS;      let nearest = 0;      for (let i = 1; i < points.length; i++) {        if (Math.abs(points[i] - projected) < Math.abs(points[nearest] - projected)) nearest = i;      }      state.index = nearest;      state.velocity = -velocity * STEP_MS;      update(state, true);    };    window.addEventListener("pointermove", onMove);    window.addEventListener("pointerup", onUp);  }   // ----- autoplay ---------------------------------------------------------------   function startAutoplay(state) {    if (!state.autoplay) return;    stopAutoplay(state);    state.timer = setInterval(() => {      const count = snaps(state).length;      state.index = state.index >= count - 1 ? 0 : state.index + 1;      update(state, true);    }, state.interval);  }   function stopAutoplay(state) {    clearInterval(state.timer);    state.timer = null;  }   // ----- events -----------------------------------------------------------------   document.addEventListener("click", (e) => {    if (!(e.target instanceof Element)) return;    const button = e.target.closest("[data-tui-carousel-prev], [data-tui-carousel-next]");    const root = button?.closest("[data-tui-carousel]");    if (!root) return;    const state = instances.get(root);    if (!state) return;    if (button.hasAttribute("data-tui-carousel-prev")) {      scrollPrev(state);    } else {      scrollNext(state);    }  });   window.addEventListener("resize", () => {    document.querySelectorAll("[data-tui-carousel]").forEach((root) => {      const state = instances.get(root);      if (state) update(state, false);    });  });   function init() {    document.querySelectorAll("[data-tui-carousel]").forEach(setup);  }   if (document.readyState === "loading") {    document.addEventListener("DOMContentLoaded", init);  } else {    init();  }  new MutationObserver((mutations) => {    for (const m of mutations) {      if (m.addedNodes.length) {        init();        break;      }    }  }).observe(document.documentElement, { childList: true, subtree: true });})();