Add pop-up window showing the keyboard shortcuts

szabgab · ehuss · commit 4573f4d88285 · 2025-05-14T17:06:49.000-07:00
Make it display when the user presses `?`. Implements #2607
diff --git 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;
+}
diff --git a/src/front-end/js/book.js b/src/front-end/js/book.js
@@ -623,7 +623,7 @@ aria-label="Show hidden lines"></button>';
 
 (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"></button>';
                 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/front-end/templates/index.hbs b/src/front-end/templates/index.hbs
@@ -63,6 +63,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>
