diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 5e79ec56..c3733ba4 100644 --- a/ui/media/js/main.js +++ b/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() { - btnInfo.on_click(req, img) + newButton.addEventListener('click', function(event) { + 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 diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js index 50f5f162..69801571 100644 --- a/ui/media/js/utils.js +++ b/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 */