Merge Improvements from JeLuF:gallery

- img click opens the image within the main panel
- arrow-up-right-from-square opens the single image view

ui/media/js/main.js

@@ -3119,70 +3119,52 @@ const IMAGE_INFO = {
 
 const IGNORE_TOKENS = ["None", "none", "Null", "null", "false", "False", null]
 
-function galleryImage(item) {
+function openImageInNewTab(img, reqData) {
-    function galleryDetailTable(table) {
+    let w = window.open("/gallery-image.html")
-        for (const [label, key] of Object.entries(IMAGE_INFO)) {
+    w.addEventListener("DOMContentLoaded", () => {
-            if (IGNORE_TOKENS.findIndex( k => (k == item[key])) == -1) {
+        let fimg = w.document.getElementById("focusimg")
-                let data = item[key]
+        fimg.src = img.src
-                if (key == "path") {
+
-                    data = "…/"+data.split(/[\/\\]/).pop()
+        w.document.body.classList.add(themeField.value)
-                }
+        w.document.getElementById("use_these_settings").addEventListener("click", () => {
-                table.appendChild(htmlToElement(`<tr><th style="text-align: right;opacity:0.7;">${label}:</th><td>${data}</td></tr>`))
+            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 = "&hellip;/"+data.split(/[\/\\]/).pop()
             }
+            table.appendChild(htmlToElement(`<tr><th style="text-align: right;opacity:0.7;">${label}:</th><td>${data}</td></tr>`))
         }
     }
+}
+
+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)
+    let img = createElement("img", { style: "cursor: zoom-in;", src: "/image/" + reqData.path}, undefined, undefined)
-    img.dataset["request"] = JSON.stringify(item)
+    img.dataset["request"] = JSON.stringify(reqData)
 
-    img.addEventListener("click", (event) => {
+    img.addEventListener("click", function() {
-        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 = '<i class="fa-regular fa-file-lines"></i>'
-    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 = '<i class="fa-solid fa-expand"></i>'
-    imageExpandBtn.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 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 = document.createElement("button")
+    let openInNewTabBtn = createElement("button", {style: "margin-left: 0.2em;"}, ["tertiaryButton"],
-    openInNewTabBtn.classList.add("tertiaryButton")
+                                 htmlToElement('<i class="fa-solid fa-arrow-up-right-from-square"></i>'))
-    openInNewTabBtn.innerHTML = '<i class="fa-solid fa-arrow-up-right-from-square"></i>'
-    openInNewTabBtn.style["margin-left"] = "0.2em"
     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)
-    }
-}