stable-diffusion-webui/javascript/imageviewer.js

140 lines
4 KiB
JavaScript
Raw Normal View History

2022-09-18 06:00:06 +00:00
// A full size 'lightbox' preview modal shown when left clicking on gallery previews
2022-09-17 00:03:03 +00:00
function closeModal() {
gradioApp().getElementById("lightboxModal").style.display = "none";
}
function showModal(event) {
var source = event.target || event.srcElement;
gradioApp().getElementById("modalImage").src = source.src
var lb = gradioApp().getElementById("lightboxModal")
lb.style.display = "block";
lb.focus()
event.stopPropagation()
2022-09-17 00:03:03 +00:00
}
function negmod(n, m) {
return ((n % m) + m) % m;
}
function modalImageSwitch(offset){
var galleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
if(galleryButtons.length>1){
var currentButton = gradioApp().querySelector(".gallery-item.transition-all.\\!ring-2")
var result = -1
galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } })
2022-09-17 00:03:03 +00:00
if(result != -1){
nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)]
nextButton.click()
gradioApp().getElementById("modalImage").src = nextButton.children[0].src
setTimeout( function(){gradioApp().getElementById("lightboxModal").focus()},10)
}
}
}
2022-09-17 00:03:03 +00:00
function modalNextImage(event){
modalImageSwitch(1)
event.stopPropagation()
2022-09-17 00:03:03 +00:00
}
function modalPrevImage(event){
modalImageSwitch(-1)
event.stopPropagation()
}
function modalKeyHandler(event){
switch (event.key) {
case "ArrowLeft":
modalPrevImage(event)
break;
case "ArrowRight":
modalNextImage(event)
break;
2022-09-18 16:42:55 +00:00
case "Escape":
closeModal();
break;
}
}
2022-09-17 17:03:52 +00:00
function showGalleryImage(){
setTimeout(function() {
fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain')
if(fullImg_preview != null){
fullImg_preview.forEach(function function_name(e) {
if(e && e.parentElement.tagName == 'DIV'){
e.style.cursor='pointer'
e.addEventListener('click', function (evt) {
if(!opts.js_modal_lightbox) return;
showModal(evt)
2022-09-17 17:03:52 +00:00
},true);
}
});
}
}, 100);
}
function galleryImageHandler(e){
if(e && e.parentElement.tagName == 'BUTTON'){
e.onclick = showGalleryImage;
}
}
2022-09-18 05:37:03 +00:00
onUiUpdate(function(){
fullImg_preview = gradioApp().querySelectorAll('img.w-full')
if(fullImg_preview != null){
fullImg_preview.forEach(galleryImageHandler);
}
2022-09-18 05:37:03 +00:00
})
document.addEventListener("DOMContentLoaded", function() {
2022-09-17 00:03:03 +00:00
const modalFragment = document.createDocumentFragment();
const modal = document.createElement('div')
modal.onclick = closeModal;
const modalClose = document.createElement('span')
modalClose.className = 'modalClose cursor';
modalClose.innerHTML = '×'
modalClose.onclick = closeModal;
modal.id = "lightboxModal";
modal.tabIndex=0
modal.addEventListener('keydown', modalKeyHandler, true)
2022-09-17 00:03:03 +00:00
modal.appendChild(modalClose)
const modalImage = document.createElement('img')
modalImage.id = 'modalImage';
modalImage.onclick = closeModal;
modalImage.tabIndex=0
modalImage.addEventListener('keydown', modalKeyHandler, true)
2022-09-17 00:03:03 +00:00
modal.appendChild(modalImage)
const modalPrev = document.createElement('a')
modalPrev.className = 'modalPrev';
modalPrev.innerHTML = '❮'
modalPrev.tabIndex=0
modalPrev.addEventListener('click',modalPrevImage,true);
modalPrev.addEventListener('keydown', modalKeyHandler, true)
modal.appendChild(modalPrev)
const modalNext = document.createElement('a')
modalNext.className = 'modalNext';
modalNext.innerHTML = '❯'
modalNext.tabIndex=0
modalNext.addEventListener('click',modalNextImage,true);
modalNext.addEventListener('keydown', modalKeyHandler, true)
modal.appendChild(modalNext)
2022-09-17 00:03:03 +00:00
gradioApp().getRootNode().appendChild(modal)
document.body.appendChild(modalFragment);
});