docs/utils/webpack/src/js/tabDeepAnchor.js

76 lines
2.3 KiB
JavaScript

// Get the parent matching a selector of a given element.
function getParents(elem, selector) {
// Element.matches() polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i = matches.length;
while (--i >= 0 && matches.item(i) !== this) {}
return i > -1;
};
}
// Set up a parent array
var parents = [];
// Push each parent element to the array
for ( ; elem && elem !== document; elem = elem.parentNode ) {
if (selector) {
if (elem.matches(selector)) {
parents.push(elem);
}
continue;
}
parents.push(elem);
}
// Return our parent array
return parents;
};
// Update the anchor link if the anchor is inside a tab
// The updated link will create a query string with the name of the tab.
function tabDeepLink(anchorName){
var anchorCollection = document.getElementsByClassName(anchorName);
if(anchorCollection.length == 0){
return
}
for (let i = 0; i < anchorCollection.length; i++) {
anchor = anchorCollection[i];
parentTab = getParents(anchor, ".tab-pane")
// If the anchor is inside a tab, update the link
if(parentTab.length == 1){
tabID = parentTab[0].id.replace("-pane", "");
link = '?tab=' + tabID + anchor.hash;
anchor.setAttribute('href', link);
anchor.setAttribute('id', (tabID + anchor.hash));
}
}
}
// Click the tab found in the query string to make it active.
function openTab(){
var urlParams = new URLSearchParams(window.location.search);
if(urlParams.get('tab')){
tabID = urlParams.get('tab')
document.getElementById(tabID).click();
document.getElementById(tabID + location.hash).scrollIntoView();
}
}
window.onload = tabDeepLink("anchor-link");
window.onload = tabDeepLink("lnlinks");
window.onload = openTab();