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