BUG - stop using Scrollspy

pydata · Jan 24, 2025 · c18b31f · c18b31f
1 parent 7c54d4a
commit c18b31f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 29 deletions.
diff --git a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js b/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js
@@ -96,30 +96,39 @@ function addModeListener() {
 }
 
 /*******************************************************************************
- * TOC interactivity
+ * Right sidebar table of contents (TOC) interactivity
  */
+function setupPageTableOfContents() {
+  const pageToc = document.querySelector("#pst-page-toc-nav");
+  pageToc.addEventListener("click", (event) => {
+    if (!event.target.matches(".nav-link")) {
+      return;
+    }
+    const clickedLink = event.target;
 
-/**
- * TOC sidebar - add "active" class to parent list
- *
- * Bootstrap's scrollspy adds the active class to the <a> link,
- * but for the automatic collapsing we need this on the parent list item.
- *
- * The event is triggered on "window" (and not the nav item as documented),
- * see https://github.com/twbs/bootstrap/issues/20086
- */
-function addTOCInteractivity() {
-  window.addEventListener("activate.bs.scrollspy", function () {
-    const navLinks = document.querySelectorAll(".bd-toc-nav a");
-
-    navLinks.forEach((navLink) => {
-      navLink.parentElement.classList.remove("active");
+    // First, clear all the added classes and attributes
+    // -----
+    pageToc.querySelectorAll("a[aria-current]").forEach((el) => {
+      el.removeAttribute("aria-current");
     });
-
-    const activeNavLinks = document.querySelectorAll(".bd-toc-nav a.active");
-    activeNavLinks.forEach((navLink) => {
-      navLink.parentElement.classList.add("active");
+    pageToc.querySelectorAll(".active").forEach((el) => {
+      el.classList.remove("active");
     });
+
+    // Then add the classes and attributes to where they should go now
+    // -----
+    clickedLink.setAttribute("aria-current", "true");
+    clickedLink.classList.add("active");
+    // Find all parents (up to the TOC root) matching .toc-entry and add the
+    // active class. This activates style rules that expand the TOC when the
+    // user clicks a TOC entry that has nested entries.
+    let parentElement = clickedLink.parentElement;
+    while (parentElement && parentElement !== pageToc) {
+      if (parentElement.matches(".toc-entry")) {
+        parentElement.classList.add("active");
+      }
+      parentElement = parentElement.parentElement;
+    }
   });
 }
 
@@ -1020,7 +1029,7 @@ documentReady(fetchRevealBannersTogether);
 
 documentReady(addModeListener);
 documentReady(scrollToActive);
-documentReady(addTOCInteractivity);
+documentReady(setupPageTableOfContents);
 documentReady(setupSearchButtons);
 documentReady(setupSearchAsYouType);
 documentReady(setupMobileSidebarKeyboardHandlers);

diff --git a/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss b/src/pydata_sphinx_theme/assets/styles/components/_toc-inpage.scss
@@ -40,7 +40,8 @@ nav.page-toc {
 
     @include link-sidebar;
 
-    &.active {
+    &.active,
+    &[aria-current="true"] {
       @include link-sidebar-current;
 
       background-color: transparent;

diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html
@@ -7,7 +7,7 @@
     class="page-toc tocsection onthispage">
     <i class="fa-solid fa-list"></i> {{ _('On this page') }}
   </div>
-  <nav class="bd-toc-nav page-toc" aria-labelledby="{{ page_navigation_heading_id }}">
+  <nav id="pst-page-toc-nav" class="page-toc" aria-labelledby="{{ page_navigation_heading_id }}">
     {{ page_toc }}
   </nav>
 {%- endif %}
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html
@@ -48,15 +48,14 @@
   {% endif %}
 {%- endblock extrahead %}
 {% block body_tag %}
-  {# set up with scrollspy to update the toc as we scroll #}
-  {# ref: https://getbootstrap.com/docs/4.0/components/scrollspy/ #}
-  <body data-bs-spy="scroll" data-bs-target=".bd-toc-nav" data-offset="180" data-bs-root-margin="0px 0px -60%" data-default-mode="{{ default_mode }}">
+  <body data-default-mode="{{ default_mode }}">
+{%- endblock %}
 
+{% block header %}
   {# A button hidden by default to help assistive devices quickly jump to main content #}
   {# ref: https://www.youtube.com/watch?v=VUR0I5mqq7I #}
   <div id="pst-skip-link" class="skip-link d-print-none"><a href="#main-content">{{ _("Skip to main content") }}</a></div>
-
-{%- endblock %}
+{% endblock %}
 
 {%- block content %}
   {# A tiny helper pixel to detect if we've scrolled #}
@@ -148,7 +147,6 @@
   </footer>
 {%- endblock footer %}
 {# Silence the sidebars and relbars since we define our own #}
-{% block header %}{% endblock %}
 {% block relbar1 %}{% endblock %}
 {% block relbar2 %}{% endblock %}
 {% block sidebarsourcelink %}{% endblock %}