@@ -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);
From 4c31c16eef27385943c27e7239c75fc5a6bd7b59 Mon Sep 17 00:00:00 2001
From: e218736 <147728997+e218736@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:13:56 +0000
Subject: [PATCH 5/7] formatting
---
src/web/utils/statusBar.mjs | 57 ++++++---------
src/web/waiters/ControlsWaiter.mjs | 112 ++++++++++++++---------------
2 files changed, 75 insertions(+), 94 deletions(-)
diff --git a/src/web/utils/statusBar.mjs b/src/web/utils/statusBar.mjs
index 454b36b0..0e85e0b5 100644
--- a/src/web/utils/statusBar.mjs
+++ b/src/web/utils/statusBar.mjs
@@ -82,24 +82,24 @@ class StatusBarPanel {
* @param {Event} e
*/
showDropUp(e) {
- if (e.type === "click" || e.keyCode === 13) {
+ if (e.type === "click" || e.key === 'Enter'|| e.key === ' ') {
const el = e.target
.closest(".cm-status-bar-select")
.querySelector(".cm-status-bar-select-content");
const btn = e.target.closest(".cm-status-bar-select-btn");
- if (btn.classList.contains("disabled")) return;
+ if (btn.classList.contains("disabled")) return;
- el.classList.add("show");
+ el.classList.add("show");
- // Focus the filter input if present
- const filter = el.querySelector(".cm-status-bar-filter-input");
- if (filter) filter.focus();
+ // Focus the filter input if present
+ const filter = el.querySelector(".cm-status-bar-filter-input");
+ if (filter) filter.focus();
- // Set up a listener to close the menu if the user clicks outside of it
- hideOnClickOutside(el, e);
- // Set up a listener to close the menu if the user presses key outside of it
- hideOnMoveFocus(el, e);
+ // Set up a listener to close the menu if the user clicks outside of it
+ hideOnClickOutside(el, e);
+ // Set up a listener to close the menu if the user presses key outside of it
+ hideOnMoveFocus(el, e);
}
}
@@ -181,8 +181,7 @@ class StatusBarPanel {
// CodeMirror always counts line breaks as one character.
// We want to show an accurate reading of how many bytes there are.
if (state.lineBreak.length !== 1) {
- docLength +=
- state.lineBreak.length * state.doc.lines - state.doc.lines - 1;
+ docLength += (state.lineBreak.length * state.doc.lines) - state.doc.lines - 1;
}
length.textContent = docLength;
lines.textContent = state.doc.lines;
@@ -237,6 +236,7 @@ class StatusBarPanel {
}
}
+
/**
* Sets the current EOL separator in the status bar
* @param {EditorState} state
@@ -344,7 +344,7 @@ class StatusBarPanel {
*/
constructLHS() {
return `
-
+
abc
@@ -386,13 +386,13 @@ class StatusBarPanel {
}
return `
-
+
schedule
ms
-
+
text_fields Raw Bytes
@@ -427,6 +427,7 @@ class StatusBarPanel {