From c8955eb8187c6b1dee678c8ea030a16edbf89a2e Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Fri, 31 Dec 2021 15:01:41 -0800 Subject: [PATCH 1/9] FIX: Left scroll JS proper selector --- src/pydata_sphinx_theme/assets/scripts/index.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index 6eff70ce7..193544f6a 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -33,7 +33,8 @@ function addTOCInteractivity() { // Navigation sidebar scrolling to active page function scrollToActive() { - var sidebar = document.getElementById("bd-docs-nav"); + var sidebar = document.querySelector("div.bd-sidebar"); + var sidebarNav = document.getElementById("bd-docs-nav"); // Remember the sidebar scroll position between page loads // Inspired on source of revealjs.com @@ -45,7 +46,7 @@ function scrollToActive() { if (!isNaN(storedScrollTop)) { sidebar.scrollTop = storedScrollTop; } else { - var active_pages = sidebar.querySelectorAll(".active"); + var active_pages = sidebarNav.querySelectorAll(".active"); var offset = 0; var i; for (i = active_pages.length - 1; i > 0; i--) { @@ -68,7 +69,7 @@ function scrollToActive() { }); } -$(document).ready(() => { - scrollToActive(); - addTOCInteractivity(); -}); +// This is equivalent to the .ready() function as described in +// https://api.jquery.com/ready/ +$(scrollToActive()); +$(addTOCInteractivity()); From 1f77274345a407fbf82f4588e6265384fc92fc03 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Mon, 3 Jan 2022 14:17:02 -0800 Subject: [PATCH 2/9] Simplify offset calculation for sidebar --- .../assets/scripts/index.js | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index 193544f6a..73cf0b51f 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -44,23 +44,19 @@ function scrollToActive() { ); if (!isNaN(storedScrollTop)) { + // If we've got a saved scroll position, just use that sidebar.scrollTop = storedScrollTop; } else { + // Otherwise, calculate a position to scroll to based on the lowest `active` link var active_pages = sidebarNav.querySelectorAll(".active"); - var offset = 0; - var i; - for (i = active_pages.length - 1; i > 0; i--) { - var active_page = active_pages[i]; - if (active_page !== undefined) { - offset += active_page.offsetTop; + if (active_pages.length > 0) { + // Use the last active page as the offset since it's the page we're on + var offset = active_pages[active_pages.length - 1].offsetTop; + // Only scroll the navbar if the active link is lower than 50% of the page + if (offset > sidebar.clientHeight * 0.5) { + sidebar.scrollTop = offset - sidebar.clientHeight * 0.2; } } - offset -= sidebar.offsetTop; - - // Only scroll the navbar if the active link is lower than 50% of the page - if (active_page !== undefined && offset > sidebar.clientHeight * 0.5) { - sidebar.scrollTop = offset - sidebar.clientHeight * 0.2; - } } // Store the sidebar scroll position From 8ef7370affae98620627c3527034c71757c4e203 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Tue, 11 Jan 2022 07:03:31 -0800 Subject: [PATCH 3/9] Clientrect for sidebar scroll --- src/pydata_sphinx_theme/assets/scripts/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index 73cf0b51f..f5909d945 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -46,15 +46,20 @@ function scrollToActive() { if (!isNaN(storedScrollTop)) { // If we've got a saved scroll position, just use that sidebar.scrollTop = storedScrollTop; + console.log("[PST]: Scrolled sidebar using stored browser position..."); } else { // Otherwise, calculate a position to scroll to based on the lowest `active` link var active_pages = sidebarNav.querySelectorAll(".active"); if (active_pages.length > 0) { // Use the last active page as the offset since it's the page we're on - var offset = active_pages[active_pages.length - 1].offsetTop; + var latest_active = active_pages[active_pages.length - 1]; + var offset = + latest_active.getBoundingClientRect().y - + sidebar.getBoundingClientRect().y; // Only scroll the navbar if the active link is lower than 50% of the page if (offset > sidebar.clientHeight * 0.5) { sidebar.scrollTop = offset - sidebar.clientHeight * 0.2; + console.log("[PST]: Scrolled sidebar using last active link..."); } } } From 17cc9f9decb3ec63b760d2808dc40f9e1591d5bd Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Tue, 11 Jan 2022 07:13:41 -0800 Subject: [PATCH 4/9] Slightly less active scroll buffer --- src/pydata_sphinx_theme/assets/scripts/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index f5909d945..a48ef30a4 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -34,7 +34,6 @@ function addTOCInteractivity() { // Navigation sidebar scrolling to active page function scrollToActive() { var sidebar = document.querySelector("div.bd-sidebar"); - var sidebarNav = document.getElementById("bd-docs-nav"); // Remember the sidebar scroll position between page loads // Inspired on source of revealjs.com @@ -49,7 +48,9 @@ function scrollToActive() { console.log("[PST]: Scrolled sidebar using stored browser position..."); } else { // Otherwise, calculate a position to scroll to based on the lowest `active` link + var sidebarNav = document.getElementById("bd-docs-nav"); var active_pages = sidebarNav.querySelectorAll(".active"); + debugger; if (active_pages.length > 0) { // Use the last active page as the offset since it's the page we're on var latest_active = active_pages[active_pages.length - 1]; @@ -58,7 +59,7 @@ function scrollToActive() { sidebar.getBoundingClientRect().y; // Only scroll the navbar if the active link is lower than 50% of the page if (offset > sidebar.clientHeight * 0.5) { - sidebar.scrollTop = offset - sidebar.clientHeight * 0.2; + sidebar.scrollTop = offset - sidebar.clientHeight * 0.1; console.log("[PST]: Scrolled sidebar using last active link..."); } } From 271939fbdb657aec769100c485a9ad93b7d88650 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Tue, 11 Jan 2022 07:17:19 -0800 Subject: [PATCH 5/9] Wrong scroll direction --- src/pydata_sphinx_theme/assets/scripts/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index a48ef30a4..82debd789 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -59,7 +59,7 @@ function scrollToActive() { sidebar.getBoundingClientRect().y; // Only scroll the navbar if the active link is lower than 50% of the page if (offset > sidebar.clientHeight * 0.5) { - sidebar.scrollTop = offset - sidebar.clientHeight * 0.1; + sidebar.scrollTop = offset - sidebar.clientHeight * 0.3; console.log("[PST]: Scrolled sidebar using last active link..."); } } From 3b85dfd48b9ee33ccf1b671a0d339d308d5a7cbd Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Tue, 11 Jan 2022 09:51:40 -0800 Subject: [PATCH 6/9] Update src/pydata_sphinx_theme/assets/scripts/index.js Co-authored-by: Damian Avila --- src/pydata_sphinx_theme/assets/scripts/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index 82debd789..a518c458a 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -50,7 +50,6 @@ function scrollToActive() { // Otherwise, calculate a position to scroll to based on the lowest `active` link var sidebarNav = document.getElementById("bd-docs-nav"); var active_pages = sidebarNav.querySelectorAll(".active"); - debugger; if (active_pages.length > 0) { // Use the last active page as the offset since it's the page we're on var latest_active = active_pages[active_pages.length - 1]; From ba72c5e881fc8d5dda2332590ad781221c721e1b Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 12 Jan 2022 11:31:33 -0800 Subject: [PATCH 7/9] Improve the scrolling behavior --- src/pydata_sphinx_theme/assets/scripts/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index a518c458a..2f72e1513 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -57,8 +57,9 @@ function scrollToActive() { latest_active.getBoundingClientRect().y - sidebar.getBoundingClientRect().y; // Only scroll the navbar if the active link is lower than 50% of the page - if (offset > sidebar.clientHeight * 0.5) { - sidebar.scrollTop = offset - sidebar.clientHeight * 0.3; + if (latest_active.getBoundingClientRect().y > (window.innerHeight * 0.5)) { + let buffer = 0.25; // Buffer so we have some space above the scrolled item + sidebar.scrollTop = offset - sidebar.clientHeight * buffer; console.log("[PST]: Scrolled sidebar using last active link..."); } } From 1f65d2f7715f11ebe28a09b63232f8ded600ce45 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 12 Jan 2022 11:33:36 -0800 Subject: [PATCH 8/9] Prettier --- src/pydata_sphinx_theme/assets/scripts/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index 2f72e1513..e01966840 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -57,8 +57,8 @@ function scrollToActive() { latest_active.getBoundingClientRect().y - sidebar.getBoundingClientRect().y; // Only scroll the navbar if the active link is lower than 50% of the page - if (latest_active.getBoundingClientRect().y > (window.innerHeight * 0.5)) { - let buffer = 0.25; // Buffer so we have some space above the scrolled item + if (latest_active.getBoundingClientRect().y > window.innerHeight * 0.5) { + let buffer = 0.25; // Buffer so we have some space above the scrolled item sidebar.scrollTop = offset - sidebar.clientHeight * buffer; console.log("[PST]: Scrolled sidebar using last active link..."); } From 714dd3bde7e046ac76c6baa834753982da1e5fe1 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 12 Jan 2022 11:58:11 -0800 Subject: [PATCH 9/9] Handler logic --- src/pydata_sphinx_theme/assets/scripts/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/scripts/index.js b/src/pydata_sphinx_theme/assets/scripts/index.js index e01966840..c3d8f2a20 100644 --- a/src/pydata_sphinx_theme/assets/scripts/index.js +++ b/src/pydata_sphinx_theme/assets/scripts/index.js @@ -73,5 +73,5 @@ function scrollToActive() { // This is equivalent to the .ready() function as described in // https://api.jquery.com/ready/ -$(scrollToActive()); -$(addTOCInteractivity()); +$(scrollToActive); +$(addTOCInteractivity);