From c18b31f0885517f300d2fed44b2d47732ca71ca3 Mon Sep 17 00:00:00 2001 From: gabalafou Date: Fri, 24 Jan 2025 11:23:25 -0600 Subject: [PATCH] BUG - stop using Scrollspy --- .../assets/scripts/pydata-sphinx-theme.js | 51 +++++++++++-------- .../assets/styles/components/_toc-inpage.scss | 3 +- .../components/page-toc.html | 2 +- .../theme/pydata_sphinx_theme/layout.html | 10 ++-- 4 files changed, 37 insertions(+), 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 index ea01bb7b5..02a78c8a8 100644 --- 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 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 index b4d416494..fd3629dbb 100644 --- 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 index 1a5b02582..c3feb6a97 100644 --- 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"> {{ _('On this page') }} -