Change all HTML IDs to have a prefix
This changes all HTML IDs so that they have the `mdbook-` prefix. This should help avoid ID conflicts between internal IDs and IDs from user content such as section headers. This is a relatively disruptive change and has a high risk of breaking something. However, I think I have covered everything, and if anything is missed, hopefully it will get detected. I did not change class names since the chance of a collision is much smaller than with IDs. However, that is something that could be considered in the future. Closes https://github.com/rust-lang/mdBook/issues/880
This commit is contained in:
Eric Huss
parent
988ed9b5bc
commit
402d11414c
10 changed files with 170 additions and 132 deletions
|
|
@ -3,7 +3,7 @@
|
|||
html {
|
||||
scrollbar-color: var(--scrollbar) var(--bg);
|
||||
}
|
||||
#searchresults a,
|
||||
#mdbook-searchresults a,
|
||||
.content a:link,
|
||||
a:visited,
|
||||
a > .hljs {
|
||||
|
|
@ -11,10 +11,10 @@ a > .hljs {
|
|||
}
|
||||
|
||||
/*
|
||||
body-container is necessary because mobile browsers don't seem to like
|
||||
mdbook-body-container is necessary because mobile browsers don't seem to like
|
||||
overflow-x on the body tag when there is a <meta name="viewport"> tag.
|
||||
*/
|
||||
#body-container {
|
||||
#mdbook-body-container {
|
||||
/*
|
||||
This is used when the sidebar pushes the body content off the side of
|
||||
the screen on small screens. Without it, dragging on mobile Safari
|
||||
|
|
@ -25,12 +25,12 @@ a > .hljs {
|
|||
|
||||
/* Menu Bar */
|
||||
|
||||
#menu-bar,
|
||||
#menu-bar-hover-placeholder {
|
||||
#mdbook-menu-bar,
|
||||
#mdbook-menu-bar-hover-placeholder {
|
||||
z-index: 101;
|
||||
margin: auto calc(0px - var(--page-padding));
|
||||
}
|
||||
#menu-bar {
|
||||
#mdbook-menu-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -39,24 +39,24 @@ a > .hljs {
|
|||
border-block-end-width: 1px;
|
||||
border-block-end-style: solid;
|
||||
}
|
||||
#menu-bar.sticky,
|
||||
#menu-bar-hover-placeholder:hover + #menu-bar,
|
||||
#menu-bar:hover,
|
||||
html.sidebar-visible #menu-bar {
|
||||
#mdbook-menu-bar.sticky,
|
||||
#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
|
||||
#mdbook-menu-bar:hover,
|
||||
html.sidebar-visible #mdbook-menu-bar {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0 !important;
|
||||
}
|
||||
#menu-bar-hover-placeholder {
|
||||
#mdbook-menu-bar-hover-placeholder {
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 0;
|
||||
height: var(--menu-bar-height);
|
||||
}
|
||||
#menu-bar.bordered {
|
||||
#mdbook-menu-bar.bordered {
|
||||
border-block-end-color: var(--table-border-color);
|
||||
}
|
||||
#menu-bar .fa-svg, #menu-bar .icon-button {
|
||||
#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
z-index: 10;
|
||||
|
|
@ -65,7 +65,7 @@ html.sidebar-visible #menu-bar {
|
|||
transition: color 0.5s;
|
||||
}
|
||||
@media only screen and (max-width: 420px) {
|
||||
#menu-bar .fa-svg, #menu-bar .icon-button {
|
||||
#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -193,8 +193,8 @@ html:not(.js) .left-buttons button {
|
|||
|
||||
/* sidebar-visible */
|
||||
@media only screen and (max-width: 1380px) {
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
|
||||
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
|
||||
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
|
|
@ -307,7 +307,7 @@ pre > .result {
|
|||
|
||||
/* Search */
|
||||
|
||||
#searchresults a {
|
||||
#mdbook-searchresults a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -337,13 +337,13 @@ mark.fade-out {
|
|||
max-width: var(--content-max-width);
|
||||
}
|
||||
|
||||
#searchbar-outer.searching #searchbar {
|
||||
#mdbook-searchbar-outer.searching #mdbook-searchbar {
|
||||
padding-right: 30px;
|
||||
}
|
||||
#searchbar-outer .spinner-wrapper {
|
||||
#mdbook-searchbar-outer .spinner-wrapper {
|
||||
display: none;
|
||||
}
|
||||
#searchbar-outer.searching .spinner-wrapper {
|
||||
#mdbook-searchbar-outer.searching .spinner-wrapper {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -376,7 +376,7 @@ mark.fade-out {
|
|||
}
|
||||
}
|
||||
|
||||
#searchbar {
|
||||
#mdbook-searchbar {
|
||||
width: 100%;
|
||||
margin-block-start: var(--searchbar-margin-block-start);
|
||||
margin-block-end: 0;
|
||||
|
|
@ -389,8 +389,8 @@ mark.fade-out {
|
|||
background-color: var(--searchbar-bg);
|
||||
color: var(--searchbar-fg);
|
||||
}
|
||||
#searchbar:focus,
|
||||
#searchbar.active {
|
||||
#mdbook-searchbar:focus,
|
||||
#mdbook-searchbar.active {
|
||||
box-shadow: 0 0 3px var(--searchbar-shadow-color);
|
||||
}
|
||||
|
||||
|
|
@ -411,19 +411,19 @@ mark.fade-out {
|
|||
border-block-end: 1px dashed var(--searchresults-border-color);
|
||||
}
|
||||
|
||||
ul#searchresults {
|
||||
ul#mdbook-searchresults {
|
||||
list-style: none;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
ul#searchresults li {
|
||||
ul#mdbook-searchresults li {
|
||||
margin: 10px 0px;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
ul#searchresults li.focus {
|
||||
ul#mdbook-searchresults li.focus {
|
||||
background-color: var(--searchresults-li-bg);
|
||||
}
|
||||
ul#searchresults span.teaser {
|
||||
ul#mdbook-searchresults span.teaser {
|
||||
display: block;
|
||||
clear: both;
|
||||
margin-block-start: 5px;
|
||||
|
|
@ -432,7 +432,7 @@ ul#searchresults span.teaser {
|
|||
margin-inline-end: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
ul#searchresults span.teaser em {
|
||||
ul#mdbook-searchresults span.teaser em {
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -535,10 +535,10 @@ html:not(.sidebar-resizing) .sidebar {
|
|||
width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
|
||||
}
|
||||
/* sidebar-hidden */
|
||||
#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
|
||||
#mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
|
||||
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
|
||||
}
|
||||
[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
|
||||
[dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
|
||||
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
|
||||
}
|
||||
.sidebar::-webkit-scrollbar {
|
||||
|
|
@ -549,18 +549,18 @@ html:not(.sidebar-resizing) .sidebar {
|
|||
}
|
||||
|
||||
/* sidebar-visible */
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
|
||||
}
|
||||
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
[dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
|
||||
}
|
||||
@media only screen and (min-width: 620px) {
|
||||
#sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: none;
|
||||
margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
|
||||
}
|
||||
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
[dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ h6:target::before {
|
|||
.page {
|
||||
outline: 0;
|
||||
padding: 0 var(--page-padding);
|
||||
margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
|
||||
margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #mdbook-menu-bar-hover-placeholder */
|
||||
}
|
||||
.page-wrapper {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
|
||||
#sidebar,
|
||||
#menu-bar,
|
||||
#mdbook-sidebar,
|
||||
#mdbook-menu-bar,
|
||||
.nav-chapters,
|
||||
.mobile-nav-chapters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#page-wrapper.page-wrapper {
|
||||
#mdbook-page-wrapper.page-wrapper {
|
||||
transform: none !important;
|
||||
margin-inline-start: 0px;
|
||||
overflow-y: initial;
|
||||
}
|
||||
|
||||
#content {
|
||||
#mdbook-content {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -309,23 +309,23 @@ aria-label="Show hidden lines"></button>';
|
|||
|
||||
(function themes() {
|
||||
const html = document.querySelector('html');
|
||||
const themeToggleButton = document.getElementById('theme-toggle');
|
||||
const themePopup = document.getElementById('theme-list');
|
||||
const themeToggleButton = document.getElementById('mdbook-theme-toggle');
|
||||
const themePopup = document.getElementById('mdbook-theme-list');
|
||||
const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
|
||||
const themeIds = [];
|
||||
themePopup.querySelectorAll('button.theme').forEach(function(el) {
|
||||
themeIds.push(el.id);
|
||||
});
|
||||
const stylesheets = {
|
||||
ayuHighlight: document.querySelector('#ayu-highlight-css'),
|
||||
tomorrowNight: document.querySelector('#tomorrow-night-css'),
|
||||
highlight: document.querySelector('#highlight-css'),
|
||||
ayuHighlight: document.querySelector('#mdbook-ayu-highlight-css'),
|
||||
tomorrowNight: document.querySelector('#mdbook-tomorrow-night-css'),
|
||||
highlight: document.querySelector('#mdbook-highlight-css'),
|
||||
};
|
||||
|
||||
function showThemes() {
|
||||
themePopup.style.display = 'block';
|
||||
themeToggleButton.setAttribute('aria-expanded', true);
|
||||
themePopup.querySelector('button#' + get_theme()).focus();
|
||||
themePopup.querySelector('button#mdbook-theme-' + get_theme()).focus();
|
||||
}
|
||||
|
||||
function updateThemeSelected() {
|
||||
|
|
@ -333,10 +333,10 @@ aria-label="Show hidden lines"></button>';
|
|||
el.classList.remove('theme-selected');
|
||||
});
|
||||
const selected = get_saved_theme() ?? 'default_theme';
|
||||
let element = themePopup.querySelector('button#' + selected);
|
||||
let element = themePopup.querySelector('button#mdbook-theme-' + selected);
|
||||
if (element === null) {
|
||||
// Fall back in case there is no "Default" item.
|
||||
element = themePopup.querySelector('button#' + get_theme());
|
||||
element = themePopup.querySelector('button#mdbook-theme-' + get_theme());
|
||||
}
|
||||
element.classList.add('theme-selected');
|
||||
}
|
||||
|
|
@ -363,7 +363,7 @@ aria-label="Show hidden lines"></button>';
|
|||
|
||||
function get_theme() {
|
||||
const theme = get_saved_theme();
|
||||
if (theme === null || theme === undefined || !themeIds.includes(theme)) {
|
||||
if (theme === null || theme === undefined || !themeIds.includes('mdbook-theme-' + theme)) {
|
||||
if (typeof default_dark_theme === 'undefined') {
|
||||
// A customized index.hbs might not define this, so fall back to
|
||||
// old behavior of determining the default on page load.
|
||||
|
|
@ -448,6 +448,8 @@ aria-label="Show hidden lines"></button>';
|
|||
} else {
|
||||
return;
|
||||
}
|
||||
theme = theme.replace(/^mdbook-theme-/, '');
|
||||
|
||||
if (theme === 'default_theme' || theme === null) {
|
||||
delete_saved_theme();
|
||||
set_theme(get_theme(), false);
|
||||
|
|
@ -518,11 +520,11 @@ aria-label="Show hidden lines"></button>';
|
|||
})();
|
||||
|
||||
(function sidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const sidebarLinks = document.querySelectorAll('#sidebar a');
|
||||
const sidebarToggleButton = document.getElementById('sidebar-toggle');
|
||||
const sidebarResizeHandle = document.getElementById('sidebar-resize-handle');
|
||||
const sidebarCheckbox = document.getElementById('sidebar-toggle-anchor');
|
||||
const sidebar = document.getElementById('mdbook-sidebar');
|
||||
const sidebarLinks = document.querySelectorAll('#mdbook-sidebar a');
|
||||
const sidebarToggleButton = document.getElementById('mdbook-sidebar-toggle');
|
||||
const sidebarResizeHandle = document.getElementById('mdbook-sidebar-resize-handle');
|
||||
const sidebarCheckbox = document.getElementById('mdbook-sidebar-toggle-anchor');
|
||||
let firstContact = null;
|
||||
|
||||
|
||||
|
|
@ -783,7 +785,7 @@ aria-label="Show hidden lines"></button>';
|
|||
})();
|
||||
|
||||
(function controllMenu() {
|
||||
const menu = document.getElementById('menu-bar');
|
||||
const menu = document.getElementById('mdbook-menu-bar');
|
||||
|
||||
(function controllPosition() {
|
||||
let scrollTop = document.scrollingElement.scrollTop;
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ window.search = window.search || {};
|
|||
};
|
||||
}
|
||||
|
||||
const search_wrap = document.getElementById('search-wrapper'),
|
||||
searchbar_outer = document.getElementById('searchbar-outer'),
|
||||
searchbar = document.getElementById('searchbar'),
|
||||
searchresults = document.getElementById('searchresults'),
|
||||
searchresults_outer = document.getElementById('searchresults-outer'),
|
||||
searchresults_header = document.getElementById('searchresults-header'),
|
||||
searchicon = document.getElementById('search-toggle'),
|
||||
content = document.getElementById('content'),
|
||||
const search_wrap = document.getElementById('mdbook-search-wrapper'),
|
||||
searchbar_outer = document.getElementById('mdbook-searchbar-outer'),
|
||||
searchbar = document.getElementById('mdbook-searchbar'),
|
||||
searchresults = document.getElementById('mdbook-searchresults'),
|
||||
searchresults_outer = document.getElementById('mdbook-searchresults-outer'),
|
||||
searchresults_header = document.getElementById('mdbook-searchresults-header'),
|
||||
searchicon = document.getElementById('mdbook-search-toggle'),
|
||||
content = document.getElementById('mdbook-content'),
|
||||
|
||||
// SVG text elements don't render if inside a <mark> tag.
|
||||
mark_exclude = ['text'],
|
||||
|
|
@ -154,8 +154,9 @@ window.search = window.search || {};
|
|||
const encoded_search = encodeURIComponent(searchterms.join(' ')).replace(/'/g, '%27');
|
||||
|
||||
return '<a href="' + path_to_root + url[0] + '?' + URL_MARK_PARAM + '=' + encoded_search
|
||||
+ '#' + url[1] + '" aria-details="teaser_' + teaser_count + '">'
|
||||
+ result.doc.breadcrumbs + '</a>' + '<span class="teaser" id="teaser_' + teaser_count
|
||||
+ '#' + url[1] + '" aria-details="mdbook-teaser_' + teaser_count + '">'
|
||||
+ result.doc.breadcrumbs + '</a>'
|
||||
+ '<span class="teaser" id="mdbook-teaser_' + teaser_count
|
||||
+ '" aria-label="Search Result Teaser">' + teaser + '</span>';
|
||||
}
|
||||
|
||||
|
|
@ -437,7 +438,7 @@ window.search = window.search || {};
|
|||
loadSearchScript(
|
||||
window.path_to_searchindex_js ||
|
||||
path_to_root + '{{ resource "searchindex.js" }}',
|
||||
'search-index');
|
||||
'mdbook-search-index');
|
||||
search_wrap.classList.remove('hidden');
|
||||
searchicon.setAttribute('aria-expanded', 'true');
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@
|
|||
<link rel="stylesheet" href="{{ resource "fonts/fonts.css" }}">
|
||||
|
||||
<!-- Highlight.js Stylesheets -->
|
||||
<link rel="stylesheet" id="highlight-css" href="{{ resource "highlight.css" }}">
|
||||
<link rel="stylesheet" id="tomorrow-night-css" href="{{ resource "tomorrow-night.css" }}">
|
||||
<link rel="stylesheet" id="ayu-highlight-css" href="{{ resource "ayu-highlight.css" }}">
|
||||
<link rel="stylesheet" id="mdbook-highlight-css" href="{{ resource "highlight.css" }}">
|
||||
<link rel="stylesheet" id="mdbook-tomorrow-night-css" href="{{ resource "tomorrow-night.css" }}">
|
||||
<link rel="stylesheet" id="mdbook-ayu-highlight-css" href="{{ resource "ayu-highlight.css" }}">
|
||||
|
||||
<!-- Custom theme stylesheets -->
|
||||
{{#each additional_css}}
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="body-container">
|
||||
<div id="mdbook-body-container">
|
||||
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
||||
<script>
|
||||
try {
|
||||
|
|
@ -105,12 +105,12 @@
|
|||
html.classList.add("js");
|
||||
</script>
|
||||
|
||||
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
|
||||
<input type="checkbox" id="mdbook-sidebar-toggle-anchor" class="hidden">
|
||||
|
||||
<!-- Hide / unhide sidebar before it is displayed -->
|
||||
<script>
|
||||
let sidebar = null;
|
||||
const sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
|
||||
const sidebar_toggle = document.getElementById("mdbook-sidebar-toggle-anchor");
|
||||
if (document.body.clientWidth >= 1080) {
|
||||
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
||||
sidebar = sidebar || 'visible';
|
||||
|
|
@ -125,40 +125,40 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||||
<nav id="mdbook-sidebar" class="sidebar" aria-label="Table of contents">
|
||||
<!-- populated by js -->
|
||||
<mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
|
||||
<noscript>
|
||||
<iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe>
|
||||
</noscript>
|
||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
|
||||
<div id="mdbook-sidebar-resize-handle" class="sidebar-resize-handle">
|
||||
<div class="sidebar-resize-indicator"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="page-wrapper" class="page-wrapper">
|
||||
<div id="mdbook-page-wrapper" class="page-wrapper">
|
||||
|
||||
<div class="page">
|
||||
{{> header}}
|
||||
<div id="menu-bar-hover-placeholder"></div>
|
||||
<div id="menu-bar" class="menu-bar sticky">
|
||||
<div id="mdbook-menu-bar-hover-placeholder"></div>
|
||||
<div id="mdbook-menu-bar" class="menu-bar sticky">
|
||||
<div class="left-buttons">
|
||||
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
||||
<label id="mdbook-sidebar-toggle" class="icon-button" for="mdbook-sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="mdbook-sidebar">
|
||||
{{fa "solid" "bars"}}
|
||||
</label>
|
||||
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
||||
<button id="mdbook-theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="mdbook-theme-list">
|
||||
{{fa "solid" "paintbrush"}}
|
||||
</button>
|
||||
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
||||
<li role="none"><button role="menuitem" class="theme" id="default_theme">Auto</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>
|
||||
<ul id="mdbook-theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
||||
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-default_theme">Auto</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-light">Light</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-rust">Rust</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-coal">Coal</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-navy">Navy</button></li>
|
||||
<li role="none"><button role="menuitem" class="theme" id="mdbook-theme-ayu">Ayu</button></li>
|
||||
</ul>
|
||||
{{#if search_enabled}}
|
||||
<button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar">
|
||||
<button id="mdbook-search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="mdbook-searchbar">
|
||||
{{fa "solid" "magnifying-glass"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
|
|
@ -187,18 +187,18 @@
|
|||
</div>
|
||||
|
||||
{{#if search_enabled}}
|
||||
<div id="search-wrapper" class="hidden">
|
||||
<form id="searchbar-outer" class="searchbar-outer">
|
||||
<div id="mdbook-search-wrapper" class="hidden">
|
||||
<form id="mdbook-searchbar-outer" class="searchbar-outer">
|
||||
<div class="search-wrapper">
|
||||
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
||||
<input type="search" id="mdbook-searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="mdbook-searchresults-outer" aria-describedby="searchresults-header">
|
||||
<div class="spinner-wrapper">
|
||||
{{fa "solid" "spinner" "fa-spin"}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="searchresults-outer" class="searchresults-outer hidden">
|
||||
<div id="searchresults-header" class="searchresults-header"></div>
|
||||
<ul id="searchresults">
|
||||
<div id="mdbook-searchresults-outer" class="searchresults-outer hidden">
|
||||
<div id="mdbook-searchresults-header" class="searchresults-header"></div>
|
||||
<ul id="mdbook-searchresults">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -206,14 +206,14 @@
|
|||
|
||||
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
||||
<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) {
|
||||
document.getElementById('mdbook-sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
||||
document.getElementById('mdbook-sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
||||
Array.from(document.querySelectorAll('#mdbook-sidebar a')).forEach(function(link) {
|
||||
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="content" class="content">
|
||||
<div id="mdbook-content" class="content">
|
||||
<main>
|
||||
{{{ content }}}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -52,13 +52,13 @@ class MDBookSidebarScrollbox extends HTMLElement {
|
|||
this.scrollTop = sidebarScrollTop;
|
||||
} else {
|
||||
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
|
||||
var activeSection = document.querySelector('#sidebar .active');
|
||||
var activeSection = document.querySelector('#mdbook-sidebar .active');
|
||||
if (activeSection) {
|
||||
activeSection.scrollIntoView({ block: 'center' });
|
||||
}
|
||||
}
|
||||
// Toggle buttons
|
||||
var sidebarAnchorToggles = document.querySelectorAll('#sidebar a.toggle');
|
||||
var sidebarAnchorToggles = document.querySelectorAll('#mdbook-sidebar a.toggle');
|
||||
function toggleSection(ev) {
|
||||
ev.currentTarget.parentElement.classList.toggle('expanded');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,70 +7,70 @@ define-function: (
|
|||
"open-search",
|
||||
[],
|
||||
block {
|
||||
assert-css: ("#search-wrapper", {"display": "none"})
|
||||
assert-css: ("#mdbook-search-wrapper", {"display": "none"})
|
||||
press-key: 's'
|
||||
wait-for-css-false: ("#search-wrapper", {"display": "none"})
|
||||
wait-for-css-false: ("#mdbook-search-wrapper", {"display": "none"})
|
||||
}
|
||||
)
|
||||
|
||||
call-function: ("open-search", {})
|
||||
assert-text: ("#searchresults-header", "")
|
||||
assert-text: ("#mdbook-searchresults-header", "")
|
||||
write: "strikethrough"
|
||||
wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':")
|
||||
wait-for-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
|
||||
// Close the search display
|
||||
press-key: 'Escape'
|
||||
wait-for-css: ("#search-wrapper", {"display": "none"})
|
||||
wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
|
||||
// Reopening the search should show the last value
|
||||
call-function: ("open-search", {})
|
||||
assert-text: ("#searchresults-header", "2 search results for 'strikethrough':")
|
||||
assert-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
|
||||
// Navigate to a sub-chapter
|
||||
go-to: "./individual/strikethrough.html"
|
||||
assert-text: ("#searchresults-header", "")
|
||||
assert-text: ("#mdbook-searchresults-header", "")
|
||||
call-function: ("open-search", {})
|
||||
write: "strikethrough"
|
||||
wait-for-text: ("#searchresults-header", "2 search results for 'strikethrough':")
|
||||
wait-for-text: ("#mdbook-searchresults-header", "2 search results for 'strikethrough':")
|
||||
|
||||
// Now we test search shortcuts and more page changes.
|
||||
go-to: |DOC_PATH| + "index.html"
|
||||
|
||||
// This check is to ensure that the search bar is inside the search wrapper.
|
||||
assert: "#search-wrapper #searchbar"
|
||||
assert-css: ("#search-wrapper", {"display": "none"})
|
||||
assert: "#mdbook-search-wrapper #mdbook-searchbar"
|
||||
assert-css: ("#mdbook-search-wrapper", {"display": "none"})
|
||||
|
||||
// Now we make sure the search input appear with the `S` shortcut.
|
||||
press-key: 's'
|
||||
wait-for-css-false: ("#search-wrapper", {"display": "none"})
|
||||
wait-for-css-false: ("#mdbook-search-wrapper", {"display": "none"})
|
||||
// We ensure the search bar has the focus.
|
||||
assert: "#searchbar:focus"
|
||||
assert: "#mdbook-searchbar:focus"
|
||||
// Pressing a key will therefore update the search input.
|
||||
press-key: 't'
|
||||
assert-text: ("#searchbar", "t")
|
||||
assert-text: ("#mdbook-searchbar", "t")
|
||||
|
||||
// Now we press `Escape` to ensure that the search input disappears again.
|
||||
press-key: 'Escape'
|
||||
wait-for-css: ("#search-wrapper", {"display": "none"})
|
||||
wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
|
||||
|
||||
// Making it appear by clicking on the search button.
|
||||
click: "#search-toggle"
|
||||
wait-for-css: ("#search-wrapper", {"display": "block"})
|
||||
click: "#mdbook-search-toggle"
|
||||
wait-for-css: ("#mdbook-search-wrapper", {"display": "block"})
|
||||
// We ensure the search bar has the focus.
|
||||
assert: "#searchbar:focus"
|
||||
assert: "#mdbook-searchbar:focus"
|
||||
|
||||
// We input "test".
|
||||
write: "test"
|
||||
// The results should now appear.
|
||||
wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH)
|
||||
assert: "#searchresults"
|
||||
wait-for-text: ("#mdbook-searchresults-header", "search results for 'test':", ENDS_WITH)
|
||||
assert: "#mdbook-searchresults"
|
||||
// Ensure that the URL was updated as well.
|
||||
assert-document-property: ({"URL": "?search=test"}, ENDS_WITH)
|
||||
|
||||
// Now we ensure that when we land on the page with a "search in progress", the search results are
|
||||
// loaded and that the search input has focus.
|
||||
go-to: |DOC_PATH| + "index.html?search=test"
|
||||
wait-for-text: ("#searchresults-header", "search results for 'test':", ENDS_WITH)
|
||||
assert: "#searchbar:focus"
|
||||
assert: "#searchresults"
|
||||
wait-for-text: ("#mdbook-searchresults-header", "search results for 'test':", ENDS_WITH)
|
||||
assert: "#mdbook-searchbar:focus"
|
||||
assert: "#mdbook-searchresults"
|
||||
|
||||
// And now we press `Escape` to close everything.
|
||||
press-key: 'Escape'
|
||||
wait-for-css: ("#search-wrapper", {"display": "none"})
|
||||
wait-for-css: ("#mdbook-search-wrapper", {"display": "none"})
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ define-function: (
|
|||
"hide-sidebar",
|
||||
[],
|
||||
block {
|
||||
assert-position: ("#page-wrapper", {"x": |content_indent|})
|
||||
assert-position: ("#mdbook-page-wrapper", {"x": |content_indent|})
|
||||
|
||||
// We now hide the sidebar.
|
||||
click: "#sidebar-toggle"
|
||||
wait-for-css: ("#sidebar", {"display": "none"})
|
||||
click: "#mdbook-sidebar-toggle"
|
||||
wait-for-css: ("#mdbook-sidebar", {"display": "none"})
|
||||
assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_hidden_value|}
|
||||
},
|
||||
)
|
||||
|
|
@ -28,17 +28,17 @@ define-function: (
|
|||
"show-sidebar",
|
||||
[],
|
||||
block {
|
||||
assert-css: ("#sidebar", {"display": "none"})
|
||||
assert-position: ("#page-wrapper", {"x": 0})
|
||||
assert-css: ("#mdbook-sidebar", {"display": "none"})
|
||||
assert-position: ("#mdbook-page-wrapper", {"x": 0})
|
||||
|
||||
// We expand the sidebar.
|
||||
click: "#sidebar-toggle"
|
||||
wait-for-css-false: ("#sidebar", {"display": "none"})
|
||||
click: "#mdbook-sidebar-toggle"
|
||||
wait-for-css-false: ("#mdbook-sidebar", {"display": "none"})
|
||||
// `transform` is 0.3s so we need to wait a bit (0.5s) to ensure the animation is done.
|
||||
wait-for: 5000
|
||||
assert-css-false: ("#sidebar", {"transform": "matrix(1, 0, 0, 1, -308, 0)"})
|
||||
assert-css-false: ("#mdbook-sidebar", {"transform": "matrix(1, 0, 0, 1, -308, 0)"})
|
||||
// The page content should be moved to the right.
|
||||
assert-position: ("#page-wrapper", {"x": |content_indent|})
|
||||
assert-position: ("#mdbook-page-wrapper", {"x": |content_indent|})
|
||||
assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|}
|
||||
},
|
||||
)
|
||||
|
|
@ -65,5 +65,5 @@ reload:
|
|||
// The stored value shouldn't have changed.
|
||||
assert-local-storage: {|sidebar_storage_value|: |sidebar_storage_displayed_value|}
|
||||
// But the sidebar should be hidden anyway.
|
||||
assert-css: ("#sidebar", {"display": "none"})
|
||||
assert-position: ("#page-wrapper", {"x": 0})
|
||||
assert-css: ("#mdbook-sidebar", {"display": "none"})
|
||||
assert-position: ("#mdbook-page-wrapper", {"x": 0})
|
||||
|
|
|
|||
35
tests/gui/theme.goml
Normal file
35
tests/gui/theme.goml
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Basic theme switcher test.
|
||||
|
||||
debug: true
|
||||
|
||||
go-to: |DOC_PATH| + "index.html"
|
||||
|
||||
// TODO: Dark mode is automatic, how to check that here?
|
||||
assert-css: ("#mdbook-theme-list", {"display": "none"})
|
||||
click: "#mdbook-theme-toggle"
|
||||
assert-css: ("#mdbook-theme-list", {"display": "block"})
|
||||
click: "#mdbook-theme-rust"
|
||||
assert-attribute: ("html", {"class": "js rust"})
|
||||
// Clicking a theme doesn't dismiss the popup.
|
||||
assert-css: ("#mdbook-theme-list", {"display": "block"})
|
||||
assert-local-storage: {"mdbook-theme": "rust"}
|
||||
|
||||
// Dismiss via toggle.
|
||||
click: "#mdbook-theme-toggle"
|
||||
assert-css: ("#mdbook-theme-list", {"display": "none"})
|
||||
|
||||
// Check for dismissal for click outside.
|
||||
click: "#mdbook-theme-toggle"
|
||||
assert-css: ("#mdbook-theme-list", {"display": "block"})
|
||||
click: "main"
|
||||
assert-css: ("#mdbook-theme-list", {"display": "none"})
|
||||
|
||||
// Check for escape.
|
||||
click: "#mdbook-theme-toggle"
|
||||
assert-css: ("#mdbook-theme-list", {"display": "block"})
|
||||
press-key: 'Escape'
|
||||
assert-css: ("#mdbook-theme-list", {"display": "none"})
|
||||
|
||||
// Check for navigation retains theme.
|
||||
go-to: "./rust/rust_codeblock.html"
|
||||
assert-attribute: ("html", {"class": "rust js"})
|
||||
Loading…
Add table
Reference in a new issue