authorgravatar for andrew@ziglang.orgAndrew Kelley <andrew@ziglang.org> 2019-10-07 15:41:45-04:00
committergravatar for andrew@ziglang.orgAndrew Kelley <andrew@ziglang.org> 2019-10-07 15:41:45-04:00
logd46234ef72c5ab1a45d27cfba1a7ebd5a9f3beb5
treeb8e55f132de3c0bebed6f45a836fdf6be9edf522
parent16de5a72284b9bc3c18f076fc05db7e9b35cae78
signaturelock-open Commit is signed but in an unrecognized format.

generated docs: keyboard shortcuts modal

2 files changed, 70 insertions(+), 6 deletions(-)

lib/std/special/docs/index.html+44
...@@ -104,6 +104,41 @@...@@ -104,6 +104,41 @@
104 width: 100%;104 width: 100%;
105 }105 }
106106
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 @media (prefers-color-scheme: dark) {142 @media (prefers-color-scheme: dark) {
108 body{143 body{
109 background-color: #111;144 background-color: #111;
...@@ -171,6 +206,15 @@...@@ -171,6 +206,15 @@
171 </ul>206 </ul>
172 </div>207 </div>
173 </section>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 <script src="data.js"></script>218 <script src="data.js"></script>
175 <script src="main.js"></script>219 <script src="main.js"></script>
176 </body>220 </body>
lib/std/special/docs/main.js+26-6
...@@ -20,6 +20,7 @@...@@ -20,6 +20,7 @@
20 var domTdTarget = document.getElementById("tdTarget");20 var domTdTarget = document.getElementById("tdTarget");
21 var domTdZigVer = document.getElementById("tdZigVer");21 var domTdZigVer = document.getElementById("tdZigVer");
22 var domHdrName = document.getElementById("hdrName");22 var domHdrName = document.getElementById("hdrName");
23 var domHelpModal = document.getElementById("helpDialog");
2324
24 var searchTimer = null;25 var searchTimer = null;
25 var escapeHtmlReplacements = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };26 var escapeHtmlReplacements = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
...@@ -362,13 +363,13 @@...@@ -362,13 +363,13 @@
362 curNavSearch = "";363 curNavSearch = "";
363364
364 if (location.hash[0] === '#' && location.hash.length > 1) {365 if (location.hash[0] === '#' && location.hash.length > 1) {
365 var nonSearchAndSearchParts = location.hash.substring(1).split("?");366 var query = location.hash.substring(1);
366 var nonSearchPart;367 var qpos = query.indexOf("?");
367 if (nonSearchAndSearchParts.length === 1) {368 if (qpos === -1) {
368 nonSearchPart = nonSearchAndSearchParts[0];369 nonSearchPart = query;
369 } else {370 } else {
370 nonSearchPart = nonSearchAndSearchParts[0];371 nonSearchPart = query.substring(0, qpos);
371 curNavSearch = decodeURIComponent(nonSearchAndSearchParts[1]);372 curNavSearch = decodeURIComponent(query.substring(qpos + 1));
372 }373 }
373374
374 var parts = nonSearchPart.split(";");375 var parts = nonSearchPart.split(";");
...@@ -449,15 +450,34 @@...@@ -449,15 +450,34 @@
449450
450 function onWindowKeyDown(ev) {451 function onWindowKeyDown(ev) {
451 switch (ev.which) {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 case 83:460 case 83:
453 domSearch.focus();461 domSearch.focus();
454 ev.preventDefault();462 ev.preventDefault();
455 ev.stopPropagation();463 ev.stopPropagation();
456 startAsyncSearch();464 startAsyncSearch();
457 break;465 break;
466 case 191:
467 ev.preventDefault();
468 ev.stopPropagation();
469 showHelpModal();
470 break;
458 }471 }
459 }472 }
460473
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 function clearAsyncSearch() {481 function clearAsyncSearch() {
462 if (searchTimer != null) clearTimeout(searchTimer);482 if (searchTimer != null) clearTimeout(searchTimer);
463 }483 }