Skip to content

Commit

Permalink
switch tabs when id and hash is used (#215)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
recrwplay authored Feb 28, 2024
1 parent 620a709 commit 0d43844
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 2 deletions.
3 changes: 3 additions & 0 deletions preview-src/drivers-tabs.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -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
======
Expand Down Expand Up @@ -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.
Expand Down
19 changes: 19 additions & 0 deletions src/js/08-tabs-block.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
}
}
})
8 changes: 6 additions & 2 deletions src/js/12-fragment-jumper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
}

Expand Down

0 comments on commit 0d43844

Please sign in to comment.