@servicensw/navigation - npm Package Compare versions

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

dist/js/sticky-nav.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function e(e,t,n,i){var a,o=0;return"boolean"!=typeof t&&(i=n,n=t,t=void 0),function(){var c=this,r=Number(new Date)-o,s=arguments;function l(){o=Number(new Date),n.apply(c,s)}i&&!a&&l(),a&&clearTimeout(a),void 0===i&&r>e?l():!0!==t&&(a=setTimeout(i?function(){a=void 0}:l,void 0===i?e-r:e))}}var t=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 n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),i=function(){function i(n){if(t(this,i),this.element=n,!this.element||!this.element.nodeType)throw new Error("The DOM element was not found when creating the Sticky navigation.");var a,o,c;this.content=document.getElementById("stickyNavContainer"),this.headings=this.content.getElementsByTagName("h2"),this.clickHandler=this.clickHandler.bind(this),this.scrollHandler=(a=100,o=this.scrollHandler.bind(this),void 0===c?e(a,o,!1):e(a,c,!1!==o)),this.init()}return n(i,[{key:"scrollHandler",value:function(){var e=this,t=window.pageYOffset,n=this.element.getElementsByTagName("a");Object.keys(this.headings).forEach(function(i){var a=e.headings[i],o=a.offsetTop+a.offsetParent.offsetTop-e.element.clientHeight-30;t>o&&(Object.keys(n).forEach(function(e){n[e].classList.remove("is-active")}),n[i].classList.add("is-active"))})}},{key:"clickHandler",value:function(e){var t=this.element.getElementsByTagName("a");Object.keys(t).forEach(function(e){t[e].classList.remove("is-active")}),e.target.classList.add("is-active")}},{key:"init",value:function(){var e=this;document.body.classList.add("has-sticky-nav");var t=document.createElement("ul");Object.keys(this.headings).forEach(function(n){var i=e.headings[n],a=e.constructor.convertHeading(i.textContent);i.setAttribute("id",a),i.setAttribute("tabindex","-1");var o=document.createElement("li"),c=document.createElement("a");if(c.setAttribute("href","#"+a),c.textContent=i.textContent,c.addEventListener("click",e.clickHandler),o.appendChild(c),t.appendChild(o),window.SmoothScrolling)new window.SmoothScrolling(c)}),this.element.appendChild(t),window.addEventListener("scroll",this.scrollHandler)}}],[{key:"convertHeading",value:function(e){return e.replace(/[^a-zA-Z0-9]/g,"-").toLowerCase()}}]),i}();document.addEventListener("DOMContentLoaded",function(){new i(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 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"))})}();

package.json

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

src/sticky-nav.es6.js

@@ -17,4 +17,7 @@ /**
     // Bind this for handlers.
-    this.clickHandler = this.clickHandler.bind(this);
+    this.anchorClickHandler = this.anchorClickHandler.bind(this);
+    this.menuClickHandler = this.menuClickHandler.bind(this);
     this.scrollHandler = debounce(100, this.scrollHandler.bind(this));
+    this.resizeHandler = debounce(100, this.resizeHandler.bind(this));
+    this.isCollapsed = this.isCollapsed.bind(this);
     this.init();
@@ -32,2 +35,26 @@ }
 
+  anchorClickHandler(event) {
+    if (this.element.getAttribute('aria-expanded') === 'false') {
+      event.preventDefault();
+      return;
+    }
+    const anchors = this.element.getElementsByTagName('a');
+    Object.keys(anchors).forEach((key) => {
+      anchors[key].classList.remove('is-active');
+    });
+    event.target.classList.add('is-active');
+  }
+
+  menuClickHandler() {
+    if (this.element.classList.contains('sticky-nav--collapsed')) {
+      if (this.element.getAttribute('aria-expanded') === 'false') {
+        this.element.setAttribute('aria-expanded', 'true');
+        this.nav.setAttribute('aria-hidden', 'false');
+        return;
+      }
+      this.element.setAttribute('aria-expanded', 'false');
+      this.nav.setAttribute('aria-hidden', 'true');
+    }
+  }
+
   scrollHandler() {
@@ -48,10 +75,27 @@ const scroll = window.pageYOffset;
 
-  clickHandler(event) {
-    const anchors = this.element.getElementsByTagName('a');
-    Object.keys(anchors).forEach((key) => {
-      anchors[key].classList.remove('is-active');
-    });
-    event.target.classList.add('is-active');
+  resizeHandler() {
+    if (this.width > this.element.offsetWidth) {
+      this.isCollapsed(true);
+    }
+    else {
+      this.isCollapsed(false);
+    }
   }
 
+  isCollapsed(collapsed) {
+    if (collapsed) {
+      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');
+      this.nav.setAttribute('aria-hidden', 'true');
+      return;
+    }
+    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');
+  }
+
   init() {
@@ -62,4 +106,8 @@ // Add a global class to the body.
     // Create the nav element.
-    const nav = document.createElement('ul');
+    this.nav = document.createElement('ul');
+    this.nav.setAttribute('id', 'stickyNavMenu');
 
+    // Calculate width of menu.
+    this.width = 0;
+
     Object.keys(this.headings).forEach((key) => {
@@ -79,6 +127,9 @@ const heading = this.headings[key];
       menuLink.textContent = heading.textContent;
-      menuLink.addEventListener('click', this.clickHandler);
+      menuLink.addEventListener('click', this.anchorClickHandler);
+      if (key === '0') {
+        menuLink.classList.add('is-active');
+      }
       // Append the links.
       menuItem.appendChild(menuLink);
-      nav.appendChild(menuItem);
+      this.nav.appendChild(menuItem);
 
@@ -90,6 +141,20 @@ if (window.SmoothScrolling) {
 
-    this.element.appendChild(nav);
+    // Append nav items, and add click handler.
+    this.element.appendChild(this.nav);
+    this.element.addEventListener('click', this.menuClickHandler);
 
-    // Add event handler for scroll (with simple setTimeout debounce).
+    // Finish width calc.
+    Object.keys(this.nav.children).forEach((key) => {
+      this.width += this.nav.children[key].offsetWidth;
+    });
+    this.width += (this.nav.children.length - 1) * 40;
+
+    // Add mobile class if needed.
+    if (this.width > this.element.offsetWidth) {
+      this.isCollapsed(true);
+    }
+
+    // Add window event handlers for scroll/resize.
     window.addEventListener('scroll', this.scrollHandler);
+    window.addEventListener('resize', this.resizeHandler);
   }
@@ -96,0 +161,0 @@ }

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

25949

increased by34.17%

Number of package files

13

increased by8.33%

Lines of code

449

increased by39.01%

No dependency changes