TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor changes to left/right arrow navigation

Browse Source
This commit is contained in:
Christian Bastian
2024-02-12 14:47:30 -05:00
parent c94a85c3fa
commit 1e844982c3
1 changed files with 80 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
web/model-manager.js
View File

@@ -411,33 +411,81 @@ class DirectoryDropdown {
e.target.blur(); e.target.blur();
} }
} }
else if (e.key === "ArrowRight") { else if (e.key === "ArrowRight" && dropdown.style.display !== "none") {
const selection = options[iSelection]; const selection = options[iSelection];
if (selection !== undefined && selection !== null) { if (selection !== undefined && selection !== null) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); // prevent cursor move e.preventDefault(); // prevent cursor move
DirectoryDropdown.submitSearch( const input = e.target;
e.target, DirectoryDropdown.selectionToInput(input, selection, sep);
selection, updateDropdown();
updateDropdown, //updateCallback();
updateCallback, //submitCallback();
submitCallback, const options = dropdown.children;
sep, if (options.length > 0) {
); // arrow key navigation
options[0].classList.add(DROPDOWN_DIRECTORY_SELECTION_CLASS);
}
}
}
else if (e.key === "ArrowLeft" && dropdown.style.display !== "none") {
const input = e.target;
const oldFilterText = input.value;
const iSep = oldFilterText.lastIndexOf(sep, oldFilterText.length - 2);
const newFilterText = oldFilterText.substring(0, iSep + 1);
if (oldFilterText !== newFilterText) {
const delta = oldFilterText.substring(iSep + 1);
let isMatch = delta[delta.length-1] === sep;
if (!isMatch) {
const options = dropdown.children;
for (let i = 0; i < options.length; i++) {
const option = options[i];
if (option.innerText.startsWith(delta)) {
isMatch = true;
break;
}
}
}
if (isMatch) {
e.stopPropagation();
e.preventDefault(); // prevent cursor move
input.value = newFilterText;
updateDropdown();
//updateCallback();
//submitCallback();
const options = dropdown.children;
let isSelected = false;
for (let i = 0; i < options.length; i++) {
const option = options[i];
if (option.innerText.startsWith(delta)) {
option.classList.add(DROPDOWN_DIRECTORY_SELECTION_CLASS);
isSelected = true;
break;
}
}
if (!isSelected) {
const options = dropdown.children;
if (options.length > 0) {
// arrow key navigation
options[0].classList.add(DROPDOWN_DIRECTORY_SELECTION_CLASS);
}
}
}
} }
} }
else if (e.key === "Enter") { else if (e.key === "Enter") {
e.stopPropagation(); e.stopPropagation();
DirectoryDropdown.submitSearch( const input = e.target
e.target, const selection = options[iSelection];
options[iSelection], if (selection !== undefined && selection !== null) {
updateDropdown, DirectoryDropdown.selectionToInput(input, selection, sep);
updateCallback, updateDropdown();
submitCallback, updateCallback();
sep, }
); submitCallback();
input.blur();
} }
else if (e.key === "ArrowDown" || e.key === "ArrowUp") { else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && dropdown.style.display !== "none") {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); // prevent cursor move e.preventDefault(); // prevent cursor move
let iNext = options.length; let iNext = options.length;
@@ -484,29 +532,15 @@ class DirectoryDropdown {
/** /**
* @param {HTMLInputElement} input * @param {HTMLInputElement} input
* @param {HTMLParagraphElement | undefined | null} selection * @param {HTMLParagraphElement | undefined | null} selection
* @param {Function} updateDropdown
* @param {Fucntion} [updateCallback=() => {}]
* @param {Function} [submitCallback=() => {}]
* @param {String} [sep="/"] * @param {String} [sep="/"]
*/ */
static submitSearch(input, selection, updateDropdown, updateCallback = () => {}, submitCallback = () => {}, sep = "/") { static selectionToInput(input, selection, sep) {
let blur = true; selection.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS);
if (selection !== undefined && selection !== null) { const selectedText = selection.innerText;
selection.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS); const oldFilterText = input.value;
const selectedText = selection.innerText; const iSep = oldFilterText.lastIndexOf(sep);
blur = !selectedText.endsWith(sep); // is directory const previousPath = oldFilterText.substring(0, iSep + 1);
const oldFilterText = input.value; input.value = previousPath + selectedText;
const iSep = oldFilterText.lastIndexOf(sep);
const previousPath = oldFilterText.substring(0, iSep + 1);
input.value = previousPath + selectedText;
updateDropdown();
updateCallback();
}
if (blur) {
input.blur();
}
submitCallback();
} }
/** /**
@@ -634,14 +668,11 @@ class DirectoryDropdown {
}; };
const selection_submit = (e) => { const selection_submit = (e) => {
e.stopPropagation(); e.stopPropagation();
DirectoryDropdown.submitSearch( const selection = e.target;
input, DirectoryDropdown.selectionToInput(input, selection, sep);
e.target, updateDropdown();
updateDropdown, updateCallback();e.target
updateCallback, submitCallback();
submitCallback,
sep
);
}; };
const innerHtml = options.map((text) => { const innerHtml = options.map((text) => {
/** @type {HTMLParagraphElement} */ /** @type {HTMLParagraphElement} */