git.iko.soy/searx
on gh-pages help sign in
searx/_static/tabs.js
145 lines 4.2 kB history raw
1try {
2 var session = window.sessionStorage || {};
3} catch (e) {
4 var session = {};
5}
7window.addEventListener("DOMContentLoaded", () => {
8 const allTabs = document.querySelectorAll('.sphinx-tabs-tab');
9 const tabLists = document.querySelectorAll('[role="tablist"]');
11 allTabs.forEach(tab => {
12 tab.addEventListener("click", changeTabs);
13 });
15 tabLists.forEach(tabList => {
16 tabList.addEventListener("keydown", keyTabs);
17 });
19 // Restore group tab selection from session
20 const lastSelected = session.getItem('sphinx-tabs-last-selected');
21 if (lastSelected != null) selectNamedTabs(lastSelected);
22});
24/**
25 * Key focus left and right between sibling elements using arrows
26 * @param {Node} e the element in focus when key was pressed
27 */
28function keyTabs(e) {
29 const tab = e.target;
30 let nextTab = null;
31 if (e.keyCode === 39 || e.keyCode === 37) {
32 tab.setAttribute("tabindex", -1);
33 // Move right
34 if (e.keyCode === 39) {
35 nextTab = tab.nextElementSibling;
36 if (nextTab === null) {
37 nextTab = tab.parentNode.firstElementChild;
38 }
39 // Move left
40 } else if (e.keyCode === 37) {
41 nextTab = tab.previousElementSibling;
42 if (nextTab === null) {
43 nextTab = tab.parentNode.lastElementChild;
44 }
45 }
46 }
48 if (nextTab !== null) {
49 nextTab.setAttribute("tabindex", 0);
50 nextTab.focus();
51 }
54/**
55 * Select or deselect clicked tab. If a group tab
56 * is selected, also select tab in other tabLists.
57 * @param {Node} e the element that was clicked
58 */
59function changeTabs(e) {
60 // Use this instead of the element that was clicked, in case it's a child
61 const notSelected = this.getAttribute("aria-selected") === "false";
62 const positionBefore = this.parentNode.getBoundingClientRect().top;
63 const notClosable = !this.parentNode.classList.contains("closeable");
65 deselectTabList(this);
67 if (notSelected || notClosable) {
68 selectTab(this);
69 const name = this.getAttribute("name");
70 selectNamedTabs(name, this.id);
72 if (this.classList.contains("group-tab")) {
73 // Persist during session
74 session.setItem('sphinx-tabs-last-selected', name);
75 }
76 }
78 const positionAfter = this.parentNode.getBoundingClientRect().top;
79 const positionDelta = positionAfter - positionBefore;
80 // Scroll to offset content resizing
81 window.scrollTo(0, window.scrollY + positionDelta);
84/**
85 * Select tab and show associated panel.
86 * @param {Node} tab tab to select
87 */
88function selectTab(tab) {
89 tab.setAttribute("aria-selected", true);
91 // Show the associated panel
92 document
93 .getElementById(tab.getAttribute("aria-controls"))
94 .removeAttribute("hidden");
97/**
98 * Hide the panels associated with all tabs within the
99 * tablist containing this tab.
100 * @param {Node} tab a tab within the tablist to deselect
101 */
102function deselectTabList(tab) {
103 const parent = tab.parentNode;
104 const grandparent = parent.parentNode;
106 Array.from(parent.children)
107 .forEach(t => t.setAttribute("aria-selected", false));
109 Array.from(grandparent.children)
110 .slice(1) // Skip tablist
111 .forEach(panel => panel.setAttribute("hidden", true));
114/**
115 * Select grouped tabs with the same name, but no the tab
116 * with the given id.
117 * @param {Node} name name of grouped tab to be selected
118 * @param {Node} clickedId id of clicked tab
119 */
120function selectNamedTabs(name, clickedId=null) {
121 const groupedTabs = document.querySelectorAll(`.sphinx-tabs-tab[name="${name}"]`);
122 const tabLists = Array.from(groupedTabs).map(tab => tab.parentNode);
124 tabLists
125 .forEach(tabList => {
126 // Don't want to change the tabList containing the clicked tab
127 const clickedTab = tabList.querySelector(`[id="${clickedId}"]`);
128 if (clickedTab === null ) {
129 // Select first tab with matching name
130 const tab = tabList.querySelector(`.sphinx-tabs-tab[name="${name}"]`);
131 deselectTabList(tab);
132 selectTab(tab);
133 }
134 })
137if (typeof exports === 'undefined') {
138 exports = {};
141exports.keyTabs = keyTabs;
142exports.changeTabs = changeTabs;
143exports.selectTab = selectTab;
144exports.deselectTabList = deselectTabList;
145exports.selectNamedTabs = selectNamedTabs;