@rethink-js/rt-slider 1.1.0 → 1.2.1

package/dist/index.js

@@ -1,4 +1,4 @@
-/*! @rethink-js/rt-slider v1.1.0 | MIT */
+/*! @rethink-js/rt-slider v1.2.1 | MIT */
 (() => {
   // src/index.js
   (function() {
@@ -118,6 +118,11 @@
     function clamp(i) {
       return i < 0 ? 0 : i > 1 ? 1 : i;
     }
+    function round(n, d) {
+      if (!Number.isFinite(n)) return 0;
+      var m = Math.pow(10, d || 0);
+      return Math.round(n * m) / m;
+    }
     function parseEasing(name) {
       var n = String(name || "").trim();
       if (!n) return null;
@@ -310,6 +315,11 @@
       this._injectedKey = null;
       this._lastGutterPx = 0;
       this._lastGapPx = 0;
+      this.slideState = null;
+      this._slideStateSig = "";
+      this._progressSig = "";
+      this._lastSlideStateActiveIndex = -1;
+      this._lastSlideStateScrollLeft = 0;
       var self = this;
       this.ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(function() {
         if (self._roTicking) return;
@@ -327,6 +337,9 @@
       var dpr = Math.max(1, window.devicePixelRatio || 1);
       return 1 / dpr;
     };
+    Slider.prototype.scrollEdgeEpsilon = function() {
+      return Math.max(2, this.devicePixelEpsilon() * 4);
+    };
     Slider.prototype.listGap = function() {
       var cs = getComputedStyle(this.list);
       var g1 = parseFloat(cs.columnGap || "0") || 0;
@@ -427,6 +440,38 @@
     Slider.prototype.maxScroll = function() {
       return Math.max(0, this.scroller.scrollWidth - this.scroller.clientWidth);
     };
+    Slider.prototype.getLiveScrollMetrics = function() {
+      var scrollWidth = Math.max(0, this.scroller.scrollWidth || 0);
+      var clientWidth = Math.max(0, this.scroller.clientWidth || 0);
+      var max = Math.max(0, scrollWidth - clientWidth);
+      var current = this.safeClampScroll(this.scroller.scrollLeft);
+      var epsilon = this.scrollEdgeEpsilon();
+      if (max <= 0 || scrollWidth <= clientWidth + epsilon) {
+        return {
+          current: 0,
+          max: 0,
+          progress: 0,
+          progressPercent: 0,
+          isAtStart: true,
+          isAtEnd: true
+        };
+      }
+      var atStart = current <= epsilon;
+      var atEnd = current >= max - epsilon || current + clientWidth >= scrollWidth - epsilon;
+      if (atStart) current = 0;
+      if (atEnd) current = max;
+      var progress = max > 0 ? clamp(current / max) : 0;
+      if (atEnd) progress = 1;
+      if (atStart) progress = 0;
+      return {
+        current,
+        max,
+        progress,
+        progressPercent: progress * 100,
+        isAtStart: atStart,
+        isAtEnd: atEnd
+      };
+    };
     Slider.prototype.updateOverlays = function() {
       if (!this.overlayStart && !this.overlayEnd) return;
       var total = this.scroller.scrollWidth;
@@ -442,13 +487,9 @@
         setVis(this.overlayEnd, false);
         return;
       }
-      var m = this.maxScroll();
-      var current = this.scroller.scrollLeft;
-      var tolerance = 10;
-      var atStart = current <= tolerance;
-      var atEnd = current >= m - tolerance;
-      setVis(this.overlayStart, !atStart);
-      setVis(this.overlayEnd, !atEnd);
+      var metrics = this.getLiveScrollMetrics();
+      setVis(this.overlayStart, !metrics.isAtStart);
+      setVis(this.overlayEnd, !metrics.isAtEnd);
     };
     Slider.prototype.updateButtons = function() {
       if (!this.btnPrev && !this.btnNext) return;
@@ -468,17 +509,13 @@
       }
       if (this.btnPrev) this.btnPrev.style.display = "";
       if (this.btnNext) this.btnNext.style.display = "";
-      var m = this.maxScroll();
-      var current = this.scroller.scrollLeft;
-      var tolerance = 10;
-      var atStart = current <= tolerance;
-      var atEnd = current >= m - tolerance;
+      var metrics = this.getLiveScrollMetrics();
       if (this.btnPrev) {
-        if (atStart) this.btnPrev.classList.add("inactive");
+        if (metrics.isAtStart) this.btnPrev.classList.add("inactive");
         else this.btnPrev.classList.remove("inactive");
       }
       if (this.btnNext) {
-        if (atEnd) this.btnNext.classList.add("inactive");
+        if (metrics.isAtEnd) this.btnNext.classList.add("inactive");
         else this.btnNext.classList.remove("inactive");
       }
     };
@@ -492,10 +529,10 @@
       var avgItemWidth = total / Math.max(1, items + 2);
       var visibleItems = Math.max(1, Math.round(visible / avgItemWidth));
       var barWidth = Math.max(8, visibleItems / (items + 2) * trackWidth);
-      var maxS = Math.max(1, total - visible);
+      var metrics = this.getLiveScrollMetrics();
+      var maxS = Math.max(1, metrics.max);
       var maxX = Math.max(0, trackWidth - barWidth);
-      var progress = Math.min(1, Math.max(0, this.scroller.scrollLeft / maxS));
-      var x = maxX * progress;
+      var x = maxX * metrics.progress;
       return {
         trackWidth,
         barWidth,
@@ -522,6 +559,7 @@
       this.updateScrollbar();
       this.updateButtons();
       this.updateOverlays();
+      this.updateSlideState(false);
     };
     Slider.prototype.safeClampScroll = function(x) {
       var clamped = Math.min(Math.max(x, 0), this.maxScroll());
@@ -546,6 +584,7 @@
       this.updateScrollbar();
       this.updateButtons();
       this.updateOverlays();
+      this.updateSlideState(false);
     };
     Slider.prototype.scheduleTouchClamp = function() {
       var self = this;
@@ -554,7 +593,9 @@
         self._touchClampTimer = 0;
         var cur = self.scroller.scrollLeft;
         var max = self.maxScroll();
-        var eps = 1;
+        var clientWidth = Math.max(0, self.scroller.clientWidth || 0);
+        var scrollWidth = Math.max(0, self.scroller.scrollWidth || 0);
+        var eps = self.scrollEdgeEpsilon();
         if (!Number.isFinite(cur)) {
           self.scroller.scrollLeft = 0;
         } else if (cur < -eps || cur > max + eps) {
@@ -563,10 +604,15 @@
           self.scroller.scrollLeft = 0;
         } else if (cur > max) {
           self.scroller.scrollLeft = max;
+        } else if (cur <= eps) {
+          self.scroller.scrollLeft = 0;
+        } else if (cur + clientWidth >= scrollWidth - eps) {
+          self.scroller.scrollLeft = max;
         }
         self.updateScrollbar();
         self.updateButtons();
         self.updateOverlays();
+        self.updateSlideState(false);
       }, 90);
     };
     Slider.prototype.onScroll = function() {
@@ -575,6 +621,7 @@
         this.updateScrollbar();
         this.updateButtons();
         this.updateOverlays();
+        this.updateSlideState(false);
         this.scheduleTouchClamp();
         return;
       }
@@ -594,6 +641,7 @@
         self.updateScrollbar();
         self.updateButtons();
         self.updateOverlays();
+        self.updateSlideState(false);
         self.ticking = false;
       });
     };
@@ -644,6 +692,426 @@
       }
       return bestIdx;
     };
+    Slider.prototype.getItemAnchorScrolls = function(items) {
+      var metrics = this.getLiveScrollMetrics();
+      var current = metrics.current;
+      var alignLeft = this.getAlignTargetLeft();
+      var anchors = [];
+      var last = -Infinity;
+      for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        item.setAttribute("data-rt-slider-item-index", String(i));
+        var rect = item.getBoundingClientRect();
+        var raw = current + (rect.left - alignLeft);
+        var anchor = this.safeClampScroll(raw);
+        if (anchor < last) anchor = last;
+        anchors.push(anchor);
+        last = anchor;
+      }
+      if (anchors.length) {
+        var max = this.maxScroll();
+        var eps = this.scrollEdgeEpsilon();
+        if (anchors[0] <= eps) anchors[0] = 0;
+        if (anchors[anchors.length - 1] >= max - eps)
+          anchors[anchors.length - 1] = max;
+      }
+      return anchors;
+    };
+    Slider.prototype.cloneSlideState = function(state2) {
+      if (!state2) return null;
+      return {
+        sliderId: state2.sliderId,
+        itemCount: state2.itemCount,
+        scroll: {
+          current: state2.scroll.current,
+          max: state2.scroll.max,
+          progress: state2.scroll.progress,
+          progressPercent: state2.scroll.progressPercent,
+          direction: state2.scroll.direction,
+          isAtStart: state2.scroll.isAtStart,
+          isAtEnd: state2.scroll.isAtEnd
+        },
+        active: {
+          index: state2.active.index,
+          element: state2.active.element,
+          anchorScrollLeft: state2.active.anchorScrollLeft,
+          distancePx: state2.active.distancePx
+        },
+        previous: {
+          index: state2.previous.index,
+          element: state2.previous.element
+        },
+        next: {
+          index: state2.next.index,
+          element: state2.next.element
+        },
+        segment: {
+          fromIndex: state2.segment.fromIndex,
+          fromElement: state2.segment.fromElement,
+          toIndex: state2.segment.toIndex,
+          toElement: state2.segment.toElement,
+          progress: state2.segment.progress,
+          progressPercent: state2.segment.progressPercent,
+          distancePx: state2.segment.distancePx,
+          spanPx: state2.segment.spanPx,
+          remainingPx: state2.segment.remainingPx,
+          isBetween: state2.segment.isBetween
+        },
+        slides: state2.slides.map(function(slide) {
+          return {
+            index: slide.index,
+            element: slide.element,
+            anchorScrollLeft: slide.anchorScrollLeft,
+            anchorProgress: slide.anchorProgress,
+            anchorProgressPercent: slide.anchorProgressPercent,
+            distanceFromCurrentPx: slide.distanceFromCurrentPx,
+            isActive: slide.isActive,
+            isPrevious: slide.isPrevious,
+            isNext: slide.isNext,
+            isFrom: slide.isFrom,
+            isTo: slide.isTo,
+            isBeforeActive: slide.isBeforeActive,
+            isAfterActive: slide.isAfterActive
+          };
+        })
+      };
+    };
+    Slider.prototype.cloneScrollState = function(scroll) {
+      if (!scroll) return null;
+      return {
+        current: scroll.current,
+        max: scroll.max,
+        progress: scroll.progress,
+        progressPercent: scroll.progressPercent,
+        direction: scroll.direction,
+        isAtStart: scroll.isAtStart,
+        isAtEnd: scroll.isAtEnd
+      };
+    };
+    Slider.prototype.dispatchSliderEvent = function(name, detail) {
+      var payload = this.cloneSlideState(detail);
+      try {
+        this.root.dispatchEvent(
+          new CustomEvent(name, {
+            bubbles: true,
+            detail: payload
+          })
+        );
+      } catch (e) {
+        var ev = document.createEvent("CustomEvent");
+        ev.initCustomEvent(name, true, false, payload);
+        this.root.dispatchEvent(ev);
+      }
+    };
+    Slider.prototype.dispatchProgressEvent = function(name, detail) {
+      var payload = this.cloneScrollState(detail);
+      try {
+        this.root.dispatchEvent(
+          new CustomEvent(name, {
+            bubbles: true,
+            detail: payload
+          })
+        );
+      } catch (e) {
+        var ev = document.createEvent("CustomEvent");
+        ev.initCustomEvent(name, true, false, payload);
+        this.root.dispatchEvent(ev);
+      }
+    };
+    Slider.prototype.applySlideStateAttributes = function(state2) {
+      var root = this.root;
+      root.setAttribute(
+        "data-rt-slider-active-index",
+        String(state2.active.index)
+      );
+      root.setAttribute(
+        "data-rt-slider-from-index",
+        String(state2.segment.fromIndex)
+      );
+      root.setAttribute("data-rt-slider-to-index", String(state2.segment.toIndex));
+      root.setAttribute(
+        "data-rt-slider-segment-progress",
+        String(round(state2.segment.progress, 6))
+      );
+      root.setAttribute(
+        "data-rt-slider-segment-progress-percent",
+        String(round(state2.segment.progressPercent, 4))
+      );
+      root.setAttribute(
+        "data-rt-slider-scroll-current",
+        String(round(state2.scroll.current, 4))
+      );
+      root.setAttribute(
+        "data-rt-slider-scroll-max",
+        String(round(state2.scroll.max, 4))
+      );
+      root.setAttribute(
+        "data-rt-slider-scroll-progress",
+        String(round(state2.scroll.progress, 6))
+      );
+      root.setAttribute(
+        "data-rt-slider-scroll-progress-percent",
+        String(round(state2.scroll.progressPercent, 4))
+      );
+      root.setAttribute(
+        "data-rt-slider-scroll-direction",
+        state2.scroll.direction
+      );
+      root.setAttribute(
+        "data-rt-slider-scroll-at-start",
+        state2.scroll.isAtStart ? "true" : "false"
+      );
+      root.setAttribute(
+        "data-rt-slider-scroll-at-end",
+        state2.scroll.isAtEnd ? "true" : "false"
+      );
+      for (var i = 0; i < state2.slides.length; i++) {
+        var slide = state2.slides[i];
+        var el = slide.element;
+        if (!el) continue;
+        el.setAttribute("data-rt-slider-item-index", String(slide.index));
+        el.setAttribute(
+          "data-rt-slider-item-active",
+          slide.isActive ? "true" : "false"
+        );
+        el.setAttribute(
+          "data-rt-slider-item-from",
+          slide.isFrom ? "true" : "false"
+        );
+        el.setAttribute("data-rt-slider-item-to", slide.isTo ? "true" : "false");
+        el.setAttribute(
+          "data-rt-slider-item-previous",
+          slide.isPrevious ? "true" : "false"
+        );
+        el.setAttribute(
+          "data-rt-slider-item-next",
+          slide.isNext ? "true" : "false"
+        );
+        el.setAttribute(
+          "data-rt-slider-item-before-active",
+          slide.isBeforeActive ? "true" : "false"
+        );
+        el.setAttribute(
+          "data-rt-slider-item-after-active",
+          slide.isAfterActive ? "true" : "false"
+        );
+        el.setAttribute(
+          "data-rt-slider-item-anchor-progress",
+          String(round(slide.anchorProgress, 6))
+        );
+        el.setAttribute(
+          "data-rt-slider-item-anchor-progress-percent",
+          String(round(slide.anchorProgressPercent, 4))
+        );
+        el.setAttribute(
+          "data-rt-slider-item-distance",
+          String(round(slide.distanceFromCurrentPx, 4))
+        );
+      }
+    };
+    Slider.prototype.buildSlideState = function() {
+      var items = this.getOrderedItems();
+      var metrics = this.getLiveScrollMetrics();
+      var max = metrics.max;
+      var current = metrics.current;
+      var prevScroll = this._lastSlideStateScrollLeft;
+      var scrollDirection = "none";
+      if (current > prevScroll + 0.01) scrollDirection = "forward";
+      else if (current < prevScroll - 0.01) scrollDirection = "backward";
+      if (!items.length) {
+        return {
+          sliderId: this.sliderId,
+          itemCount: 0,
+          scroll: {
+            current,
+            max,
+            progress: metrics.progress,
+            progressPercent: metrics.progressPercent,
+            direction: scrollDirection,
+            isAtStart: metrics.isAtStart,
+            isAtEnd: metrics.isAtEnd
+          },
+          active: {
+            index: -1,
+            element: null,
+            anchorScrollLeft: 0,
+            distancePx: 0
+          },
+          previous: {
+            index: -1,
+            element: null
+          },
+          next: {
+            index: -1,
+            element: null
+          },
+          segment: {
+            fromIndex: -1,
+            fromElement: null,
+            toIndex: -1,
+            toElement: null,
+            progress: 0,
+            progressPercent: 0,
+            distancePx: 0,
+            spanPx: 0,
+            remainingPx: 0,
+            isBetween: false
+          },
+          slides: []
+        };
+      }
+      var anchors = this.getItemAnchorScrolls(items);
+      var nearestIndex = 0;
+      var nearestDistance = Infinity;
+      for (var i = 0; i < anchors.length; i++) {
+        var distance = current - anchors[i];
+        var absDistance = Math.abs(distance);
+        if (absDistance < nearestDistance) {
+          nearestDistance = absDistance;
+          nearestIndex = i;
+        }
+      }
+      var fromIndex = 0;
+      var toIndex = 0;
+      var segmentProgress = 0;
+      var segmentDistance = 0;
+      var segmentSpan = 0;
+      var segmentRemaining = 0;
+      var isBetween = false;
+      if (current <= anchors[0]) {
+        fromIndex = 0;
+        toIndex = 0;
+        segmentProgress = 0;
+        segmentDistance = 0;
+        segmentSpan = 0;
+        segmentRemaining = 0;
+        isBetween = false;
+      } else if (current >= anchors[anchors.length - 1]) {
+        fromIndex = anchors.length - 1;
+        toIndex = anchors.length - 1;
+        segmentProgress = 1;
+        segmentDistance = 0;
+        segmentSpan = 0;
+        segmentRemaining = 0;
+        isBetween = false;
+      } else {
+        for (var j = 0; j < anchors.length - 1; j++) {
+          var a = anchors[j];
+          var b = anchors[j + 1];
+          if (current >= a && current <= b) {
+            fromIndex = j;
+            toIndex = j + 1;
+            segmentSpan = Math.max(0, b - a);
+            segmentDistance = Math.max(0, current - a);
+            segmentProgress = segmentSpan > 0 ? clamp(segmentDistance / segmentSpan) : 0;
+            segmentRemaining = Math.max(0, segmentSpan - segmentDistance);
+            isBetween = current > a && current < b;
+            break;
+          }
+        }
+      }
+      var slides = [];
+      for (var k = 0; k < items.length; k++) {
+        var anchor = anchors[k];
+        var anchorProgress = max > 0 ? clamp(anchor / max) : 0;
+        slides.push({
+          index: k,
+          element: items[k],
+          anchorScrollLeft: anchor,
+          anchorProgress,
+          anchorProgressPercent: anchorProgress * 100,
+          distanceFromCurrentPx: current - anchor,
+          isActive: k === nearestIndex,
+          isPrevious: k === nearestIndex - 1,
+          isNext: k === nearestIndex + 1,
+          isFrom: k === fromIndex,
+          isTo: k === toIndex,
+          isBeforeActive: k < nearestIndex,
+          isAfterActive: k > nearestIndex
+        });
+      }
+      return {
+        sliderId: this.sliderId,
+        itemCount: items.length,
+        scroll: {
+          current,
+          max,
+          progress: metrics.progress,
+          progressPercent: metrics.progressPercent,
+          direction: scrollDirection,
+          isAtStart: metrics.isAtStart,
+          isAtEnd: metrics.isAtEnd
+        },
+        active: {
+          index: nearestIndex,
+          element: items[nearestIndex] || null,
+          anchorScrollLeft: anchors[nearestIndex] || 0,
+          distancePx: current - (anchors[nearestIndex] || 0)
+        },
+        previous: {
+          index: nearestIndex > 0 ? nearestIndex - 1 : -1,
+          element: nearestIndex > 0 ? items[nearestIndex - 1] : null
+        },
+        next: {
+          index: nearestIndex < items.length - 1 ? nearestIndex + 1 : -1,
+          element: nearestIndex < items.length - 1 ? items[nearestIndex + 1] : null
+        },
+        segment: {
+          fromIndex,
+          fromElement: items[fromIndex] || null,
+          toIndex,
+          toElement: items[toIndex] || null,
+          progress: segmentProgress,
+          progressPercent: segmentProgress * 100,
+          distancePx: segmentDistance,
+          spanPx: segmentSpan,
+          remainingPx: segmentRemaining,
+          isBetween
+        },
+        slides
+      };
+    };
+    Slider.prototype.updateSlideState = function(force) {
+      var state2 = this.buildSlideState();
+      var prevActiveIndex = this._lastSlideStateActiveIndex;
+      var sig = state2.active.index + "|" + state2.segment.fromIndex + "|" + state2.segment.toIndex + "|" + round(state2.segment.progress, 4) + "|" + round(state2.scroll.progress, 4) + "|" + state2.scroll.direction;
+      var progressSig = round(state2.scroll.progress, 6) + "|" + round(state2.scroll.current, 4) + "|" + round(state2.scroll.max, 4) + "|" + state2.scroll.direction + "|" + (state2.scroll.isAtStart ? "1" : "0") + "|" + (state2.scroll.isAtEnd ? "1" : "0");
+      this.slideState = state2;
+      this.applySlideStateAttributes(state2);
+      this._lastSlideStateScrollLeft = state2.scroll.current;
+      if (force || progressSig !== this._progressSig) {
+        this._progressSig = progressSig;
+        this.dispatchProgressEvent("rtSlider:progress", state2.scroll);
+      }
+      if (force || sig !== this._slideStateSig) {
+        this._slideStateSig = sig;
+        this.dispatchSliderEvent("rtSlider:slide", state2);
+      }
+      if (force || state2.active.index !== prevActiveIndex) {
+        this._lastSlideStateActiveIndex = state2.active.index;
+        this.dispatchSliderEvent("rtSlider:active", state2);
+      }
+    };
+    Slider.prototype.getSlideState = function() {
+      if (!this.slideState) this.updateSlideState(true);
+      return this.cloneSlideState(this.slideState);
+    };
+    Slider.prototype.getScrollState = function() {
+      var state2 = this.getSlideState();
+      return state2 ? this.cloneScrollState(state2.scroll) : null;
+    };
+    Slider.prototype.getProgress = function() {
+      var scroll = this.getScrollState();
+      return scroll ? scroll.progress : 0;
+    };
+    Slider.prototype.getActiveIndex = function() {
+      var state2 = this.getSlideState();
+      return state2 && state2.active ? state2.active.index : -1;
+    };
+    Slider.prototype.getActiveElement = function() {
+      var state2 = this.getSlideState();
+      return state2 && state2.active ? state2.active.element : null;
+    };
     Slider.prototype.scrollAlignToItem = function(el) {
       if (!el) return;
       var total = this.scroller.scrollWidth;
@@ -972,6 +1440,7 @@
       this.updateScrollbar();
       this.updateButtons();
       this.updateOverlays();
+      this.updateSlideState(false);
       this.barPointerId = null;
     };
     Slider.prototype.detectLinksInItems = function() {
@@ -1077,6 +1546,7 @@
       this.setupCursorMode();
       this.applyIOSScrollIndicatorMask();
       this.applyListStyles();
+      this.updateSlideState(true);
     };
     Slider.prototype.onClickCapture = function(e) {
       if (!this.didDragTs) return;
@@ -1213,6 +1683,7 @@
         self.applyListStyles();
         self.setupCursorMode();
         self.rafUpdate();
+        self.updateSlideState(true);
       };
       if (this.mq.addEventListener)
         this.mq.addEventListener("change", this._onMQ);
@@ -1225,6 +1696,7 @@
           self.setupCursorMode();
           self.applyIOSScrollIndicatorMask();
           self.applyListStyles();
+          self.updateSlideState(true);
         };
         img.addEventListener("load", update, { once: true });
         img.addEventListener("error", update, { once: true });
@@ -1248,7 +1720,7 @@
       if (this.mq.matches) {
         loadLenis().then(function() {
           self.setupLenisInstance();
-        }).catch(function(e) {
+        }).catch(function() {
         });
       }
       this.rafUpdate();
@@ -1256,10 +1728,12 @@
         self.rafUpdate();
         self.applyIOSScrollIndicatorMask();
         self.applyListStyles();
+        self.updateSlideState(true);
       };
       window.addEventListener("load", this._onWL);
       this.setupCursorMode();
       this.bindEvents();
+      this.updateSlideState(true);
     };
     Slider.prototype.destroy = function() {
       this.stopInertia();
@@ -1360,6 +1834,18 @@
         get: function(id) {
           return state.instances[id] || null;
         },
+        getSlideState: function(id) {
+          var inst = state.instances[id];
+          return inst ? inst.getSlideState() : null;
+        },
+        getScrollState: function(id) {
+          var inst = state.instances[id];
+          return inst ? inst.getScrollState() : null;
+        },
+        getProgress: function(id) {
+          var inst = state.instances[id];
+          return inst ? inst.getProgress() : 0;
+        },
         refresh: function() {
           var keys = state.order;
           for (var i = 0; i < keys.length; i++) {