62 lines
2.4 KiB
JavaScript
62 lines
2.4 KiB
JavaScript
|
/**
|
||
|
|
* This script is used to add the functionality of collapsing/expanding all dropdowns
|
||
|
|
* on the page to the sphinx-design dropdowns. This is because some browsers cannot
|
||
|
|
* search into collapsed <details> (such as Firefox).
|
||
|
|
*
|
||
|
|
* The reason why the buttons are added to the page with JS (dynamic) instead of with
|
||
|
|
* sphinx (static) is that the button will not work without JS activated, so we do not
|
||
|
|
* want them to show up in that case.
|
||
|
|
*/
|
||
|
|
|
||
|
|
function addToggleAllButtons() {
|
||
|
|
// Get all sphinx-design dropdowns
|
||
|
|
const allDropdowns = document.querySelectorAll("details.sd-dropdown");
|
||
|
|
|
||
|
|
function collapseAll() {
|
||
|
|
// Function to collapse all dropdowns on the page
|
||
|
|
console.log("[SK] Collapsing all dropdowns...");
|
||
|
|
allDropdowns.forEach((dropdown) => {
|
||
|
|
dropdown.removeAttribute("open");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function expandAll() {
|
||
|
|
// Function to expand all dropdowns on the page
|
||
|
|
console.log("[SK] Expanding all dropdowns...");
|
||
|
|
allDropdowns.forEach((dropdown) => {
|
||
|
|
dropdown.setAttribute("open", "");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const buttonConfigs = new Map([
|
||
|
|
["up", { desc: "Collapse", action: collapseAll }],
|
||
|
|
["down", { desc: "Expand", action: expandAll }],
|
||
|
|
]);
|
||
|
|
|
||
|
|
allDropdowns.forEach((dropdown) => {
|
||
|
|
// Get the summary element of the dropdown, where we will place the buttons
|
||
|
|
const summaryTitle = dropdown.querySelector("summary.sd-summary-title");
|
||
|
|
for (const [direction, config] of buttonConfigs) {
|
||
|
|
// Button with icon inside
|
||
|
|
var newButton = document.createElement("button");
|
||
|
|
var newIcon = document.createElement("i");
|
||
|
|
newIcon.classList.add("fa-solid", `fa-angles-${direction}`);
|
||
|
|
newButton.appendChild(newIcon);
|
||
|
|
// Class for styling; `sd-summary-up/down` is implemented by sphinx-design;
|
||
|
|
// `sk-toggle-all` is implemented by us
|
||
|
|
newButton.classList.add(`sd-summary-${direction}`, `sk-toggle-all`);
|
||
|
|
// Bootstrap tooltip configurations
|
||
|
|
newButton.setAttribute("data-bs-toggle", "tooltip");
|
||
|
|
newButton.setAttribute("data-bs-placement", "top");
|
||
|
|
newButton.setAttribute("data-bs-offset", "0,10");
|
||
|
|
newButton.setAttribute("data-bs-title", `${config.desc} all dropdowns`);
|
||
|
|
// Assign the collapse/expand action to the button
|
||
|
|
newButton.onclick = config.action;
|
||
|
|
// Append the button to the summary element
|
||
|
|
summaryTitle.appendChild(newButton);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", addToggleAllButtons);
|