animated-scroll-to - npm Package Compare versions

Comparing version 2.0.5 to 2.0.6

CHANGELOG.md

 # Changelog
 
+### v2.0.6
+
+20.04.2020.
+
+Fixed
+
+* Calculating element offset inside of element was sometimes a pixel off.
+* Active animations weren't cleared on animation end
+* Now error is thrown in "elementToScroll" is not a parent of "scrollToElement"
+
+-----
+
 ### v2.0.4 and v2.0.5
 
+09.11.2019.
+
 Fixed
@@ -6,0 +20,0 @@

lib/animated-scroll-to.js

@@ -15,2 +15,19 @@ "use strict";
 // --------- SCROLL INTERFACES
+function getElementOffset(el) {
+    var top = 0;
+    var left = 0;
+    var element = el;
+    // Loop through the DOM tree
+    // and add it's parent's offset to get page offset
+    do {
+        top += element.offsetTop || 0;
+        left += element.offsetLeft || 0;
+        element = element.offsetParent;
+    } while (element);
+    return {
+        top: top,
+        left: left,
+    };
+}
+// --------- SCROLL INTERFACES
 // ScrollDomElement and ScrollWindow have identical interfaces
@@ -33,7 +50,7 @@ var ScrollDomElement = /** @class */ (function () {
     };
-    ScrollDomElement.prototype.getHorizontalElementScrollOffset = function (elementToScrollTo) {
-        return elementToScrollTo.getBoundingClientRect().left + this.element.scrollLeft - this.element.getBoundingClientRect().left;
+    ScrollDomElement.prototype.getHorizontalElementScrollOffset = function (elementToScrollTo, elementToScroll) {
+        return getElementOffset(elementToScrollTo).left - getElementOffset(elementToScroll).left;
     };
-    ScrollDomElement.prototype.getVerticalElementScrollOffset = function (elementToScrollTo) {
-        return elementToScrollTo.getBoundingClientRect().top + this.element.scrollTop - this.element.getBoundingClientRect().top;
+    ScrollDomElement.prototype.getVerticalElementScrollOffset = function (elementToScrollTo, elementToScroll) {
+        return getElementOffset(elementToScrollTo).top - getElementOffset(elementToScroll).top;
     };
@@ -82,7 +99,10 @@ ScrollDomElement.prototype.scrollTo = function (x, y) {
     },
-    stop: function (element) {
+    remove: function (element, shouldStop) {
+        if (shouldStop === void 0) { shouldStop = true; }
         var index = activeAnimations.elements.indexOf(element);
         if (index > -1) {
             // Stop animation
-            activeAnimations.cancelMethods[index]();
+            if (shouldStop) {
+                activeAnimations.cancelMethods[index]();
+            }
             // Remove it
@@ -134,4 +154,10 @@ activeAnimations.elements.splice(index, 1);
         scrollToElement = numberOrCoordsOrElement;
-        x = elementToScroll.getHorizontalElementScrollOffset(scrollToElement);
-        y = elementToScroll.getVerticalElementScrollOffset(scrollToElement);
+        // If "elementToScroll" is not a parent of "scrollToElement"
+        if (isElement &&
+            !options.elementToScroll.contains(scrollToElement) &&
+            options.elementToScroll !== scrollToElement) {
+            throw ('options.elementToScroll has to be a parent of scrollToElement');
+        }
+        x = elementToScroll.getHorizontalElementScrollOffset(scrollToElement, options.elementToScroll);
+        y = elementToScroll.getVerticalElementScrollOffset(scrollToElement, options.elementToScroll);
     }
@@ -194,3 +220,3 @@ else if (typeof numberOrCoordsOrElement === 'number') {
         // Cancel existing animation if it is already running on the same element
-        activeAnimations.stop(options.elementToScroll);
+        activeAnimations.remove(options.elementToScroll, true);
         // To cancel animation we have to store request animation frame ID 
@@ -255,2 +281,4 @@ var requestID;
                 removeListeners();
+                // Remove animation from the active animations coordinator
+                activeAnimations.remove(options.elementToScroll, false);
                 // Resolve promise with a boolean hasScrolledToPosition set to true
@@ -257,0 +285,0 @@ resolve(true);

package.json

 {
   "name": "animated-scroll-to",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "Simple, plain JavaScript animated window scroll",
@@ -33,6 +33,6 @@ "main": "./lib/animated-scroll-to.js",
   "devDependencies": {
-    "concurrently": "^4.1.2",
-    "cypress": "^3.4.1",
-    "parcel-bundler": "^1.12.3",
-    "typescript": "^3.6.3"
+    "concurrently": "^5.1.0",
+    "cypress": "^4.4.0",
+    "parcel-bundler": "^1.12.4",
+    "typescript": "^3.8.3"
   },
@@ -45,3 +45,6 @@ "browserslist": [
     "ie 11"
-  ]
+  ],
+  "dependencies": {
+    "@types/node": "^13.13.1"
+  }
 }

src/animated-scroll-to.ts

@@ -17,2 +17,23 @@ export type TCoords = [number | null, number | null];
 
+function getElementOffset(el) {
+  let top = 0;
+  let left = 0;
+  let element = el;
+
+  // Loop through the DOM tree
+  // and add it's parent's offset to get page offset
+  do {
+    top += element.offsetTop || 0;
+    left += element.offsetLeft || 0;
+    element = element.offsetParent;
+  } while (element);
+
+  return {
+    top,
+    left,
+  };
+}
+
+// --------- SCROLL INTERFACES
+
 // ScrollDomElement and ScrollWindow have identical interfaces
@@ -43,8 +64,8 @@
 
-  getHorizontalElementScrollOffset(elementToScrollTo:Element):number {
-    return elementToScrollTo.getBoundingClientRect().left + this.element.scrollLeft - this.element.getBoundingClientRect().left;
+  getHorizontalElementScrollOffset(elementToScrollTo:Element, elementToScroll:Element):number {
+    return getElementOffset(elementToScrollTo).left - getElementOffset(elementToScroll).left;
   }
 
-  getVerticalElementScrollOffset(elementToScrollTo:Element):number {
-    return elementToScrollTo.getBoundingClientRect().top + this.element.scrollTop - this.element.getBoundingClientRect().top;
+  getVerticalElementScrollOffset(elementToScrollTo:Element, elementToScroll:Element):number {
+    return getElementOffset(elementToScrollTo).top - getElementOffset(elementToScroll).top;
   }
@@ -108,3 +129,3 @@
   },
-  stop: (element:Element | Window) => {
+  remove: (element:Element | Window, shouldStop:boolean = true) => {
     const index = activeAnimations.elements.indexOf(element);
@@ -114,3 +135,5 @@
       // Stop animation
-      activeAnimations.cancelMethods[index]();
+      if (shouldStop) {
+        activeAnimations.cancelMethods[index]();
+      }
       // Remove it
@@ -183,4 +206,16 @@ activeAnimations.elements.splice(index, 1);
     scrollToElement = numberOrCoordsOrElement;
-    x = elementToScroll.getHorizontalElementScrollOffset(scrollToElement);
-    y = elementToScroll.getVerticalElementScrollOffset(scrollToElement);
+
+    // If "elementToScroll" is not a parent of "scrollToElement"
+    if (
+      isElement && 
+      !(options.elementToScroll as Element).contains(scrollToElement) &&
+      options.elementToScroll !== scrollToElement
+    ) {
+      throw(
+        'options.elementToScroll has to be a parent of scrollToElement'
+      );
+    }
+
+    x = elementToScroll.getHorizontalElementScrollOffset(scrollToElement, (options.elementToScroll as Element));
+    y = elementToScroll.getVerticalElementScrollOffset(scrollToElement, (options.elementToScroll as Element));
   } else if (typeof numberOrCoordsOrElement === 'number') {
@@ -254,3 +289,3 @@ x = elementToScroll.getHorizontalScroll();
     // Cancel existing animation if it is already running on the same element
-    activeAnimations.stop(options.elementToScroll);
+    activeAnimations.remove(options.elementToScroll, true);
 
@@ -331,2 +366,5 @@ // To cancel animation we have to store request animation frame ID
         removeListeners();
+
+        // Remove animation from the active animations coordinator
+        activeAnimations.remove(options.elementToScroll, false);
         
@@ -333,0 +371,0 @@ // Resolve promise with a boolean hasScrolledToPosition set to true

tsconfig.json

@@ -12,2 +12,6 @@ {
   },
+  "types": [
+    "./",
+    "node"
+  ],
   "include": [
@@ -14,0 +18,0 @@ "src/**/*"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56264

increased by5.35%

Lines of code

653

increased by10.68%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Added@types/node@^13.13.1

• + Added@types/node@13.13.52(transitive)