generated docs: keyboard shortcuts modal

lib/std/special/docs/index.html

@@ -104,6 +104,41 @@
         width: 100%;
       }
 
+      #helpDialog {
+        width: 21em;
+        height: 19em;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: #333;
+        color: #fff;
+        border: 1px solid #fff;
+      }
+      #helpDialog h1 {
+        text-align: center;
+        font-size: 1.5em;
+      }
+      dt, dd {
+        display: inline;
+        margin: 0 0.2em;
+      }
+      kbd {
+        color: #000;
+        background-color: #fafbfc;
+        border-color: #d1d5da;
+        border-bottom-color: #c6cbd1;
+        box-shadow-color: #c6cbd1;
+        display: inline-block;
+        padding: 0.3em 0.2em;
+        font: 1.2em monospace;
+        line-height: 0.8em;
+        vertical-align: middle;
+        border: solid 1px;
+        border-radius: 3px;
+        box-shadow: inset 0 -1px 0;
+        cursor: default;
+      }
+
       @media (prefers-color-scheme: dark) {
         body{
           background-color: #111;
@@ -171,6 +206,15 @@
       </ul>
     </div>
     </section>
+    <div id="helpDialog" class="hidden">
+      <h1>Keyboard Shortcuts</h1>
+      <dl><dt><kbd>?</kbd></dt><dd>Show this help dialog</dd></dl>
+      <dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this dialog</dd></dl>
+      <dl><dt><kbd>s</kbd></dt><dd>Focus the search field</dd></dl>
+      <dl><dt><kbd>↑</kbd></dt><dd>Move up in search results</dd></dl>
+      <dl><dt><kbd>↓</kbd></dt><dd>Move down in search results</dd></dl>
+      <dl><dt><kbd>⏎</kbd></dt><dd>Go to active search result</dd></dl>
+    </div>
     <script src="data.js"></script>
     <script src="main.js"></script>
   </body>

lib/std/special/docs/main.js

@@ -20,6 +20,7 @@
     var domTdTarget = document.getElementById("tdTarget");
     var domTdZigVer = document.getElementById("tdZigVer");
     var domHdrName = document.getElementById("hdrName");
+    var domHelpModal = document.getElementById("helpDialog");
 
     var searchTimer = null;
     var escapeHtmlReplacements = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
@@ -362,13 +363,13 @@
         curNavSearch = "";
 
         if (location.hash[0] === '#' && location.hash.length > 1) {
-            var nonSearchAndSearchParts = location.hash.substring(1).split("?");
+            var query = location.hash.substring(1);
-            var nonSearchPart;
+            var qpos = query.indexOf("?");
-            if (nonSearchAndSearchParts.length === 1) {
+            if (qpos === -1) {
-                nonSearchPart = nonSearchAndSearchParts[0];
+                nonSearchPart = query;
             } else {
-                nonSearchPart = nonSearchAndSearchParts[0];
+                nonSearchPart = query.substring(0, qpos);
-                curNavSearch = decodeURIComponent(nonSearchAndSearchParts[1]);
+                curNavSearch = decodeURIComponent(query.substring(qpos + 1));
             }
 
             var parts = nonSearchPart.split(";");
@@ -449,15 +450,34 @@
 
     function onWindowKeyDown(ev) {
         switch (ev.which) {
+            case 27:
+                if (!domHelpModal.classList.contains("hidden")) {
+                    domHelpModal.classList.add("hidden");
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                }
+                break;
             case 83:
                 domSearch.focus();
                 ev.preventDefault();
                 ev.stopPropagation();
                 startAsyncSearch();
                 break;
+            case 191:
+                ev.preventDefault();
+                ev.stopPropagation();
+                showHelpModal();
+                break;
         }
     }
 
+    function showHelpModal() {
+        domHelpModal.classList.remove("hidden");
+        domHelpModal.style.left = (window.innerWidth / 2 - domHelpModal.clientWidth / 2) + "px";
+        domHelpModal.style.top = (window.innerHeight / 2 - domHelpModal.clientHeight / 2) + "px";
+        domHelpModal.focus();
+    }
+
     function clearAsyncSearch() {
         if (searchTimer != null) clearTimeout(searchTimer);
     }