File size: 4,231 Bytes
128403f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
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);
});
// Restore group tab selection from session
const lastSelected = session.getItem('sphinx-tabs-last-selected');
if (lastSelected != null) selectNamedTabs(lastSelected);
});
/**
* Key focus left and right between sibling elements using arrows
* @param {Node} e the element in focus when key was pressed
*/
function keyTabs(e) {
const tab = e.target;
let nextTab = null;
if (e.keyCode === 39 || e.keyCode === 37) {
tab.setAttribute("tabindex", -1);
// Move right
if (e.keyCode === 39) {
nextTab = tab.nextElementSibling;
if (nextTab === null) {
nextTab = tab.parentNode.firstElementChild;
}
// Move left
} else if (e.keyCode === 37) {
nextTab = tab.previousElementSibling;
if (nextTab === null) {
nextTab = tab.parentNode.lastElementChild;
}
}
}
if (nextTab !== null) {
nextTab.setAttribute("tabindex", 0);
nextTab.focus();
}
}
/**
* Select or deselect clicked tab. If a group tab
* is selected, also select tab in other tabLists.
* @param {Node} e the element that was clicked
*/
function changeTabs(e) {
// Use this instead of the element that was clicked, in case it's a child
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")) {
// Persist during session
session.setItem('sphinx-tabs-last-selected', name);
}
}
const positionAfter = this.parentNode.getBoundingClientRect().top;
const positionDelta = positionAfter - positionBefore;
// Scroll to offset content resizing
window.scrollTo(0, window.scrollY + positionDelta);
}
/**
* Select tab and show associated panel.
* @param {Node} tab tab to select
*/
function selectTab(tab) {
tab.setAttribute("aria-selected", true);
// Show the associated panel
document
.getElementById(tab.getAttribute("aria-controls"))
.removeAttribute("hidden");
}
/**
* Hide the panels associated with all tabs within the
* tablist containing this tab.
* @param {Node} tab a tab within the tablist to deselect
*/
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) // Skip tablist
.forEach(panel => panel.setAttribute("hidden", true));
}
/**
* Select grouped tabs with the same name, but no the tab
* with the given id.
* @param {Node} name name of grouped tab to be selected
* @param {Node} clickedId id of clicked tab
*/
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 => {
// Don't want to change the tabList containing the clicked tab
const clickedTab = tabList.querySelector(`[id="${clickedId}"]`);
if (clickedTab === null ) {
// Select first tab with matching name
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;
|