// Set the default state for sections on page load
|
const is_collapsed = true;
|
|
// Inject styles programmatically
|
const style = document.createElement("style");
|
style.textContent = `
|
.collapsible-content {
|
display: ${is_collapsed ? "none" : "block"};
|
}
|
.collapsible-header {
|
cursor: pointer;
|
position: relative;
|
}
|
.toc button {
|
margin-top: 1.5em;
|
border-radius: 5px;
|
background: none;
|
border: 1px solid #aaa;
|
outline: none;
|
box-shadow: none;
|
cursor: pointer;
|
padding: 3px 10px;
|
}
|
.toc button:hover {
|
color: var(--color-yellow-120);
|
}
|
.onprem-highlight {
|
display: block!important;
|
font-weight: 400;
|
margin: 1em 0 0 0;
|
font-size: 1rem;
|
}
|
`;
|
|
document.head.appendChild(style);
|
|
function onDOMReady() {
|
const headers = document.querySelectorAll(".content-markdown h2");
|
const toggleButtons = document.querySelectorAll(".release-note-toggle");
|
|
// Process each h2 header
|
headers.forEach((header) => {
|
const expandedByDefault = header.classList.contains("expanded-by-default");
|
const initialState = expandedByDefault
|
? "expanded"
|
: is_collapsed
|
? "collapsed"
|
: "expanded";
|
|
header.classList.add("collapsible-header", initialState);
|
|
let content = header.nextElementSibling;
|
let nextHeader = getNextHeaderOrSibling(header);
|
|
// Set initial state for content elements
|
while (content && content !== nextHeader) {
|
content.classList.add("collapsible-content");
|
content.style.display = initialState === "expanded" ? "block" : "none";
|
content = content.nextElementSibling;
|
}
|
|
// Attach click event listener to toggle content display
|
header.addEventListener("click", () => {
|
let sibling = header.nextElementSibling;
|
let nextSibling = getNextHeaderOrSibling(header);
|
while (sibling && sibling !== nextSibling) {
|
toggleCollapse(header, sibling);
|
sibling = sibling.nextElementSibling;
|
}
|
});
|
});
|
|
toggleButtons.forEach((button) =>
|
button.addEventListener("click", (e) => {
|
let header = e.target.parentElement.querySelector("h2");
|
let sibling = header.nextElementSibling;
|
let nextSibling = getNextHeaderOrSibling(header);
|
while (sibling && sibling !== nextSibling) {
|
toggleCollapse(header, sibling);
|
sibling = sibling.nextElementSibling;
|
}
|
})
|
);
|
|
// Process hash links
|
if (location.hash) {
|
const header = document.querySelector(location.hash);
|
if (header.tagName === "H2") {
|
let sibling = header.nextElementSibling;
|
let nextSibling = getNextHeaderOrSibling(header);
|
while (sibling && sibling !== nextSibling) {
|
openCollapse(header, sibling);
|
sibling = sibling.nextElementSibling;
|
}
|
} else {
|
let previousHeader = getPreviousSibling(header, "h2");
|
if (previousHeader) {
|
let sibling = previousHeader.nextElementSibling;
|
let nextSibling = getNextHeaderOrSibling(previousHeader);
|
while (sibling && sibling !== nextSibling) {
|
openCollapse(previousHeader, sibling);
|
sibling = sibling.nextElementSibling;
|
}
|
}
|
}
|
}
|
|
window.addEventListener("hashchange", () => {
|
const header = document.querySelector(location.hash);
|
if (header.tagName === "H2") {
|
let sibling = header.nextElementSibling;
|
let nextSibling = getNextHeaderOrSibling(header);
|
while (sibling && sibling !== nextSibling) {
|
openCollapse(header, sibling);
|
sibling = sibling.nextElementSibling;
|
}
|
}
|
});
|
|
// Create and configure Collapse/Expand button
|
const collapseExpandBtn = document.createElement("button");
|
collapseExpandBtn.textContent = is_collapsed ? "Expand All" : "Collapse All";
|
const toc = document.querySelector(".content-grid .toc");
|
toc?.appendChild(collapseExpandBtn);
|
let allExpanded = !is_collapsed;
|
collapseExpandBtn.addEventListener("click", () => {
|
if (allExpanded) {
|
collapseExpandBtn.textContent = "Expand All";
|
} else {
|
collapseExpandBtn.textContent = "Collapse All";
|
}
|
allExpanded = !allExpanded;
|
|
// Toggle content display based on button state
|
headers.forEach((header) => {
|
let sibling = header.nextElementSibling;
|
let nextSibling = getNextHeaderOrSibling(header);
|
while (sibling && sibling !== nextSibling) {
|
if (allExpanded) {
|
sibling.style.display = "block";
|
header.classList.remove("collapsed");
|
header.classList.add("expanded");
|
} else {
|
sibling.style.display = "none";
|
header.classList.remove("expanded");
|
header.classList.add("collapsed");
|
}
|
sibling = sibling.nextElementSibling;
|
}
|
});
|
});
|
|
expandSpecificSectionByDefault();
|
} // onDOMReady
|
|
function openCollapse(header, content) {
|
content.style.display = "block";
|
header.classList.remove("collapsed");
|
header.classList.add("expanded");
|
}
|
|
// Toggle content display and header state
|
function toggleCollapse(header, content) {
|
if (content.style.display === "none") {
|
content.style.display = "block";
|
header.classList.remove("collapsed");
|
header.classList.add("expanded");
|
} else {
|
content.style.display = "none";
|
header.classList.remove("expanded");
|
header.classList.add("collapsed");
|
}
|
}
|
|
// Get the next h2 header or sibling element
|
function getNextHeaderOrSibling(element) {
|
while (
|
element.nextElementSibling &&
|
element.nextElementSibling.tagName !== "H2"
|
) {
|
element = element.nextElementSibling;
|
}
|
return element.nextElementSibling;
|
}
|
|
function getPreviousSibling(elem, selector) {
|
// Get the next sibling element
|
var sibling = elem.previousElementSibling;
|
|
// If there's no selector, return the first sibling
|
if (!selector) return sibling;
|
|
// If the sibling matches our selector, use it
|
// If not, jump to the next sibling and continue the loop
|
while (sibling) {
|
if (sibling.matches(selector)) return sibling;
|
sibling = sibling.previousElementSibling;
|
}
|
}
|
|
// Expand the second section (with the first release)
|
function expandSpecificSectionByDefault() {
|
// Select the first h2 element and add the "expanded-by-default" class
|
const header = document.querySelector(".content-markdown h2:nth-of-type(2)");
|
if (header) {
|
if (header.tagName === "H2") {
|
let sibling = header.nextElementSibling;
|
let nextSibling = getNextHeaderOrSibling(header);
|
while (sibling && sibling !== nextSibling) {
|
openCollapse(header, sibling);
|
sibling = sibling.nextElementSibling;
|
}
|
}
|
}
|
}
|
|
// Initialize the script
|
if (document.readyState === "loading") {
|
document.addEventListener("DOMContentLoaded", onDOMReady);
|
} else {
|
onDOMReady();
|
}
|
