StableDiffusion/WebUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add modal creation and functions

Browse Source
This commit is contained in:
DepFA 2022-09-17 01:03:03 +01:00 committed by AUTOMATIC1111
parent 65be5312dc
commit 1a51337077
1 changed files with 60 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
script.js
View File

@ -76,6 +76,35 @@ function gradioApp(){
global_progressbar = null
function closeModal() {
gradioApp().getElementById("lightboxModal").style.display = "none";
}
function showModal(elem) {
gradioApp().getElementById("modalImage").src = elem.src
gradioApp().getElementById("lightboxModal").style.display = "block";
}
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'
elemfunc = function(elem){
elem.onclick = function(){showModal(elem)};
}
elemfunc(e)
}
});
}
}, 100);
}
function addTitles(root){
root.querySelectorAll('span, button, select').forEach(function(span){
tooltip = titles[span.textContent];
@ -117,8 +146,18 @@ function addTitles(root){
img2img_preview.style.width = img2img_gallery.clientWidth + "px"
img2img_preview.style.height = img2img_gallery.clientHeight + "px"
}
fullImg_preview = gradioApp().querySelectorAll('img.w-full')
if(fullImg_preview != null){
fullImg_preview.forEach(function function_name(e) {
if(e && e.parentElement.tagName == 'BUTTON'){
e.onclick = showGalleryImage;
}
});
}
window.setTimeout(requestProgress, 500)
});
mutationObserver.observe( progressbar, { childList:true, subtree:true })
@ -131,6 +170,27 @@ document.addEventListener("DOMContentLoaded", function() {
addTitles(gradioApp());
});
mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
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.appendChild(modalClose)
const modalImage = document.createElement('img')
modalImage.id = 'modalImage';
modalImage.onclick = closeModal;
modal.appendChild(modalImage)
gradioApp().getRootNode().appendChild(modal)
document.body.appendChild(modalFragment);
});
function selected_gallery_index(){