StableDiffusion/WebUI
1
0
Fork 0
Code Issues Pull Requests 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
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';

37
style.css
View File

@ -246,20 +246,37 @@ input[type="range"]{
background-color: rgba(20, 20, 20, 0.95);
}
.modalClose,
.modalZoom {
color: white;
.modalControls {
display: grid;
grid-template-columns: 32px auto 1fr 32px;
grid-template-areas: "zoom tile space close";
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
cursor: pointer;
top: 0;
left: 0;
right: 0;
padding: 16px;
gap: 16px;
background-color: rgba(0,0,0,0.2);
}
.modalClose {
grid-area: close;
}
.modalZoom {
left: 10px;
right: auto;
grid-area: zoom;
}
.modalTileImage {
grid-area: tile;
}
.modalClose,
.modalZoom {
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.modalClose:hover,