Skip to content

Commit bc402e2

Browse files
Auto-commit by GitHub Actions
1 parent de3fc7e commit bc402e2

21 files changed

+2312
-10
lines changed

docs/_images/bcc-henkan.mp4

6.6 MB
Binary file not shown.
7.31 MB
Binary file not shown.

docs/_images/soushin-block.mp4

3.98 MB
Binary file not shown.
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
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+
*/
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+
*/
29+
function 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+
*/
89+
function 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+
101+
document.addEventListener("DOMContentLoaded", ready, false);

docs/_sphinx_design_static/sphinx-design.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/_static/design-tabs.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
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+
*/
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+
*/
29+
function 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+
*/
89+
function 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+
101+
document.addEventListener("DOMContentLoaded", ready, false);

docs/_static/sphinx-design.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
6.6 MB
Binary file not shown.
Binary file not shown.
3.98 MB
Binary file not shown.

0 commit comments

Comments
 (0)