'Download all images' button (#765)

* Use standard DOM function

* Add 'download all images' button

---------

Co-authored-by: cmdr2 <secondary.cmdr2@gmail.com>

ui/index.html

@@ -277,9 +277,11 @@
                 and selecting the desired modifiers.<br/><br/>
                 Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
             </div>
+
             <div id="preview-content">
                 <div id="preview-tools">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
+                    <button id="save-all-images" class="primaryButton"><i class="fa-solid fa-download"></i> Download All Images</button>
                 </div>
             </div>
         </div>

ui/media/css/main.css

@@ -468,6 +468,7 @@ div.img-preview img {
     background: var(--accent-color);
     border: var(--primary-button-border);
     color: rgb(255, 221, 255);
+    padding: 3pt 6pt;
 }
 .secondaryButton {
     background: rgb(132, 8, 0);

ui/media/js/main.js

@@ -61,6 +61,7 @@ let promptStrengthContainer = document.querySelector('#prompt_strength_container
 let initialText = document.querySelector("#initial-text")
 let previewTools = document.querySelector("#preview-tools")
 let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
+let saveAllImagesBtn = document.querySelector("#save-all-images")
 
 let maskSetting = document.querySelector('#enable_mask')
 
@@ -1160,6 +1161,21 @@ clearAllPreviewsBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Clear
     taskEntries.forEach(removeTask)
 })})
 
+saveAllImagesBtn.addEventListener('click', (e) => {
+    document.querySelectorAll(".imageTaskContainer").forEach(container => {
+        let req = htmlTaskMap.get(container)
+        container.querySelectorAll(".imgContainer img").forEach(img => {
+            if (img.closest('.imgItem').style.display === 'none') {
+                // console.log('skipping hidden image', img)
+                return
+            }
+
+            onDownloadImageClick(req, img)
+            // console.log(req)
+        })
+    })
+})
+
 stopImageBtn.addEventListener('click', (e) => { shiftOrConfirm(e, "Stop all the tasks?", async function(e) {
     await stopAllTasks()
 })})

ui/media/js/utils.js

@@ -20,19 +20,6 @@ function getNextSibling(elem, selector) {
     }
 }
 
-function findClosestAncestor(element, selector) {
-  if (!element || !element.parentNode) {
-      // reached the top of the DOM tree, return null
-      return null;
-  } else if (element.parentNode.matches(selector)) {
-      // found an ancestor that matches the selector, return it
-      return element.parentNode;
-  } else {
-      // continue searching upwards
-      return findClosestAncestor(element.parentNode, selector);
-  }
-}
-
 
 /* Panel Stuff */