- | 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