lazer-slider 1.0.2 → 1.0.4

package/dist/index.cjs

@@ -20,14 +20,622 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  greet: () => greet
+  createSlider: () => createSlider,
+  easeInOutCubic: () => easeInOutCubic,
+  easeOutCubic: () => easeOutCubic,
+  easeOutExpo: () => easeOutExpo,
+  easeOutQuad: () => easeOutQuad,
+  linear: () => linear
 });
 module.exports = __toCommonJS(index_exports);
-function greet(name) {
-  return `Hello, ${name}!`;
-}
+
+// src/core/easing.ts
+var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+var easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
+var linear = (t) => t;
+
+// src/core/accessibility.ts
+var generateSliderId = () => `slider-${Math.random().toString(36).substring(2, 9)}`;
+var initAria = (settings) => {
+  const { feed, prevSlideButton, nextSlideButton, thumbs, slides } = settings;
+  if (!feed.id) {
+    feed.id = generateSliderId();
+  }
+  feed.setAttribute("role", "region");
+  feed.setAttribute("aria-label", "Carousel");
+  feed.setAttribute("aria-roledescription", "carousel");
+  feed.removeAttribute("tabindex");
+  slides.forEach((slide, index) => {
+    slide.setAttribute("role", "group");
+    slide.setAttribute("aria-roledescription", "slide");
+    slide.setAttribute("aria-label", `Slide ${index + 1} of ${slides.length}`);
+  });
+  if (prevSlideButton) {
+    prevSlideButton.setAttribute("aria-label", "Previous slide");
+    prevSlideButton.setAttribute("aria-controls", feed.id);
+    prevSlideButton.setAttribute("tabindex", "0");
+    if (prevSlideButton.tagName !== "BUTTON") {
+      prevSlideButton.setAttribute("role", "button");
+    }
+  }
+  if (nextSlideButton) {
+    nextSlideButton.setAttribute("aria-label", "Next slide");
+    nextSlideButton.setAttribute("aria-controls", feed.id);
+    nextSlideButton.setAttribute("tabindex", "0");
+    if (nextSlideButton.tagName !== "BUTTON") {
+      nextSlideButton.setAttribute("role", "button");
+    }
+  }
+  if (thumbs?.length) {
+    thumbs.forEach((thumb, index) => {
+      if (thumb.tagName !== "BUTTON") {
+        thumb.setAttribute("role", "button");
+      }
+      thumb.setAttribute("aria-label", `Go to slide ${index + 1}`);
+      thumb.setAttribute("tabindex", "0");
+      thumb.setAttribute("aria-controls", feed.id);
+    });
+  }
+};
+var toggleControlVisibility = (button, shouldShow, feedElement) => {
+  if (!button) return;
+  if (!shouldShow && button === document.activeElement && feedElement) {
+    feedElement.focus();
+  }
+  const transition = "opacity 0.3s ease";
+  const opacity = shouldShow ? "1" : "0";
+  Object.assign(button.style, {
+    opacity,
+    transition,
+    pointerEvents: shouldShow ? "auto" : "none"
+  });
+  if (!shouldShow) {
+    button.setAttribute("aria-hidden", "true");
+    button.setAttribute("tabindex", "-1");
+  } else {
+    button.removeAttribute("aria-hidden");
+    button.setAttribute("tabindex", "0");
+  }
+  if (!shouldShow) {
+    setTimeout(() => {
+      if (button.style.opacity === "0") {
+        button.style.visibility = "hidden";
+      }
+    }, 300);
+  } else {
+    button.style.visibility = "visible";
+  }
+};
+var updateActiveThumb = (thumbs, currentIndex, activeClass = "active") => {
+  if (!thumbs?.length) return;
+  thumbs.forEach((thumb, index) => {
+    const isActive = index === currentIndex;
+    thumb.classList.toggle(activeClass, isActive);
+    thumb.setAttribute("aria-selected", isActive.toString());
+  });
+};
+var setupKeyboardNavigation = (feed, onPrev, onNext, abortSignal) => {
+  feed.addEventListener(
+    "keydown",
+    (event) => {
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          onPrev();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          onNext();
+          break;
+      }
+    },
+    { signal: abortSignal }
+  );
+  if (!feed.hasAttribute("tabindex")) {
+    feed.setAttribute("tabindex", "0");
+  }
+};
+
+// src/core/drag.ts
+var createDragState = () => ({
+  isDragging: false,
+  startX: 0,
+  startScrollLeft: 0,
+  velocity: 0,
+  lastX: 0,
+  lastTime: 0,
+  momentumId: null
+});
+var findNearestSlide = (feed, slides) => {
+  const feedRect = feed.getBoundingClientRect();
+  const feedCenter = feedRect.left + feedRect.width / 2;
+  let nearestSlide = null;
+  let minDistance = Infinity;
+  for (const slide of slides) {
+    if (slide.offsetParent === null) continue;
+    const slideRect = slide.getBoundingClientRect();
+    const slideCenter = slideRect.left + slideRect.width / 2;
+    const distance = Math.abs(feedCenter - slideCenter);
+    if (distance < minDistance) {
+      minDistance = distance;
+      nearestSlide = slide;
+    }
+  }
+  return nearestSlide;
+};
+var applyMomentum = (state, feed, slides, smoothScrollTo, onDragEnd) => {
+  const friction = 0.95;
+  const minVelocity = 0.5;
+  const animate = () => {
+    if (Math.abs(state.velocity) < minVelocity) {
+      state.momentumId = null;
+      const nearestSlide = findNearestSlide(feed, slides);
+      if (nearestSlide) {
+        smoothScrollTo(nearestSlide.offsetLeft, easeOutCubic);
+      }
+      onDragEnd?.();
+      return;
+    }
+    feed.scrollLeft += state.velocity;
+    state.velocity *= friction;
+    state.momentumId = requestAnimationFrame(animate);
+  };
+  state.momentumId = requestAnimationFrame(animate);
+};
+var getEventX = (event) => {
+  if ("touches" in event) {
+    return event.touches[0]?.clientX ?? 0;
+  }
+  return event.clientX;
+};
+var setupDragToScroll = (config) => {
+  const { feed, slides, abortSignal, smoothScrollTo, onDragEnd } = config;
+  const state = createDragState();
+  const handleDragStart = (event) => {
+    if (state.momentumId !== null) {
+      cancelAnimationFrame(state.momentumId);
+      state.momentumId = null;
+    }
+    state.isDragging = true;
+    state.startX = getEventX(event);
+    state.startScrollLeft = feed.scrollLeft;
+    state.velocity = 0;
+    state.lastX = state.startX;
+    state.lastTime = performance.now();
+    feed.style.cursor = "grabbing";
+    feed.style.userSelect = "none";
+    if (event.type === "mousedown") {
+      event.preventDefault();
+    }
+  };
+  const handleDragMove = (event) => {
+    if (!state.isDragging) return;
+    const currentX = getEventX(event);
+    const currentTime = performance.now();
+    const deltaX = state.startX - currentX;
+    const deltaTime = currentTime - state.lastTime;
+    feed.scrollLeft = state.startScrollLeft + deltaX;
+    if (deltaTime > 0) {
+      state.velocity = (state.lastX - currentX) / deltaTime * 16;
+    }
+    state.lastX = currentX;
+    state.lastTime = currentTime;
+    if (event.type === "touchmove") {
+      event.preventDefault();
+    }
+  };
+  const handleDragEnd = () => {
+    if (!state.isDragging) return;
+    state.isDragging = false;
+    feed.style.cursor = "grab";
+    feed.style.userSelect = "";
+    if (Math.abs(state.velocity) > 1) {
+      applyMomentum(state, feed, slides, smoothScrollTo, onDragEnd);
+    } else {
+      const nearestSlide = findNearestSlide(feed, slides);
+      if (nearestSlide) {
+        smoothScrollTo(nearestSlide.offsetLeft, easeOutCubic);
+      }
+      onDragEnd?.();
+    }
+  };
+  feed.style.cursor = "grab";
+  feed.addEventListener("mousedown", handleDragStart, { signal: abortSignal });
+  document.addEventListener("mousemove", handleDragMove, { signal: abortSignal });
+  document.addEventListener("mouseup", handleDragEnd, { signal: abortSignal });
+  feed.addEventListener("touchstart", handleDragStart, {
+    passive: true,
+    signal: abortSignal
+  });
+  feed.addEventListener("touchmove", handleDragMove, {
+    passive: false,
+    // Need to prevent default
+    signal: abortSignal
+  });
+  feed.addEventListener("touchend", handleDragEnd, { signal: abortSignal });
+  document.addEventListener("mouseleave", handleDragEnd, { signal: abortSignal });
+  return state;
+};
+var cleanupDrag = (state) => {
+  if (state.momentumId !== null) {
+    cancelAnimationFrame(state.momentumId);
+    state.momentumId = null;
+  }
+};
+
+// src/core/slider.ts
+var ANIMATION = {
+  MIN_DURATION: 400,
+  MAX_DURATION: 1e3,
+  SPEED_FACTOR: 1.5,
+  SCROLL_END_DELAY: 50,
+  THUMB_UPDATE_DELAY: 500
+};
+var DESKTOP_BREAKPOINT = "(min-width: 64rem)";
+var createSlider = (settings) => {
+  if (!settings.feed) {
+    throw new Error("lazer-slider: feed element is required");
+  }
+  if (!settings.slides?.length) {
+    throw new Error("lazer-slider: slides array is required and must not be empty");
+  }
+  const state = {
+    currentSlideIndex: 0,
+    isScrolling: false,
+    ticking: false,
+    cachedFeedRect: null,
+    lastWidth: 0,
+    updateThumbTimeout: null,
+    scrollEndTimeout: null,
+    abortController: new AbortController(),
+    autoplayIntervalId: null,
+    autoplayPaused: false
+  };
+  let dragState = null;
+  const easing = settings.easing ?? easeOutExpo;
+  const getFeedRect = () => {
+    const currentWidth = settings.feed.clientWidth;
+    if (!state.cachedFeedRect || state.lastWidth !== currentWidth) {
+      state.cachedFeedRect = settings.feed.getBoundingClientRect();
+      state.lastWidth = currentWidth;
+    }
+    return state.cachedFeedRect;
+  };
+  const getVisibleSlides = () => {
+    return settings.slides.filter((slide) => slide.offsetParent !== null);
+  };
+  const isDesktop = () => {
+    return window.matchMedia(DESKTOP_BREAKPOINT).matches;
+  };
+  const applySlideWidths = () => {
+    const perView = isDesktop() ? settings.desktopSlidesPerView : settings.mobileSlidesPerView;
+    const gap = settings.slideGap ?? 0;
+    if (gap > 0) {
+      settings.feed.style.gap = `${gap}px`;
+    }
+    if (!perView || perView === "auto") {
+      settings.slides.forEach((slide) => {
+        slide.style.flex = "";
+        slide.style.minWidth = "";
+      });
+      return;
+    }
+    const totalGapWidth = gap * (perView - 1);
+    const slideWidth = `calc((100% - ${totalGapWidth}px) / ${perView})`;
+    settings.slides.forEach((slide) => {
+      slide.style.flex = `0 0 ${slideWidth}`;
+      slide.style.minWidth = slideWidth;
+    });
+  };
+  const updateScrollbar = () => {
+    if (!settings.scrollbarThumb) return;
+    const feedRect = getFeedRect();
+    const thumbWidth = feedRect.width / settings.feed.scrollWidth * 100;
+    settings.scrollbarThumb.style.width = `${thumbWidth}%`;
+  };
+  const updateScrollbarPosition = () => {
+    if (!settings.scrollbarThumb || !settings.scrollbarTrack) return;
+    const trackWidth = settings.scrollbarTrack.getBoundingClientRect().width;
+    const thumbWidth = settings.scrollbarThumb.getBoundingClientRect().width;
+    const totalTransform = trackWidth - thumbWidth;
+    const maxScroll = settings.feed.scrollWidth - settings.feed.clientWidth;
+    const scrollProgress = maxScroll > 0 ? settings.feed.scrollLeft / maxScroll : 0;
+    settings.scrollbarThumb.style.transform = `translateX(${totalTransform * scrollProgress}px)`;
+  };
+  const updateControlsVisibility = () => {
+    const feedRect = getFeedRect();
+    const isAtStart = settings.feed.scrollLeft <= 1;
+    const isAtEnd = settings.feed.scrollLeft + feedRect.width >= settings.feed.scrollWidth - 1;
+    const shouldHideScrollbar = settings.feed.scrollWidth <= feedRect.width;
+    if (settings.scrollbarTrack) {
+      settings.scrollbarTrack.style.display = shouldHideScrollbar ? "none" : "block";
+    }
+    if (settings.loop) {
+      toggleControlVisibility(
+        settings.prevSlideButton,
+        !shouldHideScrollbar,
+        settings.feed
+      );
+      toggleControlVisibility(
+        settings.nextSlideButton,
+        !shouldHideScrollbar,
+        settings.feed
+      );
+      return;
+    }
+    toggleControlVisibility(
+      settings.prevSlideButton,
+      !isAtStart && !shouldHideScrollbar,
+      settings.feed
+    );
+    toggleControlVisibility(
+      settings.nextSlideButton,
+      !isAtEnd && !shouldHideScrollbar,
+      settings.feed
+    );
+  };
+  const updateCurrentSlideIndex = () => {
+    const feedRect = getFeedRect();
+    const allVisibleSlides = getVisibleSlides();
+    const viewportVisibleSlides = settings.slides.filter((slide) => {
+      const slideRect = slide.getBoundingClientRect();
+      const tolerance = 20;
+      return slideRect.right > feedRect.left + tolerance && slideRect.left < feedRect.right - tolerance;
+    });
+    if (viewportVisibleSlides.length && viewportVisibleSlides[0]) {
+      const newIndex = allVisibleSlides.indexOf(viewportVisibleSlides[0]);
+      if (newIndex !== -1) {
+        state.currentSlideIndex = newIndex;
+        settings.onScroll?.({
+          currentScroll: settings.feed.scrollLeft,
+          currentSlideIndex: state.currentSlideIndex
+        });
+      }
+    }
+  };
+  const smoothScrollTo = (target, customEasing = easing) => {
+    const start = settings.feed.scrollLeft;
+    const distance = Math.abs(target - start);
+    const duration = Math.min(
+      ANIMATION.MAX_DURATION,
+      Math.max(ANIMATION.MIN_DURATION, distance / ANIMATION.SPEED_FACTOR)
+    );
+    const startTime = performance.now();
+    const animateScroll = (currentTime) => {
+      const elapsed = (currentTime - startTime) / duration;
+      const progress = Math.min(elapsed, 1);
+      const ease = customEasing(progress);
+      settings.feed.scrollLeft = start + (target - start) * ease;
+      if (progress < 1) {
+        requestAnimationFrame(animateScroll);
+      } else {
+        settings.feed.scrollLeft = target;
+      }
+    };
+    requestAnimationFrame(animateScroll);
+  };
+  const handleThumbClick = (thumb) => {
+    if (!settings.thumbs) return;
+    const index = settings.thumbs.indexOf(thumb);
+    if (index === -1 || !settings.slides[index]) return;
+    state.currentSlideIndex = index;
+    updateActiveThumb(settings.thumbs, index);
+    state.isScrolling = true;
+    if (state.updateThumbTimeout) {
+      clearTimeout(state.updateThumbTimeout);
+    }
+    state.updateThumbTimeout = setTimeout(() => {
+      state.isScrolling = false;
+    }, ANIMATION.THUMB_UPDATE_DELAY);
+    smoothScrollTo(settings.slides[index].offsetLeft);
+  };
+  const handleNavButtonClick = (direction) => {
+    const visibleSlides = getVisibleSlides();
+    const slidesToScroll = isDesktop() ? settings.desktopSlidesPerScroll ?? 1 : settings.mobileSlidesPerScroll ?? 1;
+    const totalSlides = visibleSlides.length;
+    updateCurrentSlideIndex();
+    if (direction === "prev") {
+      if (settings.loop && state.currentSlideIndex === 0) {
+        state.currentSlideIndex = totalSlides - 1;
+      } else {
+        state.currentSlideIndex = Math.max(0, state.currentSlideIndex - slidesToScroll);
+      }
+    } else {
+      if (settings.loop && state.currentSlideIndex >= totalSlides - 1) {
+        state.currentSlideIndex = 0;
+      } else {
+        state.currentSlideIndex = Math.min(
+          totalSlides - 1,
+          state.currentSlideIndex + slidesToScroll
+        );
+      }
+    }
+    const targetSlide = visibleSlides[state.currentSlideIndex];
+    if (!targetSlide) return;
+    settings.onScrollStart?.({
+      currentScroll: settings.feed.scrollLeft,
+      target: targetSlide,
+      direction
+    });
+    smoothScrollTo(targetSlide.offsetLeft);
+  };
+  const updateScrollPosition = () => {
+    updateScrollbarPosition();
+    updateControlsVisibility();
+    updateCurrentSlideIndex();
+    if (!state.isScrolling) {
+      updateActiveThumb(settings.thumbs, state.currentSlideIndex);
+    }
+    if (state.scrollEndTimeout) {
+      clearTimeout(state.scrollEndTimeout);
+    }
+    state.scrollEndTimeout = setTimeout(() => {
+      state.isScrolling = false;
+      settings.onScrollEnd?.({
+        currentScroll: settings.feed.scrollLeft,
+        currentSlideIndex: state.currentSlideIndex
+      });
+    }, ANIMATION.SCROLL_END_DELAY);
+  };
+  const handleFeedScroll = () => {
+    if (!state.ticking) {
+      requestAnimationFrame(() => {
+        updateScrollPosition();
+        state.ticking = false;
+      });
+      state.ticking = true;
+    }
+  };
+  const handleWindowResize = () => {
+    state.cachedFeedRect = null;
+    refresh();
+  };
+  const attachEventListeners = () => {
+    const { signal } = state.abortController;
+    window.addEventListener("resize", handleWindowResize);
+    settings.feed.addEventListener("scroll", handleFeedScroll, {
+      passive: true,
+      signal
+    });
+    if (settings.prevSlideButton) {
+      settings.prevSlideButton.addEventListener(
+        "click",
+        () => handleNavButtonClick("prev"),
+        { signal }
+      );
+    }
+    if (settings.nextSlideButton) {
+      settings.nextSlideButton.addEventListener(
+        "click",
+        () => handleNavButtonClick("next"),
+        { signal }
+      );
+    }
+    if (settings.thumbs?.length) {
+      settings.thumbs[0]?.classList.add("active");
+      settings.thumbs.forEach((thumb) => {
+        thumb.addEventListener("click", () => handleThumbClick(thumb), { signal });
+      });
+    }
+    setupKeyboardNavigation(
+      settings.feed,
+      () => handleNavButtonClick("prev"),
+      () => handleNavButtonClick("next"),
+      signal
+    );
+    if (settings.enableDragToScroll) {
+      dragState = setupDragToScroll({
+        feed: settings.feed,
+        slides: settings.slides,
+        abortSignal: signal,
+        smoothScrollTo,
+        onDragEnd: () => {
+          updateCurrentSlideIndex();
+          updateActiveThumb(settings.thumbs, state.currentSlideIndex);
+        }
+      });
+    }
+    if (settings.autoplay && settings.pauseOnHover !== false) {
+      settings.feed.addEventListener(
+        "mouseenter",
+        pauseAutoplay,
+        { signal }
+      );
+      settings.feed.addEventListener(
+        "mouseleave",
+        resumeAutoplay,
+        { signal }
+      );
+      settings.feed.addEventListener(
+        "touchstart",
+        pauseAutoplay,
+        { passive: true, signal }
+      );
+      settings.feed.addEventListener(
+        "touchend",
+        resumeAutoplay,
+        { signal }
+      );
+    }
+  };
+  const startAutoplay = () => {
+    if (state.autoplayIntervalId) return;
+    const interval = settings.autoplayInterval ?? 3e3;
+    state.autoplayIntervalId = setInterval(() => {
+      if (!state.autoplayPaused) {
+        handleNavButtonClick("next");
+      }
+    }, interval);
+  };
+  const stopAutoplay = () => {
+    if (state.autoplayIntervalId) {
+      clearInterval(state.autoplayIntervalId);
+      state.autoplayIntervalId = null;
+    }
+  };
+  const pauseAutoplay = () => {
+    state.autoplayPaused = true;
+  };
+  const resumeAutoplay = () => {
+    state.autoplayPaused = false;
+  };
+  const goToIndex = (index) => {
+    const visibleSlides = getVisibleSlides();
+    const safeIndex = Math.max(0, Math.min(index, visibleSlides.length - 1));
+    const targetSlide = visibleSlides[safeIndex];
+    if (!targetSlide) return;
+    state.currentSlideIndex = safeIndex;
+    updateActiveThumb(settings.thumbs, safeIndex);
+    smoothScrollTo(targetSlide.offsetLeft);
+  };
+  const refresh = () => {
+    state.cachedFeedRect = null;
+    applySlideWidths();
+    updateScrollbar();
+    updateControlsVisibility();
+  };
+  const unload = () => {
+    stopAutoplay();
+    state.abortController.abort();
+    window.removeEventListener("resize", handleWindowResize);
+    if (state.updateThumbTimeout) {
+      clearTimeout(state.updateThumbTimeout);
+    }
+    if (state.scrollEndTimeout) {
+      clearTimeout(state.scrollEndTimeout);
+    }
+    if (dragState) {
+      cleanupDrag(dragState);
+    }
+    state.cachedFeedRect = null;
+  };
+  initAria(settings);
+  applySlideWidths();
+  updateControlsVisibility();
+  attachEventListeners();
+  updateScrollbar();
+  if (settings.autoplay) {
+    startAutoplay();
+  }
+  return {
+    goToIndex,
+    refresh,
+    unload,
+    play: startAutoplay,
+    pause: stopAutoplay,
+    next: () => handleNavButtonClick("next"),
+    prev: () => handleNavButtonClick("prev")
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  greet
+  createSlider,
+  easeInOutCubic,
+  easeOutCubic,
+  easeOutExpo,
+  easeOutQuad,
+  linear
 });
 //# sourceMappingURL=index.cjs.map