@brandonsoccer22/gsap-editorial-carousel 0.1.2 → 0.1.3

package/README.md

@@ -8,7 +8,7 @@ Content editors can add animation classes and data attributes directly in a CMS
 ## Install
 
 ```bash
-npm install @brandonsoccer22/gsap-carousel gsap
+npm i @brandonsoccer22/gsap-editorial-carousel gsap
 ```
 
 ## Markup (semantic + user-placed controls)

package/dist/index.cjs

@@ -0,0 +1,605 @@
+'use strict';
+
+var gsap = require('gsap');
+
+// src/carousel.ts
+
+// src/dom.ts
+function resolveRoot(root) {
+  if (typeof root === "string") {
+    const el = document.querySelector(root);
+    if (!el) {
+      throw new Error(`Carousel root not found for selector: ${root}`);
+    }
+    if (!(el instanceof HTMLElement)) {
+      throw new Error(`Carousel root must be an HTMLElement for selector: ${root}`);
+    }
+    return el;
+  }
+  if (!(root instanceof HTMLElement)) {
+    throw new Error("Carousel root must be an HTMLElement.");
+  }
+  return root;
+}
+function qs(root, selector) {
+  return root.querySelector(selector);
+}
+function qsa(root, selector) {
+  return Array.from(root.querySelectorAll(selector));
+}
+function toggleClass(el, name, active) {
+  if (active) {
+    el.classList.add(name);
+  } else {
+    el.classList.remove(name);
+  }
+}
+function setAriaDisabled(el, disabled) {
+  el.setAttribute("aria-disabled", disabled ? "true" : "false");
+}
+function setDisabled(el, disabled, disabledClass) {
+  if (!el) return;
+  const isButton = el instanceof HTMLButtonElement || el instanceof HTMLInputElement;
+  if (isButton) {
+    el.disabled = disabled;
+  }
+  setAriaDisabled(el, disabled);
+  toggleClass(el, disabledClass, disabled);
+}
+function ensureRootFocusable(root) {
+  if (!root.hasAttribute("tabindex")) {
+    root.setAttribute("tabindex", "0");
+  }
+}
+
+// src/a11y.ts
+function setSlidesState(slides, activeIndex, activeClass) {
+  slides.forEach((slide, index) => {
+    const isActive = index === activeIndex;
+    slide.setAttribute("aria-hidden", isActive ? "false" : "true");
+    toggleClass(slide, activeClass, isActive);
+  });
+}
+function setDotsState(dots, activeIndex, activeClass) {
+  dots.forEach((dot, index) => {
+    const isActive = index === activeIndex;
+    if (isActive) {
+      dot.setAttribute("aria-current", "true");
+    } else {
+      dot.removeAttribute("aria-current");
+    }
+    toggleClass(dot, activeClass, isActive);
+  });
+}
+
+// src/registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerAnimation(name, factory) {
+  registry.set(name, factory);
+}
+function registerAnimations(map) {
+  Object.entries(map).forEach(([name, factory]) => {
+    registerAnimation(name, factory);
+  });
+}
+function getAnimation(name) {
+  return registry.get(name);
+}
+
+// src/defaults.ts
+var defaultSelectors = {
+  root: "[data-carousel]",
+  slide: "[data-carousel-slide], .gsap-carousel__slide",
+  prev: "[data-carousel-prev]",
+  next: "[data-carousel-next]",
+  dots: "[data-carousel-dots]",
+  dotTemplate: "[data-carousel-dot-template]"
+};
+var defaultClassNames = {
+  activeSlide: "is-active",
+  animatingRoot: "is-animating",
+  disabledControl: "is-disabled",
+  dot: "gsap-carousel__dot",
+  activeDot: "is-active"
+};
+var defaultOptions = {
+  loop: true,
+  initialIndex: 0,
+  transition: {
+    overlap: 0
+  },
+  defaults: {
+    dur: 0.6,
+    ease: "power2.out"
+  }
+};
+var didRegister = false;
+function ensureDefaultAnimationsRegistered() {
+  if (didRegister) return;
+  didRegister = true;
+  const fadeIn = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0 },
+      {
+        autoAlpha: 1,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  fadeIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  const fadeUp = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0, y: 24 },
+      {
+        autoAlpha: 1,
+        y: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  fadeUp.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        y: -12,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  const slideIn = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.fromTo(
+      el,
+      { autoAlpha: 0, x: opts.direction * 40 },
+      {
+        autoAlpha: 1,
+        x: 0,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  slideIn.reverse = ({ el, gsap: gsap3, opts, tl }) => {
+    tl.to(
+      el,
+      {
+        autoAlpha: 0,
+        x: opts.direction * -24,
+        duration: opts.dur,
+        delay: opts.delay,
+        ease: opts.ease
+      },
+      opts.at
+    );
+  };
+  registerAnimations({
+    "fade-in": fadeIn,
+    "fade-up": fadeUp,
+    "slide-in": slideIn
+  });
+}
+
+// src/timeline.ts
+var defaultExitDuration = 0.25;
+function getDataNumber(el, name, fallback) {
+  const value = el.getAttribute(name);
+  if (!value) return fallback;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function getDataString(el, name) {
+  const value = el.getAttribute(name);
+  return value && value.trim() ? value.trim() : void 0;
+}
+function parsePositionOffset(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  const numberPattern = /^[+-]?(?:\d+\.?\d*|\.\d+)$/;
+  const relativeMatch = trimmed.match(/^([+-])=([+-]?(?:\d+\.?\d*|\.\d+))$/);
+  if (relativeMatch) {
+    const amount = Number.parseFloat(relativeMatch[2]);
+    if (!Number.isFinite(amount)) return null;
+    return relativeMatch[1] === "+" ? amount : -amount;
+  }
+  if (numberPattern.test(trimmed)) {
+    const amount = Number.parseFloat(trimmed);
+    return Number.isFinite(amount) ? amount : null;
+  }
+  return null;
+}
+function findAnimationName(el) {
+  const classList = Array.from(el.classList);
+  for (const className of classList) {
+    if (getAnimation(className)) return className;
+  }
+  return null;
+}
+function collectAnimItems(slide, options) {
+  const elements = Array.from(slide.querySelectorAll("[class]"));
+  const items = [];
+  elements.forEach((el) => {
+    var _a;
+    const animName = findAnimationName(el);
+    if (!animName) return;
+    const seq = Math.max(1, Math.floor(getDataNumber(el, "data-seq", 1)));
+    const exitSeq = Math.max(1, Math.floor(getDataNumber(el, "data-exit-seq", seq)));
+    const dur = getDataNumber(el, "data-dur", options.defaults.dur);
+    const delay = getDataNumber(el, "data-delay", 0);
+    const ease = (_a = getDataString(el, "data-ease")) != null ? _a : options.defaults.ease;
+    const at = getDataString(el, "data-at");
+    items.push({ el, animName, seq, exitSeq, dur, delay, ease, at });
+  });
+  return items;
+}
+function groupBySequence(items, getSequence) {
+  const map = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    var _a;
+    const sequence = getSequence(item);
+    const bucket = (_a = map.get(sequence)) != null ? _a : [];
+    bucket.push(item);
+    map.set(sequence, bucket);
+  });
+  return map;
+}
+function buildSlideEnterTimeline(slide, direction, options, gsapInstance) {
+  const tl = gsapInstance.timeline();
+  const items = collectAnimItems(slide, options);
+  if (!items.length) return tl;
+  const grouped = groupBySequence(items, (item) => item.seq);
+  const order = Array.from(grouped.keys()).sort((a, b) => a - b);
+  let cursor = 0;
+  order.forEach((seq) => {
+    const group = grouped.get(seq);
+    if (!group) return;
+    let groupMax = 0;
+    group.forEach((item) => {
+      var _a;
+      const factory = getAnimation(item.animName);
+      if (!factory) return;
+      const offset = (_a = parsePositionOffset(item.at)) != null ? _a : 0;
+      const position = cursor + offset;
+      factory({
+        el: item.el,
+        tl,
+        gsap: gsapInstance,
+        opts: {
+          dur: item.dur,
+          delay: item.delay,
+          ease: item.ease,
+          direction,
+          at: position
+        }
+      });
+      groupMax = Math.max(groupMax, offset + item.delay + item.dur);
+    });
+    cursor += Math.max(groupMax, 0);
+  });
+  return tl;
+}
+function buildSlideExitTimeline(slide, direction, options, gsapInstance) {
+  const tl = gsapInstance.timeline();
+  const items = collectAnimItems(slide, options);
+  if (!items.length) return tl;
+  const grouped = groupBySequence(items, (item) => item.exitSeq);
+  const order = Array.from(grouped.keys()).sort((a, b) => a - b);
+  let cursor = 0;
+  order.forEach((seq) => {
+    const group = grouped.get(seq);
+    if (!group) return;
+    let groupMax = 0;
+    group.forEach((item) => {
+      var _a;
+      const exitName = getDataString(item.el, "data-exit");
+      const factory = exitName ? getAnimation(exitName) : getAnimation(item.animName);
+      const reverseFactory = factory && "reverse" in factory ? factory.reverse : void 0;
+      const offset = (_a = parsePositionOffset(item.at)) != null ? _a : 0;
+      const position = cursor + offset;
+      let usedDuration = item.dur;
+      if (exitName && factory) {
+        factory({
+          el: item.el,
+          tl,
+          gsap: gsapInstance,
+          opts: {
+            dur: item.dur,
+            delay: item.delay,
+            ease: item.ease,
+            direction,
+            at: position
+          }
+        });
+      } else if (!exitName && reverseFactory) {
+        reverseFactory({
+          el: item.el,
+          tl,
+          gsap: gsapInstance,
+          opts: {
+            dur: item.dur,
+            delay: item.delay,
+            ease: item.ease,
+            direction,
+            at: position
+          }
+        });
+      } else {
+        usedDuration = Math.min(item.dur, defaultExitDuration);
+        tl.to(
+          item.el,
+          {
+            autoAlpha: 0,
+            duration: usedDuration,
+            delay: item.delay,
+            ease: item.ease
+          },
+          position
+        );
+      }
+      groupMax = Math.max(groupMax, offset + item.delay + usedDuration);
+    });
+    cursor += Math.max(groupMax, 0);
+  });
+  return tl;
+}
+
+// src/reducedMotion.ts
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || !("matchMedia" in window)) {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// src/carousel.ts
+var generatedDotSelector = '[data-carousel-dot="true"]';
+function createCarousel(rootInput, options = {}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  ensureDefaultAnimationsRegistered();
+  const root = resolveRoot(rootInput);
+  const gsapInstance = (_a = options.gsap) != null ? _a : gsap.gsap;
+  ensureRootFocusable(root);
+  const ctx = gsapInstance.context(() => {
+  }, root);
+  const resolved = {
+    loop: (_b = options.loop) != null ? _b : defaultOptions.loop,
+    initialIndex: (_c = options.initialIndex) != null ? _c : defaultOptions.initialIndex,
+    transition: { ...defaultOptions.transition, ...options.transition },
+    selectors: { ...defaultSelectors, ...options.selectors },
+    classNames: { ...defaultClassNames, ...options.classNames },
+    defaults: { ...defaultOptions.defaults, ...options.defaults },
+    onInit: options.onInit,
+    onBeforeChange: options.onBeforeChange,
+    onAfterChange: options.onAfterChange
+  };
+  const slides = qsa(root, resolved.selectors.slide);
+  if (!slides.length) {
+    throw new Error("Carousel requires at least one slide element.");
+  }
+  const controls = resolveControls(root, resolved, slides.length);
+  const reducedMotion = prefersReducedMotion();
+  const state = { activeTimeline: null };
+  let currentIndex = normalizeIndex(resolved.initialIndex, slides.length, resolved.loop);
+  let animating = false;
+  setSlidesState(slides, currentIndex, resolved.classNames.activeSlide);
+  setDotsState(controls.dots, currentIndex, resolved.classNames.activeDot);
+  const onPrevClick = (event) => {
+    event.preventDefault();
+    prev();
+  };
+  const onNextClick = (event) => {
+    event.preventDefault();
+    next();
+  };
+  const onDotsClick = (event) => {
+    var _a2;
+    const target = (_a2 = event.target) == null ? void 0 : _a2.closest(generatedDotSelector);
+    if (!target) return;
+    event.preventDefault();
+    const indexAttr = target.getAttribute("data-carousel-dot-index");
+    if (!indexAttr) return;
+    const index = Number.parseInt(indexAttr, 10);
+    if (!Number.isFinite(index)) return;
+    goTo(index);
+  };
+  (_d = controls.prev) == null ? void 0 : _d.addEventListener("click", onPrevClick);
+  (_e = controls.next) == null ? void 0 : _e.addEventListener("click", onNextClick);
+  (_f = controls.dotsContainer) == null ? void 0 : _f.addEventListener("click", onDotsClick);
+  const instance = {
+    goTo,
+    next,
+    prev,
+    destroy,
+    getIndex: () => currentIndex,
+    getCount: () => slides.length,
+    isAnimating: () => animating
+  };
+  (_g = resolved.onInit) == null ? void 0 : _g.call(resolved, instance);
+  function disableControls(disabled) {
+    toggleClass(root, resolved.classNames.animatingRoot, disabled);
+    setDisabled(controls.prev, disabled, resolved.classNames.disabledControl);
+    setDisabled(controls.next, disabled, resolved.classNames.disabledControl);
+    if (controls.dotsContainer) {
+      setAriaDisabled(controls.dotsContainer, disabled);
+    }
+    controls.dots.forEach((dot) => {
+      setAriaDisabled(dot, disabled);
+      toggleClass(dot, resolved.classNames.disabledControl, disabled);
+    });
+  }
+  function applyActiveState(nextIndex) {
+    currentIndex = nextIndex;
+    setSlidesState(slides, currentIndex, resolved.classNames.activeSlide);
+    setDotsState(controls.dots, currentIndex, resolved.classNames.activeDot);
+  }
+  function finalizeTransition(from, to, direction) {
+    var _a2;
+    animating = false;
+    disableControls(false);
+    state.activeTimeline = null;
+    (_a2 = resolved.onAfterChange) == null ? void 0 : _a2.call(resolved, { from, to, direction });
+  }
+  function transitionTo(nextIndex, immediate) {
+    var _a2;
+    if (animating) return;
+    if (nextIndex === currentIndex) return;
+    const from = currentIndex;
+    const to = nextIndex;
+    const direction = getDirection(from, to, slides.length, resolved.loop);
+    animating = true;
+    disableControls(true);
+    (_a2 = resolved.onBeforeChange) == null ? void 0 : _a2.call(resolved, { from, to, direction });
+    if (immediate || reducedMotion) {
+      applyActiveState(to);
+      finalizeTransition(from, to, direction);
+      return;
+    }
+    const exitTl = ctx.add(() => buildSlideExitTimeline(slides[from], direction, resolved, gsapInstance));
+    const enterTl = ctx.add(() => buildSlideEnterTimeline(slides[to], direction, resolved, gsapInstance));
+    const master = ctx.add(
+      () => gsapInstance.timeline({
+        onComplete: () => {
+          finalizeTransition(from, to, direction);
+        }
+      })
+    );
+    state.activeTimeline = master;
+    const overlap = Math.max(0, resolved.transition.overlap);
+    const enterAt = Math.max(0, exitTl.duration() - overlap);
+    master.add(exitTl, 0);
+    master.add(() => applyActiveState(to), enterAt);
+    master.add(enterTl, enterAt);
+  }
+  function goTo(index, opts) {
+    if (animating) return;
+    const nextIndex = normalizeIndex(index, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
+  }
+  function next(opts) {
+    if (animating) return;
+    const nextIndex = resolveNextIndex(currentIndex, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
+  }
+  function prev(opts) {
+    if (animating) return;
+    const nextIndex = resolvePrevIndex(currentIndex, slides.length, resolved.loop);
+    if (nextIndex === currentIndex) return;
+    transitionTo(nextIndex, opts == null ? void 0 : opts.immediate);
+  }
+  function destroy() {
+    var _a2, _b2, _c2, _d2;
+    (_a2 = controls.prev) == null ? void 0 : _a2.removeEventListener("click", onPrevClick);
+    (_b2 = controls.next) == null ? void 0 : _b2.removeEventListener("click", onNextClick);
+    (_c2 = controls.dotsContainer) == null ? void 0 : _c2.removeEventListener("click", onDotsClick);
+    (_d2 = state.activeTimeline) == null ? void 0 : _d2.kill();
+    animating = false;
+    ctx.revert();
+    if (controls.dotsContainer) {
+      controls.dotsContainer.querySelectorAll(generatedDotSelector).forEach((dot) => {
+        dot.remove();
+      });
+    }
+    if (controls.dotTemplate) {
+      controls.dotTemplate.hidden = false;
+    }
+  }
+  return instance;
+}
+function resolveControls(root, options, slideCount) {
+  const rootId = root.getAttribute("id");
+  const queryWithFallback = (selector) => {
+    if (rootId) {
+      const scoped = document.querySelector(`${selector}[data-for="${rootId}"]`);
+      if (scoped) return scoped;
+    }
+    return qs(root, selector);
+  };
+  const prev = queryWithFallback(options.selectors.prev);
+  const next = queryWithFallback(options.selectors.next);
+  const dotsContainer = queryWithFallback(options.selectors.dots);
+  const dotTemplate = dotsContainer ? qs(dotsContainer, options.selectors.dotTemplate) : null;
+  const dots = dotsContainer ? setupDots(dotsContainer, dotTemplate, options, slideCount) : [];
+  return { prev, next, dotsContainer, dotTemplate, dots };
+}
+function setupDots(container, template, options, slideCount) {
+  const dots = qsa(container, generatedDotSelector);
+  dots.forEach((dot) => dot.remove());
+  if (!template) return [];
+  const clones = [];
+  for (let i = 0; i < slideCount; i += 1) {
+    const clone = template.cloneNode(true);
+    clone.removeAttribute("id");
+    clone.setAttribute("data-carousel-dot", "true");
+    clone.setAttribute("data-carousel-dot-index", String(i));
+    clone.setAttribute("aria-label", `Go to slide ${i + 1}`);
+    clone.classList.add(options.classNames.dot);
+    if (clone instanceof HTMLButtonElement && !clone.getAttribute("type")) {
+      clone.setAttribute("type", "button");
+    }
+    container.appendChild(clone);
+    clones.push(clone);
+  }
+  template.hidden = true;
+  return clones;
+}
+function normalizeIndex(index, count, loop) {
+  if (count <= 0) return 0;
+  if (loop) {
+    const wrapped = (index % count + count) % count;
+    return wrapped;
+  }
+  if (index < 0) return 0;
+  if (index >= count) return count - 1;
+  return index;
+}
+function resolveNextIndex(current, count, loop) {
+  if (count <= 0) return current;
+  if (current + 1 < count) return current + 1;
+  return loop ? 0 : current;
+}
+function resolvePrevIndex(current, count, loop) {
+  if (count <= 0) return current;
+  if (current - 1 >= 0) return current - 1;
+  return loop ? count - 1 : current;
+}
+function getDirection(from, to, count, loop) {
+  if (!loop) return to > from ? 1 : -1;
+  if (from === count - 1 && to === 0) return 1;
+  if (from === 0 && to === count - 1) return -1;
+  return to > from ? 1 : -1;
+}
+function registerGsapPlugins(...plugins) {
+  gsap.gsap.registerPlugin(...plugins);
+}
+
+exports.createCarousel = createCarousel;
+exports.registerAnimation = registerAnimation;
+exports.registerAnimations = registerAnimations;
+exports.registerGsapPlugins = registerGsapPlugins;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map