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

Handle some cases when JavaScript is disabled (#614) 

* feat(theme/index): Assume the sidebar is initially visible

In case the inline script does not execute, the fallback is to show the sidebar.

* feat(theme/index): Hide sidebar toggle and theme selector buttons when JavaScript is disabled

Makes no sense to show them in this case since they do not work.
This commit is contained in:
Sorin Davidoi 2018-02-18 08:05:15 +01:00 committed by Michael Bryan
parent 6af77a7792
commit 8a00a004d8
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/theme/index.hbs
View File

@ -1,5 +1,5 @@
<!DOCTYPE HTML>
<html lang="{{ language }}">
<html lang="{{ language }}" class="sidebar-visible">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
@ -41,6 +41,14 @@
}
</script>
<noscript>
<style type="text/css">
.javascript-only {
display: none;
}
</style>
</noscript>
</head>
<body class="light">
<!-- Work around some values being stored in localStorage wrapped in quotes -->
@ -70,12 +78,14 @@
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var html = document.querySelector('html');
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
}
document.querySelector('html').classList.add("sidebar-" + sidebar);
html.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
@ -88,7 +98,7 @@
{{> header}}
<div id="menu-bar" class="menu-bar">
<div id="menu-bar-sticky-container">
<div class="left-buttons">
<div class="left-buttons javascript-only">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</button>