hoelee/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2025-08-03 10:50:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add button to toggle tiling images in the imageviewer modal

Browse Source
This commit is contained in:
Adam Snodgrass
2022-09-21 03:31:07 -05:00
committed by AUTOMATIC1111
parent 5fb6f39607
commit 390ead187c
2 changed files with 74 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
javascript/imageviewer.js
View File

@@ -5,9 +5,13 @@ function closeModal() {
}
function showModal(event) {
var source = event.target || event.srcElement;
gradioApp().getElementById("modalImage").src = source.src
var lb = gradioApp().getElementById("lightboxModal")
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()
@@ -29,8 +33,13 @@ function modalImageSwitch(offset){
if(result != -1){
nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)]
nextButton.click()
gradioApp().getElementById("modalImage").src = nextButton.children[0].src
setTimeout( function(){gradioApp().getElementById("lightboxModal").focus()},10)
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)
}
}
}
@@ -95,6 +104,21 @@ function modalZoomToggle(event){
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()
}
function galleryImageHandler(e){
if(e && e.parentElement.tagName == 'BUTTON'){
e.onclick = showGalleryImage;
@@ -116,17 +140,27 @@ document.addEventListener("DOMContentLoaded", function() {
modal.tabIndex=0
modal.addEventListener('keydown', modalKeyHandler, true)
const modalClose = document.createElement('span')
modalClose.className = 'modalClose cursor';
modalClose.innerHTML = '×'
modalClose.onclick = closeModal;
modal.appendChild(modalClose)
const modalControls = document.createElement('div')
modalControls.className = 'modalControls gradio-container';
modal.append(modalControls);
const modalZoom = document.createElement('span')
modalZoom.className = 'modalZoom cursor';
modalZoom.innerHTML = '⤡'
modalZoom.addEventListener('click', modalZoomToggle, true)
modal.appendChild(modalZoom)
modalControls.appendChild(modalZoom)
const modalTileImage = document.createElement('button')
modalTileImage.className = 'modalTileImage gr-button gr-button-lg gr-button-secondary';
modalTileImage.innerHTML = 'Preview Image Tiling'
modalTileImage.addEventListener('click', modalTileImageToggle, true)
modalControls.appendChild(modalTileImage)
const modalClose = document.createElement('span')
modalClose.className = 'modalClose cursor';
modalClose.innerHTML = '×'
modalClose.onclick = closeModal;
modalControls.appendChild(modalClose)
const modalImage = document.createElement('img')
modalImage.id = 'modalImage';