@servicensw/navigation - npm Package Compare versions

Comparing version 2.0.0-dev.42 to 2.0.0-dev.43

dist/js/smooth-scrolling.js

@@ -1,1 +0,1 @@
-"use strict";var classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),SmoothScrolling=function(){function t(e){classCallCheck(this,t),this.element=e,this.element&&this.element.nodeType&&(this.clickHandler=this.clickHandler.bind(this),this.scrollAnimation=this.scrollAnimation.bind(this),this.init())}return createClass(t,[{key:"scrollAnimation",value:function(t){this.startTime=this.startTime||t;var e=t-this.startTime,i=this.constructor.easeInOutCubic(e,this.start,this.offset,this.duration);window.scroll(0,i),e<this.duration?window.requestAnimationFrame(this.scrollAnimation):this.startTime=null}},{key:"scrollTo",value:function(){this.duration=400,this.start=window.pageYOffset,this.end=this.constructor.elementOffset(this.target),this.offset=this.end-this.start,window.requestAnimationFrame(this.scrollAnimation)}},{key:"clickHandler",value:function(t){t.preventDefault(),window.history&&window.history.replaceState(void 0,void 0,"#"+this.target.getAttribute("id")),this.scrollTo(),this.target.focus()}},{key:"init",value:function(){this.element.hash.length>1&&(this.target=document.querySelector(this.element.hash),this.target&&(this.target.setAttribute("tabindex","-1"),this.element.addEventListener("click",this.clickHandler)))}}],[{key:"easeInOutCubic",value:function(t,e,i,n){return(t/=n/2)<1?i/2*t*t+e:-i/2*((t-=1)*(t-2)-1)+e}},{key:"elementOffset",value:function(t){var e=t.getBoundingClientRect(),i=t.ownerDocument.defaultView,n=e.top+i.pageYOffset;return document.body.classList.contains("has-sticky-nav")&&(n-=document.querySelector(".sticky-nav").clientHeight),n-=20,n}}]),t}();module.exports=SmoothScrolling;
+"use strict";var classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),SmoothScrolling=function(){function t(e){classCallCheck(this,t),this.element=e,this.element&&this.element.nodeType&&(this.clickHandler=this.clickHandler.bind(this),this.scrollAnimation=this.scrollAnimation.bind(this),this.init())}return createClass(t,[{key:"scrollAnimation",value:function(t){this.startTime=this.startTime||t;var e=t-this.startTime,i=this.constructor.easeInOutCubic(e,this.start,this.offset,this.duration);window.scroll(0,i),e<this.duration?window.requestAnimationFrame(this.scrollAnimation):this.startTime=null}},{key:"scrollTo",value:function(){this.duration=400,this.start=window.pageYOffset,this.end=this.constructor.elementOffset(this.target),this.offset=this.end-this.start,window.requestAnimationFrame(this.scrollAnimation)}},{key:"clickHandler",value:function(t){t.preventDefault(),window.history&&window.history.replaceState(void 0,void 0,"#"+this.target.getAttribute("id")),this.scrollTo(),this.target.focus()}},{key:"init",value:function(){this.element.hash.length>1&&(this.target=document.querySelector(this.element.hash),this.target&&(this.target.setAttribute("tabindex","-1"),this.element.addEventListener("click",this.clickHandler)))}}],[{key:"easeInOutCubic",value:function(t,e,i,n){return(t/=n/2)<1?i/2*t*t+e:-i/2*((t-=1)*(t-2)-1)+e}},{key:"elementOffset",value:function(t){var e=t.getBoundingClientRect(),i=t.ownerDocument.defaultView,n=e.top+i.pageYOffset,s=document.querySelector(".sticky-nav");return s&&(n-=72,s.classList.contains("sticky-nav--vertical")&&!s.classList.contains("sticky-nav--collapsed")&&(n+=72)),n-=20,n}}]),t}();module.exports=SmoothScrolling;

dist/js/sticky-nav.js

@@ -1,1 +0,1 @@
-"use strict";function throttle(t,e,i,n){var o,s=0;return"boolean"!=typeof e&&(n=i,i=e,e=void 0),function(){var r=this,a=Number(new Date)-s,l=arguments;function h(){s=Number(new Date),i.apply(r,l)}n&&!o&&h(),o&&clearTimeout(o),void 0===n&&a>t?h():!0!==e&&(o=setTimeout(n?function(){o=void 0}:h,void 0===n?t-a:t))}}function createCommonjsModule(t,e){return t(e={exports:{}},e.exports),e.exports}var stickyfill=createCommonjsModule(function(t){!function(e,i){var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();var o=!1;if(e.getComputedStyle){var s=i.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(t){try{s.style.position=t+"sticky"}catch(t){}return""!=s.style.position})&&(o=!0)}else o=!0;var r="undefined"!=typeof ShadowRoot,a={top:null,left:null},l=[];function h(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])}function c(t){return parseFloat(t)||0}function d(t){for(var e=0;t;)e+=t.offsetTop,t=t.offsetParent;return e}var f=function(){function t(e){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),!(e instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(l.some(function(t){return t._node===e}))throw new Error("Stickyfill is already applied to this node");this._node=e,this._stickyMode=null,this._active=!1,l.push(this),this.refresh()}return n(t,[{key:"refresh",value:function(){if(!o&&!this._removed){this._active&&this._deactivate();var t=this._node,n=getComputedStyle(t),s={top:n.top,display:n.display,marginTop:n.marginTop,marginBottom:n.marginBottom,marginLeft:n.marginLeft,marginRight:n.marginRight,cssFloat:n.cssFloat};if(!isNaN(parseFloat(s.top))&&"table-cell"!=s.display&&"none"!=s.display){this._active=!0;var a=t.parentNode,l=r&&a instanceof ShadowRoot?a.host:a,f=t.getBoundingClientRect(),u=l.getBoundingClientRect(),m=getComputedStyle(l);this._parent={node:l,styles:{position:l.style.position},offsetHeight:l.offsetHeight},this._offsetToWindow={left:f.left,right:i.documentElement.clientWidth-f.right},this._offsetToParent={top:f.top-u.top-c(m.borderTopWidth),left:f.left-u.left-c(m.borderLeftWidth),right:-f.right+u.right-c(m.borderRightWidth)},this._styles={position:t.style.position,top:t.style.top,bottom:t.style.bottom,left:t.style.left,right:t.style.right,width:t.style.width,marginTop:t.style.marginTop,marginLeft:t.style.marginLeft,marginRight:t.style.marginRight};var v=c(s.top);this._limits={start:f.top+e.pageYOffset-v,end:u.top+e.pageYOffset+l.offsetHeight-c(m.borderBottomWidth)-t.offsetHeight-v-c(s.marginBottom)};var p=m.position;"absolute"!=p&&"relative"!=p&&(l.style.position="relative"),this._recalcPosition();var g=this._clone={};g.node=i.createElement("div"),h(g.node.style,{width:f.right-f.left+"px",height:f.bottom-f.top+"px",marginTop:s.marginTop,marginBottom:s.marginBottom,marginLeft:s.marginLeft,marginRight:s.marginRight,cssFloat:s.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),a.insertBefore(g.node,t),g.docOffsetTop=d(g.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var t=a.top<=this._limits.start?"start":a.top>=this._limits.end?"end":"middle";if(this._stickyMode!=t){switch(t){case"start":h(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":h(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":h(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=t}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(d(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var t=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,h(this._node.style,this._styles),delete this._styles,l.some(function(e){return e!==t&&e._parent&&e._parent.node===t._parent.node})||h(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var t=this;this._deactivate(),l.some(function(e,i){if(e._node===t._node)return l.splice(i,1),!0}),this._removed=!0}}]),t}(),u={stickies:l,Sticky:f,addOne:function(t){if(!(t instanceof HTMLElement)){if(!t.length||!t[0])return;t=t[0]}for(var e=0;e<l.length;e++)if(l[e]._node===t)return l[e];return new f(t)},add:function(t){if(t instanceof HTMLElement&&(t=[t]),t.length){for(var e=[],i=function(i){var n=t[i];return n instanceof HTMLElement?l.some(function(t){if(t._node===n)return e.push(t),!0})?"continue":void e.push(new f(n)):(e.push(void 0),"continue")},n=0;n<t.length;n++)i(n);return e}},refreshAll:function(){l.forEach(function(t){return t.refresh()})},removeOne:function(t){if(!(t instanceof HTMLElement)){if(!t.length||!t[0])return;t=t[0]}l.some(function(e){if(e._node===t)return e.remove(),!0})},remove:function(t){if(t instanceof HTMLElement&&(t=[t]),t.length)for(var e=function(e){var i=t[e];l.some(function(t){if(t._node===i)return t.remove(),!0})},i=0;i<t.length;i++)e(i)},removeAll:function(){for(;l.length;)l[0].remove()}};o||function(){function t(){e.pageXOffset!=a.left?(a.top=e.pageYOffset,a.left=e.pageXOffset,u.refreshAll()):e.pageYOffset!=a.top&&(a.top=e.pageYOffset,a.left=e.pageXOffset,l.forEach(function(t){return t._recalcPosition()}))}t(),e.addEventListener("scroll",t),e.addEventListener("resize",u.refreshAll),e.addEventListener("orientationchange",u.refreshAll);var n=void 0;function o(){n=setInterval(function(){l.forEach(function(t){return t._fastCheck()})},500)}var s=void 0,r=void 0;"hidden"in i?(s="hidden",r="visibilitychange"):"webkitHidden"in i&&(s="webkitHidden",r="webkitvisibilitychange"),r?(i[s]||o(),i.addEventListener(r,function(){i[s]?clearInterval(n):o()})):o()}(),t.exports?t.exports=u:e.Stickyfill=u}(window,document)}),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),SmoothScrolling=function(){function t(e){classCallCheck(this,t),this.element=e,this.element&&this.element.nodeType&&(this.clickHandler=this.clickHandler.bind(this),this.scrollAnimation=this.scrollAnimation.bind(this),this.init())}return createClass(t,[{key:"scrollAnimation",value:function(t){this.startTime=this.startTime||t;var e=t-this.startTime,i=this.constructor.easeInOutCubic(e,this.start,this.offset,this.duration);window.scroll(0,i),e<this.duration?window.requestAnimationFrame(this.scrollAnimation):this.startTime=null}},{key:"scrollTo",value:function(){this.duration=400,this.start=window.pageYOffset,this.end=this.constructor.elementOffset(this.target),this.offset=this.end-this.start,window.requestAnimationFrame(this.scrollAnimation)}},{key:"clickHandler",value:function(t){t.preventDefault(),window.history&&window.history.replaceState(void 0,void 0,"#"+this.target.getAttribute("id")),this.scrollTo(),this.target.focus()}},{key:"init",value:function(){this.element.hash.length>1&&(this.target=document.querySelector(this.element.hash),this.target&&(this.target.setAttribute("tabindex","-1"),this.element.addEventListener("click",this.clickHandler)))}}],[{key:"easeInOutCubic",value:function(t,e,i,n){return(t/=n/2)<1?i/2*t*t+e:-i/2*((t-=1)*(t-2)-1)+e}},{key:"elementOffset",value:function(t){var e=t.getBoundingClientRect(),i=t.ownerDocument.defaultView,n=e.top+i.pageYOffset;return document.body.classList.contains("has-sticky-nav")&&(n-=document.querySelector(".sticky-nav").clientHeight),n-=20,n}}]),t}(),StickyNav=function(){function t(e){if(classCallCheck(this,t),this.element=e,!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.querySelectorAll("h2"),this.anchorClickHandler=this.anchorClickHandler.bind(this),this.menuClickHandler=this.menuClickHandler.bind(this),this.scrollHandler=throttle(400,this.scrollHandler.bind(this)),this.resizeHandler=throttle(400,this.resizeHandler.bind(this)),this.switchScrollActiveTransition=this.switchScrollActiveTransition.bind(this),this.setActiveAnchor=this.setActiveAnchor.bind(this),this.openMenu=this.openMenu.bind(this),this.closeMenu=this.closeMenu.bind(this),this.isCollapsed=this.isCollapsed.bind(this),this.init(),this.allowScrollActiveTransition=!0}return createClass(t,[{key:"setActiveAnchor",value:function(t){this.anchors.forEach(function(e,i){t===i?e.classList.add("is-active"):e.classList.remove("is-active")})}},{key:"anchorClickHandler",value:function(t){if("false"===this.element.getAttribute("aria-expanded"))return t.stopImmediatePropagation(),t.stopPropagation(),t.preventDefault(),void this.openMenu();this.allowScrollActiveTransition=!1,setTimeout(this.switchScrollActiveTransition,4e3);var e=0;this.anchors.forEach(function(i,n){i===t.target&&(e=n)}),this.setActiveAnchor(e)}},{key:"switchScrollActiveTransition",value:function(){this.allowScrollActiveTransition=!0}},{key:"openMenu",value:function(){this.element.setAttribute("aria-expanded","true"),this.nav.setAttribute("aria-hidden","false")}},{key:"closeMenu",value:function(){this.element.setAttribute("aria-expanded","false"),this.nav.setAttribute("aria-hidden","true")}},{key:"menuClickHandler",value:function(){if(this.element.classList.contains("sticky-nav--collapsed")){if("false"===this.element.getAttribute("aria-expanded"))return void this.openMenu();this.closeMenu()}}},{key:"scrollHandler",value:function(){var t=this;if(this.allowScrollActiveTransition){var e=window.pageYOffset;window.innerHeight/4>102?e+=window.innerHeight/4:e+=102,this.headings.forEach(function(i,n){var o=t.constructor.elementOffset(i);0===n&&e<o?t.setActiveAnchor(0):e>o&&t.setActiveAnchor(n)})}}},{key:"resizeHandler",value:function(){this.width>this.element.offsetWidth?this.isCollapsed(!0):this.isCollapsed(!1)}},{key:"isCollapsed",value:function(t){if(t)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 t=this;document.body.classList.add("has-sticky-nav"),this.nav=document.createElement("ul"),this.nav.setAttribute("id","stickyNavMenu"),this.width=0,this.headings.forEach(function(e,i){var n=t.constructor.convertHeading(e.textContent);e.setAttribute("id",n),e.setAttribute("tabindex","-1");var o=document.createElement("li"),s=document.createElement("a");s.setAttribute("href","#"+n),s.textContent=e.dataset.shortTitle?e.dataset.shortTitle:e.textContent,s.addEventListener("click",t.anchorClickHandler),0===i&&s.classList.add("is-active"),o.appendChild(s),t.nav.appendChild(o);new SmoothScrolling(s)}),this.element.appendChild(this.nav),this.element.addEventListener("click",this.menuClickHandler),this.anchors=this.element.querySelectorAll("a"),this.nav.querySelectorAll("li").forEach(function(e){t.width+=e.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),stickyfill.add(document.querySelectorAll(".sticky-nav"))}}],[{key:"convertHeading",value:function(t){return t.replace(/[^a-zA-Z0-9]/g,"-").toLowerCase()}},{key:"elementOffset",value:function(t){var e=t.getBoundingClientRect(),i=t.ownerDocument.defaultView,n=e.top+i.pageYOffset;return n}}]),t}();module.exports=StickyNav;
+"use strict";function throttle(t,e,i,n){var s,o=0;return"boolean"!=typeof e&&(n=i,i=e,e=void 0),function(){var r=this,a=Number(new Date)-o,l=arguments;function h(){o=Number(new Date),i.apply(r,l)}n&&!s&&h(),s&&clearTimeout(s),void 0===n&&a>t?h():!0!==e&&(s=setTimeout(n?function(){s=void 0}:h,void 0===n?t-a:t))}}function createCommonjsModule(t,e){return t(e={exports:{}},e.exports),e.exports}var stickyfill=createCommonjsModule(function(t){!function(e,i){var n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}();var s=!1;if(e.getComputedStyle){var o=i.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(t){try{o.style.position=t+"sticky"}catch(t){}return""!=o.style.position})&&(s=!0)}else s=!0;var r="undefined"!=typeof ShadowRoot,a={top:null,left:null},l=[];function h(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i])}function c(t){return parseFloat(t)||0}function d(t){for(var e=0;t;)e+=t.offsetTop,t=t.offsetParent;return e}var f=function(){function t(e){if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),!(e instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(l.some(function(t){return t._node===e}))throw new Error("Stickyfill is already applied to this node");this._node=e,this._stickyMode=null,this._active=!1,l.push(this),this.refresh()}return n(t,[{key:"refresh",value:function(){if(!s&&!this._removed){this._active&&this._deactivate();var t=this._node,n=getComputedStyle(t),o={top:n.top,display:n.display,marginTop:n.marginTop,marginBottom:n.marginBottom,marginLeft:n.marginLeft,marginRight:n.marginRight,cssFloat:n.cssFloat};if(!isNaN(parseFloat(o.top))&&"table-cell"!=o.display&&"none"!=o.display){this._active=!0;var a=t.parentNode,l=r&&a instanceof ShadowRoot?a.host:a,f=t.getBoundingClientRect(),u=l.getBoundingClientRect(),m=getComputedStyle(l);this._parent={node:l,styles:{position:l.style.position},offsetHeight:l.offsetHeight},this._offsetToWindow={left:f.left,right:i.documentElement.clientWidth-f.right},this._offsetToParent={top:f.top-u.top-c(m.borderTopWidth),left:f.left-u.left-c(m.borderLeftWidth),right:-f.right+u.right-c(m.borderRightWidth)},this._styles={position:t.style.position,top:t.style.top,bottom:t.style.bottom,left:t.style.left,right:t.style.right,width:t.style.width,marginTop:t.style.marginTop,marginLeft:t.style.marginLeft,marginRight:t.style.marginRight};var v=c(o.top);this._limits={start:f.top+e.pageYOffset-v,end:u.top+e.pageYOffset+l.offsetHeight-c(m.borderBottomWidth)-t.offsetHeight-v-c(o.marginBottom)};var p=m.position;"absolute"!=p&&"relative"!=p&&(l.style.position="relative"),this._recalcPosition();var g=this._clone={};g.node=i.createElement("div"),h(g.node.style,{width:f.right-f.left+"px",height:f.bottom-f.top+"px",marginTop:o.marginTop,marginBottom:o.marginBottom,marginLeft:o.marginLeft,marginRight:o.marginRight,cssFloat:o.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),a.insertBefore(g.node,t),g.docOffsetTop=d(g.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var t=a.top<=this._limits.start?"start":a.top>=this._limits.end?"end":"middle";if(this._stickyMode!=t){switch(t){case"start":h(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":h(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":h(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=t}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(d(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var t=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,h(this._node.style,this._styles),delete this._styles,l.some(function(e){return e!==t&&e._parent&&e._parent.node===t._parent.node})||h(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var t=this;this._deactivate(),l.some(function(e,i){if(e._node===t._node)return l.splice(i,1),!0}),this._removed=!0}}]),t}(),u={stickies:l,Sticky:f,addOne:function(t){if(!(t instanceof HTMLElement)){if(!t.length||!t[0])return;t=t[0]}for(var e=0;e<l.length;e++)if(l[e]._node===t)return l[e];return new f(t)},add:function(t){if(t instanceof HTMLElement&&(t=[t]),t.length){for(var e=[],i=function(i){var n=t[i];return n instanceof HTMLElement?l.some(function(t){if(t._node===n)return e.push(t),!0})?"continue":void e.push(new f(n)):(e.push(void 0),"continue")},n=0;n<t.length;n++)i(n);return e}},refreshAll:function(){l.forEach(function(t){return t.refresh()})},removeOne:function(t){if(!(t instanceof HTMLElement)){if(!t.length||!t[0])return;t=t[0]}l.some(function(e){if(e._node===t)return e.remove(),!0})},remove:function(t){if(t instanceof HTMLElement&&(t=[t]),t.length)for(var e=function(e){var i=t[e];l.some(function(t){if(t._node===i)return t.remove(),!0})},i=0;i<t.length;i++)e(i)},removeAll:function(){for(;l.length;)l[0].remove()}};s||function(){function t(){e.pageXOffset!=a.left?(a.top=e.pageYOffset,a.left=e.pageXOffset,u.refreshAll()):e.pageYOffset!=a.top&&(a.top=e.pageYOffset,a.left=e.pageXOffset,l.forEach(function(t){return t._recalcPosition()}))}t(),e.addEventListener("scroll",t),e.addEventListener("resize",u.refreshAll),e.addEventListener("orientationchange",u.refreshAll);var n=void 0;function s(){n=setInterval(function(){l.forEach(function(t){return t._fastCheck()})},500)}var o=void 0,r=void 0;"hidden"in i?(o="hidden",r="visibilitychange"):"webkitHidden"in i&&(o="webkitHidden",r="webkitvisibilitychange"),r?(i[o]||s(),i.addEventListener(r,function(){i[o]?clearInterval(n):s()})):s()}(),t.exports?t.exports=u:e.Stickyfill=u}(window,document)}),classCallCheck=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},createClass=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),SmoothScrolling=function(){function t(e){classCallCheck(this,t),this.element=e,this.element&&this.element.nodeType&&(this.clickHandler=this.clickHandler.bind(this),this.scrollAnimation=this.scrollAnimation.bind(this),this.init())}return createClass(t,[{key:"scrollAnimation",value:function(t){this.startTime=this.startTime||t;var e=t-this.startTime,i=this.constructor.easeInOutCubic(e,this.start,this.offset,this.duration);window.scroll(0,i),e<this.duration?window.requestAnimationFrame(this.scrollAnimation):this.startTime=null}},{key:"scrollTo",value:function(){this.duration=400,this.start=window.pageYOffset,this.end=this.constructor.elementOffset(this.target),this.offset=this.end-this.start,window.requestAnimationFrame(this.scrollAnimation)}},{key:"clickHandler",value:function(t){t.preventDefault(),window.history&&window.history.replaceState(void 0,void 0,"#"+this.target.getAttribute("id")),this.scrollTo(),this.target.focus()}},{key:"init",value:function(){this.element.hash.length>1&&(this.target=document.querySelector(this.element.hash),this.target&&(this.target.setAttribute("tabindex","-1"),this.element.addEventListener("click",this.clickHandler)))}}],[{key:"easeInOutCubic",value:function(t,e,i,n){return(t/=n/2)<1?i/2*t*t+e:-i/2*((t-=1)*(t-2)-1)+e}},{key:"elementOffset",value:function(t){var e=t.getBoundingClientRect(),i=t.ownerDocument.defaultView,n=e.top+i.pageYOffset,s=document.querySelector(".sticky-nav");return s&&(n-=72,s.classList.contains("sticky-nav--vertical")&&!s.classList.contains("sticky-nav--collapsed")&&(n+=72)),n-=20,n}}]),t}(),StickyNav=function(){function t(e){if(classCallCheck(this,t),this.element=e,!this.element||!this.element.nodeType)throw new Error("The DOM element was not found when creating the Sticky navigation.");this.parent=document.querySelector(".sticky-nav"),this.content=document.getElementById("stickyNavContainer"),this.headings=this.content.querySelectorAll("h2"),this.anchorClickHandler=this.anchorClickHandler.bind(this),this.menuClickHandler=this.menuClickHandler.bind(this),this.scrollHandler=throttle(400,this.scrollHandler.bind(this)),this.resizeHandler=throttle(400,this.resizeHandler.bind(this)),this.switchScrollActiveTransition=this.switchScrollActiveTransition.bind(this),this.setActiveAnchor=this.setActiveAnchor.bind(this),this.openMenu=this.openMenu.bind(this),this.closeMenu=this.closeMenu.bind(this),this.isCollapsed=this.isCollapsed.bind(this),this.init(),this.allowScrollActiveTransition=!0}return createClass(t,[{key:"setActiveAnchor",value:function(t){this.anchors.forEach(function(e,i){t===i?e.classList.add("is-active"):e.classList.remove("is-active")})}},{key:"anchorClickHandler",value:function(t){if("false"===this.element.getAttribute("aria-expanded"))return t.stopImmediatePropagation(),t.stopPropagation(),t.preventDefault(),void this.openMenu();this.allowScrollActiveTransition=!1,setTimeout(this.switchScrollActiveTransition,4e3);var e=0;this.anchors.forEach(function(i,n){i===t.target&&(e=n)}),this.setActiveAnchor(e)}},{key:"switchScrollActiveTransition",value:function(){this.allowScrollActiveTransition=!0}},{key:"openMenu",value:function(){this.element.setAttribute("aria-expanded","true"),this.nav.setAttribute("aria-hidden","false")}},{key:"closeMenu",value:function(){this.element.setAttribute("aria-expanded","false"),this.nav.setAttribute("aria-hidden","true")}},{key:"menuClickHandler",value:function(){if(this.parent.classList.contains("sticky-nav--collapsed")){if("false"===this.element.getAttribute("aria-expanded"))return void this.openMenu();this.closeMenu()}}},{key:"scrollHandler",value:function(){var t=this;if(this.allowScrollActiveTransition){var e=window.pageYOffset;window.innerHeight/4>102?e+=window.innerHeight/4:e+=102,this.headings.forEach(function(i,n){var s=t.constructor.elementOffset(i);0===n&&e<s?t.setActiveAnchor(0):e>s&&t.setActiveAnchor(n)})}}},{key:"resizeHandler",value:function(){this.width>this.element.offsetWidth&&!this.vertical?this.isCollapsed(!0):window.matchMedia("(max-width: 719px)").matches&&this.vertical?this.isCollapsed(!0):this.isCollapsed(!1)}},{key:"isCollapsed",value:function(t){if(t)return this.parent.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.parent.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 t=this;document.body.classList.add("has-sticky-nav"),this.nav=document.createElement("ul"),this.nav.setAttribute("id","stickyNavMenu"),this.parent.classList.contains("sticky-nav--vertical")?this.vertical=!0:(this.vertical=!1,this.width=0),this.headings.forEach(function(e,i){var n=t.constructor.convertHeading(e.textContent);e.setAttribute("id",n),e.setAttribute("tabindex","-1");var s=document.createElement("li"),o=document.createElement("a");o.setAttribute("href","#"+n),o.textContent=e.dataset.shortTitle?e.dataset.shortTitle:e.textContent,o.addEventListener("click",t.anchorClickHandler),0===i&&o.classList.add("is-active"),s.appendChild(o),t.nav.appendChild(s);new SmoothScrolling(o)}),this.element.appendChild(this.nav),this.element.addEventListener("click",this.menuClickHandler),this.anchors=this.element.querySelectorAll("a"),this.vertical?window.matchMedia("(max-width: 719px)").matches&&this.isCollapsed(!0):(this.nav.querySelectorAll("li").forEach(function(e){t.width+=e.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),stickyfill.add(document.querySelectorAll(".sticky-nav"))}}],[{key:"convertHeading",value:function(t){return t.replace(/[^a-zA-Z0-9]/g,"-").toLowerCase()}},{key:"elementOffset",value:function(t){var e=t.getBoundingClientRect(),i=t.ownerDocument.defaultView;return e.top+i.pageYOffset}}]),t}();module.exports=StickyNav;

package.json

 {
   "name": "@servicensw/navigation",
-  "version": "2.0.0-dev.42",
+  "version": "2.0.0-dev.43",
   "description": "Navigation",
@@ -5,0 +5,0 @@ "repository": {

src/smooth-scrolling.es6.js

@@ -74,4 +74,9 @@ /**
     // Allow for sticky nav element if it's visible.
-    if (document.body.classList.contains('has-sticky-nav')) {
-      elementOffset -= document.querySelector('.sticky-nav').clientHeight;
+    const stickyNav = document.querySelector('.sticky-nav');
+    if (stickyNav) {
+      elementOffset -= 72;
+      // Vertical sticky nav doesn't need to offset, unless it's also collapsed.
+      if (stickyNav.classList.contains('sticky-nav--vertical') && !stickyNav.classList.contains('sticky-nav--collapsed')) {
+        elementOffset += 72;
+      }
     }
@@ -78,0 +83,0 @@

src/sticky-nav.es6.js

@@ -16,2 +16,3 @@ /**
     // Setup elements.
+    this.parent = document.querySelector('.sticky-nav');
     this.content = document.getElementById('stickyNavContainer');
@@ -53,4 +54,3 @@ this.headings = this.content.querySelectorAll('h2');
     const win = target.ownerDocument.defaultView;
-    const elementOffset = rect.top + win.pageYOffset;
-    return elementOffset;
+    return rect.top + win.pageYOffset;
   }
@@ -110,3 +110,3 @@
   menuClickHandler() {
-    if (this.element.classList.contains('sticky-nav--collapsed')) {
+    if (this.parent.classList.contains('sticky-nav--collapsed')) {
       if (this.element.getAttribute('aria-expanded') === 'false') {
@@ -145,5 +145,8 @@ this.openMenu();
   resizeHandler() {
-    if (this.width > this.element.offsetWidth) {
+    if (this.width > this.element.offsetWidth && !this.vertical) {
       this.isCollapsed(true);
     }
+    else if (window.matchMedia('(max-width: 719px)').matches && this.vertical) {
+      this.isCollapsed(true);
+    }
     else {
@@ -156,3 +159,3 @@ this.isCollapsed(false);
     if (collapsed) {
-      this.element.classList.add('sticky-nav--collapsed');
+      this.parent.classList.add('sticky-nav--collapsed');
       this.element.setAttribute('aria-controls', 'stickyNavMenu');
@@ -164,3 +167,3 @@ this.element.setAttribute('aria-expanded', 'false');
     }
-    this.element.classList.remove('sticky-nav--collapsed');
+    this.parent.classList.remove('sticky-nav--collapsed');
     this.element.removeAttribute('aria-controls');
@@ -181,3 +184,9 @@ this.element.removeAttribute('aria-expanded');
     // Calculate width of menu.
-    this.width = 0;
+    if (this.parent.classList.contains('sticky-nav--vertical')) {
+      this.vertical = true;
+    }
+    else {
+      this.vertical = false;
+      this.width = 0;
+    }
 
@@ -214,9 +223,14 @@ this.headings.forEach((element, index) => {
     // Finish width calc.
-    this.nav.querySelectorAll('li').forEach((element) => {
-      this.width += element.offsetWidth;
-    });
-    this.width += (this.nav.children.length - 1) * 40;
+    if (!this.vertical) {
+      this.nav.querySelectorAll('li').forEach((element) => {
+        this.width += element.offsetWidth;
+      });
+      this.width += (this.nav.children.length - 1) * 40;
 
-    // Add mobile class if needed.
-    if (this.width > this.element.offsetWidth) {
+      // Add mobile class if needed.
+      if (this.width > this.element.offsetWidth) {
+        this.isCollapsed(true);
+      }
+    }
+    else if (window.matchMedia('(max-width: 719px)').matches) {
       this.isCollapsed(true);
@@ -223,0 +237,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

88099

increased by24.67%

Number of package files

22

increased by10%

Lines of code

943

increased by11.07%

No dependency changes