From 0995e879cea8ce871489ea8e393bb0eba6edc09c Mon Sep 17 00:00:00 2001 From: Florian Horn Date: Thu, 27 Oct 2022 16:20:01 +0200 Subject: added save button and shortcut (s) to Modal View --- javascript/imageviewer.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) (limited to 'javascript/imageviewer.js') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 9e380c65..3aa3b29e 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -81,6 +81,25 @@ function modalImageSwitch(offset) { } } +function saveImage(){ + const tabTxt2Img = gradioApp().getElementById("tab_txt2img") + const tabImg2Img = gradioApp().getElementById("tab_img2img") + const saveTxt2Img = "save_txt2img" + const saveImg2Img = "save_img2img" + if (tabTxt2Img.style["display"] != "none") { + gradioApp().getElementById(saveTxt2Img).click() + } else if (tabImg2Img.style["display"] != "none") { + gradioApp().getElementById(saveImg2Img).click() + } else { + console.error("missing implementation for saving modal of this type") + } +} + +function modalSaveImage(event) { + saveImage() + event.stopPropagation() +} + function modalNextImage(event) { modalImageSwitch(1) event.stopPropagation() @@ -93,6 +112,9 @@ function modalPrevImage(event) { function modalKeyHandler(event) { switch (event.key) { + case "s": + saveImage() + break; case "ArrowLeft": modalPrevImage(event) break; @@ -198,6 +220,13 @@ document.addEventListener("DOMContentLoaded", function() { modalTileImage.title = "Preview tiling"; modalControls.appendChild(modalTileImage) + const modalSave = document.createElement("span") + modalSave.className = "modalSave cursor" + modalSave.innerHTML = "🖫" + modalSave.addEventListener("click", modalSaveImage, true) + modalSave.title = "Save Image(s)" + modalControls.appendChild(modalSave) + const modalClose = document.createElement('span') modalClose.className = 'modalClose cursor'; modalClose.innerHTML = '×' -- cgit v1.2.1 From 403c5dba86f0faac6746df24d16e4d08aab8c9c5 Mon Sep 17 00:00:00 2001 From: Florian Horn Date: Fri, 28 Oct 2022 00:58:18 +0200 Subject: hide save btn for other tabs than txt2img and img2img --- javascript/imageviewer.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'javascript/imageviewer.js') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 3aa3b29e..67916536 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -13,6 +13,15 @@ function showModal(event) { } lb.style.display = "block"; lb.focus() + + const tabTxt2Img = gradioApp().getElementById("tab_txt2img") + const tabImg2Img = gradioApp().getElementById("tab_img2img") + // show the save button in modal only on txt2img or img2img tabs + if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") { + gradioApp().getElementById("modal_save").style.display = "inline" + } else { + gradioApp().getElementById("modal_save").style.display = "none" + } event.stopPropagation() } @@ -86,9 +95,9 @@ function saveImage(){ const tabImg2Img = gradioApp().getElementById("tab_img2img") const saveTxt2Img = "save_txt2img" const saveImg2Img = "save_img2img" - if (tabTxt2Img.style["display"] != "none") { + if (tabTxt2Img.style.display != "none") { gradioApp().getElementById(saveTxt2Img).click() - } else if (tabImg2Img.style["display"] != "none") { + } else if (tabImg2Img.style.display != "none") { gradioApp().getElementById(saveImg2Img).click() } else { console.error("missing implementation for saving modal of this type") @@ -222,6 +231,7 @@ document.addEventListener("DOMContentLoaded", function() { const modalSave = document.createElement("span") modalSave.className = "modalSave cursor" + modalSave.id = "modal_save" modalSave.innerHTML = "🖫" modalSave.addEventListener("click", modalSaveImage, true) modalSave.title = "Save Image(s)" -- cgit v1.2.1 From b663ee2cff6831354e1b5326800c8d1bf300cafe Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Thu, 5 Jan 2023 00:36:10 +0300 Subject: fix fullscreen view showing wrong image on firefox --- javascript/imageviewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript/imageviewer.js') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 67916536..97f56c07 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -148,7 +148,7 @@ function showGalleryImage() { if(e && e.parentElement.tagName == 'DIV'){ e.style.cursor='pointer' e.style.userSelect='none' - e.addEventListener('click', function (evt) { + e.addEventListener('mousedown', function (evt) { if(!opts.js_modal_lightbox) return; modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed) showModal(evt) -- cgit v1.2.1 From 5f4fa942b8ec3ed3b15a352903489d6f9e6eb46e Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Thu, 5 Jan 2023 02:38:52 +0300 Subject: do not show full window image preview when right mouse button is used --- javascript/imageviewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript/imageviewer.js') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 97f56c07..b7bc2fe1 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -149,7 +149,7 @@ function showGalleryImage() { e.style.cursor='pointer' e.style.userSelect='none' e.addEventListener('mousedown', function (evt) { - if(!opts.js_modal_lightbox) return; + if(!opts.js_modal_lightbox || evt.button != 0) return; modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed) showModal(evt) }, true); -- cgit v1.2.1 From b202714b65aa2145ff965ed4f197ac1516093f34 Mon Sep 17 00:00:00 2001 From: Alexey Shirokov <40300551+demiurge-ash@users.noreply.github.com> Date: Wed, 11 Jan 2023 11:41:50 +0300 Subject: Fix keyboard navigation in modal image viewer --- javascript/imageviewer.js | 1 + 1 file changed, 1 insertion(+) (limited to 'javascript/imageviewer.js') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index b7bc2fe1..1f29ad7b 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -151,6 +151,7 @@ function showGalleryImage() { e.addEventListener('mousedown', function (evt) { if(!opts.js_modal_lightbox || evt.button != 0) return; modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed) + evt.preventDefault() showModal(evt) }, true); } -- cgit v1.2.1