mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow the theme picker to work with arrow keys

Browse Source 
This is mostly motivated by docs.rs. It's really weird
when arrow keys work in the top dropdown menu, but don't work
in other dropdown menus on the same page.
This commit is contained in:
Michael Howell 2020-10-30 13:34:30 -07:00
parent 300362e0e4
commit ac3a434ed9
1 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/librustdoc/html/render/mod.rs
View File

@ -798,17 +798,61 @@ function handleThemeButtonsBlur(e) {{
var active = document.activeElement;
var related = e.relatedTarget;
if (active.id !== "themePicker" &&
if (active.id !== "theme-picker" &&
(!active.parentNode || active.parentNode.id !== "theme-choices") &&
(!related ||
(related.id !== "themePicker" &&
(related.id !== "theme-picker" &&
(!related.parentNode || related.parentNode.id !== "theme-choices")))) {{
hideThemeButtonState();
}}
}}
function handleThemeKeyPress(e) {{
if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {{ return; }}
if (!themePicker.parentNode.contains(e.target)) {{ return; }}
var active = document.activeElement;
switch (e.key) {{
case "ArrowUp":
e.preventDefault();
if (active.previousElementSibling && e.target.id !== "theme-picker") {{
active.previousElementSibling.focus();
}} else {{
showThemeButtonState();
themes.lastElementChild.focus();
}}
break;
case "ArrowDown":
e.preventDefault();
if (active.nextElementSibling && e.target.id !== "theme-picker") {{
active.nextElementSibling.focus();
}} else {{
showThemeButtonState();
themes.firstElementChild.focus();
}}
break;
case "Enter":
case "Return":
case "Space":
if (e.target.id === "theme-picker" && themes.style.display === "none") {{
e.preventDefault();
showThemeButtonState();
themes.firstElementChild.focus();
}}
break;
case "Home":
e.preventDefault();
themes.firstElementChild.focus();
break;
case "End":
e.preventDefault();
themes.lastElementChild.focus();
break;
}}
}};
themePicker.onclick = switchThemeButtonState;
themePicker.onblur = handleThemeButtonsBlur;
document.addEventListener("keydown", handleThemeKeyPress);
{}.forEach(function(item) {{
var but = document.createElement("button");
but.textContent = item;