@vaadin-component-factory/vcf-anchor-nav - npm Package Compare versions

Comparing version 0.1.9 to 0.2.0

package.json

 {
   "name": "@vaadin-component-factory/vcf-anchor-nav",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "Component with tabs used as anchor navigation and content sections. Automates the linking of tabs and sections.",
@@ -5,0 +5,0 @@ "main": "theme/lumo/vcf-anchor-nav.js",

src/vcf-anchor-nav.js

@@ -107,3 +107,3 @@ /**
       <div part="container">
-        <div part="header"><slot name="header"></slot></div>
+        <div id="header" part="header"><slot name="header"></slot></div>
         <vaadin-tabs id="tabs" part="tabs"></vaadin-tabs>
@@ -120,3 +120,3 @@ <slot id="slot"></slot>
   static get version() {
-    return '0.1.9';
+    return '0.2.0';
   }
@@ -222,6 +222,6 @@
     };
-    this.sections.forEach(element => {
+    this.sections.forEach((element, i) => {
       const options = {
         root: this,
-        threshold: this._getThreshold(element.clientHeight)
+        threshold: this._getThreshold(element.clientHeight, i)
       };
@@ -237,2 +237,3 @@ const observer = new IntersectionObserver(callback, options);
       this._clearSelection();
+      this._thresholds;
       const firstIntersecting = this.sections.filter(i => i.isIntersecting)[0];
@@ -244,3 +245,3 @@ if (firstIntersecting) this._setNavItemSelected(firstIntersecting.id, true);
 
-  _getThreshold(sectionHeight) {
+  _getThreshold(sectionHeight, index) {
     // This factor value can be adjusted however
@@ -250,3 +251,4 @@ // Below 0.7 in Firefox the highlighting is inconsistent
     const factor = 0.75;
-    const height = this.clientHeight - this.$.tabs.clientHeight;
+    let height = this.clientHeight - this.$.tabs.clientHeight;
+    if (index === 0) height -= this.$.header.clientHeight;
     return sectionHeight > height ? (height / sectionHeight) * factor : 1;
@@ -301,6 +303,8 @@ }
     if (fullscreen) {
-      const windowHeight = window.innerHeight - this.$.tabs.clientHeight;
-      const paddingBottom = this.last.clientHeight < windowHeight ? windowHeight - this.last.clientHeight : 0;
       body.style.overflow = 'hidden';
-      this.style.setProperty('--_anchor-nav-inner-padding', `0 0 ${paddingBottom}px 0`);
+      setTimeout(() => {
+        const windowHeight = window.innerHeight - this.$.tabs.clientHeight;
+        const paddingBottom = this.last.clientHeight < windowHeight ? windowHeight - this.last.clientHeight : 0;
+        this.style.setProperty('--_anchor-nav-inner-padding', `0 0 ${paddingBottom}px 0`);
+      });
     } else {
@@ -307,0 +311,0 @@ body.style.removeProperty('overflow');

No alert changes

Improved metrics

Total package byte prevSize

172245

increased by0.09%

Lines of code

1825

increased by0.22%

No dependency changes