https://docs.jax.dev/en/latest/_static/design-tabs.js?v=f930bc37

1// @ts-check
2
3// Extra JS capability for selected tabs to be synced
4// The selection is stored in local storage so that it persists across page loads.
5
6/**
7 * @type {Record<string, HTMLElement[]>}
8 */
9let sd_id_to_elements = {};
10const storageKeyPrefix = "sphinx-design-tab-id-";
11
12/**
13 * Create a key for a tab element.
14 * @param {HTMLElement} el - The tab element.
15 * @returns {[string, string, string] | null} - The key.
16 *
17 */
18function create_key(el) {
19  let syncId = el.getAttribute("data-sync-id");
20  let syncGroup = el.getAttribute("data-sync-group");
21  if (!syncId || !syncGroup) return null;
22  return [syncGroup, syncId, syncGroup + "--" + syncId];
23}
24
25/**
26 * Initialize the tab selection.
27 *
28 */
29function ready() {
30  // Find all tabs with sync data
31
32  /** @type {string[]} */
33  let groups = [];
34
35  document.querySelectorAll(".sd-tab-label").forEach((label) => {
36    if (label instanceof HTMLElement) {
37      let data = create_key(label);
38      if (data) {
39        let [group, id, key] = data;
40
41        // add click event listener
42        // @ts-ignore
43        label.onclick = onSDLabelClick;
44
45        // store map of key to elements
46        if (!sd_id_to_elements[key]) {
47          sd_id_to_elements[key] = [];
48        }
49        sd_id_to_elements[key].push(label);
50
51        if (groups.indexOf(group) === -1) {
52          groups.push(group);
53          // Check if a specific tab has been selected via URL parameter
54          const tabParam = new URLSearchParams(window.location.search).get(
55            group
56          );
57          if (tabParam) {
58            console.log(
59              "sphinx-design: Selecting tab id for group '" +
60                group +
61                "' from URL parameter: " +
62                tabParam
63            );
64            window.sessionStorage.setItem(storageKeyPrefix + group, tabParam);
65          }
66        }
67
68        // Check is a specific tab has been selected previously
69        let previousId = window.sessionStorage.getItem(
70          storageKeyPrefix + group
71        );
72        if (previousId === id) {
73          // console.log(
74          //   "sphinx-design: Selecting tab from session storage: " + id
75          // );
76          // @ts-ignore
77          label.previousElementSibling.checked = true;
78        }
79      }
80    }
81  });
82}
83
84/**
85 *  Activate other tabs with the same sync id.
86 *
87 * @this {HTMLElement} - The element that was clicked.
88 */
89function onSDLabelClick() {
90  let data = create_key(this);
91  if (!data) return;
92  let [group, id, key] = data;
93  for (const label of sd_id_to_elements[key]) {
94    if (label === this) continue;
95    // @ts-ignore
96    label.previousElementSibling.checked = true;
97  }
98  window.sessionStorage.setItem(storageKeyPrefix + group, id);
99}
100
101document.addEventListener("DOMContentLoaded", ready, false);