Support dynamic sort of extra networks

This commit is contained in:
catboxanon
2023-06-02 04:08:45 +00:00
parent 3e995778fc
commit 7dca8e7698
9 changed files with 85 additions and 7 deletions

View File

@@ -3,10 +3,17 @@ function setupExtraNetworksForTab(tabname) {
var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
var sort = gradioApp().getElementById(tabname + '_extra_sort');
var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
search.classList.add('search');
sort.classList.add('sort');
sortOrder.classList.add('sortorder');
sort.dataset.sortkey = 'sortDefault'
tabs.appendChild(search);
tabs.appendChild(sort);
tabs.appendChild(sortOrder);
tabs.appendChild(refresh);
var applyFilter = function() {
@@ -26,8 +33,48 @@ function setupExtraNetworksForTab(tabname) {
});
};
var applySort = function() {
var reverse = sortOrder.classList.contains("sortReverse");
var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort","").replaceAll(" ", "_").replace(/_+$/, "").trim();
sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : ""
var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : ""
if (!sortKey || sortKeyStore == sort.dataset.sortkey)
return;
sort.dataset.sortkey = sortKeyStore;
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card')
cards.forEach(function(card) {
card.originalParentElement = card.parentElement;
})
var sortedCards = Array.from(cards);
sortedCards.sort(function(cardA, cardB) {
var a = cardA.dataset[sortKey];
var b = cardB.dataset[sortKey];
if (!isNaN(a) && !isNaN(b))
return parseInt(a) - parseInt(b);
return (a < b ? -1 : (a > b ? 1 : 0));
})
if (reverse)
sortedCards.reverse();
cards.forEach(function(card) {
card.remove();
})
sortedCards.forEach(function(card) {
card.originalParentElement.appendChild(card);
})
}
search.addEventListener("input", applyFilter);
applyFilter();
["change", "blur", "click"].forEach(function(evt) {
sort.querySelector("input").addEventListener(evt, applySort);
})
sortOrder.addEventListener("click", function() {
sortOrder.classList.toggle("sortReverse");
applySort();
});
extraNetworksApplyFilter[tabname] = applyFilter;
}