mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-20 18:08:00 +02:00
Merge Improvements from JeLuF:gallery
- img click opens the image within the main panel - arrow-up-right-from-square opens the single image view
This commit is contained in:
ManInDark
GitHub
commit
bb12f05926
@ -3119,26 +3119,7 @@ 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(`<tr><th style="text-align: right;opacity:0.7;">${label}:</th><td>${data}</td></tr>`))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
img.addEventListener("click", (event) => {
|
||||
function openImageInNewTab(img, reqData) {
|
||||
let w = window.open("/gallery-image.html")
|
||||
w.addEventListener("DOMContentLoaded", () => {
|
||||
let fimg = w.document.getElementById("focusimg")
|
||||
@ -3149,7 +3130,7 @@ function galleryImage(item) {
|
||||
restoreTaskToUI({
|
||||
batchCount: 1,
|
||||
numOutputsTotal: 1,
|
||||
reqBody: item
|
||||
reqBody: reqData
|
||||
})
|
||||
})
|
||||
w.document.getElementById("use_as_input").addEventListener("click", () => {
|
||||
@ -3157,32 +3138,33 @@ function galleryImage(item) {
|
||||
showToast("Loaded image as EasyDiffusion input image", 5000, false, w.document)
|
||||
})
|
||||
let table = w.document.createElement("table")
|
||||
galleryDetailTable(table)
|
||||
galleryDetailTable(table, reqData)
|
||||
w.document.getElementById("focusbox").replaceChildren(table)
|
||||
document.dispatchEvent(new CustomEvent("newGalleryWindow", { detail: w }))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let hover = document.createElement("div")
|
||||
hover.classList.add("gallery-image-hover")
|
||||
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(`<tr><th style="text-align: right;opacity:0.7;">${label}:</th><td>${data}</td></tr>`))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let infoBtn = document.createElement("button")
|
||||
infoBtn.classList.add("tertiaryButton")
|
||||
infoBtn.innerHTML = '<i class="fa-regular fa-file-lines"></i>'
|
||||
infoBtn.addEventListener("click", function() {
|
||||
let table = document.createElement("table")
|
||||
function galleryImage(reqData) {
|
||||
|
||||
galleryDetailTable(table)
|
||||
let div = document.createElement("div")
|
||||
div.classList.add("gallery-image")
|
||||
|
||||
galleryImginfoDialogContent.replaceChildren(table)
|
||||
galleryImginfoDialog.showModal()
|
||||
})
|
||||
hover.appendChild(infoBtn)
|
||||
let img = createElement("img", { style: "cursor: zoom-in;", src: "/image/" + reqData.path}, undefined, undefined)
|
||||
img.dataset["request"] = JSON.stringify(reqData)
|
||||
|
||||
|
||||
let imageExpandBtn=createElement("button", { style: "margin-left: 0.2em;"}, ["tertiaryButton"], undefined)
|
||||
imageExpandBtn.innerHTML = '<i class="fa-solid fa-expand"></i>'
|
||||
imageExpandBtn.addEventListener("click", function() {
|
||||
img.addEventListener("click", function() {
|
||||
function previousImage(img) {
|
||||
const allImages = Array.from(galleryImageContainer.querySelectorAll(".gallery-image img"))
|
||||
const index = allImages.indexOf(img)
|
||||
@ -3208,14 +3190,26 @@ function galleryImage(item) {
|
||||
imageModal(imageModalParameter(img))
|
||||
})
|
||||
|
||||
hover.appendChild(imageExpandBtn)
|
||||
let hover = document.createElement("div")
|
||||
hover.classList.add("gallery-image-hover")
|
||||
|
||||
let openInNewTabBtn = document.createElement("button")
|
||||
openInNewTabBtn.classList.add("tertiaryButton")
|
||||
openInNewTabBtn.innerHTML = '<i class="fa-solid fa-arrow-up-right-from-square"></i>'
|
||||
openInNewTabBtn.style["margin-left"] = "0.2em"
|
||||
let infoBtn = document.createElement("button")
|
||||
infoBtn.classList.add("tertiaryButton")
|
||||
infoBtn.innerHTML = '<i class="fa-regular fa-file-lines"></i>'
|
||||
infoBtn.addEventListener("click", function() {
|
||||
let table = document.createElement("table")
|
||||
|
||||
galleryDetailTable(table, reqData)
|
||||
|
||||
galleryImginfoDialogContent.replaceChildren(table)
|
||||
galleryImginfoDialog.showModal()
|
||||
})
|
||||
hover.appendChild(infoBtn)
|
||||
|
||||
let openInNewTabBtn = createElement("button", {style: "margin-left: 0.2em;"}, ["tertiaryButton"],
|
||||
htmlToElement('<i class="fa-solid fa-arrow-up-right-from-square"></i>'))
|
||||
openInNewTabBtn.addEventListener("click", (e) => {
|
||||
window.open(img.src)
|
||||
openImageInNewTab(img, reqData)
|
||||
})
|
||||
hover.appendChild(openInNewTabBtn)
|
||||
|
||||
@ -3227,7 +3221,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
|
||||
@ -3246,9 +3252,11 @@ galleryImginfoDialog.querySelector("#gallery-imginfo-close-button").addEventList
|
||||
galleryImginfoDialog.close()
|
||||
})
|
||||
|
||||
|
||||
galleryThumbnailSize.addEventListener("input", layoutGallery)
|
||||
window.addEventListener("resize", layoutGallery)
|
||||
|
||||
|
||||
function layoutGallery() {
|
||||
let thumbSize = parseFloat(galleryThumbnailSize.value)
|
||||
thumbSize = (10*thumbSize*thumbSize)>>>0
|
||||
@ -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
|
||||
@ -3285,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)
|
||||
@ -3324,6 +3334,7 @@ function refreshGallery(newsearch = false) {
|
||||
document.getElementById("gallery-refresh").innerText = "Refresh"
|
||||
}
|
||||
|
||||
|
||||
galleryPrevBtn.addEventListener("click", decrementGalleryPage)
|
||||
galleryNextBtn.addEventListener("click", incrementGalleryPage)
|
||||
|
||||
@ -3341,14 +3352,8 @@ function decrementGalleryPage() {
|
||||
refreshGallery(false)
|
||||
}
|
||||
|
||||
|
||||
function incrementGalleryPage() {
|
||||
galleryPageField.value++
|
||||
refreshGallery(false)
|
||||
}
|
||||
|
||||
function gallery_keyDown_handler(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
refreshGallery(true)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user