Skip to content

S
Stable Diffusion Webui
Commit d3cd46b0 authored by DepFA's avatar DepFA Committed by GitHub
Browse files
Options

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

* add updateOnBackgroundChange
* typo fixes.
* reindent to 4 spaces
parent 875ddfee
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 75 deletions
javascript/imageviewer.js
View file @ d3cd46b0
// 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";
} }
function showModal(event) { function showModal(event) {
const source = event.target || event.srcElement; const source = event.target || event.srcElement;
const modalImage = gradioApp().getElementById("modalImage") const modalImage = gradioApp().getElementById("modalImage")
const lb = gradioApp().getElementById("lightboxModal") const lb = gradioApp().getElementById("lightboxModal")
modalImage.src = source.src modalImage.src = source.src
if (modalImage.style.display === 'none') { if (modalImage.style.display === 'none') {
lb.style.setProperty('background-image', 'url(' + source.src + ')'); lb.style.setProperty('background-image', 'url(' + source.src + ')');
} }
lb.style.display = "block"; lb.style.display = "block";
lb.focus() lb.focus()
event.stopPropagation() event.stopPropagation()
} }
function negmod(n, m) { function negmod(n, m) {
return ((n % m) + m) % m; return ((n % m) + m) % m;
} }
function modalImageSwitch(offset){ function updateOnBackgroundChange() {
var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all") const modalImage = gradioApp().getElementById("modalImage")
var galleryButtons = [] if (modalImage && modalImage.offsetParent) {
allgalleryButtons.forEach(function(elem){ let allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
if(elem.parentElement.offsetParent){ let currentButton = null
galleryButtons.push(elem); 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})`)
}
}
} }
}) }
if(galleryButtons.length>1){ function modalImageSwitch(offset) {
var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2") var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
var currentButton = null var galleryButtons = []
allcurrentButtons.forEach(function(elem){ allgalleryButtons.forEach(function(elem) {
if(elem.parentElement.offsetParent){ if (elem.parentElement.offsetParent) {
currentButton = elem; galleryButtons.push(elem);
} }
}) })
var result = -1 if (galleryButtons.length > 1) {
galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } }) var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
var currentButton = null
if(result != -1){ allcurrentButtons.forEach(function(elem) {
nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)] if (elem.parentElement.offsetParent) {
nextButton.click() currentButton = elem;
const modalImage = gradioApp().getElementById("modalImage"); }
const modal = gradioApp().getElementById("lightboxModal"); })
modalImage.src = nextButton.children[0].src;
if (modalImage.style.display === 'none') { var result = -1
modal.style.setProperty('background-image', `url(${modalImage.src})`) galleryButtons.forEach(function(v, i) {
if (v == currentButton) {
result = i
}
})
if (result != -1) {
nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
nextButton.click()
const modalImage = gradioApp().getElementById("modalImage");
const modal = gradioApp().getElementById("lightboxModal");
modalImage.src = nextButton.children[0].src;
if (modalImage.style.display === 'none') {
modal.style.setProperty('background-image', `url(${modalImage.src})`)
}
setTimeout(function() {
modal.focus()
}, 10)
} }
setTimeout( function(){modal.focus()},10) }
}
}
} }
function modalNextImage(event){ function modalNextImage(event) {
modalImageSwitch(1) modalImageSwitch(1)
event.stopPropagation() event.stopPropagation()
} }
function modalPrevImage(event){ function modalPrevImage(event) {
modalImageSwitch(-1) modalImageSwitch(-1)
event.stopPropagation() event.stopPropagation()
} }
function modalKeyHandler(event){ function modalKeyHandler(event) {
switch (event.key) { switch (event.key) {
case "ArrowLeft": case "ArrowLeft":
modalPrevImage(event) modalPrevImage(event)
...@@ -80,24 +105,22 @@ function modalKeyHandler(event){ ...@@ -80,24 +105,22 @@ function modalKeyHandler(event){
} }
} }
function showGalleryImage(){ function showGalleryImage() {
setTimeout(function() { setTimeout(function() {
fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain') fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain')
if(fullImg_preview != null){ if (fullImg_preview != null) {
fullImg_preview.forEach(function function_name(e) { fullImg_preview.forEach(function function_name(e) {
if (e.dataset.modded) if (e.dataset.modded)
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)
showModal(evt) showModal(evt)
},true); }, true);
} }
}); });
} }
...@@ -105,21 +128,21 @@ function showGalleryImage(){ ...@@ -105,21 +128,21 @@ function showGalleryImage(){
}, 100); }, 100);
} }
function modalZoomSet(modalImage, enable){ function modalZoomSet(modalImage, enable) {
if( enable ){ if (enable) {
modalImage.classList.add('modalImageFullscreen'); modalImage.classList.add('modalImageFullscreen');
} else{ } else {
modalImage.classList.remove('modalImageFullscreen'); modalImage.classList.remove('modalImageFullscreen');
} }
} }
function modalZoomToggle(event){ function modalZoomToggle(event) {
modalImage = gradioApp().getElementById("modalImage"); modalImage = gradioApp().getElementById("modalImage");
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen')) modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
event.stopPropagation() event.stopPropagation()
} }
function modalTileImageToggle(event){ function modalTileImageToggle(event) {
const modalImage = gradioApp().getElementById("modalImage"); const modalImage = gradioApp().getElementById("modalImage");
const modal = gradioApp().getElementById("lightboxModal"); const modal = gradioApp().getElementById("lightboxModal");
const isTiling = modalImage.style.display === 'none'; const isTiling = modalImage.style.display === 'none';
...@@ -134,17 +157,18 @@ function modalTileImageToggle(event){ ...@@ -134,17 +157,18 @@ function modalTileImageToggle(event){
event.stopPropagation() event.stopPropagation()
} }
function galleryImageHandler(e){ function galleryImageHandler(e) {
if(e && e.parentElement.tagName == 'BUTTON'){ if (e && e.parentElement.tagName == 'BUTTON') {
e.onclick = showGalleryImage; e.onclick = showGalleryImage;
} }
} }
onUiUpdate(function(){ onUiUpdate(function() {
fullImg_preview = gradioApp().querySelectorAll('img.w-full') fullImg_preview = gradioApp().querySelectorAll('img.w-full')
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() {
...@@ -152,13 +176,13 @@ document.addEventListener("DOMContentLoaded", function() { ...@@ -152,13 +176,13 @@ document.addEventListener("DOMContentLoaded", function() {
const modal = document.createElement('div') const modal = document.createElement('div')
modal.onclick = closeModal; modal.onclick = closeModal;
modal.id = "lightboxModal"; modal.id = "lightboxModal";
modal.tabIndex=0 modal.tabIndex = 0
modal.addEventListener('keydown', modalKeyHandler, true) modal.addEventListener('keydown', modalKeyHandler, true)
const modalControls = document.createElement('div') const modalControls = document.createElement('div')
modalControls.className = 'modalControls gradio-container'; modalControls.className = 'modalControls gradio-container';
modal.append(modalControls); modal.append(modalControls);
const modalZoom = document.createElement('span') const modalZoom = document.createElement('span')
modalZoom.className = 'modalZoom cursor'; modalZoom.className = 'modalZoom cursor';
modalZoom.innerHTML = '⤡' modalZoom.innerHTML = '⤡'
...@@ -183,30 +207,30 @@ document.addEventListener("DOMContentLoaded", function() { ...@@ -183,30 +207,30 @@ document.addEventListener("DOMContentLoaded", function() {
const modalImage = document.createElement('img') const modalImage = document.createElement('img')
modalImage.id = 'modalImage'; modalImage.id = 'modalImage';
modalImage.onclick = closeModal; modalImage.onclick = closeModal;
modalImage.tabIndex=0 modalImage.tabIndex = 0
modalImage.addEventListener('keydown', modalKeyHandler, true) modalImage.addEventListener('keydown', modalKeyHandler, true)
modal.appendChild(modalImage) modal.appendChild(modalImage)
const modalPrev = document.createElement('a') const modalPrev = document.createElement('a')
modalPrev.className = 'modalPrev'; modalPrev.className = 'modalPrev';
modalPrev.innerHTML = '❮' modalPrev.innerHTML = '❮'
modalPrev.tabIndex=0 modalPrev.tabIndex = 0
modalPrev.addEventListener('click',modalPrevImage,true); modalPrev.addEventListener('click', modalPrevImage, true);
modalPrev.addEventListener('keydown', modalKeyHandler, true) modalPrev.addEventListener('keydown', modalKeyHandler, true)
modal.appendChild(modalPrev) modal.appendChild(modalPrev)
const modalNext = document.createElement('a') const modalNext = document.createElement('a')
modalNext.className = 'modalNext'; modalNext.className = 'modalNext';
modalNext.innerHTML = '❯' modalNext.innerHTML = '❯'
modalNext.tabIndex=0 modalNext.tabIndex = 0
modalNext.addEventListener('click',modalNextImage,true); modalNext.addEventListener('click', modalNextImage, true);
modalNext.addEventListener('keydown', modalKeyHandler, true) modalNext.addEventListener('keydown', modalKeyHandler, true)
modal.appendChild(modalNext) modal.appendChild(modalNext)
gradioApp().getRootNode().appendChild(modal) gradioApp().getRootNode().appendChild(modal)
document.body.appendChild(modalFragment); document.body.appendChild(modalFragment);
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment