@servicensw/navigation - npm Package Compare versions

Comparing version 2.0.0-dev.32 to 2.0.0-dev.33

dist/js/smooth-scrolling.js

@@ -1,1 +0,1 @@
-!function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},e=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),n=function(){function n(e){if(t(this,n),this.element=e,!this.element||!this.element.nodeType)throw new Error("The DOM element(s) were not found when creating Smooth Scrolling.");this.clickHandler=this.clickHandler.bind(this),this.scrollAnimation=this.scrollAnimation.bind(this),this.init()}return e(n,[{key:"scrollAnimation",value:function(t){this.startTime=this.startTime||t;var e=t-this.startTime,n=this.constructor.easeInOutCubic(e,this.start,this.offset,this.duration);window.scroll(0,n),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,n,i){return(t/=i/2)<1?n/2*t*t+e:-n/2*((t-=1)*(t-2)-1)+e}},{key:"elementOffset",value:function(t){var e=0;return null!==t.offsetParent&&(e=t.offsetTop+t.offsetParent.offsetTop,document.body.classList.contains("has-sticky-nav")&&(e-=document.querySelector(".sticky-nav").clientHeight),e-=20),e}}]),n}();document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll('a[href^="#"]').forEach(function(t){new n(t)})}),window.SmoothScrolling=n}();
+"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;

dist/js/sticky-nav.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function t(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 e(e,i,n){return void 0===n?t(e,i,!1):t(e,n,!1!==i)}var i,n=(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)}(i={exports:{}},i.exports),i.exports),o=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},s=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}}(),r=function(){function t(i){if(o(this,t),this.element=i,!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=e(100,this.scrollHandler.bind(this)),this.resizeHandler=e(100,this.resizeHandler.bind(this)),this.switchScrollActiveTransition=this.switchScrollActiveTransition.bind(this),this.isCollapsed=this.isCollapsed.bind(this),this.init(),this.allowScrollActiveTransition=!0}return s(t,[{key:"anchorClickHandler",value:function(t){if("false"===this.element.getAttribute("aria-expanded"))return t.stopImmediatePropagation(),t.preventDefault(),void this.nav.click();var e=this.element.getElementsByTagName("a");Object.keys(e).forEach(function(t){e[t].classList.remove("is-active")}),t.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 t=this;if(this.allowScrollActiveTransition){var e=window.pageYOffset,i=this.element.querySelectorAll("a");this.headings.forEach(function(n,o){var s=n.offsetTop+n.offsetParent.offsetTop-t.element.clientHeight-30;e>s&&i.forEach(function(t,e){o===e?t.classList.add("is-active"):t.classList.remove("is-active")})})}}},{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");if(s.setAttribute("href","#"+n),s.textContent=e.textContent,s.addEventListener("click",t.anchorClickHandler),0===i&&s.classList.add("is-active"),o.appendChild(s),t.nav.appendChild(o),window.SmoothScrolling)new window.SmoothScrolling(s)}),this.element.appendChild(this.nav),this.element.addEventListener("click",this.menuClickHandler),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),n.add(document.querySelectorAll(".sticky-nav"))}}],[{key:"convertHeading",value:function(t){return t.replace(/[^a-zA-Z0-9]/g,"-").toLowerCase()}}]),t}();document.addEventListener("DOMContentLoaded",function(){new r(document.getElementById("stickyNav"))})}();
+"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.innerHeight/2+window.pageYOffset;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.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;

package.json

 {
   "name": "@servicensw/navigation",
-  "version": "2.0.0-dev.32",
+  "version": "2.0.0-dev.33",
   "description": "Navigation",
@@ -18,3 +18,3 @@ "repository": {
     "build:css": "NODE_ENV=production ./node_modules/.bin/postcss src/navigation.css --dir dist/css --config ./node_modules/@servicensw/builder/postcss.config.js",
-    "build:js": "NODE_ENV=production ./node_modules/.bin/rollup src/smooth-scrolling.es6.js --o dist/js/smooth-scrolling.js --f iife --config ./node_modules/@servicensw/builder/rollup.config.js && NODE_ENV=production ./node_modules/.bin/rollup src/sticky-nav.es6.js --o dist/js/sticky-nav.js --f iife --config ./node_modules/@servicensw/builder/rollup.config.js",
+    "build:js": "NODE_ENV=production ./node_modules/.bin/rollup src/smooth-scrolling.es6.js --o dist/js/smooth-scrolling.js --f cjs --name SmoothScrolling --config ./node_modules/@servicensw/builder/rollup.config.js && NODE_ENV=production ./node_modules/.bin/rollup src/sticky-nav.es6.js --o dist/js/sticky-nav.js --f cjs --name StickyNav --config ./node_modules/@servicensw/builder/rollup.config.js",
     "build": "npm run build:css && npm run build:js"
@@ -21,0 +21,0 @@ },

src/smooth-scrolling.es6.js

@@ -5,8 +5,9 @@ /**
 
-class SmoothScrolling {
+export default class SmoothScrolling {
   constructor(element) {
     this.element = element;
     if (!this.element || !this.element.nodeType) {
-      throw new Error('The DOM element(s) were not found when creating Smooth Scrolling.');
+      return;
     }
+
     // Bind this to handlers.
@@ -68,14 +69,15 @@ this.clickHandler = this.clickHandler.bind(this);
   static elementOffset(target) {
-    let elementOffset = 0;
-    // Ensure the element is visible and has an offset parent.
-    if (target.offsetParent !== null) {
-      // Work out the Y offset using offsetParent.offsetTop.
-      elementOffset = target.offsetTop + target.offsetParent.offsetTop;
-      // Allow for sticky nav element if it's visible.
-      if (document.body.classList.contains('has-sticky-nav')) {
-        elementOffset -= document.querySelector('.sticky-nav').clientHeight;
-      }
-      // Add a healthy amount of spacing so the element is clearly visible.
-      elementOffset -= 20;
+    // This is the method jQuery uses for it's offset() function.
+    const rect = target.getBoundingClientRect();
+    const win = target.ownerDocument.defaultView;
+    let elementOffset = rect.top + win.pageYOffset;
+
+    // Allow for sticky nav element if it's visible.
+    if (document.body.classList.contains('has-sticky-nav')) {
+      elementOffset -= document.querySelector('.sticky-nav').clientHeight;
     }
+
+    // Add a healthy amount of spacing so the element is clearly visible.
+    elementOffset -= 20;
+
     return elementOffset;
@@ -119,10 +121,1 @@ }
 }
-
-document.addEventListener('DOMContentLoaded', () => {
-  const hashLinks = document.querySelectorAll('a[href^="#"]');
-  hashLinks.forEach((element) => {
-    const smoothScrolling = new SmoothScrolling(element); // eslint-disable-line no-unused-vars
-  });
-});
-
-window.SmoothScrolling = SmoothScrolling;

src/sticky-nav.es6.js

@@ -5,6 +5,7 @@ /**
 
-import { debounce } from 'throttle-debounce';
+import { throttle } from 'throttle-debounce';
 import Stickyfill from 'stickyfilljs';
+import SmoothScrolling from './smooth-scrolling.es6';
 
-class StickyNav {
+export default class StickyNav {
   constructor(element) {
@@ -18,8 +19,13 @@ this.element = element;
     this.headings = this.content.querySelectorAll('h2');
-    // Bind this for handlers.
+
+    // Bind this to methods.
     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.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);
@@ -40,2 +46,25 @@ this.init();
 
+  /**
+   * Get an elements offset depending on certain conditions.
+   * @param {object} target - the elements offset to get.
+   * @return {number} The correct elementOffset or 0 if element not visible.
+   */
+  static elementOffset(target) {
+    const rect = target.getBoundingClientRect();
+    const win = target.ownerDocument.defaultView;
+    const elementOffset = rect.top + win.pageYOffset;
+    return elementOffset;
+  }
+
+  setActiveAnchor(index) {
+    this.anchors.forEach((anchor, i) => {
+      if (index === i) {
+        anchor.classList.add('is-active');
+      }
+      else {
+        anchor.classList.remove('is-active');
+      }
+    });
+  }
+
   anchorClickHandler(event) {
@@ -47,16 +76,20 @@ // If the menu is expanded, we don't want a click on the active item to
       event.stopImmediatePropagation();
+      event.stopPropagation();
       event.preventDefault();
-      // Now trigger a click on the menu to show it.
-      this.nav.click();
+      // Now open the menu manually.
+      this.openMenu();
       return;
     }
-    const anchors = this.element.getElementsByTagName('a');
-    Object.keys(anchors).forEach((key) => {
-      anchors[key].classList.remove('is-active');
+    // This timeout stops the scroll event from firing so the active menu item isn't updated.
+    this.allowScrollActiveTransition = false;
+    setTimeout(this.switchScrollActiveTransition, 4000);
+    // Get the clicked items index in relation to the anchors nodeList.
+    let index = 0;
+    this.anchors.forEach((element, i) => {
+      if (element === event.target) {
+        index = i;
+      }
     });
     // Set a clicked link to active.
-    event.target.classList.add('is-active');
-    // This timeout is a visual nicety
-    this.allowScrollActiveTransition = false;
-    setTimeout(this.switchScrollActiveTransition, 4000);
+    this.setActiveAnchor(index);
   }
@@ -68,11 +101,19 @@
 
+  openMenu() {
+    this.element.setAttribute('aria-expanded', 'true');
+    this.nav.setAttribute('aria-hidden', 'false');
+  }
+
+  closeMenu() {
+    this.element.setAttribute('aria-expanded', 'false');
+    this.nav.setAttribute('aria-hidden', 'true');
+  }
+
   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');
+        this.openMenu();
         return;
       }
-      this.element.setAttribute('aria-expanded', 'false');
-      this.nav.setAttribute('aria-hidden', 'true');
+      this.closeMenu();
     }
@@ -85,11 +126,13 @@ }
     }
-    const scroll = window.pageYOffset;
-    const anchors = this.element.querySelectorAll('a');
+    const scroll = (window.innerHeight / 2) + window.pageYOffset;
     this.headings.forEach((element, index) => {
-      const offset = element.offsetTop + element.offsetParent.offsetTop - this.element.clientHeight - 30; // eslint-disable-line no-mixed-operators, max-len
-      if (scroll > offset) {
-        anchors.forEach((anchor, i) => {
-          index === i ? anchor.classList.add('is-active') : anchor.classList.remove('is-active'); // eslint-disable-line no-unused-expressions
-        });
+      const elementOffset = this.constructor.elementOffset(element); // eslint-disable-line no-mixed-operators, max-len
+      // If the scroll is above the first heading, keep the first item active.
+      if (index === 0 && scroll < elementOffset) {
+        this.setActiveAnchor(0);
       }
+      // Once the scroll passes a heading, set that item active.
+      else if (scroll > elementOffset) {
+        this.setActiveAnchor(index);
+      }
     });
@@ -154,6 +197,3 @@ }
       this.nav.appendChild(menuItem);
-
-      if (window.SmoothScrolling) {
-        const smoothScrolling = new window.SmoothScrolling(menuLink); // eslint-disable-line no-unused-vars, max-len
-      }
+      const smoothScrolling = new SmoothScrolling(menuLink); // eslint-disable-line no-unused-vars, max-len
     });
@@ -165,2 +205,4 @@
 
+    this.anchors = this.element.querySelectorAll('a');
+
     // Finish width calc.
@@ -185,5 +227,1 @@ this.nav.querySelectorAll('li').forEach((element) => {
 }
-
-document.addEventListener('DOMContentLoaded', () => {
-  const stickyNav = new StickyNav(document.getElementById('stickyNav')); // eslint-disable-line no-unused-vars
-});

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

51521

increased by51.13%

Number of package files

15

increased by7.14%

Lines of code

591

increased by6.87%

No dependency changes