Merge pull request #18 from UFHealth/fix-autosidebar-deps

new way to track animating

dist/butr.common.js

@@ -82,6 +82,9 @@ var _objectAssign2 = _interopRequireDefault(_objectAssign);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// Track when animating to prevent excessive calls
+var animating = false;
+
 /**
  * Basic debounce
  * More info: https://davidwalsh.name/function-debounce
@@ -140,6 +143,7 @@ var animate = function animate(options) {
    * create first frame
    */
   var startAnimation = function startAnimation() {
+    animating = true;
     start = performance.now();
     end = start + settings.duration;
     frame();
@@ -154,6 +158,8 @@ var animate = function animate(options) {
     now = performance.now();
     settings.loop(calcIncrement);
     if (now < end) requestAnimationFrame(frame);else {
+      // Animation is done
+      animating = false;
       if (typeof settings.done === 'function') settings.done();
     }
   };
@@ -402,6 +408,7 @@ var autoSidebar = exports.autoSidebar = function autoSidebar(options) {
     var li = document.createElement('li');
     var a = document.createElement('a');
     a.href = heading.hash;
+    a.setAttribute('data-butr', true);
     a.innerText = heading.label;
     a.classList.add('js-butr-link');
     if (settings.aClass) appendClasses(a, settings.aClass);
@@ -470,8 +477,6 @@ var marker = exports.marker = function marker(options) {
   var content = void 0;
   var headings = void 0;
   var nav = void 0;
-  var safeToUpdate = true;
-  var ignoreScrollEvents = false;
 
   /**
    * Set scrollingElement with el query or with default body el
@@ -523,29 +528,12 @@ var marker = exports.marker = function marker(options) {
   };
 
   /**
-   * When a link is clicked, set active link and animate scroll to the anchor
-   * You could just put the data-butr on these links to get animated
-   * scrolling, but you wouldn't get the option to send ignoreScrollEvents in a
-   * callback. Ignoring scroll events helps when you scroll to a section
-   * (usually the last) that wont make it to the top of the page. If you relied
-   * on scroll position it would never get highlighted by the marker, so instead
-   * we highlight it and stop watching scroll events while animating to it, then
-   * turn them back on.
+   * When a link is clicked - set active link
    */
   var setupLinkEvents = function setupLinkEvents() {
     var _loop = function _loop(i) {
       links[i].addEventListener('click', function (e) {
-        e.preventDefault();
-        ignoreScrollEvents = true;
-        setActive(links[i].hash, 'setupLinkEvents');
-        to({
-          duration: settings.duration,
-          target: links[i].hash,
-          callback: settings.callback,
-          markerCallback: function markerCallback() {
-            ignoreScrollEvents = false;
-          }
-        });
+        setActive(links[i].hash);
       });
     };
 
@@ -565,15 +553,15 @@ var marker = exports.marker = function marker(options) {
         break;
       } else heading = headings[i];
     }
-    if (heading) setActive('#' + heading.id, 'checkActive');
+    if (heading) setActive('#' + heading.id);
   };
 
   /**
    * Toggle active class between nav links.
    *
    * @param {string} hash Section link to make active.
    */
-  var setActive = function setActive(hash, where) {
+  var setActive = function setActive(hash) {
     var previouslyActive = document.querySelector('.js-butr-link.js-butr-active');
     var currentlyActive = document.querySelector('.js-butr-link[href="' + hash + '"]');
     if (currentlyActive !== previouslyActive) {
@@ -600,8 +588,8 @@ var marker = exports.marker = function marker(options) {
    * https://davidwalsh.name/javascript-debounce-function
    */
   var contentScrolled = debounce(function () {
-    if (ignoreScrollEvents) return;
-    updateNav();
+    // If it's animating don't try to update active nav
+    if (!animating) updateNav();
   }, 50);
 
   var init = function init() {
@@ -634,8 +622,7 @@ var to = exports.to = function to(options) {
     target: 0,
     direction: 'y',
     keepHash: true,
-    callback: null,
-    markerCallback: null
+    callback: null
 
     // Determine settings based on defaults + user provided options
   };var settings = (0, _objectAssign2.default)({}, defaults, options);
@@ -692,12 +679,11 @@ var to = exports.to = function to(options) {
   };
 
   /**
-   * Callback passed to done option in animate function - runs markerCallback
-   * and user specified callback once the animation is done (if they're defined)
+   * Callback passed to done option in animate function - runs user specified
+   * callback once the animation is done (if it's defined)
    */
   var afterScroll = function afterScroll() {
     if (typeof settings.callback === 'function') settings.callback();
-    if (typeof settings.markerCallback === 'function') settings.markerCallback();
   };
 
   /**