From 7dca8e7698101fd5f610675f21569eba628883f8 Mon Sep 17 00:00:00 2001
From: catboxanon <122327233+catboxanon@users.noreply.github.com>
Date: Fri, 2 Jun 2023 04:08:45 +0000
Subject: Support dynamic sort of extra networks

---
 javascript/extraNetworks.js | 47 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

(limited to 'javascript/extraNetworks.js')

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index aafe0a00..58bc7f1d 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -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;
 }
-- 
cgit v1.2.1


From 4cc0cede6d4cae74779b1b4cfc4b7bf7bfdaeaa6 Mon Sep 17 00:00:00 2001
From: catboxanon <122327233+catboxanon@users.noreply.github.com>
Date: Fri, 2 Jun 2023 04:12:08 +0000
Subject: lint fixes

---
 javascript/extraNetworks.js | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

(limited to 'javascript/extraNetworks.js')

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 58bc7f1d..b87bca3e 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -10,7 +10,7 @@ function setupExtraNetworksForTab(tabname) {
     search.classList.add('search');
     sort.classList.add('sort');
     sortOrder.classList.add('sortorder');
-    sort.dataset.sortkey = 'sortDefault'
+    sort.dataset.sortkey = 'sortDefault';
     tabs.appendChild(search);
     tabs.appendChild(sort);
     tabs.appendChild(sortOrder);
@@ -35,42 +35,45 @@ 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)
+        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')
+        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))
+            if (!isNaN(a) && !isNaN(b)) {
                 return parseInt(a) - parseInt(b);
+            }
 
             return (a < b ? -1 : (a > b ? 1 : 0));
-        })
-        if (reverse)
+        });
+        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();
-- 
cgit v1.2.1