@ecl/vanilla-component-inpage-navigation - npm Package Compare versions

Comparing version 4.6.3 to 4.6.4

inpage-navigation.js

@@ -22,2 +22,4 @@ import Stickyfill from 'stickyfilljs';
  * @param {Boolean} options.attachKeyListener Whether or not to bind click events
+ * @param {Boolean} options.attachResizeListener Whether or not to bind resize events
+ * @param {Boolean} options.attachScrollListener Whether or not to bind scroll events
  */
@@ -67,2 +69,3 @@ export class InpageNavigation {
       attachResizeListener = true,
+      attachScrollListener = true,
       attachKeyListener = true,
@@ -85,2 +88,3 @@ contentClass = 'inpage-navigation__heading--active',
     this.attachResizeListener = attachResizeListener;
+    this.attachScrollListener = attachScrollListener;
     this.stickySelector = stickySelector;
@@ -358,2 +362,5 @@ this.containerSelector = containerSelector;
     }
+    if (this.attachScrollListener) {
+      window.addEventListener('scroll', this.handleResize);
+    }
     if (this.attachClickListener && this.navLinks) {
@@ -437,16 +444,17 @@ this.navLinks.forEach((link) =>
     // Mobile
-    if (viewportWidth < 996) {
-      topPosition = this.toggleElement.getBoundingClientRect().bottom + 16;
-    } else if (listTitle) {
-      // If we have a title in desktop
-      topPosition = listTitle.getBoundingClientRect().bottom + 24;
-    } else {
-      // Get the list position if there is no title
-      topPosition = this.element.getBoundingClientRect().top;
-    }
-
-    const availableSpace = viewportHeight - topPosition;
-    if (availableSpace > 0) {
-      this.currentList.style.maxHeight = `${availableSpace}px`;
-    }
+    setTimeout(() => {
+      if (viewportWidth < 996) {
+        topPosition = this.toggleElement.getBoundingClientRect().bottom + 16;
+      } else if (listTitle) {
+        // If we have a title in desktop
+        topPosition = listTitle.getBoundingClientRect().bottom;
+      } else {
+        // Get the list position if there is no title
+        topPosition = this.element.getBoundingClientRect().top;
+      }
+      const availableSpace = viewportHeight - topPosition;
+      if (availableSpace > 0) {
+        this.currentList.style.maxHeight = `${availableSpace}px`;
+      }
+    }, 100);
   }
@@ -453,0 +461,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "license": "EUPL-1.2",
-  "version": "4.6.3",
+  "version": "4.6.4",
   "description": "ECL In-page Navigation",
@@ -13,4 +13,4 @@ "main": "inpage-navigation.js",
   "dependencies": {
-    "@ecl/dom-utils": "4.6.3",
-    "@ecl/vanilla-layout-grid": "4.6.3",
+    "@ecl/dom-utils": "4.6.4",
+    "@ecl/vanilla-layout-grid": "4.6.4",
     "focus-trap": "7.5.4",
@@ -36,3 +36,3 @@ "gumshoejs": "5.1.2",
   ],
-  "gitHead": "a60fe67dc99ed8947d9d374ee0962a23fe7d76ef"
+  "gitHead": "2d5b9b9d0a4296354a369df50d7bac8c178a2504"
 }

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

43038

increased by0.99%

Lines of code

545

increased by1.68%

Dependency changes

• + Added@ecl/dom-utils@4.6.4(transitive)

• + Added@ecl/vanilla-layout-grid@4.6.4(transitive)

• - Removed@ecl/dom-utils@4.6.3(transitive)

• - Removed@ecl/vanilla-layout-grid@4.6.3(transitive)

• Updated@ecl/dom-utils@4.6.4

• Updated@ecl/vanilla-layout-grid@4.6.4