stable-diffusion-webui/javascript/imageviewer.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

263 lines
8.7 KiB
JavaScript
Raw Normal View History

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() {
gradioApp().getElementById("lightboxModal").style.display = "none";
2022-09-16 18:03:03 -06:00
}
function showModal(event) {
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 = "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";
}
event.stopPropagation();
2022-09-16 18:03:03 -06:00
}
function negmod(n, m) {
return ((n % m) + m) % m;
}
function updateOnBackgroundChange() {
const modalImage = gradioApp().getElementById("modalImage");
if (modalImage && modalImage.offsetParent) {
2023-03-25 12:52:47 -06:00
let currentButton = selected_gallery_button();
let preview = gradioApp().querySelectorAll('.livePreview > img');
if (preview.length > 0) {
// show preview image if available
modalImage.src = preview[preview.length - 1].src;
} else if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
modalImage.src = currentButton.children[0].src;
if (modalImage.style.display === 'none') {
2023-05-18 00:59:10 -06:00
const modal = gradioApp().getElementById("lightboxModal");
modal.style.setProperty('background-image', `url(${modalImage.src})`);
}
}
}
}
function modalImageSwitch(offset) {
2023-03-25 12:52:47 -06:00
var galleryButtons = all_gallery_buttons();
if (galleryButtons.length > 1) {
2023-03-25 12:52:47 -06:00
var currentButton = selected_gallery_button();
var result = -1;
galleryButtons.forEach(function(v, i) {
if (v == currentButton) {
result = i;
}
});
if (result != -1) {
2023-04-30 13:08:52 -06:00
var 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-16 18:03:03 -06:00
function saveImage() {
const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
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");
}
}
function modalSaveImage(event) {
saveImage();
event.stopPropagation();
}
function modalNextImage(event) {
modalImageSwitch(1);
event.stopPropagation();
2022-09-16 18:03:03 -06:00
}
function modalPrevImage(event) {
modalImageSwitch(-1);
event.stopPropagation();
}
function modalKeyHandler(event) {
switch (event.key) {
case "s":
saveImage();
break;
case "ArrowLeft":
modalPrevImage(event);
break;
case "ArrowRight":
modalNextImage(event);
break;
2022-09-18 10:42:55 -06:00
case "Escape":
closeModal();
break;
}
}
2023-03-20 07:09:36 -06:00
function setupImageForLightbox(e) {
if (e.dataset.modded) {
return;
}
2023-03-20 07:09:36 -06:00
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 (evt.button == 1) {
open(evt.target.src);
evt.preventDefault();
return;
}
2023-03-20 07:09:36 -06:00
if (!opts.js_modal_lightbox || evt.button != 0) return;
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
evt.preventDefault();
showModal(evt);
}, true);
2022-09-17 11:03:52 -06:00
}
function modalZoomSet(modalImage, enable) {
2023-04-30 05:45:56 -06:00
if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
}
function modalZoomToggle(event) {
2023-04-30 13:08:52 -06:00
var modalImage = gradioApp().getElementById("modalImage");
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
2022-09-18 19:35:47 -06:00
event.stopPropagation();
}
function modalTileImageToggle(event) {
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();
}
2023-05-25 00:09:13 -06:00
onAfterUiUpdate(function() {
2023-04-30 13:08:52 -06:00
var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
if (fullImg_preview != null) {
2023-03-20 07:09:36 -06:00
fullImg_preview.forEach(setupImageForLightbox);
2022-09-19 07:05:30 -06:00
}
updateOnBackgroundChange();
2022-09-17 23:37:03 -06:00
});
document.addEventListener("DOMContentLoaded", function() {
2023-03-20 07:09:36 -06:00
//const modalFragment = document.createDocumentFragment();
2022-09-16 18:03:03 -06:00
const modal = document.createElement('div');
modal.onclick = closeModal;
2022-09-18 19:35:47 -06:00
modal.id = "lightboxModal";
modal.tabIndex = 0;
2022-09-18 19:35:47 -06:00
modal.addEventListener('keydown', modalKeyHandler, true);
const modalControls = document.createElement('div');
modalControls.className = 'modalControls gradio-container';
modal.append(modalControls);
2022-09-18 19:35:47 -06:00
const modalZoom = document.createElement('span');
modalZoom.className = 'modalZoom cursor';
modalZoom.innerHTML = '⤡';
modalZoom.addEventListener('click', modalZoomToggle, true);
modalZoom.title = "Toggle zoomed view";
modalControls.appendChild(modalZoom);
const modalTileImage = document.createElement('span');
modalTileImage.className = 'modalTileImage cursor';
modalTileImage.innerHTML = '⊞';
modalTileImage.addEventListener('click', modalTileImageToggle, true);
modalTileImage.title = "Preview tiling";
modalControls.appendChild(modalTileImage);
const modalSave = document.createElement("span");
modalSave.className = "modalSave cursor";
modalSave.id = "modal_save";
modalSave.innerHTML = "🖫";
modalSave.addEventListener("click", modalSaveImage, true);
modalSave.title = "Save Image(s)";
modalControls.appendChild(modalSave);
const modalClose = document.createElement('span');
modalClose.className = 'modalClose cursor';
modalClose.innerHTML = '×';
modalClose.onclick = closeModal;
modalClose.title = "Close image viewer";
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;
modalImage.tabIndex = 0;
modalImage.addEventListener('keydown', modalKeyHandler, true);
2022-09-16 18:03:03 -06: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);
2023-03-28 15:28:46 -06:00
try {
gradioApp().appendChild(modal);
} catch (e) {
gradioApp().body.appendChild(modal);
}
2023-03-20 07:09:36 -06:00
document.body.appendChild(modal);
});