Visibility and multiple calls

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 = '<div class="scroll-indicator-controller"><span></span></div>';
         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', '<div class="' + firstActiveClass + '" data-indi-controller-id="' + scrollIndiId + '" onclick="scrollIndiClicked(\'' + scrollIndiId + '\');"><span>' + scrollIndiTitle + '</span><div></div></div>');
         });
+    }
 
-        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