switch tabs when id and hash is used (#215)

When an ID is set on a block that is part of a tabbed group the tab
switching and scroll happens as it does when a user clicks on a tab.

Author: recrwplay

preview-src/drivers-tabs.adoc

@@ -8,10 +8,12 @@ GDS also uses tabs, but they have a different list of tab separators. Rather tha
 [.tabbed-example]
 ====
 [.include-with-macos]
+[[mac-os-bit]]
 ======
 Tab for macOS
 ======
 [.include-with-linux]
+[[linux-bit]]
 ======
 Tab for Linux
 ======
@@ -105,6 +107,7 @@ Note that this requires that Go modules are enabled.
 ======
 
 [.include-with-java]
+[[java-bit]]
 ======
 
 To use the Java driver, it is recommended employing a dependency manager, such as Maven or Gradle.

src/js/08-tabs-block.js

@@ -205,4 +205,23 @@ document.addEventListener('DOMContentLoaded', function () {
 
       parent.removeChild(originalTab)
     })
+
+  //
+  // Make active tab based on url hash
+  //
+  function decodeFragment (hash) {
+    return hash && (~hash.indexOf('%') ? decodeURIComponent(hash) : hash).slice(1)
+  }
+
+  var fragment, target, scrollTo
+  if ((fragment = decodeFragment(window.location.hash)) && (target = document.getElementById(fragment))) {
+    const langSelection = target.getAttribute('data-lang')
+    const tabbed = target.closest('.tabbed')
+    scrollTo = tabbed.querySelector(`[data-lang=${langSelection}]`)
+    if (scrollTo) {
+      switchTab({
+        target: scrollTo,
+      })
+    }
+  }
 })

src/js/12-fragment-jumper.js

@@ -24,14 +24,18 @@
       e.preventDefault()
     }
     var topOffset = toolbar ? toolbar.getBoundingClientRect().bottom : headerNavigationBar.getBoundingClientRect().bottom
-
+    var target = this
+    var tabs
+    if ((tabs = target.closest('.tabbed'))) {
+      target = tabs
+    }
     if (cheatSheet) {
       var scrollTarget = this.closest('div')
       var selectorsTop = document.querySelector('.nav-container .selectors').querySelector('div').getBoundingClientRect().top
       if (this.tagName === 'H3') topOffset = selectorsTop
       window.scrollTo(0, computePosition(scrollTarget, 0) - topOffset)
     } else {
-      window.scrollTo(0, computePosition(this, 0) - topOffset)
+      window.scrollTo(0, computePosition(target, 0) - topOffset)
     }
   }