fix linting

This commit is contained in:
Sj-Si 2024-01-14 13:49:39 -05:00
parent 261972f929
commit 019f6e3c5a
1 changed files with 28 additions and 26 deletions

View File

@ -49,37 +49,39 @@ function setupExtraNetworksForTab(tabname) {
var applyFilter = function() { var applyFilter = function() {
var searchTerm = search.value.toLowerCase(); var searchTerm = search.value.toLowerCase();
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) { gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
var searchOnly = elem.querySelector('.search_only'); var searchOnly = elem.querySelector('.search_only');
var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) { return t.textContent.toLowerCase() }).join(" "); var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) {
return t.textContent.toLowerCase();
}).join(" ");
var visible = text.indexOf(searchTerm) != -1; var visible = text.indexOf(searchTerm) != -1;
if (searchOnly && searchTerm.length < 4) { if (searchOnly && searchTerm.length < 4) {
visible = false; visible = false;
} }
elem.style.display = visible ? "" : "none"; elem.style.display = visible ? "" : "none";
}); });
applySort(); applySort();
}; };
var applySort = function() { var applySort = function() {
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card'); var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
var reverse = sortOrder.classList.contains("sortReverse"); var reverse = sortOrder.classList.contains("sortReverse");
var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name"; var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name";
sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1); sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length; var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length;
if (sortKeyStore == sort.dataset.sortkey) { if (sortKeyStore == sort.dataset.sortkey) {
return; return;
} }
sort.dataset.sortkey = sortKeyStore; sort.dataset.sortkey = sortKeyStore;
cards.forEach(function(card) { cards.forEach(function(card) {
card.originalParentElement = card.parentElement; card.originalParentElement = card.parentElement;
}); });
@ -90,7 +92,7 @@ function setupExtraNetworksForTab(tabname) {
if (!isNaN(a) && !isNaN(b)) { if (!isNaN(a) && !isNaN(b)) {
return parseInt(a) - parseInt(b); return parseInt(a) - parseInt(b);
} }
return (a < b ? -1 : (a > b ? 1 : 0)); return (a < b ? -1 : (a > b ? 1 : 0));
}); });
if (reverse) { if (reverse) {
@ -103,14 +105,14 @@ function setupExtraNetworksForTab(tabname) {
card.originalParentElement.appendChild(card); card.originalParentElement.appendChild(card);
}); });
}; };
search.addEventListener("input", applyFilter); search.addEventListener("input", applyFilter);
sortOrder.addEventListener("click", function() { sortOrder.addEventListener("click", function() {
sortOrder.classList.toggle("sortReverse"); sortOrder.classList.toggle("sortReverse");
applySort(); applySort();
}); });
applyFilter(); applyFilter();
extraNetworksApplySort[tab_id] = applySort; extraNetworksApplySort[tab_id] = applySort;
extraNetworksApplyFilter[tab_id] = applyFilter; extraNetworksApplyFilter[tab_id] = applyFilter;
}); });
@ -263,11 +265,11 @@ function saveCardPreview(event, tabname, filename) {
function extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id) { function extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id) {
/** /**
* Processes `onclick` events when user clicks on files in tree. * Processes `onclick` events when user clicks on files in tree.
* *
* @param event The generated event. * @param event The generated event.
* @param btn The clicked `action-list-item` button. * @param btn The clicked `action-list-item` button.
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
* @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. * @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
*/ */
var par = btn.parentElement; var par = btn.parentElement;
var search_id = tabname + "_" + tab_id + "_extra_search"; var search_id = tabname + "_" + tab_id + "_extra_search";
@ -278,13 +280,13 @@ function extraNetworksTreeProcessFileClick(event, btn, tabname, tab_id) {
function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) { function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
/** /**
* Processes `onclick` events when user clicks on directories in tree. * Processes `onclick` events when user clicks on directories in tree.
* *
* Here is how the tree reacts to clicks for various states: * Here is how the tree reacts to clicks for various states:
* unselected unopened directory: Diretory is selected and expanded. * unselected unopened directory: Diretory is selected and expanded.
* unselected opened directory: Directory is selected. * unselected opened directory: Directory is selected.
* selected opened directory: Directory is collapsed and deselected. * selected opened directory: Directory is collapsed and deselected.
* chevron is clicked: Directory is expanded or collapsed. Selected state unchanged. * chevron is clicked: Directory is expanded or collapsed. Selected state unchanged.
* *
* @param event The generated event. * @param event The generated event.
* @param btn The clicked `action-list-item` button. * @param btn The clicked `action-list-item` button.
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
@ -311,7 +313,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
var sels = document.querySelectorAll("button.action-list-content"); var sels = document.querySelectorAll("button.action-list-content");
[...sels].forEach(el => { [...sels].forEach(el => {
el.removeAttribute("selected"); el.removeAttribute("selected");
}) });
} }
function _select_button(_btn) { function _select_button(_btn) {
@ -322,12 +324,12 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
function _update_search(_tabname, _tab_id, _search_text) { function _update_search(_tabname, _tab_id, _search_text) {
// Update search input with select button's path. // Update search input with select button's path.
search_input_elem = gradioApp().querySelector("#" + tabname + "_" + tab_id + "_extra_search"); var search_input_elem = gradioApp().querySelector("#" + tabname + "_" + tab_id + "_extra_search");
search_input_elem.value = _search_text; search_input_elem.value = _search_text;
updateInput(search_input_elem); updateInput(search_input_elem);
} }
// If user clicks on the chevron, then we do not select the folder. // If user clicks on the chevron, then we do not select the folder.
if (true_targ.matches(".action-list-item-action--leading, .action-list-item-action-chevron")) { if (true_targ.matches(".action-list-item-action--leading, .action-list-item-action-chevron")) {
_expand_or_collapse(ul, btn); _expand_or_collapse(ul, btn);
@ -355,10 +357,10 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, tab_id) {
function extraNetworksTreeOnClick(event, tabname, tab_id) { function extraNetworksTreeOnClick(event, tabname, tab_id) {
/** /**
* Handles `onclick` events for buttons within an `extra-network-tree .action-list--tree`. * Handles `onclick` events for buttons within an `extra-network-tree .action-list--tree`.
* *
* Determines whether the clicked button in the tree is for a file entry or a directory * Determines whether the clicked button in the tree is for a file entry or a directory
* then calls the appropriate function. * then calls the appropriate function.
* *
* @param event The generated event. * @param event The generated event.
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
* @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. * @param tab_id The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
@ -520,10 +522,10 @@ window.addEventListener("keydown", function(event) {
* before we can actually run the `setupExtraNetworks` function. * before we can actually run the `setupExtraNetworks` function.
* The `onUiLoaded` function actually runs before all of our extra network tabs are * The `onUiLoaded` function actually runs before all of our extra network tabs are
* finished generating. Thus we needed this new method. * finished generating. Thus we needed this new method.
* *
*/ */
var uiAfterScriptsCallbacks = [] var uiAfterScriptsCallbacks = [];
var uiAfterScriptsTimeout = null; var uiAfterScriptsTimeout = null;
var executedAfterScripts = false; var executedAfterScripts = false;
@ -545,4 +547,4 @@ document.addEventListener("DOMContentLoaded", function() {
mutationObserver.observe(gradioApp(), {childList: true, subtree: true}); mutationObserver.observe(gradioApp(), {childList: true, subtree: true});
}); });
uiAfterScriptsCallbacks.push(setupExtraNetworks); uiAfterScriptsCallbacks.push(setupExtraNetworks);