@@ -449,15 +415,15 @@ class StatusBarPanel {
keyboard_return
-
`;
}
@@ -476,7 +442,7 @@ function hideOnClickOutside(element, instantiatingEvent) {
* Closes element if click is outside it.
* @param {Event} event
*/
- const outsideClickListener = (event) => {
+ const outsideClickListener = event => {
// Don't trigger if we're clicking inside the element, or if the element
// is not visible, or if this is the same click event that opened it.
if (
@@ -509,14 +475,30 @@ function hideOnMoveFocus(element, instantiatingEvent) {
* Closes element if key press is outside it.
* @param {Event} event
*/
- const outsideClickListener = (event) => {
+ const outsidePressListener = (event) => {
// Don't trigger if we're pressing keys while inside the element, or if the element
// is not visible, or if this is the same click event that opened it.
if (
!element.contains(event.target) &&
+ event.timeStamp !== instantiatingEvent.timeStamp &&
+ event.key !== "ArrowUp"
+ ) {
+ hideElement(element);
+ } else if (
+ event.key === "Escape" &&
event.timeStamp !== instantiatingEvent.timeStamp
) {
hideElement(element);
+ } else if (
+ event.key === "ArrowUp" ||
+ (event.key === "ArrowDown" &&
+ event.timeStamp !== instantiatingEvent.timeStamp)
+ ) {
+ const menuItems = element.getElementsByTagName("a");
+ menuItems[0].focus();
+
+ console.log("ev target:", event.target);
+ console.log("element", element);
}
};
@@ -526,7 +508,7 @@ function hideOnMoveFocus(element, instantiatingEvent) {
element
)
) {
- elementsWithKeyDownListeners[element] = outsideClickListener;
+ elementsWithKeyDownListeners[element] = outsidePressListener;
document.addEventListener(
"keydown",
elementsWithKeyDownListeners[element],
@@ -535,6 +517,38 @@ function hideOnMoveFocus(element, instantiatingEvent) {
}
}
+/**
+ * Handler for menu item keydown events
+ * Moves focus to next/previous element based on arrow direction.
+ * @param {Event} event
+ */
+const arrowNav = (event) => {
+ const currentElement = event.target;
+ if (event.key === "ArrowDown") {
+ event.preventDefault();
+ event.stopPropagation();
+ const nextElement = currentElement.nextElementSibling;
+ if (nextElement === null) {
+ currentElement.parentElement.firstElementChild.focus();
+ } else {
+ nextElement.focus();
+ }
+ } else if (event.key === "ArrowUp") {
+ event.preventDefault();
+ event.stopPropagation();
+ const prevElement = currentElement.previousElementSibling;
+ if (prevElement === null) {
+ currentElement.parentElement.lastElementChild.focus();
+ } else {
+ prevElement.focus();
+ }
+ } else if (event.key === "Tab") {
+ event.preventDefault();
+ event.stopPropagation();
+ currentElement.parentElement.closest(".cm-status-bar-select-content").previousElementSibling.focus();
+ }
+};
+
/**
* Hides the specified element and removes the click or keydown listener for it
* @param {Element} element
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index 35941a13..20f70173 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/src/web/waiters/ControlsWaiter.mjs
@@ -152,9 +152,7 @@ class ControlsWaiter {
const params = [
includeRecipe ? ["recipe", recipeStr] : undefined,
- includeInput && input.length
- ? ["input", Utils.escapeHtml(input)]
- : undefined,
+ includeInput && input.length ? ["input", Utils.escapeHtml(input)] : undefined,
inputChrEnc !== 0 ? ["ienc", inputChrEnc] : undefined,
outputChrEnc !== 0 ? ["oenc", outputChrEnc] : undefined,
inputEOLSeq !== "\n" ? ["ieol", inputEOLSeq] : undefined,
@@ -255,9 +253,7 @@ class ControlsWaiter {
return;
}
- const savedRecipes = localStorage.savedRecipes
- ? JSON.parse(localStorage.savedRecipes)
- : [];
+ const savedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
let recipeId = localStorage.recipeId || 0;
savedRecipes.push({
@@ -287,9 +283,7 @@ class ControlsWaiter {
}
// Add recipes to select
- const savedRecipes = localStorage.savedRecipes
- ? JSON.parse(localStorage.savedRecipes)
- : [];
+ const savedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
for (i = 0; i < savedRecipes.length; i++) {
const opt = document.createElement("option");
@@ -316,9 +310,7 @@ class ControlsWaiter {
if (!this.app.isLocalStorageAvailable()) return false;
const id = parseInt(document.getElementById("load-name").value, 10);
- const rawSavedRecipes = localStorage.savedRecipes
- ? JSON.parse(localStorage.savedRecipes)
- : [];
+ const rawSavedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
const savedRecipes = rawSavedRecipes.filter((r) => r.id !== id);
@@ -333,9 +325,7 @@ class ControlsWaiter {
if (!this.app.isLocalStorageAvailable()) return false;
const el = e.target;
- const savedRecipes = localStorage.savedRecipes
- ? JSON.parse(localStorage.savedRecipes)
- : [];
+ const savedRecipes = localStorage.savedRecipes ? JSON.parse(localStorage.savedRecipes) : [];
const id = parseInt(el.value, 10);
const recipe = savedRecipes.find((r) => r.id === id);