diff options
Diffstat (limited to 'book/theme/index.hbs')
| -rw-r--r-- | book/theme/index.hbs | 105 |
1 files changed, 69 insertions, 36 deletions
diff --git a/book/theme/index.hbs b/book/theme/index.hbs index 6e0cce0a..ed27410f 100644 --- a/book/theme/index.hbs +++ b/book/theme/index.hbs @@ -15,7 +15,6 @@ <!-- Custom HTML head --> {{> head}} - <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta name="description" content="{{ description }}"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#ffffff" /> @@ -53,18 +52,19 @@ {{#if mathjax_support}} <!-- MathJax --> - <script async type="text/javascript" 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}} </head> <body> + <div id="body-container"> <!-- Provide site root to javascript --> - <script type="text/javascript"> + <script> var path_to_root = "{{ path_to_root }}"; var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "{{ preferred_dark_theme }}" : "{{ default_theme }}"; </script> <!-- Work around some values being stored in localStorage wrapped in quotes --> - <script type="text/javascript"> + <script> try { var theme = localStorage.getItem('mdbook-theme'); var sidebar = localStorage.getItem('mdbook-sidebar'); @@ -80,7 +80,7 @@ </script> <!-- Set the theme before any content is loaded, prevents flash --> - <script type="text/javascript"> + <script> var theme; try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { } if (theme === null || theme === undefined) { theme = default_theme; } @@ -92,12 +92,14 @@ </script> <!-- Hide / unhide sidebar before it is displayed --> - <script type="text/javascript"> + <script> var html = document.querySelector('html'); - var sidebar = 'hidden'; + var sidebar = null; if (document.body.clientWidth >= 1080) { try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { } sidebar = sidebar || 'visible'; + } else { + sidebar = 'hidden'; } html.classList.remove('sidebar-visible'); html.classList.add("sidebar-" + sidebar); @@ -110,12 +112,34 @@ <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div> </nav> + <!-- Track and set sidebar scroll position --> + <script> + var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox'); + sidebarScrollbox.addEventListener('click', function(e) { + if (e.target.tagName === 'A') { + sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop); + } + }, { passive: true }); + var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll'); + sessionStorage.removeItem('sidebar-scroll'); + if (sidebarScrollTop) { + // preserve sidebar scroll position when navigating via links within sidebar + sidebarScrollbox.scrollTop = sidebarScrollTop; + } else { + // scroll sidebar to current active section when navigating via "next/previous chapter" buttons + var activeSection = document.querySelector('#sidebar .active'); + if (activeSection) { + activeSection.scrollIntoView({ block: 'center' }); + } + } + </script> + <div id="page-wrapper" class="page-wrapper"> <div class="page"> {{> header}} <div id="menu-bar-hover-placeholder"></div> - <div id="menu-bar" class="menu-bar sticky bordered"> + <div id="menu-bar" class="menu-bar sticky"> <div class="left-buttons"> <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> @@ -124,12 +148,12 @@ <i class="fa fa-paint-brush"></i> </button> <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu"> - <li role="none"><button role="menuitem" class="theme" id="light">{{ theme_option "Light" }}</button></li> - <li role="none"><button role="menuitem" class="theme" id="rust">{{ theme_option "Rust" }}</button></li> - <li role="none"><button role="menuitem" class="theme" id="coal">{{ theme_option "Coal" }}</button></li> - <li role="none"><button role="menuitem" class="theme" id="navy">{{ theme_option "Navy" }}</button></li> - <li role="none"><button role="menuitem" class="theme" id="ayu">{{ theme_option "Ayu" }}</button></li> - <li role="none"><button role="menuitem" class="theme" id="colibri">{{ theme_option "Colibri" }}</button></li> + <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li> + <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li> + <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li> + <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li> + <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li> + <li role="none"><button role="menuitem" class="theme" id="colibri">Colibri</button></li> </ul> {{#if search_enabled}} <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar"> @@ -151,13 +175,19 @@ <i id="git-repository-button" class="fa {{git_repository_icon}}"></i> </a> {{/if}} + {{#if git_repository_edit_url}} + <a href="{{git_repository_edit_url}}" title="Suggest an edit" aria-label="Suggest an edit"> + <i id="git-edit-button" class="fa fa-edit"></i> + </a> + {{/if}} + </div> </div> {{#if search_enabled}} <div id="search-wrapper" class="hidden"> <form id="searchbar-outer" class="searchbar-outer"> - <input type="search" name="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header"> + <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header"> </form> <div id="searchresults-outer" class="searchresults-outer hidden"> <div id="searchresults-header" class="searchresults-header"></div> @@ -168,7 +198,7 @@ {{/if}} <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM --> - <script type="text/javascript"> + <script> document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible'); document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible'); Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) { @@ -216,10 +246,12 @@ </div> - {{#if livereload}} + {{#if live_reload_endpoint}} <!-- Livereload script (if served using the cli tool) --> - <script type="text/javascript"> - var socket = new WebSocket("{{{livereload}}}"); + <script> + const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:'; + const wsAddress = wsProtocol + "//" + location.host + "/" + "{{{live_reload_endpoint}}}"; + const socket = new WebSocket(wsAddress); socket.onmessage = function (event) { if (event.data === "reload") { socket.close(); @@ -235,7 +267,7 @@ {{#if google_analytics}} <!-- Google Analytics Tag --> - <script type="text/javascript"> + <script> var localAddrs = ["localhost", "127.0.0.1", ""]; // make sure we don't activate google analytics if the developer is @@ -253,43 +285,43 @@ {{/if}} {{#if playground_line_numbers}} - <script type="text/javascript"> + <script> window.playground_line_numbers = true; </script> {{/if}} {{#if playground_copyable}} - <script type="text/javascript"> + <script> window.playground_copyable = true; </script> {{/if}} {{#if playground_js}} - <script src="{{ path_to_root }}ace.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}editor.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}mode-rust.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}theme-dawn.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}theme-tomorrow_night.js" type="text/javascript" charset="utf-8"></script> + <script src="{{ path_to_root }}ace.js"></script> + <script src="{{ path_to_root }}editor.js"></script> + <script src="{{ path_to_root }}mode-rust.js"></script> + <script src="{{ path_to_root }}theme-dawn.js"></script> + <script src="{{ path_to_root }}theme-tomorrow_night.js"></script> {{/if}} {{#if search_js}} - <script src="{{ path_to_root }}elasticlunr.min.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}mark.min.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}searcher.js" type="text/javascript" charset="utf-8"></script> + <script src="{{ path_to_root }}elasticlunr.min.js"></script> + <script src="{{ path_to_root }}mark.min.js"></script> + <script src="{{ path_to_root }}searcher.js"></script> {{/if}} - <script src="{{ path_to_root }}clipboard.min.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}highlight.js" type="text/javascript" charset="utf-8"></script> - <script src="{{ path_to_root }}book.js" type="text/javascript" charset="utf-8"></script> + <script src="{{ path_to_root }}clipboard.min.js"></script> + <script src="{{ path_to_root }}highlight.js"></script> + <script src="{{ path_to_root }}book.js"></script> <!-- Custom JS scripts --> {{#each additional_js}} - <script type="text/javascript" src="{{ ../path_to_root }}{{this}}"></script> + <script src="{{ ../path_to_root }}{{this}}"></script> {{/each}} {{#if is_print}} {{#if mathjax_support}} - <script type="text/javascript"> + <script> window.addEventListener('load', function() { MathJax.Hub.Register.StartupHook('End', function() { window.setTimeout(window.print, 100); @@ -297,7 +329,7 @@ }); </script> {{else}} - <script type="text/javascript"> + <script> window.addEventListener('load', function() { window.setTimeout(window.print, 100); }); @@ -305,5 +337,6 @@ {{/if}} {{/if}} + </div> </body> </html> |