notquitenothing
/
auto_sd_docker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update lightbox to change displayed image as soon as generation is complete (#1933) 

* add updateOnBackgroundChange
* typo fixes.
* reindent to 4 spaces
This commit is contained in:
DepFA 2022-10-09 16:19:33 +01:00 committed by GitHub
parent 875ddfeecf
commit d3cd46b038
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 96 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
javascript/imageviewer.js
View File

@ -1,5 +1,4 @@
// A full size 'lightbox' preview modal shown when left clicking on gallery previews // A full size 'lightbox' preview modal shown when left clicking on gallery previews
function closeModal() { function closeModal() {
gradioApp().getElementById("lightboxModal").style.display = "none"; gradioApp().getElementById("lightboxModal").style.display = "none";
} }
@ -21,6 +20,26 @@ function negmod(n, m) {
return ((n % m) + m) % m; return ((n % m) + m) % m;
} }
function updateOnBackgroundChange() {
const modalImage = gradioApp().getElementById("modalImage")
if (modalImage && modalImage.offsetParent) {
let allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
let currentButton = null
allcurrentButtons.forEach(function(elem) {
if (elem.parentElement.offsetParent) {
currentButton = elem;
}
})
if (modalImage.src != currentButton.children[0].src) {
modalImage.src = currentButton.children[0].src;
if (modalImage.style.display === 'none') {
modal.style.setProperty('background-image', `url(${modalImage.src})`)
}
}
}
}
function modalImageSwitch(offset) { function modalImageSwitch(offset) {
var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all") var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
var galleryButtons = [] var galleryButtons = []
@ -40,7 +59,11 @@ function modalImageSwitch(offset){
}) })
var result = -1 var result = -1
galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } }) galleryButtons.forEach(function(v, i) {
if (v == currentButton) {
result = i
}
})
if (result != -1) { if (result != -1) {
nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)] nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
@ -51,7 +74,9 @@ function modalImageSwitch(offset){
if (modalImage.style.display === 'none') { if (modalImage.style.display === 'none') {
modal.style.setProperty('background-image', `url(${modalImage.src})`) modal.style.setProperty('background-image', `url(${modalImage.src})`)
} }
setTimeout( function(){modal.focus()},10) setTimeout(function() {
modal.focus()
}, 10)
} }
} }
} }
@ -90,9 +115,7 @@ function showGalleryImage(){
return; return;
e.dataset.modded = true; e.dataset.modded = true;
if(e && e.parentElement.tagName == 'DIV'){ if(e && e.parentElement.tagName == 'DIV'){
e.style.cursor='pointer' e.style.cursor='pointer'
e.addEventListener('click', function (evt) { e.addEventListener('click', function (evt) {
if(!opts.js_modal_lightbox) return; if(!opts.js_modal_lightbox) return;
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed) modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
@ -145,6 +168,7 @@ onUiUpdate(function(){
if (fullImg_preview != null) { if (fullImg_preview != null) {
fullImg_preview.forEach(galleryImageHandler); fullImg_preview.forEach(galleryImageHandler);
} }
updateOnBackgroundChange();
}) })
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {