|
try { |
|
var session = window.sessionStorage || {}; |
|
} catch (e) { |
|
var session = {}; |
|
} |
|
|
|
window.addEventListener("DOMContentLoaded", () => { |
|
const allTabs = document.querySelectorAll('.sphinx-tabs-tab'); |
|
const tabLists = document.querySelectorAll('[role="tablist"]'); |
|
|
|
allTabs.forEach(tab => { |
|
tab.addEventListener("click", changeTabs); |
|
}); |
|
|
|
tabLists.forEach(tabList => { |
|
tabList.addEventListener("keydown", keyTabs); |
|
}); |
|
|
|
|
|
const lastSelected = session.getItem('sphinx-tabs-last-selected'); |
|
if (lastSelected != null) selectNamedTabs(lastSelected); |
|
}); |
|
|
|
|
|
|
|
|
|
|
|
function keyTabs(e) { |
|
const tab = e.target; |
|
let nextTab = null; |
|
if (e.keyCode === 39 || e.keyCode === 37) { |
|
tab.setAttribute("tabindex", -1); |
|
|
|
if (e.keyCode === 39) { |
|
nextTab = tab.nextElementSibling; |
|
if (nextTab === null) { |
|
nextTab = tab.parentNode.firstElementChild; |
|
} |
|
|
|
} else if (e.keyCode === 37) { |
|
nextTab = tab.previousElementSibling; |
|
if (nextTab === null) { |
|
nextTab = tab.parentNode.lastElementChild; |
|
} |
|
} |
|
} |
|
|
|
if (nextTab !== null) { |
|
nextTab.setAttribute("tabindex", 0); |
|
nextTab.focus(); |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
function changeTabs(e) { |
|
|
|
const notSelected = this.getAttribute("aria-selected") === "false"; |
|
const positionBefore = this.parentNode.getBoundingClientRect().top; |
|
const notClosable = !this.parentNode.classList.contains("closeable"); |
|
|
|
deselectTabList(this); |
|
|
|
if (notSelected || notClosable) { |
|
selectTab(this); |
|
const name = this.getAttribute("name"); |
|
selectNamedTabs(name, this.id); |
|
|
|
if (this.classList.contains("group-tab")) { |
|
|
|
session.setItem('sphinx-tabs-last-selected', name); |
|
} |
|
} |
|
|
|
const positionAfter = this.parentNode.getBoundingClientRect().top; |
|
const positionDelta = positionAfter - positionBefore; |
|
|
|
window.scrollTo(0, window.scrollY + positionDelta); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
function selectTab(tab) { |
|
tab.setAttribute("aria-selected", true); |
|
|
|
|
|
document |
|
.getElementById(tab.getAttribute("aria-controls")) |
|
.removeAttribute("hidden"); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
function deselectTabList(tab) { |
|
const parent = tab.parentNode; |
|
const grandparent = parent.parentNode; |
|
|
|
Array.from(parent.children) |
|
.forEach(t => t.setAttribute("aria-selected", false)); |
|
|
|
Array.from(grandparent.children) |
|
.slice(1) |
|
.forEach(panel => panel.setAttribute("hidden", true)); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function selectNamedTabs(name, clickedId=null) { |
|
const groupedTabs = document.querySelectorAll(`.sphinx-tabs-tab[name="${name}"]`); |
|
const tabLists = Array.from(groupedTabs).map(tab => tab.parentNode); |
|
|
|
tabLists |
|
.forEach(tabList => { |
|
|
|
const clickedTab = tabList.querySelector(`[id="${clickedId}"]`); |
|
if (clickedTab === null ) { |
|
|
|
const tab = tabList.querySelector(`.sphinx-tabs-tab[name="${name}"]`); |
|
deselectTabList(tab); |
|
selectTab(tab); |
|
} |
|
}) |
|
} |
|
|
|
if (typeof exports === 'undefined') { |
|
exports = {}; |
|
} |
|
|
|
exports.keyTabs = keyTabs; |
|
exports.changeTabs = changeTabs; |
|
exports.selectTab = selectTab; |
|
exports.deselectTabList = deselectTabList; |
|
exports.selectNamedTabs = selectNamedTabs; |
|
|