| author |  Andrew Kelley <andrew@ziglang.org> 2019-10-07 15:41:45-04:00 |
| committer | Andrew Kelley <andrew@ziglang.org> 2019-10-07 15:41:45-04:00 |
| log | d46234ef72c5ab1a45d27cfba1a7ebd5a9f3beb5 |
| tree | b8e55f132de3c0bebed6f45a836fdf6be9edf522 |
| parent | 16de5a72284b9bc3c18f076fc05db7e9b35cae78 |
| signature |  Commit is signed but in an unrecognized format. |
generated docs: keyboard shortcuts modal
2 files changed, 70 insertions(+), 6 deletions(-)
lib- std
- special
lib/std/special/docs/index.html+44
| ... | ... | @@ -104,6 +104,41 @@ |
| 104 | 104 | width: 100%; |
| 105 | 105 | } |
| 106 | 106 | |
| 107 | #helpDialog { | |
| 108 | width: 21em; | |
| 109 | height: 19em; | |
| 110 | position: fixed; | |
| 111 | top: 0; | |
| 112 | left: 0; | |
| 113 | background-color: #333; | |
| 114 | color: #fff; | |
| 115 | border: 1px solid #fff; | |
| 116 | } | |
| 117 | #helpDialog h1 { | |
| 118 | text-align: center; | |
| 119 | font-size: 1.5em; | |
| 120 | } | |
| 121 | dt, dd { | |
| 122 | display: inline; | |
| 123 | margin: 0 0.2em; | |
| 124 | } | |
| 125 | kbd { | |
| 126 | color: #000; | |
| 127 | background-color: #fafbfc; | |
| 128 | border-color: #d1d5da; | |
| 129 | border-bottom-color: #c6cbd1; | |
| 130 | box-shadow-color: #c6cbd1; | |
| 131 | display: inline-block; | |
| 132 | padding: 0.3em 0.2em; | |
| 133 | font: 1.2em monospace; | |
| 134 | line-height: 0.8em; | |
| 135 | vertical-align: middle; | |
| 136 | border: solid 1px; | |
| 137 | border-radius: 3px; | |
| 138 | box-shadow: inset 0 -1px 0; | |
| 139 | cursor: default; | |
| 140 | } | |
| 141 | ||
| 107 | 142 | @media (prefers-color-scheme: dark) { |
| 108 | 143 | body{ |
| 109 | 144 | background-color: #111; |
| ... | ... | @@ -171,6 +206,15 @@ |
| 171 | 206 | </ul> |
| 172 | 207 | </div> |
| 173 | 208 | </section> |
| 209 | <div id="helpDialog" class="hidden"> | |
| 210 | <h1>Keyboard Shortcuts</h1> | |
| 211 | <dl><dt><kbd>?</kbd></dt><dd>Show this help dialog</dd></dl> | |
| 212 | <dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this dialog</dd></dl> | |
| 213 | <dl><dt><kbd>s</kbd></dt><dd>Focus the search field</dd></dl> | |
| 214 | <dl><dt><kbd>↑</kbd></dt><dd>Move up in search results</dd></dl> | |
| 215 | <dl><dt><kbd>↓</kbd></dt><dd>Move down in search results</dd></dl> | |
| 216 | <dl><dt><kbd>⏎</kbd></dt><dd>Go to active search result</dd></dl> | |
| 217 | </div> | |
| 174 | 218 | <script src="data.js"></script> |
| 175 | 219 | <script src="main.js"></script> |
| 176 | 220 | </body> |
lib/std/special/docs/main.js+26-6
| ... | ... | @@ -20,6 +20,7 @@ |
| 20 | 20 | var domTdTarget = document.getElementById("tdTarget"); |
| 21 | 21 | var domTdZigVer = document.getElementById("tdZigVer"); |
| 22 | 22 | var domHdrName = document.getElementById("hdrName"); |
| 23 | var domHelpModal = document.getElementById("helpDialog"); | |
| 23 | 24 | |
| 24 | 25 | var searchTimer = null; |
| 25 | 26 | var escapeHtmlReplacements = { "&": "&", '"': """, "<": "<", ">": ">" }; |
| ... | ... | @@ -362,13 +363,13 @@ |
| 362 | 363 | curNavSearch = ""; |
| 363 | 364 | |
| 364 | 365 | if (location.hash[0] === '#' && location.hash.length > 1) { |
| 365 | var nonSearchAndSearchParts = location.hash.substring(1).split("?"); | |
| 366 | var nonSearchPart; | |
| 367 | if (nonSearchAndSearchParts.length === 1) { | |
| 368 | nonSearchPart = nonSearchAndSearchParts[0]; | |
| 366 | var query = location.hash.substring(1); | |
| 367 | var qpos = query.indexOf("?"); | |
| 368 | if (qpos === -1) { | |
| 369 | nonSearchPart = query; | |
| 369 | 370 | } else { |
| 370 | nonSearchPart = nonSearchAndSearchParts[0]; | |
| 371 | curNavSearch = decodeURIComponent(nonSearchAndSearchParts[1]); | |
| 371 | nonSearchPart = query.substring(0, qpos); | |
| 372 | curNavSearch = decodeURIComponent(query.substring(qpos + 1)); | |
| 372 | 373 | } |
| 373 | 374 | |
| 374 | 375 | var parts = nonSearchPart.split(";"); |
| ... | ... | @@ -449,15 +450,34 @@ |
| 449 | 450 | |
| 450 | 451 | function onWindowKeyDown(ev) { |
| 451 | 452 | switch (ev.which) { |
| 453 | case 27: | |
| 454 | if (!domHelpModal.classList.contains("hidden")) { | |
| 455 | domHelpModal.classList.add("hidden"); | |
| 456 | ev.preventDefault(); | |
| 457 | ev.stopPropagation(); | |
| 458 | } | |
| 459 | break; | |
| 452 | 460 | case 83: |
| 453 | 461 | domSearch.focus(); |
| 454 | 462 | ev.preventDefault(); |
| 455 | 463 | ev.stopPropagation(); |
| 456 | 464 | startAsyncSearch(); |
| 457 | 465 | break; |
| 466 | case 191: | |
| 467 | ev.preventDefault(); | |
| 468 | ev.stopPropagation(); | |
| 469 | showHelpModal(); | |
| 470 | break; | |
| 458 | 471 | } |
| 459 | 472 | } |
| 460 | 473 | |
| 474 | function showHelpModal() { | |
| 475 | domHelpModal.classList.remove("hidden"); | |
| 476 | domHelpModal.style.left = (window.innerWidth / 2 - domHelpModal.clientWidth / 2) + "px"; | |
| 477 | domHelpModal.style.top = (window.innerHeight / 2 - domHelpModal.clientHeight / 2) + "px"; | |
| 478 | domHelpModal.focus(); | |
| 479 | } | |
| 480 | ||
| 461 | 481 | function clearAsyncSearch() { |
| 462 | 482 | if (searchTimer != null) clearTimeout(searchTimer); |
| 463 | 483 | } |