@dreamworld/web-util - npm Package Compare versions

Comparing version 1.4.4 to 1.4.5-refactor-scrollintoview.1

package.json

 {
   "name": "@dreamworld/web-util",
-  "version": "1.4.4",
+  "version": "1.4.5-refactor-scrollintoview.1",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

scrollIntoView.js

@@ -1,40 +0,1 @@
-
-
-const alignTop = (scrollingElement, element, offsetTop) => {
-  scrollingElement.scrollTop = element.offsetTop - offsetTop;
-}
-
-const alignBottom = (scrollingElement, element, offsetBottom) => {
-  let scrollingElementClientHeight = document.scrollingElement === scrollingElement && window.visualViewport ? window.visualViewport.height : scrollingElement.clientHeight;
-  scrollingElement.scrollTop = element.offsetTop + element.offsetHeight + offsetBottom - scrollingElementClientHeight;
-}
-
-const isFullVisible = (scrollElement, element, offsetTop, offsetBottom) => {
-  const elementRect = element.getBoundingClientRect();
-
-  let scrollElementTop;
-  let scrollElementBottom;
-
-  //If given scrolling element as a document scroll
-  //Document it-self hide from view-port, so this logic is written.
-  if(document.scrollingElement === scrollElement) {
-    if(window.visualViewport) {
-      scrollElementTop = window.visualViewport.offsetTop;
-      scrollElementBottom = window.visualViewport.height;
-    } else {
-      scrollElementTop = 0;
-      scrollElementBottom = window.innerHeight;
-    }
-  } else {
-    const scrollElementRect = scrollElement.getBoundingClientRect();
-    scrollElementTop = scrollElementRect.top;
-    scrollElementBottom = scrollElementRect.bottom;
-  }
-
-  if (elementRect.top < (scrollElementTop + offsetTop) || elementRect.bottom > (scrollElementBottom - offsetBottom)) {
-    return false;
-  }
-  return true;
-}
-
 /**
@@ -53,27 +14,46 @@ * If `element` visible fully, do nothing
  */
-export const scrollIntoView = (scrollingElement, element, bottom = false, offsetTop = 0, offsetBottom = 0) => {
-  if (isFullVisible(scrollingElement, element, offsetTop, offsetBottom)) {
-    return;
+ export const scrollIntoView = (scrollingElement, element, bottom = false, offsetTop = 0, offsetBottom = 0) => {
+  const intersectionCallback = (entries) => {
+    intersectionInstance.disconnect();
+    intersectionInstance = null;
+
+    entries.forEach(entry => {
+      if (entry.intersectionRatio == 1) {
+        return;
+      } else {
+        let scrollingElementClientHeight = document.scrollingElement === scrollingElement && window.visualViewport ? window.visualViewport.height : scrollingElement.clientHeight;
+        // If element client height > view-port's height
+        if (element.clientHeight > (scrollingElementClientHeight - (offsetTop + offsetBottom))) {
+          _scrollIntoView(scrollingElement, element, bottom, offsetTop, offsetBottom);
+          return
+        }
+        const scrollingElementTop = document.scrollingElement !== scrollingElement ? scrollingElement.getBoundingClientRect().top : 0;
+        const elementTop = entry.boundingClientRect.top;
+
+        if (elementTop > (scrollingElementTop + offsetTop)) {
+          _scrollIntoView(scrollingElement, element, true, offsetTop, offsetBottom);
+        } else {
+          _scrollIntoView(scrollingElement, element, false, offsetTop, offsetBottom);
+        }
+        
+      }
+    });
   }
 
-  let scrollingElementClientHeight = document.scrollingElement === scrollingElement && window.visualViewport ? window.visualViewport.height : scrollingElement.clientHeight;
-  // If element client height > view-port's height
-  if (element.clientHeight > (scrollingElementClientHeight - (offsetTop + offsetBottom))) {
-    if (!bottom) {
-      alignTop(scrollingElement, element, offsetTop);
-    } else {
-      alignBottom(scrollingElement, element, offsetBottom);
+  const root = document.scrollingElement === scrollingElement ? null : scrollingElement;
+  let intersectionInstance = new IntersectionObserver(intersectionCallback, { root, rootMargin: `-${offsetTop}px 0px -${offsetBottom}px 0px` });
+  intersectionInstance.observe(element);
+}
+
+const _scrollIntoView = (scrollingElement, element, bottom, offsetTop, offsetBottom) => {
+  element.scrollIntoView(!bottom);
+  if (!bottom) {
+    if (offsetTop) {
+      scrollingElement.scrollTop -= offsetTop;
     }
-    return;
+  } else {
+    if (offsetBottom) {
+      scrollingElement.scrollTop += offsetBottom;
+    }
   }
-
-  if (element.offsetTop < (scrollingElement.scrollTop + offsetTop)) {
-    alignTop(scrollingElement, element, offsetTop);
-    return;
-  }
-  
-  if((element.offsetTop + element.offsetHeight) > (scrollingElement.scrollTop + scrollingElementClientHeight - offsetBottom)) {
-    alignBottom(scrollingElement, element, offsetBottom);
-    return;
-  }
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Worsened metrics

Total package byte prevSize

14020

decreased by-3.99%

Lines of code

260

decreased by-5.11%

Number of low quality alerts

2

increased by100%

No dependency changes