fix header link, convert NodeList to Array to prevent #1273 (#1280)

Author: Justineo

themes/vue/source/css/_settings.styl

@@ -19,11 +19,14 @@ $info = #1C90F3
 
 $radius = 2px
 $content-padding-top = 30px
+
+// header settings
 $header-inner-height = 41px
 $heading-padding-vertical = 10px
 $header-height = $header-inner-height + $heading-padding-vertical * 2
 $mobile-header-height = 40px
-$heading-link-padding-top = $content-padding-top
-$mobile-heading-link-padding-top = $content-padding-top
+// prevent headers from being covered by the top nav upon navigation
+$heading-link-padding-top = $header-height + $content-padding-top
+$mobile-heading-link-padding-top = $mobile-header-height + $content-padding-top
 $h2-margin-top = 45px
 $h3-margin-top = 52px

themes/vue/source/css/page.styl

@@ -52,6 +52,10 @@
   h1
     margin: 0 0 1em
   h2, h3
+    pointer-events: none
+    a
+      pointer-events: auto
+      color: $dark
     &:before
       content: ""
       display: block
@@ -62,11 +66,9 @@
     margin: $h2-margin-top 0 .8em
     padding-bottom: .7em
     border-bottom: 1px solid $border
-    z-index: -1
   h3
     margin: $h3-margin-top 0 1.2em
     position: relative
-    z-index: -1
     &:after
       content: "#"
       color: $green

themes/vue/source/js/common.js

@@ -1,5 +1,4 @@
 (function () {
-
   initMobileMenu()
   if (PAGE_TYPE) {
     initVersionSelect()
@@ -26,7 +25,7 @@
       })
     }
 
-    function createSourceSearchPath(query) {
+    function createSourceSearchPath (query) {
       query = query
         .replace(/\([^\)]*?\)/g, '')
         .replace(/(Vue\.)(\w+)/g, '$1$2" OR "$2')
@@ -251,7 +250,7 @@
         }
       }
       if (last)
-      setActive(last.id, !hoveredOverSidebar)
+        setActive(last.id, !hoveredOverSidebar)
     }
 
     function makeLink (h) {
@@ -337,8 +336,17 @@
     function makeHeaderClickable (link) {
       var wrapper = link.querySelector('a')
       wrapper.setAttribute('data-scroll', '')
-      link.parentNode.insertBefore(wrapper, link)
-      wrapper.appendChild(link)
+
+      // transform DOM structure from
+      // `<h2><a></a>Header</a>` to <h2><a>Header</a></h2>`
+      // to make the link clickable
+      var nodes = Array.prototype.slice.call(link.childNodes)
+      for (var i = 0; i < nodes.length; i++) {
+        var node = nodes[i]
+        if (node !== wrapper) {
+          wrapper.appendChild(node)
+        }
+      }
     }
   }
 })()