Add logic for zoom toggle

This commit is contained in:
DepFA 2022-09-19 02:35:47 +01:00 committed by AUTOMATIC1111
parent 326236ed31
commit 2f35b1c6be

View File

@ -80,6 +80,17 @@ function showGalleryImage(){
}, 100);
}
function modalZoomToggle(event){
modalImage = gradioApp().getElementById("modalImage");
console.log(modalImage)
if( !modalImage.classList.contains('modalImageFullscreen') ){
modalImage.classList.add('modalImageFullscreen');
}else{
modalImage.classList.remove('modalImageFullscreen');
}
event.stopPropagation()
}
function galleryImageHandler(e){
if(e && e.parentElement.tagName == 'BUTTON'){
e.onclick = showGalleryImage;
@ -97,16 +108,22 @@ document.addEventListener("DOMContentLoaded", function() {
const modalFragment = document.createDocumentFragment();
const modal = document.createElement('div')
modal.onclick = closeModal;
modal.id = "lightboxModal";
modal.tabIndex=0
modal.addEventListener('keydown', modalKeyHandler, true)
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)
modal.appendChild(modalClose)
const modalZoom = document.createElement('span')
modalZoom.className = 'modalZoom cursor';
modalZoom.innerHTML = '⤡'
modalZoom.addEventListener('click', modalZoomToggle, true)
modal.appendChild(modalZoom)
const modalImage = document.createElement('img')
modalImage.id = 'modalImage';
modalImage.onclick = closeModal;