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

Comparing version 23.3.0 to 23.4.0

package.json

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

src/vcf-anchor-nav-section.js

@@ -140,3 +140,3 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
   get navTab() {
-    return this.nav && this.nav.$.tabs.querySelector(`#${this.tabId || this.defaultTabId}`);
+    return this.nav && this.nav.$ && this.nav.$.tabs && this.nav.$.tabs.querySelector(`#${this.tabId || this.defaultTabId}`);
   }
@@ -179,3 +179,3 @@
     const tab = this.tab;
-    if (this.nav && tab) {
+    if (this.nav && this.nav.$ && tab) {
       tab.removeAttribute('slot');
@@ -182,0 +182,0 @@ this.tabId = tab.id;

src/vcf-anchor-nav.js

@@ -151,3 +151,3 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element';
   static get version() {
-    return '23.3.0';
+    return '23.4.0';
   }
@@ -201,2 +201,13 @@
         value: true
+      },
+      /**
+       * Set to true to disable history of internal navigation so that
+       * pressing back and forward in the browser only move between
+       * views / pages and not navigation sections
+       */
+      noHistory: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        notify: true
       }
@@ -249,4 +260,6 @@ };
     this.$.headerSlot.addEventListener('slotchange', () => this._onHeaderSlotChange());
+    this._toggleNoHistory(this.noHistory);
+
     // Add popstate listener
-    window.addEventListener('popstate', () => {
+    window.addEventListener('popstate', event => {
       this._initTabHighlight();
@@ -261,4 +274,71 @@ this._scrollToHash();
     };
+    this.addEventListener('no-history-changed', event => {
+      this._toggleNoHistory(this.noHistory);
+    });
   }
 
+  _toggleNoHistory(noHistory) {
+    if (noHistory) {
+      this._enableNoHistory();
+    } else {
+      this._disableNoHistory();
+    }
+  }
+
+  _disableNoHistory() {
+    if (!history.elementsWithNoHistory) {
+      return;
+    }
+    const indexOfCurrent = history.elementsWithNoHistory.indexOf(this);
+    if (indexOfCurrent < 0) {
+      return;
+    }
+    history.elementsWithNoHistory.splice(indexOfCurrent, 1);
+    if (history.elementsWithNoHistory.length === 0) {
+      this._clearOldPushState();
+    }
+  }
+
+  _enableNoHistory() {
+    if (!history.elementsWithNoHistory || history.elementsWithNoHistory.length === 0) {
+      history.elementsWithNoHistory = [this];
+      history.oldPushState = history.pushState;
+      history.currentPathname = window.location.pathname;
+      history.pushState = function pushState(state, unused, url) {
+        let incomingPathname = null;
+        if (typeof url === 'string' || url instanceof String) {
+          incomingPathname = url;
+        } else if (typeof url === 'object' && !Array.isArray(url) && url !== null) {
+          incomingPathname = url.pathname;
+        }
+        if (incomingPathname != history.currentPathname) {
+          history.currentPathname = incomingPathname;
+          history.oldPushState(state, unused, url);
+        } else {
+          history.replaceState('', '');
+        }
+      };
+    } else if (!history.elementsWithNoHistory.includes(this)) {
+      history.elementsWithNoHistory.push(this);
+    }
+  }
+
+  _clearOldPushState() {
+    if (history.oldPushState) {
+      history.pushState = history.oldPushState;
+      history.oldPushState = null;
+    }
+  }
+
+  disconnectedCallback() {
+    this._clearOldPushState();
+    this._disableNoHistory();
+    super.disconnectedCallback();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._toggleNoHistory(this.noHistory);
+  }
+
   _onNavFocus(e) {
@@ -265,0 +345,0 @@ if (AnchorNavElement.isSame(e.target)) {

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

223054

increased by1.12%

Lines of code

2451

increased by3.07%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes