2022-09-18 00:00:06 -06:00
|
|
|
// A full size 'lightbox' preview modal shown when left clicking on gallery previews
|
2022-09-16 18:03:03 -06:00
|
|
|
function closeModal() {
|
2022-10-09 09:19:33 -06:00
|
|
|
gradioApp().getElementById("lightboxModal").style.display = "none";
|
2022-09-16 18:03:03 -06:00
|
|
|
}
|
|
|
|
|
2022-09-17 08:29:06 -06:00
|
|
|
function showModal(event) {
|
2022-10-09 09:19:33 -06:00
|
|
|
const source = event.target || event.srcElement;
|
|
|
|
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 + ')');
|
|
|
|
}
|
|
|
|
lb.style.display = "block";
|
|
|
|
lb.focus()
|
|
|
|
event.stopPropagation()
|
2022-09-16 18:03:03 -06:00
|
|
|
}
|
|
|
|
|
2022-09-17 10:58:33 -06:00
|
|
|
function negmod(n, m) {
|
2022-10-09 09:19:33 -06:00
|
|
|
return ((n % m) + m) % m;
|
2022-09-17 10:58:33 -06:00
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function updateOnBackgroundChange() {
|
|
|
|
const modalImage = gradioApp().getElementById("modalImage")
|
|
|
|
if (modalImage && modalImage.offsetParent) {
|
|
|
|
let allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
|
|
|
|
let currentButton = null
|
|
|
|
allcurrentButtons.forEach(function(elem) {
|
|
|
|
if (elem.parentElement.offsetParent) {
|
|
|
|
currentButton = elem;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2022-10-16 10:51:10 -06:00
|
|
|
if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
|
2022-10-09 09:19:33 -06:00
|
|
|
modalImage.src = currentButton.children[0].src;
|
|
|
|
if (modalImage.style.display === 'none') {
|
|
|
|
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
|
|
|
}
|
|
|
|
}
|
2022-09-23 14:29:01 -06:00
|
|
|
}
|
2022-10-09 09:19:33 -06:00
|
|
|
}
|
|
|
|
|
|
|
|
function modalImageSwitch(offset) {
|
|
|
|
var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
|
|
|
|
var galleryButtons = []
|
|
|
|
allgalleryButtons.forEach(function(elem) {
|
|
|
|
if (elem.parentElement.offsetParent) {
|
|
|
|
galleryButtons.push(elem);
|
2022-09-23 14:29:01 -06:00
|
|
|
}
|
2022-10-09 09:19:33 -06:00
|
|
|
})
|
|
|
|
|
|
|
|
if (galleryButtons.length > 1) {
|
|
|
|
var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
|
|
|
|
var currentButton = null
|
|
|
|
allcurrentButtons.forEach(function(elem) {
|
|
|
|
if (elem.parentElement.offsetParent) {
|
|
|
|
currentButton = elem;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
var result = -1
|
|
|
|
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)
|
2022-09-21 02:31:07 -06:00
|
|
|
}
|
2022-10-09 09:19:33 -06:00
|
|
|
}
|
2022-09-17 10:58:33 -06:00
|
|
|
}
|
2022-09-16 18:03:03 -06:00
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function modalNextImage(event) {
|
|
|
|
modalImageSwitch(1)
|
|
|
|
event.stopPropagation()
|
2022-09-16 18:03:03 -06:00
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function modalPrevImage(event) {
|
|
|
|
modalImageSwitch(-1)
|
|
|
|
event.stopPropagation()
|
2022-09-17 10:58:33 -06:00
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function modalKeyHandler(event) {
|
2022-09-17 10:58:33 -06:00
|
|
|
switch (event.key) {
|
|
|
|
case "ArrowLeft":
|
|
|
|
modalPrevImage(event)
|
|
|
|
break;
|
|
|
|
case "ArrowRight":
|
|
|
|
modalNextImage(event)
|
|
|
|
break;
|
2022-09-18 10:42:55 -06:00
|
|
|
case "Escape":
|
|
|
|
closeModal();
|
|
|
|
break;
|
2022-09-16 20:26:47 -06:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function showGalleryImage() {
|
2022-09-17 11:03:52 -06:00
|
|
|
setTimeout(function() {
|
|
|
|
fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain')
|
2022-10-09 09:19:33 -06:00
|
|
|
|
|
|
|
if (fullImg_preview != null) {
|
2022-09-17 11:03:52 -06:00
|
|
|
fullImg_preview.forEach(function function_name(e) {
|
2022-10-08 02:01:34 -06:00
|
|
|
if (e.dataset.modded)
|
|
|
|
return;
|
|
|
|
e.dataset.modded = true;
|
2022-09-17 11:03:52 -06:00
|
|
|
if(e && e.parentElement.tagName == 'DIV'){
|
|
|
|
e.style.cursor='pointer'
|
2022-10-17 04:21:59 -06:00
|
|
|
e.style.userSelect='none'
|
2022-09-17 11:03:52 -06:00
|
|
|
e.addEventListener('click', function (evt) {
|
2022-09-18 13:25:18 -06:00
|
|
|
if(!opts.js_modal_lightbox) return;
|
2022-10-08 13:12:24 -06:00
|
|
|
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
|
2022-09-18 13:25:18 -06:00
|
|
|
showModal(evt)
|
2022-10-09 09:19:33 -06:00
|
|
|
}, true);
|
2022-09-17 11:03:52 -06:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}, 100);
|
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function modalZoomSet(modalImage, enable) {
|
|
|
|
if (enable) {
|
2022-09-18 19:35:47 -06:00
|
|
|
modalImage.classList.add('modalImageFullscreen');
|
2022-10-09 09:19:33 -06:00
|
|
|
} else {
|
2022-09-18 19:35:47 -06:00
|
|
|
modalImage.classList.remove('modalImageFullscreen');
|
|
|
|
}
|
2022-09-19 08:16:04 -06:00
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function modalZoomToggle(event) {
|
2022-09-19 08:16:04 -06:00
|
|
|
modalImage = gradioApp().getElementById("modalImage");
|
|
|
|
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
|
2022-09-18 19:35:47 -06:00
|
|
|
event.stopPropagation()
|
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function modalTileImageToggle(event) {
|
2022-09-21 02:31:07 -06:00
|
|
|
const modalImage = gradioApp().getElementById("modalImage");
|
|
|
|
const modal = gradioApp().getElementById("lightboxModal");
|
|
|
|
const isTiling = modalImage.style.display === 'none';
|
|
|
|
if (isTiling) {
|
|
|
|
modalImage.style.display = 'block';
|
|
|
|
modal.style.setProperty('background-image', 'none')
|
|
|
|
} else {
|
|
|
|
modalImage.style.display = 'none';
|
|
|
|
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
|
|
|
}
|
|
|
|
|
|
|
|
event.stopPropagation()
|
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
function galleryImageHandler(e) {
|
|
|
|
if (e && e.parentElement.tagName == 'BUTTON') {
|
2022-09-17 11:03:52 -06:00
|
|
|
e.onclick = showGalleryImage;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-09 09:19:33 -06:00
|
|
|
onUiUpdate(function() {
|
2022-09-19 07:05:30 -06:00
|
|
|
fullImg_preview = gradioApp().querySelectorAll('img.w-full')
|
2022-10-09 09:19:33 -06:00
|
|
|
if (fullImg_preview != null) {
|
|
|
|
fullImg_preview.forEach(galleryImageHandler);
|
2022-09-19 07:05:30 -06:00
|
|
|
}
|
2022-10-09 09:19:33 -06:00
|
|
|
updateOnBackgroundChange();
|
2022-09-17 23:37:03 -06:00
|
|
|
})
|
2022-08-31 13:19:30 -06:00
|
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
2022-09-16 18:03:03 -06:00
|
|
|
const modalFragment = document.createDocumentFragment();
|
|
|
|
const modal = document.createElement('div')
|
|
|
|
modal.onclick = closeModal;
|
2022-09-18 19:35:47 -06:00
|
|
|
modal.id = "lightboxModal";
|
2022-10-09 09:19:33 -06:00
|
|
|
modal.tabIndex = 0
|
2022-09-18 19:35:47 -06:00
|
|
|
modal.addEventListener('keydown', modalKeyHandler, true)
|
|
|
|
|
2022-09-21 02:31:07 -06:00
|
|
|
const modalControls = document.createElement('div')
|
|
|
|
modalControls.className = 'modalControls gradio-container';
|
|
|
|
modal.append(modalControls);
|
2022-10-09 09:19:33 -06:00
|
|
|
|
2022-09-18 19:35:47 -06:00
|
|
|
const modalZoom = document.createElement('span')
|
|
|
|
modalZoom.className = 'modalZoom cursor';
|
|
|
|
modalZoom.innerHTML = '⤡'
|
|
|
|
modalZoom.addEventListener('click', modalZoomToggle, true)
|
2022-09-21 05:22:16 -06:00
|
|
|
modalZoom.title = "Toggle zoomed view";
|
2022-09-21 02:31:07 -06:00
|
|
|
modalControls.appendChild(modalZoom)
|
|
|
|
|
2022-09-21 05:22:16 -06:00
|
|
|
const modalTileImage = document.createElement('span')
|
|
|
|
modalTileImage.className = 'modalTileImage cursor';
|
|
|
|
modalTileImage.innerHTML = '⊞'
|
2022-09-21 02:31:07 -06:00
|
|
|
modalTileImage.addEventListener('click', modalTileImageToggle, true)
|
2022-09-21 05:22:16 -06:00
|
|
|
modalTileImage.title = "Preview tiling";
|
2022-09-21 02:31:07 -06:00
|
|
|
modalControls.appendChild(modalTileImage)
|
|
|
|
|
|
|
|
const modalClose = document.createElement('span')
|
|
|
|
modalClose.className = 'modalClose cursor';
|
|
|
|
modalClose.innerHTML = '×'
|
|
|
|
modalClose.onclick = closeModal;
|
2022-09-21 05:22:16 -06:00
|
|
|
modalClose.title = "Close image viewer";
|
2022-09-21 02:31:07 -06:00
|
|
|
modalControls.appendChild(modalClose)
|
2022-09-18 19:35:47 -06:00
|
|
|
|
2022-09-16 18:03:03 -06:00
|
|
|
const modalImage = document.createElement('img')
|
|
|
|
modalImage.id = 'modalImage';
|
|
|
|
modalImage.onclick = closeModal;
|
2022-10-09 09:19:33 -06:00
|
|
|
modalImage.tabIndex = 0
|
2022-09-17 10:58:33 -06:00
|
|
|
modalImage.addEventListener('keydown', modalKeyHandler, true)
|
2022-09-16 18:03:03 -06:00
|
|
|
modal.appendChild(modalImage)
|
|
|
|
|
2022-09-17 10:58:33 -06:00
|
|
|
const modalPrev = document.createElement('a')
|
|
|
|
modalPrev.className = 'modalPrev';
|
|
|
|
modalPrev.innerHTML = '❮'
|
2022-10-09 09:19:33 -06:00
|
|
|
modalPrev.tabIndex = 0
|
|
|
|
modalPrev.addEventListener('click', modalPrevImage, true);
|
2022-09-17 10:58:33 -06:00
|
|
|
modalPrev.addEventListener('keydown', modalKeyHandler, true)
|
|
|
|
modal.appendChild(modalPrev)
|
|
|
|
|
|
|
|
const modalNext = document.createElement('a')
|
|
|
|
modalNext.className = 'modalNext';
|
|
|
|
modalNext.innerHTML = '❯'
|
2022-10-09 09:19:33 -06:00
|
|
|
modalNext.tabIndex = 0
|
|
|
|
modalNext.addEventListener('click', modalNextImage, true);
|
2022-09-17 10:58:33 -06:00
|
|
|
modalNext.addEventListener('keydown', modalKeyHandler, true)
|
|
|
|
|
|
|
|
modal.appendChild(modalNext)
|
|
|
|
|
|
|
|
|
2022-09-16 18:03:03 -06:00
|
|
|
gradioApp().getRootNode().appendChild(modal)
|
2022-10-09 09:19:33 -06:00
|
|
|
|
2022-09-16 18:03:03 -06:00
|
|
|
document.body.appendChild(modalFragment);
|
2022-10-09 09:19:33 -06:00
|
|
|
|
2022-08-31 13:19:30 -06:00
|
|
|
});
|