mirrors/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-08-01 10:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added keyboard navigation + selection

Browse Source
This commit is contained in:
pythongosssss 2023-04-02 21:01:39 +01:00
parent 8a0a85e0fa
commit 74893be1ce
1 changed files with 62 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/extensions/core/contextMenuFilter.js
View File

@ -25,13 +25,73 @@ app.registerExtension({
filter.placeholder = "Filter list"; filter.placeholder = "Filter list";
this.root.prepend(filter); this.root.prepend(filter);
let selectedIndex = 0;
let items = this.root.querySelectorAll(".litemenu-entry");
let itemCount = items.length;
let selectedItem;
// Apply highlighting to the selected item
function updateSelected() {
if (selectedItem) {
selectedItem.style.setProperty("background-color", "");
selectedItem.style.setProperty("color", "");
}
selectedItem = items[selectedIndex];
if (selectedItem) {
selectedItem.style.setProperty("background-color", "#ccc", "important");
selectedItem.style.setProperty("color", "#000", "important");
}
}
updateSelected();
// Arrow up/down to select items
filter.addEventListener("keydown", (e) => {
if (e.key === "ArrowUp") {
if (selectedIndex === 0) {
selectedIndex = itemCount - 1;
} else {
selectedIndex--;
}
updateSelected();
e.preventDefault();
} else if (e.key === "ArrowDown") {
if (selectedIndex === itemCount - 1) {
selectedIndex = 0;
} else {
selectedIndex++;
}
updateSelected();
e.preventDefault();
} else if ((selectedItem && e.key === "Enter") || e.keyCode === 13 || e.keyCode === 10) {
selectedItem.click();
}
});
filter.addEventListener("input", () => { filter.addEventListener("input", () => {
// Hide all items that dont match our filter // Hide all items that dont match our filter
const term = filter.value.toLocaleLowerCase(); const term = filter.value.toLocaleLowerCase();
const items = this.root.querySelectorAll(".litemenu-entry"); items = this.root.querySelectorAll(".litemenu-entry");
// When filtering recompute which items are visible for arrow up/down
// Try and maintain selection
let visibleItems = [];
for (const item of items) { for (const item of items) {
item.style.display = !term || item.textContent.toLocaleLowerCase().includes(term) ? "block" : "none"; const visible = !term || item.textContent.toLocaleLowerCase().includes(term);
if (visible) {
item.style.display = "block";
if (item === selectedItem) {
selectedIndex = visibleItems.length;
}
visibleItems.push(item);
} else {
item.style.display = "none";
if (item === selectedItem) {
selectedIndex = 0;
}
}
} }
items = visibleItems;
updateSelected();
// If we have an event then we can try and position the list under the source // If we have an event then we can try and position the list under the source
if (options.event) { if (options.event) {