actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Tim Crawford 2021-03-16 23:21:40 -06:00 committed by Eric Huss
parent 73d44503fd
commit 1088066c69
2 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/theme/book.js
View File

@ -441,7 +441,7 @@ function playground_text(playground, hidden = true) {
})(); })();
(function sidebar() { (function sidebar() {
var html = document.querySelector("html"); var body = document.querySelector("body");
var sidebar = document.getElementById("sidebar"); var sidebar = document.getElementById("sidebar");
var sidebarLinks = document.querySelectorAll('#sidebar a'); var sidebarLinks = document.querySelectorAll('#sidebar a');
var sidebarToggleButton = document.getElementById("sidebar-toggle"); var sidebarToggleButton = document.getElementById("sidebar-toggle");
@ -449,8 +449,8 @@ function playground_text(playground, hidden = true) {
var firstContact = null; var firstContact = null;
function showSidebar() { function showSidebar() {
html.classList.remove('sidebar-hidden') body.classList.remove('sidebar-hidden')
html.classList.add('sidebar-visible'); body.classList.add('sidebar-visible');
Array.from(sidebarLinks).forEach(function (link) { Array.from(sidebarLinks).forEach(function (link) {
link.setAttribute('tabIndex', 0); link.setAttribute('tabIndex', 0);
}); });
@ -471,8 +471,8 @@ function playground_text(playground, hidden = true) {
}); });
function hideSidebar() { function hideSidebar() {
html.classList.remove('sidebar-visible') body.classList.remove('sidebar-visible')
html.classList.add('sidebar-hidden'); body.classList.add('sidebar-hidden');
Array.from(sidebarLinks).forEach(function (link) { Array.from(sidebarLinks).forEach(function (link) {
link.setAttribute('tabIndex', -1); link.setAttribute('tabIndex', -1);
}); });
@ -483,14 +483,14 @@ function playground_text(playground, hidden = true) {
// Toggle sidebar // Toggle sidebar
sidebarToggleButton.addEventListener('click', function sidebarToggle() { sidebarToggleButton.addEventListener('click', function sidebarToggle() {
if (html.classList.contains("sidebar-hidden")) { if (body.classList.contains("sidebar-hidden")) {
var current_width = parseInt( var current_width = parseInt(
document.documentElement.style.getPropertyValue('--sidebar-width'), 10); document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
if (current_width < 150) { if (current_width < 150) {
document.documentElement.style.setProperty('--sidebar-width', '150px'); document.documentElement.style.setProperty('--sidebar-width', '150px');
} }
showSidebar(); showSidebar();
} else if (html.classList.contains("sidebar-visible")) { } else if (body.classList.contains("sidebar-visible")) {
hideSidebar(); hideSidebar();
} else { } else {
if (getComputedStyle(sidebar)['transform'] === 'none') { if (getComputedStyle(sidebar)['transform'] === 'none') {
@ -506,14 +506,14 @@ function playground_text(playground, hidden = true) {
function initResize(e) { function initResize(e) {
window.addEventListener('mousemove', resize, false); window.addEventListener('mousemove', resize, false);
window.addEventListener('mouseup', stopResize, false); window.addEventListener('mouseup', stopResize, false);
html.classList.add('sidebar-resizing'); body.classList.add('sidebar-resizing');
} }
function resize(e) { function resize(e) {
var pos = (e.clientX - sidebar.offsetLeft); var pos = (e.clientX - sidebar.offsetLeft);
if (pos < 20) { if (pos < 20) {
hideSidebar(); hideSidebar();
} else { } else {
if (html.classList.contains("sidebar-hidden")) { if (body.classList.contains("sidebar-hidden")) {
showSidebar(); showSidebar();
} }
pos = Math.min(pos, window.innerWidth - 100); pos = Math.min(pos, window.innerWidth - 100);
@ -522,7 +522,7 @@ function playground_text(playground, hidden = true) {
} }
//on mouseup remove windows functions mousemove & mouseup //on mouseup remove windows functions mousemove & mouseup
function stopResize(e) { function stopResize(e) {
html.classList.remove('sidebar-resizing'); body.classList.remove('sidebar-resizing');
window.removeEventListener('mousemove', resize, false); window.removeEventListener('mousemove', resize, false);
window.removeEventListener('mouseup', stopResize, false); window.removeEventListener('mouseup', stopResize, false);
} }

15
src/theme/index.hbs
View File

@ -1,5 +1,5 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html lang="{{ language }}" class="sidebar-visible no-js {{ default_theme }}"> <html lang="{{ language }}" class="{{ default_theme }}">
<head> <head>
<!-- Book generated using mdBook --> <!-- Book generated using mdBook -->
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -53,7 +53,7 @@
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
{{/if}} {{/if}}
</head> </head>
<body> <body class="sidebar-visible no-js">
<div id="body-container"> <div id="body-container">
<!-- Provide site root to javascript --> <!-- Provide site root to javascript -->
<script> <script>
@ -83,17 +83,18 @@
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; } if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html'); var html = document.querySelector('html');
html.classList.remove('no-js')
html.classList.remove('{{ default_theme }}') html.classList.remove('{{ default_theme }}')
html.classList.add(theme); html.classList.add(theme);
html.classList.add('js'); var body = document.querySelector('body');
body.classList.remove('no-js')
body.classList.add('js');
</script> </script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden"> <input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed --> <!-- Hide / unhide sidebar before it is displayed -->
<script> <script>
var html = document.querySelector('html'); var body = document.querySelector('body');
var sidebar = null; var sidebar = null;
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor"); var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) { if (document.body.clientWidth >= 1080) {
@ -103,8 +104,8 @@
sidebar = 'hidden'; sidebar = 'hidden';
} }
sidebar_toggle.checked = sidebar === 'visible'; sidebar_toggle.checked = sidebar === 'visible';
html.classList.remove('sidebar-visible'); body.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar); body.classList.add("sidebar-" + sidebar);
</script> </script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents"> <nav id="sidebar" class="sidebar" aria-label="Table of contents">