Merge pull request #692 from JeLuF/remove-result

Add "Remove" button to each image's hover menu (Fixes #682)

ui/media/js/main.js

@@ -287,6 +287,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             imageSeedLabel.innerText = 'Seed: ' + req.seed
 
             let buttons = [
+		{ text: 'Remove', on_click: onRemoveClick, class: 'secondaryButton' },
                 { text: 'Use as Input', on_click: onUseAsInputClick },
                 { text: 'Download', on_click: onDownloadImageClick },
                 { text: 'Make Similar Images', on_click: onMakeSimilarClick },
@@ -304,9 +305,12 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                 const newButton = document.createElement('button')
                 newButton.classList.add('tasksBtns')
                 newButton.innerText = btnInfo.text
-                newButton.addEventListener('click', function() {
+                newButton.addEventListener('click', function(event) {
-                    btnInfo.on_click(req, img)
+                    btnInfo.on_click(req, img, event)
                 })
+                if (btnInfo.class !== undefined) {
+                   newButton.classList.add(btnInfo.class)
+                }
                 imgItemInfo.appendChild(newButton)
             }
             buttons.forEach(btn => {
@@ -320,6 +324,10 @@ function showImages(reqBody, res, outputContainer, livePreview) {
     })
 }
 
+function onRemoveClick(req, img, event) {
+    shiftOrConfirm(event, "Remove the image from the results?", () => { findClosestAncestor(img, '.imgItem').style.display='none' })
+}
+
 function onUseAsInputClick(req, img) {
     const imgData = img.src
 

ui/media/js/utils.js

@@ -20,6 +20,19 @@ 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 */