@servicensw/navigation - npm Package Compare versions

Comparing version 2.0.0-dev.9 to 2.0.0-dev.10

dist/js/sticky-nav.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function e(e,t,i,n){var s,a=0;return"boolean"!=typeof t&&(n=i,i=t,t=void 0),function(){var r=this,l=Number(new Date)-a,o=arguments;function d(){a=Number(new Date),i.apply(r,o)}n&&!s&&d(),s&&clearTimeout(s),void 0===n&&l>e?d():!0!==t&&(s=setTimeout(n?function(){s=void 0}:d,void 0===n?e-l:e))}}function t(t,i,n){return void 0===n?e(t,i,!1):e(t,n,!1!==i)}var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),s=function(){function e(n){if(i(this,e),this.element=n,!this.element||!this.element.nodeType)throw new Error("The DOM element was not found when creating the Sticky navigation.");this.content=document.getElementById("stickyNavContainer"),this.headings=this.content.getElementsByTagName("h2"),this.anchorClickHandler=this.anchorClickHandler.bind(this),this.menuClickHandler=this.menuClickHandler.bind(this),this.scrollHandler=t(100,this.scrollHandler.bind(this)),this.resizeHandler=t(100,this.resizeHandler.bind(this)),this.isCollapsed=this.isCollapsed.bind(this),this.init()}return n(e,[{key:"anchorClickHandler",value:function(e){if("false"!==this.element.getAttribute("aria-expanded")){var t=this.element.getElementsByTagName("a");Object.keys(t).forEach(function(e){t[e].classList.remove("is-active")}),e.target.classList.add("is-active")}else e.preventDefault()}},{key:"menuClickHandler",value:function(){if(this.element.classList.contains("sticky-nav--collapsed")){if("false"===this.element.getAttribute("aria-expanded"))return this.element.setAttribute("aria-expanded","true"),void this.nav.setAttribute("aria-hidden","false");this.element.setAttribute("aria-expanded","false"),this.nav.setAttribute("aria-hidden","true")}}},{key:"scrollHandler",value:function(){var e=this,t=window.pageYOffset,i=this.element.getElementsByTagName("a");Object.keys(this.headings).forEach(function(n){var s=e.headings[n],a=s.offsetTop+s.offsetParent.offsetTop-e.element.clientHeight-30;t>a&&(Object.keys(i).forEach(function(e){i[e].classList.remove("is-active")}),i[n].classList.add("is-active"))})}},{key:"resizeHandler",value:function(){this.width>this.element.offsetWidth?this.isCollapsed(!0):this.isCollapsed(!1)}},{key:"isCollapsed",value:function(e){if(e)return this.element.classList.add("sticky-nav--collapsed"),this.element.setAttribute("aria-controls","stickyNavMenu"),this.element.setAttribute("aria-expanded","false"),this.element.setAttribute("tab-index","1"),void this.nav.setAttribute("aria-hidden","true");this.element.classList.remove("sticky-nav--collapsed"),this.element.removeAttribute("aria-controls"),this.element.removeAttribute("aria-expanded"),this.element.removeAttribute("tab-index"),this.nav.removeAttribute("aria-hidden")}},{key:"init",value:function(){var e=this;document.body.classList.add("has-sticky-nav"),this.nav=document.createElement("ul"),this.nav.setAttribute("id","stickyNavMenu"),this.width=0,Object.keys(this.headings).forEach(function(t){var i=e.headings[t],n=e.constructor.convertHeading(i.textContent);i.setAttribute("id",n),i.setAttribute("tabindex","-1");var s=document.createElement("li"),a=document.createElement("a");if(a.setAttribute("href","#"+n),a.textContent=i.textContent,a.addEventListener("click",e.anchorClickHandler),"0"===t&&a.classList.add("is-active"),s.appendChild(a),e.nav.appendChild(s),window.SmoothScrolling)new window.SmoothScrolling(a)}),this.element.appendChild(this.nav),this.element.addEventListener("click",this.menuClickHandler),Object.keys(this.nav.children).forEach(function(t){e.width+=e.nav.children[t].offsetWidth}),this.width+=40*(this.nav.children.length-1),this.width>this.element.offsetWidth&&this.isCollapsed(!0),window.addEventListener("scroll",this.scrollHandler),window.addEventListener("resize",this.resizeHandler)}}],[{key:"convertHeading",value:function(e){return e.replace(/[^a-zA-Z0-9]/g,"-").toLowerCase()}}]),e}();document.addEventListener("DOMContentLoaded",function(){new s(document.getElementById("stickyNav"))})}();
+!function(){"use strict";function e(e,t,i,n){var s,a=0;return"boolean"!=typeof t&&(n=i,i=t,t=void 0),function(){var r=this,l=Number(new Date)-a,o=arguments;function c(){a=Number(new Date),i.apply(r,o)}n&&!s&&c(),s&&clearTimeout(s),void 0===n&&l>e?c():!0!==t&&(s=setTimeout(n?function(){s=void 0}:c,void 0===n?e-l:e))}}function t(t,i,n){return void 0===n?e(t,i,!1):e(t,n,!1!==i)}var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),s=function(){function e(n){if(i(this,e),this.element=n,!this.element||!this.element.nodeType)throw new Error("The DOM element was not found when creating the Sticky navigation.");this.content=document.getElementById("stickyNavContainer"),this.headings=this.content.getElementsByTagName("h2"),this.anchorClickHandler=this.anchorClickHandler.bind(this),this.menuClickHandler=this.menuClickHandler.bind(this),this.scrollHandler=t(100,this.scrollHandler.bind(this)),this.resizeHandler=t(100,this.resizeHandler.bind(this)),this.switchScrollActiveTransition=this.switchScrollActiveTransition.bind(this),this.isCollapsed=this.isCollapsed.bind(this),this.init(),this.allowScrollActiveTransition=!0}return n(e,[{key:"anchorClickHandler",value:function(e){if("false"===this.element.getAttribute("aria-expanded"))return e.stopImmediatePropagation(),e.preventDefault(),void this.nav.click();var t=this.element.getElementsByTagName("a");Object.keys(t).forEach(function(e){t[e].classList.remove("is-active")}),e.target.classList.add("is-active"),this.allowScrollActiveTransition=!1,setTimeout(this.switchScrollActiveTransition,4e3)}},{key:"switchScrollActiveTransition",value:function(){this.allowScrollActiveTransition=!0}},{key:"menuClickHandler",value:function(){if(this.element.classList.contains("sticky-nav--collapsed")){if("false"===this.element.getAttribute("aria-expanded"))return this.element.setAttribute("aria-expanded","true"),void this.nav.setAttribute("aria-hidden","false");this.element.setAttribute("aria-expanded","false"),this.nav.setAttribute("aria-hidden","true")}}},{key:"scrollHandler",value:function(){var e=this;if(this.allowScrollActiveTransition){var t=window.pageYOffset,i=this.element.getElementsByTagName("a");Object.keys(this.headings).forEach(function(n){var s=e.headings[n],a=s.offsetTop+s.offsetParent.offsetTop-e.element.clientHeight-30;t>a&&(Object.keys(i).forEach(function(e){i[e].classList.remove("is-active")}),i[n].classList.add("is-active"))})}}},{key:"resizeHandler",value:function(){this.width>this.element.offsetWidth?this.isCollapsed(!0):this.isCollapsed(!1)}},{key:"isCollapsed",value:function(e){if(e)return this.element.classList.add("sticky-nav--collapsed"),this.element.setAttribute("aria-controls","stickyNavMenu"),this.element.setAttribute("aria-expanded","false"),this.element.setAttribute("tab-index","1"),void this.nav.setAttribute("aria-hidden","true");this.element.classList.remove("sticky-nav--collapsed"),this.element.removeAttribute("aria-controls"),this.element.removeAttribute("aria-expanded"),this.element.removeAttribute("tab-index"),this.nav.removeAttribute("aria-hidden")}},{key:"init",value:function(){var e=this;document.body.classList.add("has-sticky-nav"),this.nav=document.createElement("ul"),this.nav.setAttribute("id","stickyNavMenu"),this.width=0,Object.keys(this.headings).forEach(function(t){var i=e.headings[t],n=e.constructor.convertHeading(i.textContent);i.setAttribute("id",n),i.setAttribute("tabindex","-1");var s=document.createElement("li"),a=document.createElement("a");if(a.setAttribute("href","#"+n),a.textContent=i.textContent,a.addEventListener("click",e.anchorClickHandler),"0"===t&&a.classList.add("is-active"),s.appendChild(a),e.nav.appendChild(s),window.SmoothScrolling)new window.SmoothScrolling(a)}),this.element.appendChild(this.nav),this.element.addEventListener("click",this.menuClickHandler),Object.keys(this.nav.children).forEach(function(t){e.width+=e.nav.children[t].offsetWidth}),this.width+=40*(this.nav.children.length-1),this.width>this.element.offsetWidth&&this.isCollapsed(!0),window.addEventListener("scroll",this.scrollHandler),window.addEventListener("resize",this.resizeHandler)}}],[{key:"convertHeading",value:function(e){return e.replace(/[^a-zA-Z0-9]/g,"-").toLowerCase()}}]),e}();document.addEventListener("DOMContentLoaded",function(){new s(document.getElementById("stickyNav"))})}();

package.json

 {
   "name": "@servicensw/navigation",
-  "version": "2.0.0-dev.9",
+  "version": "2.0.0-dev.10",
   "description": "Navigation",
@@ -22,4 +22,4 @@ "repository": {
   "devDependencies": {
-    "@servicensw/base": "^2.0.0-dev.14",
-    "@servicensw/builder": "^2.0.0-dev.8",
+    "@servicensw/base": "^2.0.0-dev.15",
+    "@servicensw/builder": "^2.0.0-dev.9",
     "postcss-cli": "^5.0.0",
@@ -26,0 +26,0 @@ "rollup": "^0.58.2"

src/sticky-nav.es6.js

@@ -21,4 +21,7 @@ /**
     this.resizeHandler = debounce(100, this.resizeHandler.bind(this));
+    this.switchScrollActiveTransition = this.switchScrollActiveTransition.bind(this);
     this.isCollapsed = this.isCollapsed.bind(this);
     this.init();
+
+    this.allowScrollActiveTransition = true;
   }
@@ -36,4 +39,10 @@
   anchorClickHandler(event) {
+    // If the menu is expanded, we don't want a click on the active item to
+    // trigger a smooth scroll event.
     if (this.element.getAttribute('aria-expanded') === 'false') {
+      // Stop propagation so no other events are triggered.
+      event.stopImmediatePropagation();
       event.preventDefault();
+      // Now trigger a click on the menu to show it.
+      this.nav.click();
       return;
@@ -45,5 +54,13 @@ }
     });
+    // Set a clicked link to active.
     event.target.classList.add('is-active');
+    // This timeout is a visual niceitey
+    this.allowScrollActiveTransition = false;
+    setTimeout(this.switchScrollActiveTransition, 4000);
   }
 
+  switchScrollActiveTransition() {
+    this.allowScrollActiveTransition = true;
+  }
+
   menuClickHandler() {
@@ -62,2 +79,5 @@ if (this.element.classList.contains('sticky-nav--collapsed')) {
   scrollHandler() {
+    if (!this.allowScrollActiveTransition) {
+      return;
+    }
     const scroll = window.pageYOffset;
@@ -64,0 +84,0 @@ const anchors = this.element.getElementsByTagName('a');

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

Lines of code

478

increased by6.46%

Worsened metrics

Total package byte prevSize

25668

decreased by-1.08%

No dependency changes