update post merge

This commit is contained in:
Vladimir Mandic
2023-04-23 09:08:42 -04:00
parent ed1acb3d8c
commit 40184f9e0b
3 changed files with 21 additions and 69 deletions
+3 -6
View File
@@ -2,12 +2,8 @@
let txt2img_gallery, img2img_gallery, modal = undefined;
onUiUpdate(function(){
if (!txt2img_gallery) {
txt2img_gallery = attachGalleryListeners("txt2img")
}
if (!img2img_gallery) {
img2img_gallery = attachGalleryListeners("img2img")
}
if (!txt2img_gallery) txt2img_gallery = attachGalleryListeners("txt2img")
if (!img2img_gallery) img2img_gallery = attachGalleryListeners("img2img")
if (!modal) {
modal = gradioApp().getElementById('lightboxModal')
modalObserver.observe(modal, { attributes : true, attributeFilter : ['style'] });
@@ -17,6 +13,7 @@ onUiUpdate(function(){
let modalObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText
if (!selectedTab) selectedTab = gradioApp().querySelector('#tabs div button')?.innerText
if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img'))
gradioApp().getElementById(selectedTab+"_generation_info_button")?.click()
});
+17 -62
View File
@@ -8,20 +8,14 @@ function showModal(event) {
const modalImage = gradioApp().getElementById("modalImage")
const lb = gradioApp().getElementById("lightboxModal")
modalImage.src = source.src
if (modalImage.style.display === 'none') {
lb.style.setProperty('background-image', 'url(' + source.src + ')');
}
if (modalImage.style.display === 'none') lb.style.setProperty('background-image', 'url(' + source.src + ')');
lb.style.display = "flex";
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"
}
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()
}
@@ -33,41 +27,29 @@ function updateOnBackgroundChange() {
const modalImage = gradioApp().getElementById("modalImage")
if (modalImage && modalImage.offsetParent) {
let currentButton = selected_gallery_button();
if (currentButton?.children?.length > 0 && 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 (modalImage.style.display === 'none') modal.style.setProperty('background-image', `url(${modalImage.src})`)
}
}
}
function modalImageSwitch(offset) {
var galleryButtons = all_gallery_buttons();
if (galleryButtons.length > 1) {
var currentButton = selected_gallery_button();
var result = -1
galleryButtons.forEach(function(v, i) {
if (v == currentButton) {
result = 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)
if (modalImage.style.display === 'none') modal.style.setProperty('background-image', `url(${modalImage.src})`)
setTimeout(() => modal.focus(), 10)
}
}
}
@@ -77,13 +59,9 @@ function saveImage(){
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")
}
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) {
@@ -119,36 +97,24 @@ function modalKeyHandler(event) {
}
function setupImageForLightbox(e) {
if (e.dataset.modded)
return;
if (e.dataset.modded) return;
e.dataset.modded = true;
e.style.cursor='pointer'
e.style.userSelect='none'
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
// For Firefox, listening on click first switched to next image then shows the lightbox.
// If you know how to fix this without switching to mousedown event, please.
// For other browsers the event is click to make it possiblr to drag picture.
var event = isFirefox ? 'mousedown' : 'click'
e.addEventListener(event, 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);
}
function modalZoomSet(modalImage, enable) {
if (enable) {
modalImage.classList.add('modalImageFullscreen');
} else {
modalImage.classList.remove('modalImageFullscreen');
}
if (enable) modalImage.classList.add('modalImageFullscreen');
else modalImage.classList.remove('modalImageFullscreen');
}
function modalZoomToggle(event) {
@@ -168,21 +134,16 @@ function modalTileImageToggle(event) {
modalImage.style.display = 'none';
modal.style.setProperty('background-image', `url(${modalImage.src})`)
}
event.stopPropagation()
}
function galleryImageHandler(e) {
//if (e && e.parentElement.tagName == 'BUTTON') {
e.onclick = showGalleryImage;
//}
e.onclick = showGalleryImage;
}
onUiUpdate(function() {
fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
if (fullImg_preview != null) {
fullImg_preview.forEach(setupImageForLightbox);
}
if (fullImg_preview != null) fullImg_preview.forEach(setupImageForLightbox);
updateOnBackgroundChange();
})
@@ -251,12 +212,6 @@ document.addEventListener("DOMContentLoaded", function() {
modal.appendChild(modalNext)
try {
gradioApp().appendChild(modal);
} catch (e) {
gradioApp().body.appendChild(modal);
}
document.body.appendChild(modal);
try { gadioApp().appendChild(modal); }
catch (e) { gradioApp().body.appendChild(modal); }
});