|
1 | | -var sd_labels_by_text = {}; |
| 1 | +// @ts-check |
2 | 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 | + */ |
| 9 | +let sd_id_to_elements = {}; |
| 10 | +const 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 | + */ |
| 18 | +function 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 | + */ |
3 | 29 | function ready() { |
4 | | - const li = document.getElementsByClassName("sd-tab-label"); |
5 | | - for (const label of li) { |
6 | | - syncId = label.getAttribute("data-sync-id"); |
7 | | - if (syncId) { |
8 | | - label.onclick = onSDLabelClick; |
9 | | - if (!sd_labels_by_text[syncId]) { |
10 | | - sd_labels_by_text[syncId] = []; |
| 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 | + } |
11 | 79 | } |
12 | | - sd_labels_by_text[syncId].push(label); |
13 | 80 | } |
14 | | - } |
| 81 | + }); |
15 | 82 | } |
16 | 83 |
|
| 84 | +/** |
| 85 | + * Activate other tabs with the same sync id. |
| 86 | + * |
| 87 | + * @this {HTMLElement} - The element that was clicked. |
| 88 | + */ |
17 | 89 | function onSDLabelClick() { |
18 | | - // Activate other inputs with the same sync id. |
19 | | - syncId = this.getAttribute("data-sync-id"); |
20 | | - for (label of sd_labels_by_text[syncId]) { |
| 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]) { |
21 | 94 | if (label === this) continue; |
| 95 | + // @ts-ignore |
22 | 96 | label.previousElementSibling.checked = true; |
23 | 97 | } |
24 | | - window.localStorage.setItem("sphinx-design-last-tab", syncId); |
| 98 | + window.sessionStorage.setItem(storageKeyPrefix + group, id); |
25 | 99 | } |
26 | 100 |
|
27 | 101 | document.addEventListener("DOMContentLoaded", ready, false); |
0 commit comments