From e46028d4dab072fa1165933f1a6f33618d1999b8 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 14 Aug 2023 23:41:55 +0200 Subject: [PATCH 1/2] img click opens the image within the main panel, arrow-up-right-from-square opens the single image view --- ui/media/js/main.js | 143 +++++++++++++++++++++++--------------------- 1 file changed, 74 insertions(+), 69 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 24fe92a7..d97223cd 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3118,70 +3118,52 @@ const IMAGE_INFO = { const IGNORE_TOKENS = ["None", "none", "Null", "null", "false", "False", null] -function galleryImage(item) { - function galleryDetailTable(table) { - for (const [label, key] of Object.entries(IMAGE_INFO)) { - if (IGNORE_TOKENS.findIndex( k => (k == item[key])) == -1) { - let data = item[key] - if (key == "path") { - data = "…/"+data.split(/[\/\\]/).pop() - } - table.appendChild(htmlToElement(`${label}:${data}`)) +function openImageInNewTab(img, reqData) { + let w = window.open("/gallery-image.html") + w.addEventListener("DOMContentLoaded", () => { + let fimg = w.document.getElementById("focusimg") + fimg.src = img.src + + w.document.body.classList.add(themeField.value) + w.document.getElementById("use_these_settings").addEventListener("click", () => { + restoreTaskToUI({ + batchCount: 1, + numOutputsTotal: 1, + reqBody: reqData + }) + }) + w.document.getElementById("use_as_input").addEventListener("click", () => { + onUseURLasInput(img.src) + showToast("Loaded image as EasyDiffusion input image", 5000, false, w.document) + }) + let table = w.document.createElement("table") + galleryDetailTable(table, reqData) + w.document.getElementById("focusbox").replaceChildren(table) + document.dispatchEvent(new CustomEvent("newGalleryWindow", { detail: w })) + }) +} + +function galleryDetailTable(table, reqData) { + for (const [label, key] of Object.entries(IMAGE_INFO)) { + if (IGNORE_TOKENS.findIndex( k => (k == reqData[key])) == -1) { + let data = reqData[key] + if (key == "path") { + data = "…/"+data.split(/[\/\\]/).pop() } + table.appendChild(htmlToElement(`${label}:${data}`)) } } +} + +function galleryImage(reqData) { let div = document.createElement("div") div.classList.add("gallery-image") - let img = createElement("img", { style: "cursor: zoom-in;", src: "/image/" + item.path}, undefined, undefined) - img.dataset["request"] = JSON.stringify(item) + let img = createElement("img", { style: "cursor: zoom-in;", src: "/image/" + reqData.path}, undefined, undefined) + img.dataset["request"] = JSON.stringify(reqData) - img.addEventListener("click", (event) => { - let w = window.open("/gallery-image.html") - w.addEventListener("DOMContentLoaded", () => { - let fimg = w.document.getElementById("focusimg") - fimg.src = img.src - - w.document.body.classList.add(themeField.value) - w.document.getElementById("use_these_settings").addEventListener("click", () => { - restoreTaskToUI({ - batchCount: 1, - numOutputsTotal: 1, - reqBody: item - }) - }) - w.document.getElementById("use_as_input").addEventListener("click", () => { - onUseURLasInput(img.src) - showToast("Loaded image as EasyDiffusion input image", 5000, false, w.document) - }) - let table = w.document.createElement("table") - galleryDetailTable(table) - w.document.getElementById("focusbox").replaceChildren(table) - document.dispatchEvent(new CustomEvent("newGalleryWindow", { detail: w })) - }) - }) - - let hover = document.createElement("div") - hover.classList.add("gallery-image-hover") - - let infoBtn = document.createElement("button") - infoBtn.classList.add("tertiaryButton") - infoBtn.innerHTML = '' - infoBtn.addEventListener("click", function() { - let table = document.createElement("table") - - galleryDetailTable(table) - - galleryImginfoDialogContent.replaceChildren(table) - galleryImginfoDialog.showModal() - }) - hover.appendChild(infoBtn) - - - let imageExpandBtn=createElement("button", { style: "margin-left: 0.2em;"}, ["tertiaryButton"], undefined) - imageExpandBtn.innerHTML = '' - imageExpandBtn.addEventListener("click", function() { + img.addEventListener("click", function() { function previousImage(img) { const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) const index = allImages.indexOf(img) @@ -3207,14 +3189,26 @@ function galleryImage(item) { imageModal(imageModalParameter(img)) }) - hover.appendChild(imageExpandBtn) + let hover = document.createElement("div") + hover.classList.add("gallery-image-hover") + + let infoBtn = document.createElement("button") + infoBtn.classList.add("tertiaryButton") + infoBtn.innerHTML = '' + infoBtn.addEventListener("click", function() { + let table = document.createElement("table") + + galleryDetailTable(table, reqData) + + galleryImginfoDialogContent.replaceChildren(table) + galleryImginfoDialog.showModal() + }) + hover.appendChild(infoBtn) - let openInNewTabBtn = document.createElement("button") - openInNewTabBtn.classList.add("tertiaryButton") - openInNewTabBtn.innerHTML = '' - openInNewTabBtn.style["margin-left"] = "0.2em" + let openInNewTabBtn = createElement("button", {style: "margin-left: 0.2em;"}, ["tertiaryButton"], + htmlToElement('')) openInNewTabBtn.addEventListener("click", (e) => { - window.open(img.src) + openImageInNewTab(img, reqData) }) hover.appendChild(openInNewTabBtn) @@ -3226,7 +3220,19 @@ function galleryImage(item) { showToast("Loaded image as input image") }) + let useSettingsBtn = createElement("button", {}, ["tertiaryButton"], "Use Settings") + useSettingsBtn.addEventListener("click", (e) => { + restoreTaskToUI({ + batchCount: 1, + numOutputsTotal: 1, + reqBody: reqData + }) + showToast("Loaded settings") + }) + hover.appendChild(useAsInputBtn) + hover.appendChild(document.createElement("br")) + hover.appendChild(useSettingsBtn) div.replaceChildren(img, hover) return div @@ -3245,9 +3251,11 @@ galleryImginfoDialog.querySelector("#gallery-imginfo-close-button").addEventList galleryImginfoDialog.close() }) + galleryThumbnailSize.addEventListener("input", layoutGallery) window.addEventListener("resize", layoutGallery) + function layoutGallery() { let container = document.getElementById("imagecontainer") let thumbSize = parseFloat(galleryThumbnailSize.value) @@ -3262,9 +3270,11 @@ function layoutGallery() { }) } + galleryModelSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) galleryPromptSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500)) + function refreshGallery(newsearch = false) { if (newsearch) { galleryPageField.value = 0 @@ -3325,6 +3335,7 @@ function refreshGallery(newsearch = false) { document.getElementById("gallery-refresh").innerText = "Refresh" } + galleryPrevBtn.addEventListener("click", decrementGalleryPage) galleryNextBtn.addEventListener("click", incrementGalleryPage) @@ -3342,14 +3353,8 @@ function decrementGalleryPage() { refreshGallery(false) } + function incrementGalleryPage() { galleryPageField.value++ refreshGallery(false) } - -function gallery_keyDown_handler(event) { - if (event.key === 'Enter') { - event.preventDefault() - refreshGallery(true) - } -} From b4574646fdaa9695b53c036e14961fcd84995180 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Tue, 15 Aug 2023 01:42:53 +0200 Subject: [PATCH 2/2] Fix masonry layout --- ui/media/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 3ea05ba4..2a394de4 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3295,10 +3295,10 @@ function refreshGallery(newsearch = false) { return } json.forEach(item => { - container.appendChild(galleryImage(item)) + galleryImageContainer.appendChild(galleryImage(item)) }) // Wait for all images to be loaded - Promise.all(Array.from(container.querySelectorAll("img")).map(img => { + Promise.all(Array.from(galleryImageContainer.querySelectorAll("img")).map(img => { if (img.complete) { return Promise.resolve(img.naturalHeight !== 0)