tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add collapseByDefault option to TableOfContents (closes #566)

Browse Source
This commit is contained in:
Jacky Zhao
2023-11-04 12:11:42 -07:00
parent a62a97c7ab
commit 101e9946bd
4 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
quartz/components/TableOfContents.tsx
View File

@ -20,7 +20,7 @@ function TableOfContents({ fileData, displayClass }: QuartzComponentProps) {
return (
<div class={`toc ${displayClass ?? ""}`}>
<button type="button" id="toc">
<button type="button" id="toc" class={fileData.collapseToc ? "collapsed" : ""}>
<h3>Table of Contents</h3>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -60,7 +60,7 @@ function LegacyTableOfContents({ fileData }: QuartzComponentProps) {
}
return (
<details id="toc" open>
<details id="toc" open={!fileData.collapseToc}>
<summary>
<h3>Table of Contents</h3>
</summary>

3
quartz/components/scripts/toc.inline.ts
View File

@ -24,8 +24,9 @@ function toggleToc(this: HTMLElement) {
function setupToc() {
const toc = document.getElementById("toc")
if (toc) {
const collapsed = toc.classList.contains("collapsed")
const content = toc.nextElementSibling as HTMLElement
content.style.maxHeight = content.scrollHeight + "px"
content.style.maxHeight = collapsed ? "0px" : content.scrollHeight + "px"
toc.removeEventListener("click", toggleToc)
toc.addEventListener("click", toggleToc)
}