Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import { useState, useEffect, useRef } from "react"
import * as ReactDOM from "react-dom"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars"
import { useTriggerWhenClickOutside } from "./hooks"
import { wrapInDiv } from "../clientUtils/Util"
import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes"
const TOC_WRAPPER_CLASSNAME = "toc-wrapper"
interface TableOfContentsData {
headings: { isSubheading: boolean; slug: string; text: string }[]
pageTitle: string
hideSubheadings?: boolean
}
const isRecordTopViewport = (record: IntersectionObserverEntry) => {
return (
record.rootBounds &&
record.boundingClientRect.top < record.rootBounds.height / 2
)
}
const getPreviousHeading = (
nextHeadingRecord: IntersectionObserverEntry | undefined,
previousHeadings: Array<{ slug: string; previous: string | null }>
) => {
return previousHeadings.find(
(heading) => heading.slug === nextHeadingRecord?.target.id
)?.previous
}
export const TableOfContents = ({
headings,
pageTitle,
hideSubheadings,
}: TableOfContentsData) => {
const [isToggled, setIsToggled] = useState(false)
const [isSticky, setIsSticky] = useState(false)
const [activeHeading, setActiveHeading] = useState("")
const tocRef = useRef<HTMLElement>(null)
const stickySentinelRef = useRef<HTMLDivElement>(null)
const toggle = () => {
setIsToggled(!isToggled)
}
useTriggerWhenClickOutside(tocRef, isToggled, setIsToggled)
useEffect(() => {
if ("IntersectionObserver" in window) {
// Sets up an intersection observer to notify when the element with the class
// `.sticky-sentinel` becomes visible/invisible at the top of the viewport.
// Inspired by https://developers.google.com/web/updates/2017/09/sticky-headers
const observer = new IntersectionObserver((records) => {
for (const record of records) {
const targetInfo = record.boundingClientRect
// Started sticking
if (targetInfo.top < 0) {
setIsSticky(true)
}
// Stopped sticking
if (targetInfo.bottom > 0) {
setIsSticky(false)
}
}
})
if (stickySentinelRef.current) {
observer.observe(stickySentinelRef.current)
}
}
}, [])
useEffect(() => {
if ("IntersectionObserver" in window) {
const previousHeadings = headings.map((heading, i) => ({
slug: heading.slug,
previous: i > 0 ? headings[i - 1].slug : null,
}))
let currentHeadingRecord: IntersectionObserverEntry | undefined
let init = true
const observer = new IntersectionObserver(
(records) => {
let nextHeadingRecord: IntersectionObserverEntry | undefined
// Target headings going down
currentHeadingRecord = records.find(
(record) =>
// filter out records no longer intersecting (triggering on exit)
record.isIntersecting &&
// filter out records fully in the page (upcoming section)
record.intersectionRatio !== 1 &&
// filter out intersections happening at the bottom of the viewport
isRecordTopViewport(record)
)
if (currentHeadingRecord) {
setActiveHeading(currentHeadingRecord.target.id)
} else {
// Target headings going up
nextHeadingRecord = records.find(
(record) =>
isRecordTopViewport(record) &&
record.intersectionRatio === 1
)
if (nextHeadingRecord) {
setActiveHeading(
getPreviousHeading(
nextHeadingRecord,
previousHeadings
) || ""
)
} else if (init) {
currentHeadingRecord = records
.reverse()
.find(
(record) =>
record.boundingClientRect.top < 0
)
setActiveHeading(
currentHeadingRecord?.target.id || ""
)
}
}
init = false
},
{
rootMargin: "-10px", // 10px offset to trigger intersection when landing exactly at the border when clicking an anchor
threshold: new Array(11).fill(0).map((v, i) => i / 10),
}
)
let contentHeadings = null
if (hideSubheadings) {
contentHeadings = document.querySelectorAll("h2")
} else {
contentHeadings = document.querySelectorAll("h2, h3")
}
contentHeadings.forEach((contentHeading) => {
observer.observe(contentHeading)
})
}
}, [])
return (
<div className={TOC_WRAPPER_CLASSNAME}>
<aside
className={`entry-sidebar${isToggled ? " toggled" : ""}${
isSticky ? " sticky" : ""
}`}
ref={tocRef}
>
<div className="sticky-sentinel" ref={stickySentinelRef} />
<nav className="entry-toc">
<ul>
<li>
<a
onClick={() => {
toggle()
setActiveHeading("")
}}
href="#"
data-track-note="toc-header"
>
{pageTitle}
</a>
</li>
{headings
.filter((heading) =>
hideSubheadings && heading.isSubheading
? false
: true
)
.map((heading, i: number) => (
<li
key={i}
className={
(heading.isSubheading
? "subsection"
: "section") +
(heading.slug === activeHeading
? " active"
: "")
}
>
<a
onClick={toggle}
href={`#${heading.slug}`}
data-track-note="toc-link"
>
{heading.text}
</a>
</li>
))}
</ul>
</nav>
<div className="toggle-toc">
<button
data-track-note="page-toggle-toc"
aria-label={`${
isToggled ? "Close" : "Open"
} table of contents`}
onClick={toggle}
>
<FontAwesomeIcon icon={isToggled ? faTimes : faBars} />
<span className="label">
{isToggled ? "Close" : "Contents"}
</span>
</button>
</div>
</aside>
</div>
)
}
export const runTableOfContents = (tocData: TableOfContentsData) => {
const tocWrapperEl = document.querySelector<HTMLElement>(
`.${TOC_WRAPPER_CLASSNAME}`
)
if (!tocWrapperEl) return
const sidebarRootEl = wrapInDiv(tocWrapperEl, ["sidebar-root"])
ReactDOM.hydrate(<TableOfContents {...tocData} />, sidebarRootEl)
}
|