From c842b5d06e43b5dc016c3830cf39a9250d4857ad Mon Sep 17 00:00:00 2001 From: Eric Huss Date: Mon, 14 Jul 2025 14:24:32 -0700 Subject: [PATCH] Fix sidebar animation and other behavior This fixes several issues with how the sidebar was behaving: - Manually resizing the sidebar was incorrectly applying transition animations to the page-wrapper causing awkward movement. - Clicking the sidebar toggle caused the menu bar to behave differently compared to loading a page with the sidebar visible or hidden. - page-wrapper animation wasn't working when JS was disabled. - RTL sidebar animation was broken. Most of these issues stem from https://github.com/rust-lang/mdBook/pull/2454 which moved `js` and `sidebar-visible` classes from `` to ``, but failed to update some of the JS and CSS code that was still assuming it was on the body. https://github.com/rust-lang/mdBook/pull/1641 previously moved `js` from `` to `` with the reasoning "This will be necessary for using CSS selectors on root attributes.". However, I don't see how that is absolutely necessary, since selectors like `[dir=rtl].js` should work to select the root element. --- src/front-end/css/general.css | 5 +++-- src/front-end/js/book.js | 11 +++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/front-end/css/general.css b/src/front-end/css/general.css index 9946cfc01a..9121c6f590 100644 --- a/src/front-end/css/general.css +++ b/src/front-end/css/general.css @@ -86,11 +86,12 @@ h6:target::before { box-sizing: border-box; background-color: var(--bg); } -.no-js .page-wrapper, +html:not(.js) .page-wrapper, .js:not(.sidebar-resizing) .page-wrapper { transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ } -[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper { +[dir=rtl]:not(.js) .page-wrapper, +[dir=rtl].js:not(.sidebar-resizing) .page-wrapper { transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */ } diff --git a/src/front-end/js/book.js b/src/front-end/js/book.js index 46bbacf353..de8219fdc2 100644 --- a/src/front-end/js/book.js +++ b/src/front-end/js/book.js @@ -515,7 +515,6 @@ aria-label="Show hidden lines">'; })(); (function sidebar() { - const body = document.querySelector('body'); const sidebar = document.getElementById('sidebar'); const sidebarLinks = document.querySelectorAll('#sidebar a'); const sidebarToggleButton = document.getElementById('sidebar-toggle'); @@ -548,7 +547,7 @@ aria-label="Show hidden lines">'; }); function showSidebar() { - body.classList.add('sidebar-visible'); + document.documentElement.classList.add('sidebar-visible'); Array.from(sidebarLinks).forEach(function(link) { link.setAttribute('tabIndex', 0); }); @@ -562,7 +561,7 @@ aria-label="Show hidden lines">'; } function hideSidebar() { - body.classList.remove('sidebar-visible'); + document.documentElement.classList.remove('sidebar-visible'); Array.from(sidebarLinks).forEach(function(link) { link.setAttribute('tabIndex', -1); }); @@ -594,14 +593,14 @@ aria-label="Show hidden lines">'; function initResize() { window.addEventListener('mousemove', resize, false); window.addEventListener('mouseup', stopResize, false); - body.classList.add('sidebar-resizing'); + document.documentElement.classList.add('sidebar-resizing'); } function resize(e) { let pos = e.clientX - sidebar.offsetLeft; if (pos < 20) { hideSidebar(); } else { - if (!body.classList.contains('sidebar-visible')) { + if (!document.documentElement.classList.contains('sidebar-visible')) { showSidebar(); } pos = Math.min(pos, window.innerWidth - 100); @@ -610,7 +609,7 @@ aria-label="Show hidden lines">'; } //on mouseup remove windows functions mousemove & mouseup function stopResize() { - body.classList.remove('sidebar-resizing'); + document.documentElement.classList.remove('sidebar-resizing'); window.removeEventListener('mousemove', resize, false); window.removeEventListener('mouseup', stopResize, false); }