Fix remaining bugs

mdn · Oct 10, 2018 · ea6bbe0 · ea6bbe0
1 parent eadb7f4
commit ea6bbe0
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 24 deletions.
diff --git a/kuma/static/js/components/local-anchor.js b/kuma/static/js/components/local-anchor.js
@@ -46,19 +46,26 @@
 
         mainDocument.addEventListener('click', function(event) {
             var target = event.target;
-            /* getting the attribute value as apposed to the target property
-               to ensure we get the actual text value of the attribute */
-            var hrefAttrValue = target.getAttribute('href');
-            var isInDocumentLink = hrefAttrValue.startsWith('#');
 
-            var headingId = isInDocumentLink
-                ? hrefAttrValue.substr(1)
-                : target.dataset.headingId;
-            /* only handle clicks on in document links or, that originated from
-               a `local-anchor` */
-            if (target.classList.contains('local-anchor') || isInDocumentLink) {
-                event.preventDefault();
-                mdn.utils.scrollToHeading(headingId);
+            // only handle clicks on anchor elements
+            if (target.tagName === 'A') {
+                /* getting the attribute value as apposed to the target property
+                   to ensure we get the actual text value of the attribute */
+                var hrefAttrValue = target.getAttribute('href');
+                var isInDocumentLink = hrefAttrValue.startsWith('#');
+
+                var headingId = isInDocumentLink
+                    ? hrefAttrValue.substr(1)
+                    : target.dataset.headingId;
+                /* only handle clicks on in document links or, that originated from
+                   a `local-anchor` */
+                if (
+                    target.classList.contains('local-anchor') ||
+                    isInDocumentLink
+                ) {
+                    event.preventDefault();
+                    mdn.utils.scrollToHeading(headingId);
+                }
             }
         });
     }

diff --git a/kuma/static/js/components/page-load-actions.js b/kuma/static/js/components/page-load-actions.js
@@ -11,7 +11,12 @@ window.addEventListener('load', function() {
         var id = hash.substr(1);
         var elem = document.getElementById(id);
         if (elem) {
-            mdn.utils.scrollToHeading(id);
+            /* Firefox ignores whatever value is passed to
+               `scroll` if called immediately on `load`, so,
+               wait for 60ms before calling the function */
+            setTimeout(function() {
+                mdn.utils.scrollToHeading(id);
+            }, 60);
         }
     }
 });
diff --git a/kuma/static/js/utils/utils.js b/kuma/static/js/utils/utils.js
@@ -1,4 +1,6 @@
 window.mdn.utils = {
+    isTocSticky: false,
+    tocHeight: 0,
     /**
      * From the jQuery source:
      * Get document-relative position by adding viewport scroll
@@ -12,7 +14,9 @@ window.mdn.utils = {
         /* Get the window object associated with the
            top-level document object for this node */
         var elemDocumentWindow = elem.ownerDocument.defaultView;
-        return boundingClientRect.top + elemDocumentWindow.pageYOffset;
+        var top = boundingClientRect.top;
+        var yOffset = parseInt(elemDocumentWindow.pageYOffset, 10);
+        return top + yOffset;
     },
     /**
      * Generate and returns a random string thanks to:
@@ -43,15 +47,30 @@ window.mdn.utils = {
      */
     scrollToHeading: function(id) {
         'use strict';
+        var toc = document.getElementById('toc');
+
+        // if page has a TOC,
+        if (toc !== undefined) {
+            // get and store the `offsetHeight`
+            this.tocHeight = toc.offsetHeight;
+            // and its sticky status
+            this.isTocSticky = getComputedStyle(toc).position === 'sticky';
+        }
+
         var heading = document.getElementById(id);
         var headingTop = mdn.utils.getOffsetTop(heading);
-        var toc = document.getElementById('toc');
-        var tocHeight = toc.offsetHeight;
-        var scrollY = headingTop - tocHeight;
+        var scrollY = 0;
+
+        // if the toc is sticky
+        if (toc && this.isTocSticky) {
+            scrollY = headingTop - this.tocHeight;
+        } else {
+            scrollY = headingTop;
+        }
 
         // update hash
         window.location.hash = id;
         // scroll to heading
-        window.scroll(0, scrollY);
+        window.scroll(0, parseInt(scrollY, 10));
     }
 };
diff --git a/kuma/static/js/wiki-toc.js b/kuma/static/js/wiki-toc.js
@@ -188,12 +188,6 @@
             // underline current section
             countDownToUnderline();
         });
-
-        if(window.location.hash) {
-            var thisHash = window.location.hash;
-            var headingId = thisHash.replace(/^#/, '');
-            mdn.utils.scrollToHeading(headingId);
-        }
     }
 
     if(win.matchMedia(breakpoint).matches === true) {