Merge pull request #15545 from r00ster91/autodocthing

autodoc: make help modal toggleable and allow entering "?" in search

lib/docs/index.html

@@ -875,7 +875,7 @@
       <div class="help-modal">
         <div class="modal">
           <h1>Keyboard Shortcuts</h1>
-          <dl><dt><kbd>?</kbd></dt><dd>Show this help modal</dd></dl>
+          <dl><dt><kbd>?</kbd></dt><dd>Toggle this help modal</dd></dl>
           <dl><dt><kbd>s</kbd></dt><dd>Focus the search field</dd></dl>
           <div style="margin-left: 1em">
             <dl><dt><kbd>↑</kbd></dt><dd>Move up in search results</dd></dl>

lib/docs/main.js

@@ -127,16 +127,20 @@ const NAV_MODES = {
   window.guideSearch = guidesSearchIndex;
   parseGuides();
 
-  
+  // identifiers can contain '?' so we want to allow typing
+  // the question mark when the search is focused instead of toggling the help modal
+  let canToggleHelpModal = true;
 
   domSearch.disabled = false;
   domSearch.addEventListener("keydown", onSearchKeyDown, false);
   domSearch.addEventListener("focus", ev => {
     domSearchPlaceholder.classList.add("hidden");
+    canToggleHelpModal = false;
   });
   domSearch.addEventListener("blur", ev => {
     if (domSearch.value.length == 0)
       domSearchPlaceholder.classList.remove("hidden");
+    canToggleHelpModal = true;
   });
   domSectSearchAllResultsLink.addEventListener('click', onClickSearchShowAllResults, false);
   function onClickSearchShowAllResults(ev) {
@@ -4045,9 +4049,16 @@ function addDeclToSearchResults(decl, declIndex, modNames, item, list, stack) {
         }
         break;
       case "?":
-        ev.preventDefault();
-        ev.stopPropagation();
-        showHelpModal();
+        if (!canToggleHelpModal) break;
+
+        // toggle the help modal
+        if (!domHelpModal.classList.contains("hidden")) {
+            onEscape(ev);
+        } else {
+            ev.preventDefault();
+            ev.stopPropagation();
+            showHelpModal();
+        }
         break;
     }
   }
@@ -4852,4 +4863,4 @@ function RadixTree() {
 
 // BUT!
 
-// We want to be able to search "Hash", for example!
+// We want to be able to search "Hash", for example!