improved navigation-scoll method

Author: felixlberg

lib/modules/navigations-widgets/public/js/lean.js

@@ -59,71 +59,69 @@ apos.utils.widgetPlayers['navigations'] = function(el, data, options) {
     }
   }
 
-  // Remove the ugly focus ring on google chrome but keep it if user really uses keyboard
-  function handleFirstTab(e) {
-    if (e.keyCode === 9) { // the "I am a keyboard user" key
-        document.body.classList.add('user-is-tabbing');
-        window.removeEventListener('keydown', handleFirstTab);
+  // Smooth scroll to anchor
+  function scrollToAnchor(anchor) {
+    var target = anchor.hash;
+    var targetElement = document.getElementById(target.substring(1));
+    var targetOffset = targetElement.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+    if (window.scrollTo) {
+      window.scrollTo({
+        top: targetOffset,
+        behavior: 'smooth'
+      });
+    } else {
+      window.scroll(0, targetOffset);
+    }
+    if (history.pushState) {
+      history.pushState(null, null, target);
+    } else {
+      location.hash = target;
+    }
+  }
+
+  // Set active link for scroll position
+  function setActiveLinkForScrollPosition() {
+    var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    var anchorScrollLinks = document.querySelectorAll('.anchor-scroll');
+    var activeLinkFound = false;
+    for (var i = 0; i < anchorScrollLinks.length; i++) {
+      var link = anchorScrollLinks[i];
+      var target = link.hash;
+      var refElement = document.getElementById(target.substring(1));
+      if (refElement.offsetTop <= scrollPos + 200 && refElement.offsetTop + refElement.offsetHeight > scrollPos + 200) {
+        if (!activeLinkFound) {
+          link.parentNode.classList.add('active');
+          activeLinkFound = true;
+        } else {
+          link.parentNode.classList.remove('active');
+        }
+      } else {
+        link.parentNode.classList.remove('active');
+      }
     }
   }
-  window.addEventListener('keydown', handleFirstTab);
 
-  // Anchor jump with scroll anchors
+  // Add click handler to anchor links
   var anchorJumpLinks = document.querySelectorAll('.anchor-jump[href^="#"]');
   for (var i = 0; i < anchorJumpLinks.length; i++) {
     var anchor = anchorJumpLinks[i];
-    addEvent(anchor, 'click', function(e) {
+    anchor.addEventListener('click', function(e) {
       e.preventDefault();
-      window.removeEventListener("scroll", scrollHandler);
-      var target = this.hash;
-      var targetElement = document.getElementById(target.substring(1));
-      var targetOffset = targetElement.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
-      if (window.scrollTo) {
-        window.scrollTo({
-          top: targetOffset,
-          behavior: 'smooth'
-        });
-      } else {
-        window.scroll(0, targetOffset);
-      }
-      if (history.pushState) {
-        history.pushState(null, null, target);
-      } else {
-        location.hash = target;
-      }
+      scrollToAnchor(this);
     });
   }
 
-  // Set anchors when scroll
+  // Add scroll handler to update active link
   var scrolling = false;
-  function scrollHandler() {
+  window.addEventListener('scroll', function() {
     scrolling = true;
-  }
-  addEvent(window, 'scroll', scrollHandler);
+  });
 
-  // Throtteling function to prevent browser flooding
+  // Throttling function to prevent browser flooding
   setInterval(function() {
     if (scrolling) {
       scrolling = false;
-      var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-      var anchorScrollLinks = document.querySelectorAll('.anchor-scroll');
-      for (var i = 0; i < anchorScrollLinks.length; i++) {
-        var link = anchorScrollLinks[i];
-        var target = link.hash;
-        var refElement = document.getElementById(target.substring(1));
-        if (refElement.offsetTop <= scrollPos + 200 && refElement.offsetTop + refElement.offsetHeight > scrollPos + 200) {
-          link.parentNode.className += " active";
-          if (window.location.pathname !== target) {
-            if (history.pushState) {
-              history.pushState(null, null, target);
-            } else {
-              location.hash = target;
-            }
-          }
-        } else {
-          link.parentNode.className = link.parentNode.className.replace(/\bactive\b/, "");
-        }
-      }
+      setActiveLinkForScrollPosition();
     }
   }, 500);