jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix sidebar animation and other behavior

Browse source 
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 `<body>` to `<html>`, 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
`<html>` to `<body>` 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.
This commit is contained in:
Eric Huss 2025-07-14 14:24:32 -07:00
parent 0ac89dd826
commit c842b5d06e
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/front-end/css/general.css
View file

@ -86,11 +86,12 @@ h6:target::before {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--bg); background-color: var(--bg);
} }
.no-js .page-wrapper, html:not(.js) .page-wrapper,
.js:not(.sidebar-resizing) .page-wrapper { .js:not(.sidebar-resizing) .page-wrapper {
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ 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 */ transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
} }

11
src/front-end/js/book.js
View file

@ -515,7 +515,6 @@ aria-label="Show hidden lines"></button>';
})(); })();
(function sidebar() { (function sidebar() {
const body = document.querySelector('body');
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
const sidebarLinks = document.querySelectorAll('#sidebar a'); const sidebarLinks = document.querySelectorAll('#sidebar a');
const sidebarToggleButton = document.getElementById('sidebar-toggle'); const sidebarToggleButton = document.getElementById('sidebar-toggle');
@ -548,7 +547,7 @@ aria-label="Show hidden lines"></button>';
}); });
function showSidebar() { function showSidebar() {
body.classList.add('sidebar-visible'); document.documentElement.classList.add('sidebar-visible');
Array.from(sidebarLinks).forEach(function(link) { Array.from(sidebarLinks).forEach(function(link) {
link.setAttribute('tabIndex', 0); link.setAttribute('tabIndex', 0);
}); });
@ -562,7 +561,7 @@ aria-label="Show hidden lines"></button>';
} }
function hideSidebar() { function hideSidebar() {
body.classList.remove('sidebar-visible'); document.documentElement.classList.remove('sidebar-visible');
Array.from(sidebarLinks).forEach(function(link) { Array.from(sidebarLinks).forEach(function(link) {
link.setAttribute('tabIndex', -1); link.setAttribute('tabIndex', -1);
}); });
@ -594,14 +593,14 @@ aria-label="Show hidden lines"></button>';
function initResize() { function initResize() {
window.addEventListener('mousemove', resize, false); window.addEventListener('mousemove', resize, false);
window.addEventListener('mouseup', stopResize, false); window.addEventListener('mouseup', stopResize, false);
body.classList.add('sidebar-resizing'); document.documentElement.classList.add('sidebar-resizing');
} }
function resize(e) { function resize(e) {
let pos = e.clientX - sidebar.offsetLeft; let pos = e.clientX - sidebar.offsetLeft;
if (pos < 20) { if (pos < 20) {
hideSidebar(); hideSidebar();
} else { } else {
if (!body.classList.contains('sidebar-visible')) { if (!document.documentElement.classList.contains('sidebar-visible')) {
showSidebar(); showSidebar();
} }
pos = Math.min(pos, window.innerWidth - 100); pos = Math.min(pos, window.innerWidth - 100);
@ -610,7 +609,7 @@ aria-label="Show hidden lines"></button>';
} }
//on mouseup remove windows functions mousemove & mouseup //on mouseup remove windows functions mousemove & mouseup
function stopResize() { function stopResize() {
body.classList.remove('sidebar-resizing'); document.documentElement.classList.remove('sidebar-resizing');
window.removeEventListener('mousemove', resize, false); window.removeEventListener('mousemove', resize, false);
window.removeEventListener('mouseup', stopResize, false); window.removeEventListener('mouseup', stopResize, false);
} }