language-servers/roc
1
0
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2025-09-29 06:44:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Make search box keyboard-friendly

Browse source
This commit is contained in:
Richard Feldman 2024-11-29 03:54:08 -05:00
parent d72da8eb0f
commit e528489835
No known key found for this signature in database
GPG key ID: DAC334802F365236
1 changed files with 58 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

72
crates/docs/src/static/search.js
View file

@ -28,6 +28,56 @@
let topSearchResultListItem = undefined;
if (searchBox != null) {
function searchKeyDown(event) {
switch (event.key) {
case "ArrowDown": {
event.preventDefault();
const focused = document.querySelector("#search-type-ahead > li:not([class*='hidden']) > a:focus");
// Find the next element to focus.
let nextToFocus = focused?.parentElement?.nextElementSibling;
while (nextToFocus != null && nextToFocus.classList.contains("hidden")) {
nextToFocus = nextToFocus.nextElementSibling;
}
if (nextToFocus == null) {
// If none of the links were focused, focus the first one.
// Also if we've reached the last one in the list, wrap around to the first.
document.querySelector("#search-type-ahead > li:not([class*='hidden']) > a")?.focus();
} else {
nextToFocus.querySelector("a").focus();
}
break;
}
case "ArrowUp": {
event.preventDefault();
const focused = document.querySelector("#search-type-ahead > li:not([class*='hidden']) > a:focus");
// Find the next element to focus.
let nextToFocus = focused?.parentElement?.previousElementSibling;
while (nextToFocus != null && nextToFocus.classList.contains("hidden")) {
nextToFocus = nextToFocus.previousElementSibling;
}
if (nextToFocus == null) {
// If none of the links were focused, or we're at the first one, focus the search box again.
searchBox?.focus();
} else {
// If one of the links was focused, focus the previous one
nextToFocus.querySelector("a").focus();
}
break;
}
}
}
searchForm.addEventListener("keydown", searchKeyDown);
function search() {
topSearchResultListItem = undefined;
let text = searchBox.value.toLowerCase(); // Search is case-insensitive.
@ -88,30 +138,24 @@
// Capture '/' keypress for quick search
window.addEventListener("keyup", (e) => {
if (e.key === "s" && document.activeElement !== searchBox) {
e.preventDefault;
e.preventDefault();
searchBox.focus();
searchBox.value = "";
}
if (e.key === "Escape" && document.activeElement === searchBox) {
e.preventDefault;
// De-focus input box
if (e.key === "Escape") {
if (document.activeElement === searchBox) {
// De-focus and clear input box
searchBox.value = "";
searchBox.blur();
} else if (
e.key === "Escape" &&
searchTypeAhead.contains(document.activeElement)
) {
e.preventDefault;
// De-focus type ahead
} else if (searchTypeAhead.contains(document.activeElement)) {
searchTypeAhead.classList.add("hidden");
searchBox.focus();
searchBox.blur();
}
}
});
}
const isTouchSupported = () => {
try {
document.createEvent("TouchEvent");