From 4573f4d88285afb41ee49bd1bda386a44b402fe4 Mon Sep 17 00:00:00 2001 From: Gabor Szabo Date: Fri, 21 Mar 2025 12:54:13 +0200 Subject: [PATCH 1/5] Add pop-up window showing the keyboard shortcuts Make it display when the user presses `?`. Implements #2607 --- src/front-end/css/general.css | 23 +++++++++++++++++++ src/front-end/js/book.js | 38 ++++++++++++++++++++++++++++++- src/front-end/templates/index.hbs | 1 + 3 files changed, 61 insertions(+), 1 deletion(-) diff --git a/src/front-end/css/general.css b/src/front-end/css/general.css index 9946cfc01a..49c5a6c6c4 100644 --- a/src/front-end/css/general.css +++ b/src/front-end/css/general.css @@ -277,3 +277,26 @@ sup { .result-no-output { 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; +} \ No newline at end of file diff --git a/src/front-end/js/book.js b/src/front-end/js/book.js index e54da6a0dd..2422a0451f 100644 --- a/src/front-end/js/book.js +++ b/src/front-end/js/book.js @@ -623,7 +623,7 @@ aria-label="Show hidden lines">'; (function chapterNavigation() { document.addEventListener('keydown', function(e) { - if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { + if (e.altKey || e.ctrlKey || e.metaKey) { return; } if (window.search && window.search.hasFocus()) { @@ -643,6 +643,42 @@ aria-label="Show hidden lines">'; window.location.href = previousButton.href; } } + function showHelp() { + document.getElementById("help-overlay").style.display = "block"; + let help = `

Keyboard shortcuts

`; + help += "

Press ← or → to navigate between chapters

"; + help += "

Press s to search in the book

"; + help += "

Press ? to show this help

"; + help += "

Press Esc to hide this help

"; + + 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) { case 'ArrowRight': e.preventDefault(); diff --git a/src/front-end/templates/index.hbs b/src/front-end/templates/index.hbs index ca3c73fba4..0e17bbb7fb 100644 --- a/src/front-end/templates/index.hbs +++ b/src/front-end/templates/index.hbs @@ -63,6 +63,7 @@ +
-
+
+
+

Keyboard shortcuts

+
+

Press ← or → to navigate between chapters

+ {{#if search_enabled}} +

Press S or / to search in the book

+ {{/if}} +

Press ? to show this help

+

Press Esc to hide this help

+
+
+