diff options
author | Michael Howell <michael@notriddle.com> | 2024-11-06 14:56:49 -0700 |
---|---|---|
committer | Michael Howell <michael@notriddle.com> | 2024-11-06 15:47:12 -0700 |
commit | 68e3572278ff9d0b922f8bac4ec7d32632264dbd (patch) | |
tree | e089cf103b2e00133786d7d3c2450c7d40f3b09f | |
parent | 27ab7eb2f02ce111e7a15b3d587b5f26280e70ff (diff) |
Fix inadvertently broken folding behavior
-rw-r--r-- | src/theme/book.js | 11 | ||||
-rw-r--r-- | src/theme/index.hbs | 14 | ||||
-rw-r--r-- | src/theme/toc.js.hbs | 98 | ||||
-rw-r--r-- | tests/rendered_output.rs | 2 |
4 files changed, 65 insertions, 60 deletions
diff --git a/src/theme/book.js b/src/theme/book.js index 02b1908d..178f1e90 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -463,17 +463,6 @@ function playground_text(playground, hidden = true) { try { localStorage.setItem('mdbook-sidebar', 'visible'); } catch (e) { } } - - var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle'); - - function toggleSection(ev) { - ev.currentTarget.parentElement.classList.toggle('expanded'); - } - - Array.from(sidebarAnchorToggles).forEach(function (el) { - el.addEventListener('click', toggleSection); - }); - function hideSidebar() { body.classList.remove('sidebar-visible') body.classList.add('sidebar-hidden'); diff --git a/src/theme/index.hbs b/src/theme/index.hbs index b62b29e8..7775f262 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -52,15 +52,17 @@ <!-- MathJax --> <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> {{/if}} - </head> - <body> - <div id="body-container"> + <!-- Provide site root to javascript --> <script> var path_to_root = "{{ path_to_root }}"; var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}"; </script> - + <!-- Start loading toc.js asap --> + <script src="{{ path_to_root }}toc.js"></script> + </head> + <body> + <div id="body-container"> <!-- Work around some values being stored in localStorage wrapped in quotes --> <script> try { @@ -107,7 +109,7 @@ <nav id="sidebar" class="sidebar" aria-label="Table of contents"> <!-- populated by js --> - <div class="sidebar-scrollbox"></div> + <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox> <noscript> <iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe> </noscript> @@ -116,8 +118,6 @@ </div> </nav> - <script async src="{{ path_to_root }}toc.js"></script> - <div id="page-wrapper" class="page-wrapper"> <div class="page"> diff --git a/src/theme/toc.js.hbs b/src/theme/toc.js.hbs index eb48c8ba..7adf0c27 100644 --- a/src/theme/toc.js.hbs +++ b/src/theme/toc.js.hbs @@ -3,52 +3,68 @@ // This is a script, and not included directly in the page, to control the total size of the book. // The TOC contains an entry for each page, so if each page includes a copy of the TOC, // the total size of the page becomes O(n**2). -var sidebarScrollbox = document.querySelector("#sidebar .sidebar-scrollbox"); -sidebarScrollbox.innerHTML = '{{#toc}}{{/toc}}'; -(function() { - let current_page = document.location.href.toString(); - if (current_page.endsWith("/")) { - current_page += "index.html"; +class MDBookSidebarScrollbox extends HTMLElement { + constructor() { + super(); } - var links = sidebarScrollbox.querySelectorAll("a"); - var l = links.length; - for (var i = 0; i < l; ++i) { - var link = links[i]; - var href = link.getAttribute("href"); - if (href && !href.startsWith("#") && !/^(?:[a-z+]+:)?\/\//.test(href)) { - link.href = path_to_root + href; + connectedCallback() { + this.innerHTML = '{{#toc}}{{/toc}}'; + // Set the current, active page, and reveal it if it's hidden + let current_page = document.location.href.toString(); + if (current_page.endsWith("/")) { + current_page += "index.html"; } - // The "index" page is supposed to alias the first chapter in the book. - if (link.href === current_page || (i === 0 && path_to_root === "" && current_page.endsWith("/index.html"))) { - link.classList.add("active"); - var parent = link.parentElement; - while (parent) { - if (parent.tagName === "LI" && parent.previousElementSibling) { - if (parent.previousElementSibling.classList.contains("chapter-item")) { - parent.previousElementSibling.classList.add("expanded"); + var links = Array.prototype.slice.call(this.querySelectorAll("a")); + var l = links.length; + for (var i = 0; i < l; ++i) { + var link = links[i]; + var href = link.getAttribute("href"); + if (href && !href.startsWith("#") && !/^(?:[a-z+]+:)?\/\//.test(href)) { + link.href = path_to_root + href; + } + // The "index" page is supposed to alias the first chapter in the book. + if (link.href === current_page || (i === 0 && path_to_root === "" && current_page.endsWith("/index.html"))) { + link.classList.add("active"); + var parent = link.parentElement; + if (parent && parent.classList.contains("chapter-item")) { + parent.classList.add("expanded"); + } + while (parent) { + if (parent.tagName === "LI" && parent.previousElementSibling) { + if (parent.previousElementSibling.classList.contains("chapter-item")) { + parent.previousElementSibling.classList.add("expanded"); + } } + parent = parent.parentElement; } - parent = parent.parentElement; } } - } -})(); - -// Track and set sidebar scroll position -sidebarScrollbox.addEventListener('click', function(e) { - if (e.target.tagName === 'A') { - sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop); - } -}, { passive: true }); -var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll'); -sessionStorage.removeItem('sidebar-scroll'); -if (sidebarScrollTop) { - // preserve sidebar scroll position when navigating via links within sidebar - sidebarScrollbox.scrollTop = sidebarScrollTop; -} else { - // scroll sidebar to current active section when navigating via "next/previous chapter" buttons - var activeSection = document.querySelector('#sidebar .active'); - if (activeSection) { - activeSection.scrollIntoView({ block: 'center' }); + // Track and set sidebar scroll position + this.addEventListener('click', function(e) { + if (e.target.tagName === 'A') { + sessionStorage.setItem('sidebar-scroll', this.scrollTop); + } + }, { passive: true }); + var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll'); + sessionStorage.removeItem('sidebar-scroll'); + if (sidebarScrollTop) { + // preserve sidebar scroll position when navigating via links within sidebar + this.scrollTop = sidebarScrollTop; + } else { + // scroll sidebar to current active section when navigating via "next/previous chapter" buttons + var activeSection = document.querySelector('#sidebar .active'); + if (activeSection) { + activeSection.scrollIntoView({ block: 'center' }); + } + } + // Toggle buttons + var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle'); + function toggleSection(ev) { + ev.currentTarget.parentElement.classList.toggle('expanded'); + } + Array.from(sidebarAnchorToggles).forEach(function (el) { + el.addEventListener('click', toggleSection); + }); } } +window.customElements.define("mdbook-sidebar-scrollbox", MDBookSidebarScrollbox); diff --git a/tests/rendered_output.rs b/tests/rendered_output.rs index f5078a70..707b997d 100644 --- a/tests/rendered_output.rs +++ b/tests/rendered_output.rs @@ -243,7 +243,7 @@ fn toc_js_html() -> Result<Document> { let toc_path = temp.path().join("book").join("toc.js"); let html = fs::read_to_string(toc_path).with_context(|| "Unable to read index.html")?; for line in html.lines() { - if let Some(left) = line.strip_prefix("sidebarScrollbox.innerHTML = '") { + if let Some(left) = line.strip_prefix(" this.innerHTML = '") { if let Some(html) = left.strip_suffix("';") { return Ok(Document::from(html)); } |