+ | documentHeight | ${documentHeight.toFixed(1)} |
+ | windowHeight | ${windowHeight.toFixed(1)} |
+ | scrollTop | ${scrollTop.toFixed(1)} |
+ | pixelsAbove | ${pixelsAbove.toFixed(1)} |
+ | pixelsBelow | ${pixelsBelow.toFixed(1)} |
+ | bottomAdd | ${bottomAdd.toFixed(1)} |
+ | adjustedBottomAdd | ${adjustedBottomAdd.toFixed(1)} |
+ | scrollingDown | ${scrollingDown} |
+ | threshold | ${threshold.toFixed(1)} |
+
+ `;
+ drawDebugLine();
+ }
+
+ lastKnownScrollPosition = scrollTop;
+ }
+
+ function drawDebugLine() {
+ if (!document.body) {
+ return;
+ }
+ const id = 'mdbook-threshold-debug-line';
+ const existingLine = document.getElementById(id);
+ if (existingLine) {
+ existingLine.remove();
+ }
+ const line = document.createElement('div');
+ line.id = id;
+ line.style.cssText = `
+ position: fixed;
+ top: ${threshold}px;
+ left: 0;
+ width: 100vw;
+ height: 2px;
+ background-color: red;
+ z-index: 9999;
+ pointer-events: none;
+ `;
+ document.body.appendChild(line);
+ }
+
+ function mdbookEnableThresholdDebug() {
+ thresholdDebug = true;
+ updateThreshold();
+ drawDebugLine();
+ }
+
+ window.mdbookEnableThresholdDebug = mdbookEnableThresholdDebug;
+
+ // Updates which headers in the sidebar should be expanded. If the current
+ // header is inside a collapsed group, then it, and all its parents should
+ // be expanded.
+ function updateHeaderExpanded(currentA) {
+ // Add expanded to all header-item li ancestors.
+ let current = currentA.parentElement;
+ while (current) {
+ if (current.tagName === 'LI' && current.classList.contains('header-item')) {
+ current.classList.add('expanded');
+ }
+ current = current.parentElement;
+ }
+ }
+
+ // Updates which header is marked as the "current" header in the sidebar.
+ // This is done with a virtual Y threshold, where headers at or below
+ // that line will be considered the current one.
+ function updateCurrentHeader() {
+ if (!headers || !headers.length) {
+ return;
+ }
+
+ // Reset the classes, which will be rebuilt below.
+ const els = document.getElementsByClassName('current-header');
+ for (const el of els) {
+ el.classList.remove('current-header');
+ }
+ for (const toggle of headerToggles) {
+ toggle.classList.remove('expanded');
+ }
+
+ // Find the last header that is above the threshold.
+ let lastHeader = null;
+ for (const header of headers) {
+ const rect = header.getBoundingClientRect();
+ if (rect.top <= threshold) {
+ lastHeader = header;
+ } else {
+ break;
+ }
+ }
+ if (lastHeader === null) {
+ lastHeader = headers[0];
+ const rect = lastHeader.getBoundingClientRect();
+ const windowHeight = window.innerHeight;
+ if (rect.top >= windowHeight) {
+ return;
+ }
+ }
+
+ // Get the anchor in the summary.
+ const href = '#' + lastHeader.id;
+ const a = [...document.querySelectorAll('.header-in-summary')]
+ .find(element => element.getAttribute('href') === href);
+ if (!a) {
+ return;
+ }
+
+ a.classList.add('current-header');
+
+ updateHeaderExpanded(a);
+ }
+
+ // Updates which header is "current" based on the threshold line.
+ function reloadCurrentHeader() {
+ if (disableScroll) {
+ return;
+ }
+ updateThreshold();
+ updateCurrentHeader();
+ }
+
+
+ // When clicking on a header in the sidebar, this adjusts the threshold so
+ // that it is located next to the header. This is so that header becomes
+ // "current".
+ function headerThresholdClick(event) {
+ // See disableScroll description why this is done.
+ disableScroll = true;
+ setTimeout(() => {
+ disableScroll = false;
+ }, 100);
+ // requestAnimationFrame is used to delay the update of the "current"
+ // header until after the scroll is done, and the header is in the new
+ // position.
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ // Closest is needed because if it has child elements like