diff --git a/ui/index.html b/ui/index.html
index 490af689..4374c5ee 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -582,6 +582,10 @@
+
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 79cbc3b9..73ba6e31 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1670,7 +1670,11 @@ body.wait-pause {
#embeddings-list {
height: 70vH;
- width: 40vW;
+ width: 50vW;
+ margin-left: 0px;
+ margin-right: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
overflow-y: scroll;
}
@@ -1679,6 +1683,30 @@ body.wait-pause {
margin-bottom: 2px;
}
+#embeddings-list .collapsible {
+ background: var(--background-color3);
+ margin: 0px;
+ padding: 0.5em;
+ position: sticky;
+}
+
+#embeddings-list .embedding-category:nth-child(odd) .collapsible::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.02);
+ opacity: 1;
+ pointer-events: none;
+}
+
+#embeddings-list .collapsible-content {
+ padding-top: 0.4em;
+ padding-bottom: 0.4em;
+}
+
#embeddings-list::-webkit-scrollbar-thumb {
background: var(--background-color3);
}
diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index 03dc8b56..12952cad 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -425,27 +425,11 @@ function checkIfClickedOutsideDropdownElem(e) {
}
function collapseAllModifierCategory() {
- const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
-
- [...collapsibleElems].forEach((elem) => {
- const isActive = elem.classList.contains("active")
-
- if(isActive) {
- elem?.click()
- }
- })
+ collapseAll(".modifier-category .collapsible")
}
function expandAllModifierCategory() {
- const collapsibleElems = editorModifierEntries.querySelectorAll(".modifier-category .collapsible"); // needs to have ";"
-
- [...collapsibleElems].forEach((elem) => {
- const isActive = elem.classList.contains("active")
-
- if (!isActive) {
- elem?.click()
- }
- })
+ expandAll(".modifier-category .collapsible")
}
customModifiersTextBox.addEventListener("change", saveCustomModifiers)
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 20359640..023eb7b6 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -119,6 +119,7 @@ let embeddingsDialogCloseBtn = embeddingsDialog.querySelector("#embeddings-dialo
let embeddingsSearchBox = document.querySelector("#embeddings-search-box")
let embeddingsList = document.querySelector("#embeddings-list")
let embeddingsModeField = document.querySelector("#embeddings-mode")
+let embeddingsCollapsiblesBtn = document.querySelector("#embeddings-action-collapsibles-btn")
let makeImageBtn = document.querySelector("#makeImage")
let stopImageBtn = document.querySelector("#stopImage")
@@ -2150,7 +2151,7 @@ function updateEmbeddingsList(filter = "") {
} else {
let subdir = html(m[1], prefix + m[0] + "/", filter)
if (subdir != "") {
- folders += `${prefix}${m[0]}
` + subdir
+ folders += `${prefix}${m[0]}
` + subdir + '
'
}
}
})
@@ -2159,7 +2160,6 @@ function updateEmbeddingsList(filter = "") {
function onButtonClick(e) {
let text = e.target.dataset["embedding"]
- console.log(e.shiftKey, text)
if (embeddingsModeField.value == "insert") {
if (e.shiftKey) {
@@ -2197,6 +2197,10 @@ function updateEmbeddingsList(filter = "") {
embeddingsList.querySelectorAll("button").forEach((b) => {
b.addEventListener("click", onButtonClick)
})
+ createCollapsibles(embeddingsList)
+ if (filter != "") {
+ embeddingsExpandAll()
+ }
}
embeddingsButton.addEventListener("click", () => {
@@ -2214,6 +2218,51 @@ embeddingsSearchBox.addEventListener("input", (e) => {
modalDialogCloseOnBackdropClick(embeddingsDialog)
makeDialogDraggable(embeddingsDialog)
+const collapseText = "Collapse Categories"
+const expandText = "Expand Categories"
+
+const collapseIconClasses = ["fa-solid", "fa-square-minus"]
+const expandIconClasses = ["fa-solid", "fa-square-plus"]
+
+function embeddingsCollapseAll() {
+ const btnElem = embeddingsCollapsiblesBtn
+
+ const iconElem = btnElem.querySelector(".embeddings-action-icon")
+ const textElem = btnElem.querySelector(".embeddings-action-text")
+ collapseAll("#embeddings-list .collapsible")
+
+ collapsiblesBtnState = false
+
+ collapseIconClasses.forEach((c) => iconElem.classList.remove(c))
+ expandIconClasses.forEach((c) => iconElem.classList.add(c))
+
+ textElem.innerText = expandText
+}
+
+function embeddingsExpandAll() {
+ const btnElem = embeddingsCollapsiblesBtn
+
+ const iconElem = btnElem.querySelector(".embeddings-action-icon")
+ const textElem = btnElem.querySelector(".embeddings-action-text")
+ expandAll("#embeddings-list .collapsible")
+
+ collapsiblesBtnState = true
+
+ expandIconClasses.forEach((c) => iconElem.classList.remove(c))
+ collapseIconClasses.forEach((c) => iconElem.classList.add(c))
+
+ textElem.innerText = collapseText
+}
+
+embeddingsCollapsiblesBtn.addEventListener("click", (e) => {
+ if (collapsiblesBtnState) {
+ embeddingsCollapseAll()
+ } else {
+ embeddingsExpandAll()
+ }
+})
+
+
if (testDiffusers.checked) {
document.getElementById("embeddings-container").classList.remove("displayNone")
}
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index bbacbb47..9db0d1cc 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -129,6 +129,31 @@ function tryLoadOldCollapsibles() {
return null
}
+function collapseAll(selector) {
+ const collapsibleElems = document.querySelectorAll(selector); // needs to have ";"
+
+ [...collapsibleElems].forEach((elem) => {
+ const isActive = elem.classList.contains("active")
+
+ if(isActive) {
+ elem?.click()
+ }
+ })
+}
+
+function expandAll(selector) {
+ const collapsibleElems = document.querySelectorAll(selector); // needs to have ";"
+
+ [...collapsibleElems].forEach((elem) => {
+ const isActive = elem.classList.contains("active")
+
+ if (!isActive) {
+ elem?.click()
+ }
+ })
+}
+
+
function permute(arr) {
let permutations = []
let n = arr.length