jesus/mdbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add pop-up window showing the keyboard shortcuts

Browse source 
Make it display when the user presses `?`.

Implements #2607
This commit is contained in:
Gabor Szabo 2025-03-21 12:54:13 +02:00 • committed by Eric Huss
parent 63ae0d5c18
commit 4573f4d882
3 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/front-end/css/general.css
View file

@ -277,3 +277,26 @@ sup {
.result-no-output { .result-no-output {
font-style: italic; font-style: italic;
} }
#help-overlay {
position: fixed;
display: none;
width: 20%;
height: 60%;
top: 10%;
left: 40%;
right: 0;
bottom: 0;
background-color: rgba(225,225,225,1);
z-index: 2;
cursor: pointer;
border-width: 3px;
border-color: black;
border-style: solid;
border-radius: 25px;
padding: 10px;
}
#help-title {
text-align: center;
}

38
src/front-end/js/book.js
View file

@ -623,7 +623,7 @@ aria-label="Show hidden lines"></button>';
(function chapterNavigation() { (function chapterNavigation() {
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { if (e.altKey || e.ctrlKey || e.metaKey) {
return; return;
} }
if (window.search && window.search.hasFocus()) { if (window.search && window.search.hasFocus()) {
@ -643,6 +643,42 @@ aria-label="Show hidden lines"></button>';
window.location.href = previousButton.href; window.location.href = previousButton.href;
} }
} }
function showHelp() {
document.getElementById("help-overlay").style.display = "block";
let help = `<h2 id="help-title">Keyboard shortcuts</h2>`;
help += "<p>Press <kbd>←</kbd> or <kbd>→</kbd> to navigate between chapters</p>";
help += "<p>Press <kbd>s</kbd> to search in the book</p>";
help += "<p>Press <kbd>?</kbd> to show this help</p>";
help += "<p>Press <kbd>Esc</kbd> to hide this help</p>";
document.getElementById("help-overlay").innerHTML = help;
document.addEventListener('keydown', function (e) {
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
switch (e.key) {
case 'Escape':
e.preventDefault();
hideHelp();
break;
}
});
}
function hideHelp() {
document.getElementById("help-overlay").style.display = "none";
}
if (e.shiftKey) {
switch (e.key) {
case '?':
e.preventDefault();
showHelp();
break;
}
return;
}
switch (e.key) { switch (e.key) {
case 'ArrowRight': case 'ArrowRight':
e.preventDefault(); e.preventDefault();

1
src/front-end/templates/index.hbs
View file

@ -63,6 +63,7 @@
<script src="{{ resource "toc.js" }}"></script> <script src="{{ resource "toc.js" }}"></script>
</head> </head>
<body> <body>
<div id="help-overlay"></div>
<div id="body-container"> <div id="body-container">
<!-- Work around some values being stored in localStorage wrapped in quotes --> <!-- Work around some values being stored in localStorage wrapped in quotes -->
<script> <script>