4bd714b7be
* Fixed broken nested callout maxHeight calculation * Implemented grid-based callout collapsible
27 lines
1 KiB
TypeScript
27 lines
1 KiB
TypeScript
function toggleCallout(this: HTMLElement) {
|
|
const outerBlock = this.parentElement!
|
|
outerBlock.classList.toggle("is-collapsed")
|
|
const content = outerBlock.getElementsByClassName("callout-content")[0] as HTMLElement
|
|
if (!content) return
|
|
const collapsed = outerBlock.classList.contains("is-collapsed")
|
|
content.style.gridTemplateRows = collapsed ? "0fr" : "1fr"
|
|
}
|
|
|
|
function setupCallout() {
|
|
const collapsible = document.getElementsByClassName(
|
|
`callout is-collapsible`,
|
|
) as HTMLCollectionOf<HTMLElement>
|
|
for (const div of collapsible) {
|
|
const title = div.getElementsByClassName("callout-title")[0] as HTMLElement
|
|
const content = div.getElementsByClassName("callout-content")[0] as HTMLElement
|
|
if (!title || !content) continue
|
|
|
|
title.addEventListener("click", toggleCallout)
|
|
window.addCleanup(() => title.removeEventListener("click", toggleCallout))
|
|
|
|
const collapsed = div.classList.contains("is-collapsed")
|
|
content.style.gridTemplateRows = collapsed ? "0fr" : "1fr"
|
|
}
|
|
}
|
|
|
|
document.addEventListener("nav", setupCallout)
|