diff --git a/dist/easyScrollDots.js b/dist/easyScrollDots.js index 241341e..29bbaf8 100644 --- a/dist/easyScrollDots.js +++ b/dist/easyScrollDots.js @@ -1,4 +1,4 @@ -/* Easy Scroll Dots 1.1.5 --- https://github.com/Superhands89/EasyScrollDots +/* Easy Scroll Dots 1.1.6 --- https://github.com/Superhands89/EasyScrollDots * Quickly add anchor points throughout your web page/application and have navigational dots automatically appear * in a fixed position on the side of the page. This allows the user to click to scroll though sections of the page, * and it updates as they scroll. @@ -52,17 +52,23 @@ let dotOffset = 0; // scroll indicator controller function easyScrollDots(dotfixedOptions) { let scrollIndi = document.querySelectorAll('.scroll-indicator'); + const scrollIndiElems = Array.prototype.slice.call(scrollIndi).filter( i => !isHidden( i ) ); dotfixedOptions.fixedNav === true ? dotFixedNavPresent = true : dotFixedNavPresent; dotfixedOptions.fixedNavId === '' ? dotFixedNavId = false : dotFixedNavId = dotfixedOptions.fixedNavId; dotfixedOptions.fixedNavUpward === true ? dotFixedNavUp = true : dotFixedNavUp; dotfixedOptions.offset > 0 ? dotOffset = dotfixedOptions.offset : dotOffset; - if (scrollIndi.length) { + let scrollIndiController = document.querySelector('.scroll-indicator-controller'); + if (scrollIndiController != undefined) { + // Allow multiple calls... + scrollIndiController.remove(); + } + + if (scrollIndiElems.length) { const scrollIndiTemplate = '
'; document.querySelector('body').lastElementChild.insertAdjacentHTML('afterend', scrollIndiTemplate); - const scrollIndiController = document.querySelector('.scroll-indicator-controller'); + scrollIndiController = document.querySelector('.scroll-indicator-controller'); if ((typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1)) { scrollIndiController.classList.add('indi-mobile'); } - const scrollIndiElems = Array.prototype.slice.call(scrollIndi); scrollIndiElems.forEach(function (e, i) { const scrollIndiId = e.getAttribute('id'); @@ -74,44 +80,53 @@ function easyScrollDots(dotfixedOptions) { } scrollIndiController.lastElementChild.insertAdjacentHTML('afterend', '
' + scrollIndiTitle + '
'); }); + } - const scrollIndiControllerDots = scrollIndiController.querySelectorAll('[data-indi-controller-id]'); + const scrollIndiControllerDots = scrollIndiController.querySelectorAll('[data-indi-controller-id]'); - const handleIndiScroll = dotsThrottle(function () { - let indiScrollTopCollection = {}; + const handleIndiScroll = dotsThrottle(function () { + let indiScrollTopCollection = {}; - scrollIndiElems.forEach(function (e) { - const scrollIndiIdScroll = e.getAttribute('id'); - const indiScrollTop = e.getBoundingClientRect().top; + scrollIndiElems.forEach(function (e) { + const scrollIndiIdScroll = e.getAttribute('id'); + const indiScrollTop = e.getBoundingClientRect().top; - indiScrollTopCollection[scrollIndiIdScroll] = indiScrollTop; - }); + indiScrollTopCollection[scrollIndiIdScroll] = indiScrollTop; + }); - // const indiOffsetValues = Object.values(indiScrollTopCollection); not supported in IE - const indiOffsetValues = Object.keys(indiScrollTopCollection).map(function (itm) { return indiScrollTopCollection[itm]; }); - const indiOffsetMin = function () { - const indiRemoveMinuses = indiOffsetValues.filter(function (x) { return x > -150; }); - - return Math.min.apply(null, indiRemoveMinuses); - }; - - Object.keys(indiScrollTopCollection).forEach(function (e) { - if (indiScrollTopCollection[e] == indiOffsetMin()) { - Array.prototype.forEach.call(scrollIndiControllerDots, function (el) { - if (el.classList.contains('active')) { - el.classList.remove('active'); - } - }); - scrollIndiController.querySelector('[data-indi-controller-id="' + e + '"]').classList.add('active'); - } - }); + // const indiOffsetValues = Object.values(indiScrollTopCollection); not supported in IE + const indiOffsetValues = Object.keys(indiScrollTopCollection).map(function (itm) { return indiScrollTopCollection[itm]; }); + const indiOffsetMin = function () { + const indiRemoveMinuses = indiOffsetValues.filter(function (x) { return x > -150; }); + + return Math.min.apply(null, indiRemoveMinuses); + }; - }, 300); + Object.keys(indiScrollTopCollection).forEach(function (e) { + if (indiScrollTopCollection[e] == indiOffsetMin()) { + Array.prototype.forEach.call(scrollIndiControllerDots, function (el) { + if (el.classList.contains('active')) { + el.classList.remove('active'); + } + }); + scrollIndiController.querySelector('[data-indi-controller-id="' + e + '"]').classList.add('active'); + } + }); - window.addEventListener('scroll', handleIndiScroll); + }, 300); + + // Allow multiple calls... + window.removeEventListener("scroll", handleIndiScroll) + if (scrollIndiElems.length) { + window.addEventListener('scroll', handleIndiScroll); } }; - + +function isHidden(el) { + var style = window.getComputedStyle(el); + return (style.display === 'none') +} + function scrollIndiClicked(indiId) { if (window.jQuery) { // if jquery is availble then we can use jquery animations diff --git a/dist/easyScrollDots.min.js b/dist/easyScrollDots.min.js index 3db5b14..7f91b84 100644 --- a/dist/easyScrollDots.min.js +++ b/dist/easyScrollDots.min.js @@ -1,4 +1,4 @@ -/* Easy Scroll Dots 1.1.5 --- https://github.com/Superhands89/EasyScrollDots +/* Easy Scroll Dots 1.1.6 --- https://github.com/Superhands89/EasyScrollDots * Quickly add anchor points throughout your web page/application and have navigational dots automatically appear * in a fixed position on the side of the page. This allows the user to click to scroll though sections of the page, * and it updates as they scroll. @@ -9,4 +9,4 @@ * or purchase a Single Commercial License at https://gum.co/TdtEX * or purchase an Extended Commercial License at https://gum.co/NGfmlw */ -function dotsThrottle(t,e,o){let n,i,d,l=null,c=0;o||(o={});const s=function(){c=!1===o.leading?0:Date.now(),l=null,d=t.apply(n,i),l||(n=i=null)};return function(){const a=Date.now();c||!1!==o.leading||(c=a);const r=e-(a-c);return n=this,i=arguments,r<=0||r>e?(l&&(clearTimeout(l),l=null),c=a,d=t.apply(n,i),l||(n=i=null)):l||!1===o.trailing||(l=setTimeout(s,r)),d}}let dotFixedNavPresent=!1,dotFixedNavId="",dotFixedNavUp=!1,dotOffset=0;function easyScrollDots(t){let e=document.querySelectorAll(".scroll-indicator");if(!0===t.fixedNav&&(dotFixedNavPresent=!0),dotFixedNavId=""!==t.fixedNavId&&t.fixedNavId,!0===t.fixedNavUpward&&(dotFixedNavUp=!0),t.offset>0&&(dotOffset=t.offset),e.length){const t='
';document.querySelector("body").lastElementChild.insertAdjacentHTML("afterend",t);const o=document.querySelector(".scroll-indicator-controller");void 0===window.orientation&&-1===navigator.userAgent.indexOf("IEMobile")||o.classList.add("indi-mobile");const n=Array.prototype.slice.call(e);n.forEach(function(t,e){const n=t.getAttribute("id"),i=t.getAttribute("data-scroll-indicator-title");let d="";0==e&&(d="active"),o.lastElementChild.insertAdjacentHTML("afterend",'
"+i+"
")});const i=o.querySelectorAll("[data-indi-controller-id]"),d=dotsThrottle(function(){let t={};n.forEach(function(e){const o=e.getAttribute("id"),n=e.getBoundingClientRect().top;t[o]=n});const e=Object.keys(t).map(function(e){return t[e]});Object.keys(t).forEach(function(n){t[n]==function(){const t=e.filter(function(t){return t>-150});return Math.min.apply(null,t)}()&&(Array.prototype.forEach.call(i,function(t){t.classList.contains("active")&&t.classList.remove("active")}),o.querySelector('[data-indi-controller-id="'+n+'"]').classList.add("active"))})},300);window.addEventListener("scroll",d)}}function scrollIndiClicked(t){if(window.jQuery){const e=$("html, body");if(!0===dotFixedNavPresent&&dotFixedNavId.length){const o=document.getElementById(dotFixedNavId).clientHeight,n=$("#"+t);if(!0===dotFixedNavUp){e.animate({scrollTop:n.offset().top-dotOffset},700);const t=document.body.getBoundingClientRect().top;setTimeout(function(){document.body.getBoundingClientRect().top>t&&e.animate({scrollTop:n.offset().top-o-dotOffset},400)},400)}else e.animate({scrollTop:n.offset().top-o-dotOffset},700)}else e.animate({scrollTop:$("#"+t).offset().top-dotOffset},700)}else if(!0===dotFixedNavPresent&&dotFixedNavId.length){const e=document.getElementById(dotFixedNavId).clientHeight,o=document.getElementById(t);if(!0===dotFixedNavUp){window.scrollTo({top:o.offsetTop-dotOffset,left:0,behavior:"smooth"});const t=document.body.getBoundingClientRect().top;setTimeout(function(){document.body.getBoundingClientRect().top>t&&window.scrollTo({top:o.offsetTop-e-dotOffset,left:0,behavior:"smooth"})},400)}else window.scrollTo({top:o.offsetTop-e-dotOffset,left:0,behavior:"smooth"})}else window.scrollTo({top:document.getElementById(t).offsetTop-dotOffset,left:0,behavior:"smooth"})} +function dotsThrottle(func,wait,options){let context,args,result,timeout=null,previous=0;options||(options={});const later=function(){previous=!1===options.leading?0:Date.now(),timeout=null,result=func.apply(context,args),timeout||(context=args=null)};return function(){const now=Date.now();previous||!1!==options.leading||(previous=now);const remaining=wait-(now-previous);return context=this,args=arguments,remaining<=0||remaining>wait?(timeout&&(clearTimeout(timeout),timeout=null),previous=now,result=func.apply(context,args),timeout||(context=args=null)):timeout||!1===options.trailing||(timeout=setTimeout(later,remaining)),result}}let dotFixedNavPresent=!1,dotFixedNavId="",dotFixedNavUp=!1,dotOffset=0;function easyScrollDots(dotfixedOptions){let scrollIndi=document.querySelectorAll(".scroll-indicator");const scrollIndiElems=Array.prototype.slice.call(scrollIndi).filter(i=>!isHidden(i));!0===dotfixedOptions.fixedNav&&(dotFixedNavPresent=!0),dotFixedNavId=""!==dotfixedOptions.fixedNavId&&dotfixedOptions.fixedNavId,!0===dotfixedOptions.fixedNavUpward&&(dotFixedNavUp=!0),dotfixedOptions.offset>0&&(dotOffset=dotfixedOptions.offset);let scrollIndiController=document.querySelector(".scroll-indicator-controller");if(null!=scrollIndiController&&scrollIndiController.remove(),scrollIndiElems.length){const scrollIndiTemplate='
';document.querySelector("body").lastElementChild.insertAdjacentHTML("afterend",scrollIndiTemplate),scrollIndiController=document.querySelector(".scroll-indicator-controller"),void 0===window.orientation&&-1===navigator.userAgent.indexOf("IEMobile")||scrollIndiController.classList.add("indi-mobile"),scrollIndiElems.forEach((function(e,i){const scrollIndiId=e.getAttribute("id"),scrollIndiTitle=e.getAttribute("data-scroll-indicator-title");let firstActiveClass="";0==i&&(firstActiveClass="active"),scrollIndiController.lastElementChild.insertAdjacentHTML("afterend",'
"+scrollIndiTitle+"
")}))}const scrollIndiControllerDots=scrollIndiController.querySelectorAll("[data-indi-controller-id]"),handleIndiScroll=dotsThrottle((function(){let indiScrollTopCollection={};scrollIndiElems.forEach((function(e){const scrollIndiIdScroll=e.getAttribute("id"),indiScrollTop=e.getBoundingClientRect().top;indiScrollTopCollection[scrollIndiIdScroll]=indiScrollTop}));const indiOffsetValues=Object.keys(indiScrollTopCollection).map((function(itm){return indiScrollTopCollection[itm]})),indiOffsetMin=function(){const indiRemoveMinuses=indiOffsetValues.filter((function(x){return x>-150}));return Math.min.apply(null,indiRemoveMinuses)};Object.keys(indiScrollTopCollection).forEach((function(e){indiScrollTopCollection[e]==indiOffsetMin()&&(Array.prototype.forEach.call(scrollIndiControllerDots,(function(el){el.classList.contains("active")&&el.classList.remove("active")})),scrollIndiController.querySelector('[data-indi-controller-id="'+e+'"]').classList.add("active"))}))}),300);window.removeEventListener("scroll",handleIndiScroll),scrollIndiElems.length&&window.addEventListener("scroll",handleIndiScroll)}function isHidden(el){var style;return"none"===window.getComputedStyle(el).display}function scrollIndiClicked(indiId){if(window.jQuery){const dotDocumentHtml=$("html, body");if(!0===dotFixedNavPresent&&dotFixedNavId.length){const dotNavHeightElem=document.getElementById(dotFixedNavId),dotNavHeight=dotNavHeightElem.clientHeight,indiElement=$("#"+indiId);if(!0===dotFixedNavUp){dotDocumentHtml.animate({scrollTop:indiElement.offset().top-dotOffset},700);const scrollPos=document.body.getBoundingClientRect().top;setTimeout((function(){document.body.getBoundingClientRect().top>scrollPos&&dotDocumentHtml.animate({scrollTop:indiElement.offset().top-dotNavHeight-dotOffset},400)}),400)}else dotDocumentHtml.animate({scrollTop:indiElement.offset().top-dotNavHeight-dotOffset},700)}else dotDocumentHtml.animate({scrollTop:$("#"+indiId).offset().top-dotOffset},700)}else if(!0===dotFixedNavPresent&&dotFixedNavId.length){const dotNavHeightElem=document.getElementById(dotFixedNavId),dotNavHeight=dotNavHeightElem.clientHeight,indiElement=document.getElementById(indiId);if(!0===dotFixedNavUp){window.scrollTo({top:indiElement.offsetTop-dotOffset,left:0,behavior:"smooth"});const scrollPos=document.body.getBoundingClientRect().top;setTimeout((function(){document.body.getBoundingClientRect().top>scrollPos&&window.scrollTo({top:indiElement.offsetTop-dotNavHeight-dotOffset,left:0,behavior:"smooth"})}),400)}else window.scrollTo({top:indiElement.offsetTop-dotNavHeight-dotOffset,left:0,behavior:"smooth"})}else window.scrollTo({top:document.getElementById(indiId).offsetTop-dotOffset,left:0,behavior:"smooth"})} \ No newline at end of file