From 53fc58c7900243e6dd2d73903e4b635ff0b27f58 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Wed, 15 May 2024 11:58:40 +0200 Subject: [PATCH 1/3] toc - update active link in toc before expanding toc expansion is controled by `toc-expand` and computed on client side once at initialization and then at scrolling. It is based on links in the toc that are active. Default is first link to be the active one. When no scrolling (body content height smaller than window height), we need to update the active link to be last section seen on screen, and do this before we expand the toc. --- src/resources/formats/html/quarto.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/resources/formats/html/quarto.js b/src/resources/formats/html/quarto.js index 11803b02a70..afaefcf435f 100644 --- a/src/resources/formats/html/quarto.js +++ b/src/resources/formats/html/quarto.js @@ -134,8 +134,10 @@ window.document.addEventListener("DOMContentLoaded", function (_event) { window.innerHeight + window.pageYOffset >= window.document.body.offsetHeight ) { + // This is the no-scroll case where last section should be the active one sectionIndex = 0; } else { + // This finds the last section visible on screen that should be made active sectionIndex = [...sections].reverse().findIndex((section) => { if (section) { return window.pageYOffset >= section.offsetTop - sectionMargin; @@ -739,6 +741,7 @@ window.document.addEventListener("DOMContentLoaded", function (_event) { // Process the collapse state if this is an UL if (el.tagName === "UL") { if (tocOpenDepth === -1 && depth > 1) { + // toc-expand: false el.classList.add("collapse"); } else if ( depth <= tocOpenDepth || @@ -757,10 +760,9 @@ window.document.addEventListener("DOMContentLoaded", function (_event) { }; // walk the TOC and expand / collapse any items that should be shown - if (tocEl) { - walk(tocEl, 0); updateActiveLink(); + walk(tocEl, 0); } // Throttle the scroll event and walk peridiocally From 3e0f3a58e0c2a2d5bf2818b02ebdc3380db3ca68 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Wed, 15 May 2024 11:59:38 +0200 Subject: [PATCH 2/3] toc - also expand the toc after a resize In case resize leads to no scroll bar, the toc should be expanded to show all the content. --- src/resources/formats/html/quarto.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/resources/formats/html/quarto.js b/src/resources/formats/html/quarto.js index afaefcf435f..260f0af417b 100644 --- a/src/resources/formats/html/quarto.js +++ b/src/resources/formats/html/quarto.js @@ -781,6 +781,10 @@ window.document.addEventListener("DOMContentLoaded", function (_event) { window.addEventListener( "resize", throttle(() => { + if (tocEl) { + updateActiveLink(); + walk(tocEl, 0); + } if (!isReaderMode()) { hideOverlappedSidebars(); } From 675e6cd10eab66fe14e0dfacac22f420a5cadef2 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Wed, 15 May 2024 14:16:01 +0200 Subject: [PATCH 3/3] Add to changelog [skip ci] --- news/changelog-1.5.md | 1 + 1 file changed, 1 insertion(+) diff --git a/news/changelog-1.5.md b/news/changelog-1.5.md index 110f73a47b7..cb8e6a4bfb6 100644 --- a/news/changelog-1.5.md +++ b/news/changelog-1.5.md @@ -11,6 +11,7 @@ All changes included in 1.5: - ([#9125](https://github.com/quarto-dev/quarto-cli/issues/9125)): Fix issue in browser console with TOC selection when the document is using ids for headers with specific characters (e.g russian language headers). - ([#9539](https://github.com/quarto-dev/quarto-cli/issues/9539)): Improve SCSS of title blocks to avoid overwide columns in grid layout. - Improve accessibility `role` for `aria-expandable` elements by ensuring their role supports the `aria-expanded` attribute. +- ([#3178](https://github.com/quarto-dev/quarto-cli/issues/3178)): TOC now correctly expands when web page has no content to scroll to. ## PDF Format