Add pop-up window showing the keyboard shortcuts

szabgab · szabgab · commit 413494516ce8 · 2025-03-21T12:54:13.000+02:00
Make it display when the user presses `?`. Implements #2607
diff --git a/src/theme/book.js b/src/theme/book.js
@@ -543,7 +543,7 @@ function playground_text(playground, hidden = true) {
 
 (function chapterNavigation() {
     document.addEventListener('keydown', function (e) {
-        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
+        if (e.altKey || e.ctrlKey || e.metaKey) { return; }
         if (window.search && window.search.hasFocus()) { return; }
         var html = document.querySelector('html');
 
@@ -559,6 +559,42 @@ function playground_text(playground, hidden = true) {
                 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) {
             case 'ArrowRight':
                 e.preventDefault();
diff --git a/src/theme/css/general.css b/src/theme/css/general.css
@@ -242,3 +242,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;
+}
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
@@ -62,6 +62,7 @@
         <script src="{{ resource "toc.js" }}"></script>
     </head>
     <body>
+    <div id="help-overlay"></div>
     <div id="body-container">
         <!-- Work around some values being stored in localStorage wrapped in quotes -->
         <script>
