generated docs: keyboard shortcuts modal
parent
16de5a7228
commit
d46234ef72
|
@ -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>
|
||||
|
|
|
@ -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 = { "&": "&", '"': """, "<": "<", ">": ">" };
|
||||
|
@ -362,13 +363,13 @@
|
|||
curNavSearch = "";
|
||||
|
||||
if (location.hash[0] === '#' && location.hash.length > 1) {
|
||||
var nonSearchAndSearchParts = location.hash.substring(1).split("?");
|
||||
var nonSearchPart;
|
||||
if (nonSearchAndSearchParts.length === 1) {
|
||||
nonSearchPart = nonSearchAndSearchParts[0];
|
||||
var query = location.hash.substring(1);
|
||||
var qpos = query.indexOf("?");
|
||||
if (qpos === -1) {
|
||||
nonSearchPart = query;
|
||||
} else {
|
||||
nonSearchPart = nonSearchAndSearchParts[0];
|
||||
curNavSearch = decodeURIComponent(nonSearchAndSearchParts[1]);
|
||||
nonSearchPart = query.substring(0, qpos);
|
||||
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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue