quartz-research-note/quartz/components/scripts/callout.inline.ts

45 lines
1.4 KiB
TypeScript
Raw Normal View History

2023-06-17 20:08:06 +00:00
function toggleCallout(this: HTMLElement) {
const outerBlock = this.parentElement!
2024-02-05 10:45:36 +00:00
outerBlock.classList.toggle("is-collapsed")
const collapsed = outerBlock.classList.contains("is-collapsed")
2023-06-17 20:08:06 +00:00
const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight
2024-02-05 10:45:36 +00:00
outerBlock.style.maxHeight = height + "px"
2023-08-12 17:33:57 +00:00
// walk and adjust height of all parents
let current = outerBlock
let parent = outerBlock.parentElement
while (parent) {
2024-02-05 10:45:36 +00:00
if (!parent.classList.contains("callout")) {
2023-08-12 17:33:57 +00:00
return
}
2024-02-05 10:45:36 +00:00
const collapsed = parent.classList.contains("is-collapsed")
2023-08-12 17:33:57 +00:00
const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight
2024-02-05 10:45:36 +00:00
parent.style.maxHeight = height + "px"
2023-08-12 17:33:57 +00:00
current = parent
parent = parent.parentElement
}
2023-06-17 20:08:06 +00:00
}
2023-06-17 21:36:06 +00:00
function setupCallout() {
2023-07-23 00:27:41 +00:00
const collapsible = document.getElementsByClassName(
`callout is-collapsible`,
) as HTMLCollectionOf<HTMLElement>
2023-06-17 20:08:06 +00:00
for (const div of collapsible) {
const title = div.firstElementChild
2023-06-17 21:36:06 +00:00
if (title) {
2024-02-05 10:45:36 +00:00
title.addEventListener("click", toggleCallout)
window.addCleanup(() => title.removeEventListener("click", toggleCallout))
2023-06-17 21:36:06 +00:00
2024-02-05 10:45:36 +00:00
const collapsed = div.classList.contains("is-collapsed")
2023-06-17 21:36:06 +00:00
const height = collapsed ? title.scrollHeight : div.scrollHeight
2024-02-05 10:45:36 +00:00
div.style.maxHeight = height + "px"
2023-06-17 21:36:06 +00:00
}
2023-06-17 20:08:06 +00:00
}
2023-06-17 21:36:06 +00:00
}
2024-02-05 10:45:36 +00:00
document.addEventListener("nav", setupCallout)
window.addEventListener("resize", setupCallout)