Skip to content

Commit 1088066

Browse files
crawfxrdehuss
crawfxrd
authored and
ehuss
committed
Move sidebar, js classes from html to body element
This will be necessary for using CSS selectors on root attributes. Signed-off-by: Tim Crawford <crawfxrd@gmail.com>
1 parent 73d4450 commit 1088066

File tree

2 files changed

+18
-17
lines changed

2 files changed

+18
-17
lines changed

‎src/theme/book.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -441,16 +441,16 @@ function playground_text(playground, hidden = true) {
441441
})();
442442

443443
(function sidebar() {
444-
var html = document.querySelector("html");
444+
var body = document.querySelector("body");
445445
var sidebar = document.getElementById("sidebar");
446446
var sidebarLinks = document.querySelectorAll('#sidebar a');
447447
var sidebarToggleButton = document.getElementById("sidebar-toggle");
448448
var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
449449
var firstContact = null;
450450

451451
function showSidebar() {
452-
html.classList.remove('sidebar-hidden')
453-
html.classList.add('sidebar-visible');
452+
body.classList.remove('sidebar-hidden')
453+
body.classList.add('sidebar-visible');
454454
Array.from(sidebarLinks).forEach(function (link) {
455455
link.setAttribute('tabIndex', 0);
456456
});
@@ -471,8 +471,8 @@ function playground_text(playground, hidden = true) {
471471
});
472472

473473
function hideSidebar() {
474-
html.classList.remove('sidebar-visible')
475-
html.classList.add('sidebar-hidden');
474+
body.classList.remove('sidebar-visible')
475+
body.classList.add('sidebar-hidden');
476476
Array.from(sidebarLinks).forEach(function (link) {
477477
link.setAttribute('tabIndex', -1);
478478
});
@@ -483,14 +483,14 @@ function playground_text(playground, hidden = true) {
483483

484484
// Toggle sidebar
485485
sidebarToggleButton.addEventListener('click', function sidebarToggle() {
486-
if (html.classList.contains("sidebar-hidden")) {
486+
if (body.classList.contains("sidebar-hidden")) {
487487
var current_width = parseInt(
488488
document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
489489
if (current_width < 150) {
490490
document.documentElement.style.setProperty('--sidebar-width', '150px');
491491
}
492492
showSidebar();
493-
} else if (html.classList.contains("sidebar-visible")) {
493+
} else if (body.classList.contains("sidebar-visible")) {
494494
hideSidebar();
495495
} else {
496496
if (getComputedStyle(sidebar)['transform'] === 'none') {
@@ -506,14 +506,14 @@ function playground_text(playground, hidden = true) {
506506
function initResize(e) {
507507
window.addEventListener('mousemove', resize, false);
508508
window.addEventListener('mouseup', stopResize, false);
509-
html.classList.add('sidebar-resizing');
509+
body.classList.add('sidebar-resizing');
510510
}
511511
function resize(e) {
512512
var pos = (e.clientX - sidebar.offsetLeft);
513513
if (pos < 20) {
514514
hideSidebar();
515515
} else {
516-
if (html.classList.contains("sidebar-hidden")) {
516+
if (body.classList.contains("sidebar-hidden")) {
517517
showSidebar();
518518
}
519519
pos = Math.min(pos, window.innerWidth - 100);
@@ -522,7 +522,7 @@ function playground_text(playground, hidden = true) {
522522
}
523523
//on mouseup remove windows functions mousemove & mouseup
524524
function stopResize(e) {
525-
html.classList.remove('sidebar-resizing');
525+
body.classList.remove('sidebar-resizing');
526526
window.removeEventListener('mousemove', resize, false);
527527
window.removeEventListener('mouseup', stopResize, false);
528528
}

‎src/theme/index.hbs‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE HTML>
2-
<html lang="{{ language }}" class="sidebar-visible no-js {{ default_theme }}">
2+
<html lang="{{ language }}" class="{{ default_theme }}">
33
<head>
44
<!-- Book generated using mdBook -->
55
<meta charset="UTF-8">
@@ -53,7 +53,7 @@
5353
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
5454
{{/if}}
5555
</head>
56-
<body>
56+
<body class="sidebar-visible no-js">
5757
<div id="body-container">
5858
<!-- Provide site root to javascript -->
5959
<script>
@@ -83,17 +83,18 @@
8383
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
8484
if (theme === null || theme === undefined) { theme = default_theme; }
8585
var html = document.querySelector('html');
86-
html.classList.remove('no-js')
8786
html.classList.remove('{{ default_theme }}')
8887
html.classList.add(theme);
89-
html.classList.add('js');
88+
var body = document.querySelector('body');
89+
body.classList.remove('no-js')
90+
body.classList.add('js');
9091
</script>
9192

9293
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
9394

9495
<!-- Hide / unhide sidebar before it is displayed -->
9596
<script>
96-
var html = document.querySelector('html');
97+
var body = document.querySelector('body');
9798
var sidebar = null;
9899
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
99100
if (document.body.clientWidth >= 1080) {
@@ -103,8 +104,8 @@
103104
sidebar = 'hidden';
104105
}
105106
sidebar_toggle.checked = sidebar === 'visible';
106-
html.classList.remove('sidebar-visible');
107-
html.classList.add("sidebar-" + sidebar);
107+
body.classList.remove('sidebar-visible');
108+
body.classList.add("sidebar-" + sidebar);
108109
</script>
109110

110111
<nav id="sidebar" class="sidebar" aria-label="Table of contents">

0 commit comments

Comments
 (0)