-import * as DOM from "../services/dom";
-import {scrollAndHighlightElement} from "../services/util";
-import {Component} from "./component";
+import * as DOM from '../services/dom';
+import {scrollAndHighlightElement} from '../services/util';
+import {Component} from './component';
+
+function toggleAnchorHighlighting(elementId, shouldHighlight) {
+ DOM.forEach(`#page-navigation a[href="#${elementId}"]`, anchor => {
+ anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
+ });
+}
+
+function headingVisibilityChange(entries) {
+ for (const entry of entries) {
+ const isVisible = (entry.intersectionRatio === 1);
+ toggleAnchorHighlighting(entry.target.id, isVisible);
+ }
+}
+
+function addNavObserver(headings) {
+ // Setup the intersection observer.
+ const intersectOpts = {
+ rootMargin: '0px 0px 0px 0px',
+ threshold: 1.0,
+ };
+ const pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
+
+ // observe each heading
+ for (const heading of headings) {
+ pageNavObserver.observe(heading);
+ }
+}