react-scroll-snap-carousel - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/index.es.js

@@ -122,5 +122,3 @@ import { useEffect, useState, useCallback } from 'react';
     var lastSlideObserver;
-    var snapIndex;
-    var activeSlideIndex;
-    var isIndexLocked;
+    var activeSnapIndex;
     var children = root.children;
@@ -130,5 +128,3 @@ var triggerChange = function (snapIndex) {
         root.dispatchEvent(new CustomEvent('snap-change', {
-            detail: {
-                snapIndex: snapIndex,
-            },
+            detail: { snapIndex: snapIndex },
         }));
@@ -142,9 +138,4 @@ };
     };
-    var setSnapIndex = function (newSnapIndex) {
-        if (isIndexLocked &&
-            newSnapIndex !== 0 &&
-            newSnapIndex !== children.length - 1) {
-            return;
-        }
-        snapIndex = newSnapIndex;
+    var setSnapIndex = function (snapIndex) {
+        activeSnapIndex = snapIndex;
         triggerChange(snapIndex);
@@ -158,18 +149,25 @@ };
     var init = function () {
-        var rootStyles = window.getComputedStyle(root);
         var rootWidth = root.offsetWidth;
         var rootMargin = "0px 0px 0px -" + rootWidth / 2 + "px";
-        var rootMarginWithPadding = "0px -" + rootStyles.paddingRight + " 0px -" + rootStyles.paddingLeft;
-        snapIndex = root.scrollLeft ? getVisibleChildren(root).childrenInCenter : 0;
-        isIndexLocked = !snapIndex;
-        activeSlideIndex = snapIndex;
+        var marginLeft = getComputedStyle(children[0]).marginLeft;
+        var marginRight = getComputedStyle(children[children.length - 1])
+            .marginRight;
+        var rootMarginEdges = "0px -" + marginLeft + " 0px -" + marginRight;
+        activeSnapIndex = root.scrollLeft
+            ? getVisibleChildren(root).childrenInCenter
+            : 0;
         activeSnapObserver = new IntersectionObserver(function (entries) {
             entries.forEach(function (entry) {
+                // console.log('active snap: ', entry);
                 var entryIndex = Array.prototype.indexOf.call(children, entry.target);
-                if (snapIndex !== null) {
+                // entry.rootBounds is wrong on Webkit if there is a padding on the root
+                // so we use the BoundingClientRect instead
+                var rootBb = root.getBoundingClientRect();
+                if (activeSnapIndex !== null) {
                     // If next
-                    if (entryIndex > activeSlideIndex &&
-                        entry.rootBounds &&
-                        entry.boundingClientRect.left < entry.rootBounds.left) {
-                        activeSlideIndex = entryIndex;
+                    if (root.scrollLeft > 0 &&
+                        entry.intersectionRatio <= 0.51 &&
+                        entryIndex > activeSnapIndex &&
+                        entry.boundingClientRect.left < rootBb.left + rootBb.width / 2) {
+                        // console.log('next');
                         activeSnapObserver.unobserve(entry.target);
@@ -180,3 +178,3 @@ children[entryIndex - 2] &&
                             activeSnapObserver.observe(children[entryIndex + 1]);
-                            setSnapIndex(snapIndex + 1);
+                            setSnapIndex(entryIndex);
                         }
@@ -188,6 +186,7 @@ if (children[entryIndex - 1])
                     // If previous
-                    if (entryIndex < activeSlideIndex &&
+                    if (entryIndex < activeSnapIndex &&
+                        entry.intersectionRatio >= 0.49 &&
                         entry.rootBounds &&
-                        entry.boundingClientRect.right > entry.rootBounds.left) {
-                        activeSlideIndex = entryIndex;
+                        entry.boundingClientRect.right > rootBb.left + rootBb.width / 2) {
+                        // console.log('previous');
                         activeSnapObserver.unobserve(entry.target);
@@ -198,3 +197,3 @@ children[entryIndex + 2] &&
                             activeSnapObserver.observe(children[entryIndex - 1]);
-                            setSnapIndex(snapIndex - 1);
+                            setSnapIndex(entryIndex);
                         }
@@ -213,16 +212,14 @@ if (children[entryIndex + 1])
             entries.forEach(function (entry) {
-                if (entry.isIntersecting && entry.intersectionRatio === 1) {
-                    activeSnapObserver.unobserve(children[activeSlideIndex]);
+                // console.log('first ', entry);
+                if (entry.isIntersecting &&
+                    entry.intersectionRatio === 1 &&
+                    activeSnapIndex !== 0) {
+                    activeSnapObserver.unobserve(children[activeSnapIndex]);
                     activeSnapObserver.observe(children[1]);
-                    isIndexLocked = true;
-                    activeSlideIndex = 0;
-                    setSnapIndex(activeSlideIndex);
+                    setSnapIndex(0);
                 }
-                if (entry.isIntersecting && entry.intersectionRatio < 1) {
-                    isIndexLocked = false;
-                }
             });
         }, {
             root: root,
-            rootMargin: rootMarginWithPadding,
+            rootMargin: rootMarginEdges,
             threshold: [0, 0.5, 1],
@@ -232,24 +229,21 @@ });
             entries.forEach(function (entry) {
-                if (!snapIndex)
+                if (!activeSnapIndex)
                     return;
                 if (entry.isIntersecting && entry.intersectionRatio === 1) {
-                    activeSnapObserver.unobserve(children[activeSlideIndex]);
+                    activeSnapObserver.unobserve(children[activeSnapIndex]);
                     activeSnapObserver.observe(children[children.length - 2]);
-                    isIndexLocked = true;
-                    activeSlideIndex = snapIndex + 1;
-                    setSnapIndex(activeSlideIndex);
+                    setSnapIndex(activeSnapIndex + 1);
                 }
-                if (entry.isIntersecting && entry.intersectionRatio < 1) {
-                    isIndexLocked = false;
-                }
             });
         }, {
             root: root,
-            rootMargin: rootMarginWithPadding,
+            rootMargin: rootMarginEdges,
             threshold: [0, 1],
         });
         // Set intersection observers
-        if (children[snapIndex - 1])
-            activeSnapObserver.observe(children[snapIndex - 1]);
-        activeSnapObserver.observe(children[snapIndex + 1] ? children[snapIndex + 1] : children[snapIndex]);
+        if (children[activeSnapIndex - 1])
+            activeSnapObserver.observe(children[activeSnapIndex - 1]);
+        activeSnapObserver.observe(children[activeSnapIndex + 1]
+            ? children[activeSnapIndex + 1]
+            : children[activeSnapIndex]);
         firstSlideObserver.observe(children[0]);
@@ -265,2 +259,80 @@ lastSlideObserver.observe(children[children.length - 1]);
 
+var easingOutQuint = function (t, b, c, d) {
+    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+};
+var smoothScrollPolyfill = function (_a) {
+    var node = _a.node, scrollTarget = _a.scrollTarget, duration = _a.duration;
+    var startTime = Date.now();
+    var offsetLeft = node.scrollLeft;
+    var offsetTop = node.scrollTop;
+    var gapHorizontal = scrollTarget.left - offsetLeft;
+    var gapVertical = scrollTarget.top - offsetTop;
+    var interrupt = false;
+    var cleanup = function () {
+        node.removeEventListener('wheel', cancel); // eslint-disable-line @typescript-eslint/no-use-before-define
+        node.removeEventListener('touchstart', cancel); // eslint-disable-line @typescript-eslint/no-use-before-define
+    };
+    var step = function () {
+        var elapsed = Date.now() - startTime;
+        var percentage = elapsed / duration;
+        if (interrupt)
+            return;
+        if (percentage > 1) {
+            node.scrollLeft = scrollTarget.left;
+            node.scrollTop = scrollTarget.top;
+            cleanup();
+            return;
+        }
+        var nextScrollLeft = easingOutQuint(elapsed, offsetLeft, gapHorizontal, duration);
+        var nextScrollTop = easingOutQuint(elapsed, offsetTop, gapVertical, duration);
+        node.scrollLeft =
+            Math.abs(scrollTarget.left - nextScrollLeft) <= 1
+                ? scrollTarget.left
+                : nextScrollLeft;
+        node.scrollTop =
+            Math.abs(scrollTarget.top - nextScrollTop) <= 1
+                ? scrollTarget.top
+                : nextScrollTop;
+        requestAnimationFrame(step);
+    };
+    var cancel = function () {
+        interrupt = true;
+        cleanup();
+    };
+    node.addEventListener('wheel', cancel, { passive: true });
+    node.addEventListener('touchstart', cancel, { passive: true });
+    step();
+    return cancel;
+};
+var hasNativeSmoothScroll = function () {
+    var supports = false;
+    var fakeScrollToOptions = {
+        top: 0,
+        get behavior() {
+            supports = true;
+            return 'smooth';
+        },
+    };
+    try {
+        var div = document.createElement('div');
+        div.scrollTo(fakeScrollToOptions);
+    }
+    catch (err) { } // eslint-disable-line no-empty
+    return supports;
+};
+var smoothScroll = function (node, scrollTarget, duration) {
+    if (!node)
+        return;
+    if (hasNativeSmoothScroll()) {
+        return node.scrollTo({
+            left: scrollTarget.left,
+            top: scrollTarget.top,
+            behavior: 'smooth',
+        });
+    }
+    else {
+        return smoothScrollPolyfill({ node: node, scrollTarget: scrollTarget, duration: duration });
+    }
+};
+
 var normalize = function (value, _a) {
@@ -350,7 +422,3 @@ var min = _a.min, max = _a.max;
         if (scrollTarget) {
-            root.scrollTo({
-                left: scrollTarget.left,
-                top: scrollTarget.top,
-                behavior: 'smooth',
-            });
+            smoothScroll(root, scrollTarget, 350);
         }
@@ -357,0 +425,0 @@ };

dist/index.js

@@ -126,5 +126,3 @@ 'use strict';
     var lastSlideObserver;
-    var snapIndex;
-    var activeSlideIndex;
-    var isIndexLocked;
+    var activeSnapIndex;
     var children = root.children;
@@ -134,5 +132,3 @@ var triggerChange = function (snapIndex) {
         root.dispatchEvent(new CustomEvent('snap-change', {
-            detail: {
-                snapIndex: snapIndex,
-            },
+            detail: { snapIndex: snapIndex },
         }));
@@ -146,9 +142,4 @@ };
     };
-    var setSnapIndex = function (newSnapIndex) {
-        if (isIndexLocked &&
-            newSnapIndex !== 0 &&
-            newSnapIndex !== children.length - 1) {
-            return;
-        }
-        snapIndex = newSnapIndex;
+    var setSnapIndex = function (snapIndex) {
+        activeSnapIndex = snapIndex;
         triggerChange(snapIndex);
@@ -162,18 +153,25 @@ };
     var init = function () {
-        var rootStyles = window.getComputedStyle(root);
         var rootWidth = root.offsetWidth;
         var rootMargin = "0px 0px 0px -" + rootWidth / 2 + "px";
-        var rootMarginWithPadding = "0px -" + rootStyles.paddingRight + " 0px -" + rootStyles.paddingLeft;
-        snapIndex = root.scrollLeft ? getVisibleChildren(root).childrenInCenter : 0;
-        isIndexLocked = !snapIndex;
-        activeSlideIndex = snapIndex;
+        var marginLeft = getComputedStyle(children[0]).marginLeft;
+        var marginRight = getComputedStyle(children[children.length - 1])
+            .marginRight;
+        var rootMarginEdges = "0px -" + marginLeft + " 0px -" + marginRight;
+        activeSnapIndex = root.scrollLeft
+            ? getVisibleChildren(root).childrenInCenter
+            : 0;
         activeSnapObserver = new IntersectionObserver(function (entries) {
             entries.forEach(function (entry) {
+                // console.log('active snap: ', entry);
                 var entryIndex = Array.prototype.indexOf.call(children, entry.target);
-                if (snapIndex !== null) {
+                // entry.rootBounds is wrong on Webkit if there is a padding on the root
+                // so we use the BoundingClientRect instead
+                var rootBb = root.getBoundingClientRect();
+                if (activeSnapIndex !== null) {
                     // If next
-                    if (entryIndex > activeSlideIndex &&
-                        entry.rootBounds &&
-                        entry.boundingClientRect.left < entry.rootBounds.left) {
-                        activeSlideIndex = entryIndex;
+                    if (root.scrollLeft > 0 &&
+                        entry.intersectionRatio <= 0.51 &&
+                        entryIndex > activeSnapIndex &&
+                        entry.boundingClientRect.left < rootBb.left + rootBb.width / 2) {
+                        // console.log('next');
                         activeSnapObserver.unobserve(entry.target);
@@ -184,3 +182,3 @@ children[entryIndex - 2] &&
                             activeSnapObserver.observe(children[entryIndex + 1]);
-                            setSnapIndex(snapIndex + 1);
+                            setSnapIndex(entryIndex);
                         }
@@ -192,6 +190,7 @@ if (children[entryIndex - 1])
                     // If previous
-                    if (entryIndex < activeSlideIndex &&
+                    if (entryIndex < activeSnapIndex &&
+                        entry.intersectionRatio >= 0.49 &&
                         entry.rootBounds &&
-                        entry.boundingClientRect.right > entry.rootBounds.left) {
-                        activeSlideIndex = entryIndex;
+                        entry.boundingClientRect.right > rootBb.left + rootBb.width / 2) {
+                        // console.log('previous');
                         activeSnapObserver.unobserve(entry.target);
@@ -202,3 +201,3 @@ children[entryIndex + 2] &&
                             activeSnapObserver.observe(children[entryIndex - 1]);
-                            setSnapIndex(snapIndex - 1);
+                            setSnapIndex(entryIndex);
                         }
@@ -217,16 +216,14 @@ if (children[entryIndex + 1])
             entries.forEach(function (entry) {
-                if (entry.isIntersecting && entry.intersectionRatio === 1) {
-                    activeSnapObserver.unobserve(children[activeSlideIndex]);
+                // console.log('first ', entry);
+                if (entry.isIntersecting &&
+                    entry.intersectionRatio === 1 &&
+                    activeSnapIndex !== 0) {
+                    activeSnapObserver.unobserve(children[activeSnapIndex]);
                     activeSnapObserver.observe(children[1]);
-                    isIndexLocked = true;
-                    activeSlideIndex = 0;
-                    setSnapIndex(activeSlideIndex);
+                    setSnapIndex(0);
                 }
-                if (entry.isIntersecting && entry.intersectionRatio < 1) {
-                    isIndexLocked = false;
-                }
             });
         }, {
             root: root,
-            rootMargin: rootMarginWithPadding,
+            rootMargin: rootMarginEdges,
             threshold: [0, 0.5, 1],
@@ -236,24 +233,21 @@ });
             entries.forEach(function (entry) {
-                if (!snapIndex)
+                if (!activeSnapIndex)
                     return;
                 if (entry.isIntersecting && entry.intersectionRatio === 1) {
-                    activeSnapObserver.unobserve(children[activeSlideIndex]);
+                    activeSnapObserver.unobserve(children[activeSnapIndex]);
                     activeSnapObserver.observe(children[children.length - 2]);
-                    isIndexLocked = true;
-                    activeSlideIndex = snapIndex + 1;
-                    setSnapIndex(activeSlideIndex);
+                    setSnapIndex(activeSnapIndex + 1);
                 }
-                if (entry.isIntersecting && entry.intersectionRatio < 1) {
-                    isIndexLocked = false;
-                }
             });
         }, {
             root: root,
-            rootMargin: rootMarginWithPadding,
+            rootMargin: rootMarginEdges,
             threshold: [0, 1],
         });
         // Set intersection observers
-        if (children[snapIndex - 1])
-            activeSnapObserver.observe(children[snapIndex - 1]);
-        activeSnapObserver.observe(children[snapIndex + 1] ? children[snapIndex + 1] : children[snapIndex]);
+        if (children[activeSnapIndex - 1])
+            activeSnapObserver.observe(children[activeSnapIndex - 1]);
+        activeSnapObserver.observe(children[activeSnapIndex + 1]
+            ? children[activeSnapIndex + 1]
+            : children[activeSnapIndex]);
         firstSlideObserver.observe(children[0]);
@@ -269,2 +263,80 @@ lastSlideObserver.observe(children[children.length - 1]);
 
+var easingOutQuint = function (t, b, c, d) {
+    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+};
+var smoothScrollPolyfill = function (_a) {
+    var node = _a.node, scrollTarget = _a.scrollTarget, duration = _a.duration;
+    var startTime = Date.now();
+    var offsetLeft = node.scrollLeft;
+    var offsetTop = node.scrollTop;
+    var gapHorizontal = scrollTarget.left - offsetLeft;
+    var gapVertical = scrollTarget.top - offsetTop;
+    var interrupt = false;
+    var cleanup = function () {
+        node.removeEventListener('wheel', cancel); // eslint-disable-line @typescript-eslint/no-use-before-define
+        node.removeEventListener('touchstart', cancel); // eslint-disable-line @typescript-eslint/no-use-before-define
+    };
+    var step = function () {
+        var elapsed = Date.now() - startTime;
+        var percentage = elapsed / duration;
+        if (interrupt)
+            return;
+        if (percentage > 1) {
+            node.scrollLeft = scrollTarget.left;
+            node.scrollTop = scrollTarget.top;
+            cleanup();
+            return;
+        }
+        var nextScrollLeft = easingOutQuint(elapsed, offsetLeft, gapHorizontal, duration);
+        var nextScrollTop = easingOutQuint(elapsed, offsetTop, gapVertical, duration);
+        node.scrollLeft =
+            Math.abs(scrollTarget.left - nextScrollLeft) <= 1
+                ? scrollTarget.left
+                : nextScrollLeft;
+        node.scrollTop =
+            Math.abs(scrollTarget.top - nextScrollTop) <= 1
+                ? scrollTarget.top
+                : nextScrollTop;
+        requestAnimationFrame(step);
+    };
+    var cancel = function () {
+        interrupt = true;
+        cleanup();
+    };
+    node.addEventListener('wheel', cancel, { passive: true });
+    node.addEventListener('touchstart', cancel, { passive: true });
+    step();
+    return cancel;
+};
+var hasNativeSmoothScroll = function () {
+    var supports = false;
+    var fakeScrollToOptions = {
+        top: 0,
+        get behavior() {
+            supports = true;
+            return 'smooth';
+        },
+    };
+    try {
+        var div = document.createElement('div');
+        div.scrollTo(fakeScrollToOptions);
+    }
+    catch (err) { } // eslint-disable-line no-empty
+    return supports;
+};
+var smoothScroll = function (node, scrollTarget, duration) {
+    if (!node)
+        return;
+    if (hasNativeSmoothScroll()) {
+        return node.scrollTo({
+            left: scrollTarget.left,
+            top: scrollTarget.top,
+            behavior: 'smooth',
+        });
+    }
+    else {
+        return smoothScrollPolyfill({ node: node, scrollTarget: scrollTarget, duration: duration });
+    }
+};
+
 var normalize = function (value, _a) {
@@ -354,7 +426,3 @@ var min = _a.min, max = _a.max;
         if (scrollTarget) {
-            root.scrollTo({
-                left: scrollTarget.left,
-                top: scrollTarget.top,
-                behavior: 'smooth',
-            });
+            smoothScroll(root, scrollTarget, 350);
         }
@@ -361,0 +429,0 @@ };

package.json

 {
   "name": "react-scroll-snap-carousel",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "main": "dist/index.js",
@@ -14,3 +14,3 @@ "module": "dist/index.es.js",
   "dependencies": {
-    "scroll-snap-carousel": "^0.0.8"
+    "scroll-snap-carousel": "^0.0.9"
   },
@@ -34,3 +34,3 @@ "peerDependencies": {
   },
-  "gitHead": "89ea2bdddc3e9b2a58ed276bc4645ad4e1a8487e"
+  "gitHead": "b3a42697d9130e2d4ea259fc27992351149785d7"
 }

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

144617

increased by11.47%

Lines of code

1291

increased by11.58%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedscroll-snap-carousel@0.0.9(transitive)

• - Removedscroll-snap-carousel@0.0.8(transitive)

• Updatedscroll-snap-carousel@^0.0.9