| | |
| | | function toggleCallout(this: HTMLElement) { |
| | | const outerBlock = this.parentElement! |
| | | outerBlock.classList.toggle(`is-collapsed`) |
| | | const collapsed = outerBlock.classList.contains(`is-collapsed`) |
| | | outerBlock.classList.toggle("is-collapsed") |
| | | const collapsed = outerBlock.classList.contains("is-collapsed") |
| | | const height = collapsed ? this.scrollHeight : outerBlock.scrollHeight |
| | | outerBlock.style.maxHeight = height + `px` |
| | | outerBlock.style.maxHeight = height + "px" |
| | | |
| | | // walk and adjust height of all parents |
| | | let current = outerBlock |
| | | let parent = outerBlock.parentElement |
| | | while (parent) { |
| | | if (!parent.classList.contains(`callout`)) { |
| | | if (!parent.classList.contains("callout")) { |
| | | return |
| | | } |
| | | |
| | | const collapsed = parent.classList.contains(`is-collapsed`) |
| | | const collapsed = parent.classList.contains("is-collapsed") |
| | | const height = collapsed ? parent.scrollHeight : parent.scrollHeight + current.scrollHeight |
| | | parent.style.maxHeight = height + `px` |
| | | parent.style.maxHeight = height + "px" |
| | | |
| | | current = parent |
| | | parent = parent.parentElement |
| | |
| | | ) as HTMLCollectionOf<HTMLElement> |
| | | for (const div of collapsible) { |
| | | const title = div.firstElementChild |
| | | if (!title) continue |
| | | |
| | | if (title) { |
| | | title.removeEventListener(`click`, toggleCallout) |
| | | title.addEventListener(`click`, toggleCallout) |
| | | title.addEventListener("click", toggleCallout) |
| | | window.addCleanup(() => title.removeEventListener("click", toggleCallout)) |
| | | |
| | | const collapsed = div.classList.contains(`is-collapsed`) |
| | | const height = collapsed ? title.scrollHeight : div.scrollHeight |
| | | div.style.maxHeight = height + `px` |
| | | } |
| | | const collapsed = div.classList.contains("is-collapsed") |
| | | const height = collapsed ? title.scrollHeight : div.scrollHeight |
| | | div.style.maxHeight = height + "px" |
| | | } |
| | | } |
| | | |
| | | document.addEventListener(`nav`, setupCallout) |
| | | window.addEventListener(`resize`, setupCallout) |
| | | document.addEventListener("nav", setupCallout) |