mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-18 16:55:15 +02:00
Fix issue #135 and js formatting
This commit is contained in:
anapnoe
+168
-155
@@ -261,7 +261,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
*/
|
||||
//called from progressbar
|
||||
function showGalleryImage() {
|
||||
//need to clean up the old code
|
||||
//need to clean up the old code
|
||||
}
|
||||
|
||||
let like;
|
||||
@@ -271,7 +271,20 @@ let slide = 0;
|
||||
let gallery = [];
|
||||
let fullImg_src;
|
||||
//let control = ["pan","undo","like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"];
|
||||
let control = ["like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"];
|
||||
let control = [
|
||||
"like",
|
||||
"tile",
|
||||
"page",
|
||||
"fullscreen",
|
||||
"autofit",
|
||||
"zoom-in",
|
||||
"zoom-out",
|
||||
"clear",
|
||||
"close",
|
||||
"download",
|
||||
"prev",
|
||||
"next",
|
||||
];
|
||||
|
||||
let img_browser;
|
||||
let img_file_name;
|
||||
@@ -281,175 +294,174 @@ let spl_zoom_out;
|
||||
let spl_zoom_in;
|
||||
let spotlight_gallery;
|
||||
|
||||
|
||||
function tile_zoom_update(val){
|
||||
let current_tile_state_size = gallery[slide].tile_size;
|
||||
current_tile_state_size += (val * 5);
|
||||
current_tile_state_size = Math.max(5, Math.min(100,current_tile_state_size));
|
||||
spl_pane.style.setProperty('background-size', current_tile_state_size+"%");
|
||||
gallery[slide].tile_size = current_tile_state_size;
|
||||
function tile_zoom_update(val) {
|
||||
let current_tile_state_size = gallery[slide].tile_size;
|
||||
current_tile_state_size += val * 5;
|
||||
current_tile_state_size = Math.max(5, Math.min(100, current_tile_state_size));
|
||||
spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
|
||||
gallery[slide].tile_size = current_tile_state_size;
|
||||
}
|
||||
|
||||
function tile_wheel(event){
|
||||
let delta = event["deltaY"];
|
||||
delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5;
|
||||
tile_zoom_update(delta);
|
||||
function tile_wheel(event) {
|
||||
let delta = event["deltaY"];
|
||||
delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5;
|
||||
tile_zoom_update(delta);
|
||||
}
|
||||
function tile_zoom_in(event){
|
||||
tile_zoom_update(1);
|
||||
function tile_zoom_in(event) {
|
||||
tile_zoom_update(1);
|
||||
}
|
||||
function tile_zoom_out(event){
|
||||
tile_zoom_update(-1);
|
||||
function tile_zoom_out(event) {
|
||||
tile_zoom_update(-1);
|
||||
}
|
||||
|
||||
function removeTile(){
|
||||
spl_pane.removeEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.removeEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.removeEventListener("click", tile_zoom_in);
|
||||
|
||||
spl_pane.classList.remove("hide");
|
||||
spl_pane.style.setProperty('background-image', 'none');
|
||||
spotlight_gallery.zoom(0.0);
|
||||
function removeTile() {
|
||||
spl_pane.removeEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.removeEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.removeEventListener("click", tile_zoom_in);
|
||||
|
||||
spl_pane.classList.remove("hide");
|
||||
spl_pane.style.setProperty("background-image", "none");
|
||||
spotlight_gallery.zoom(0.0);
|
||||
}
|
||||
|
||||
function addTile(spl_img){
|
||||
spl_pane.addEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.addEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.addEventListener("click", tile_zoom_in);
|
||||
|
||||
const current_tile_state_size = gallery[slide].tile_size;
|
||||
spl_pane.classList.add("hide");
|
||||
spl_pane.style.setProperty('background-position', "center");
|
||||
spl_pane.style.setProperty('background-size', current_tile_state_size+"%");
|
||||
if(spl_img){
|
||||
spl_pane.style.setProperty('background-image', `url(${spl_img.src})`);
|
||||
}
|
||||
function addTile(spl_img) {
|
||||
spl_pane.addEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.addEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.addEventListener("click", tile_zoom_in);
|
||||
|
||||
const current_tile_state_size = gallery[slide].tile_size;
|
||||
spl_pane.classList.add("hide");
|
||||
spl_pane.style.setProperty("background-position", "center");
|
||||
spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
|
||||
if (spl_img) {
|
||||
spl_pane.style.setProperty("background-image", `url(${spl_img.src})`);
|
||||
}
|
||||
}
|
||||
|
||||
function tile_handler(event) {
|
||||
|
||||
const current_tile_state = !gallery[slide].tile;
|
||||
gallery[slide].tile = current_tile_state;
|
||||
|
||||
this.classList.toggle("on");
|
||||
const current_tile_state = !gallery[slide].tile;
|
||||
gallery[slide].tile = current_tile_state;
|
||||
|
||||
if(current_tile_state){
|
||||
const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img");
|
||||
addTile(spl_img);
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
}
|
||||
function like_handler(event){
|
||||
|
||||
const current_like_state = !gallery[slide].like;
|
||||
gallery[slide].like = current_like_state;
|
||||
this.classList.toggle("on");
|
||||
|
||||
if(current_like_state){
|
||||
// add to favorites ...
|
||||
//img_file_name.value = gallery[slide].src;
|
||||
//console.log(gallery[slide].src);
|
||||
}
|
||||
else{
|
||||
// remove from favorites ...
|
||||
}
|
||||
}
|
||||
this.classList.toggle("on");
|
||||
|
||||
if (current_tile_state) {
|
||||
const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img");
|
||||
addTile(spl_img);
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
}
|
||||
function like_handler(event) {
|
||||
const current_like_state = !gallery[slide].like;
|
||||
gallery[slide].like = current_like_state;
|
||||
this.classList.toggle("on");
|
||||
|
||||
if (current_like_state) {
|
||||
// add to favorites ...
|
||||
//img_file_name.value = gallery[slide].src;
|
||||
//console.log(gallery[slide].src);
|
||||
} else {
|
||||
// remove from favorites ...
|
||||
}
|
||||
}
|
||||
|
||||
function createGallerySpotlight() {
|
||||
//console.log("clicked");
|
||||
slide = 0;
|
||||
gallery = [];
|
||||
|
||||
//console.log("clicked");
|
||||
slide = 0;
|
||||
gallery = [];
|
||||
gradioApp()
|
||||
.querySelectorAll("#" + selectedTabItemId + " .thumbnails img")
|
||||
.forEach(function (elem, i) {
|
||||
elem.setAttribute("gal-id", i);
|
||||
//if(fullImg_src == elem.src) slide = parseInt(i+1);
|
||||
if (elem.parentElement.className.indexOf("selected") != -1)
|
||||
slide = parseInt(i + 1);
|
||||
//console.log(slide);
|
||||
gallery[i] = {
|
||||
src: elem.src,
|
||||
title: "Seed:" + elem.src,
|
||||
//description: "This is a description.",
|
||||
like: false,
|
||||
tile: false,
|
||||
tile_size: 50,
|
||||
};
|
||||
});
|
||||
|
||||
const options = {
|
||||
class: "sd-gallery",
|
||||
index: slide,
|
||||
//control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"],
|
||||
control: control,
|
||||
//animation: animation,
|
||||
onshow: function (index) {},
|
||||
onchange: function (index, options) {
|
||||
slide = index - 1;
|
||||
tile.classList.toggle("on", gallery[slide].tile);
|
||||
//if(img_browser){
|
||||
like.classList.toggle("on", gallery[slide].like);
|
||||
|
||||
gradioApp().querySelectorAll("#"+selectedTabItemId+' .thumbnails img').forEach(function (elem, i){
|
||||
elem.setAttribute("gal-id", i);
|
||||
//if(fullImg_src == elem.src) slide = parseInt(i+1);
|
||||
if(elem.parentElement.className.indexOf("selected") != -1) slide = parseInt(i+1);
|
||||
//console.log(slide);
|
||||
gallery[i] = {
|
||||
src: elem.src,
|
||||
title: "Seed:" + elem.src,
|
||||
//description: "This is a description.",
|
||||
like: false,
|
||||
tile:false,
|
||||
tile_size: 50,
|
||||
}
|
||||
})
|
||||
|
||||
const options = {
|
||||
|
||||
class: "sd-gallery",
|
||||
index: slide,
|
||||
//control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"],
|
||||
control: control,
|
||||
//animation: animation,
|
||||
onshow: function(index){
|
||||
|
||||
},
|
||||
onchange: function(index, options){
|
||||
slide = index - 1;
|
||||
tile.classList.toggle("on", gallery[slide].tile);
|
||||
//if(img_browser){
|
||||
like.classList.toggle("on", gallery[slide].like);
|
||||
|
||||
//}
|
||||
|
||||
spl_pane = gradioApp().querySelector("#spotlight-gal .spl-pane:nth-child("+index+")");
|
||||
spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out");
|
||||
spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in");
|
||||
|
||||
const current_tile_state = gallery[slide].tile;
|
||||
if(current_tile_state){
|
||||
addTile();
|
||||
}else{
|
||||
removeTile();
|
||||
}
|
||||
//}
|
||||
|
||||
},
|
||||
onclose: function(index){
|
||||
gradioApp().querySelector("#"+selectedTabItemId+' .thumbnails .thumbnail-item:nth-child('+(slide+1)+')').click();
|
||||
}
|
||||
};
|
||||
spl_pane = gradioApp().querySelector(
|
||||
"#spotlight-gal .spl-pane:nth-child(" + index + ")"
|
||||
);
|
||||
spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out");
|
||||
spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in");
|
||||
|
||||
//assign(options, modifier);
|
||||
|
||||
const current_tile_state = gallery[slide].tile;
|
||||
if (current_tile_state) {
|
||||
addTile();
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
},
|
||||
onclose: function (index) {
|
||||
gradioApp()
|
||||
.querySelector(
|
||||
"#" +
|
||||
selectedTabItemId +
|
||||
" .thumbnails .thumbnail-item:nth-child(" +
|
||||
(slide + 1) +
|
||||
")"
|
||||
)
|
||||
.click();
|
||||
},
|
||||
};
|
||||
|
||||
spotlight_gallery.show(gallery, options);
|
||||
spotlight_gallery.panzoom(true);
|
||||
|
||||
//assign(options, modifier);
|
||||
|
||||
spotlight_gallery.show(gallery, options);
|
||||
spotlight_gallery.panzoom(true);
|
||||
}
|
||||
|
||||
function fullImg_click_handler(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
createGallerySpotlight();
|
||||
function fullImg_click_handler(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
createGallerySpotlight();
|
||||
}
|
||||
|
||||
|
||||
let intervalUiUpdateIViewer;
|
||||
function onUiHeaderTabUpdate(){
|
||||
if(intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
function onUiHeaderTabUpdate() {
|
||||
if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
}
|
||||
|
||||
|
||||
let fullImg_preview;
|
||||
function onUiUpdateIViewer(){
|
||||
clearInterval(intervalUiUpdateIViewer);
|
||||
//update_performant_inputs(selectedTabItemId);
|
||||
|
||||
//fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain');
|
||||
fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' .preview > img');
|
||||
if(opts.js_modal_lightbox && fullImg_preview ) {
|
||||
function onUiUpdateIViewer() {
|
||||
clearInterval(intervalUiUpdateIViewer);
|
||||
//update_performant_inputs(selectedTabItemId);
|
||||
|
||||
fullImg_src = fullImg_preview.src;
|
||||
fullImg_preview.removeEventListener('click', fullImg_click_handler );
|
||||
fullImg_preview.addEventListener('click', fullImg_click_handler, true );//bubbling phase
|
||||
|
||||
/*
|
||||
//fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain');
|
||||
fullImg_preview = gradioApp().querySelector(
|
||||
"#" + selectedTabItemId + " .preview > img"
|
||||
);
|
||||
if (opts.js_modal_lightbox && fullImg_preview) {
|
||||
fullImg_src = fullImg_preview.src;
|
||||
fullImg_preview.removeEventListener("click", fullImg_click_handler);
|
||||
fullImg_preview.addEventListener("click", fullImg_click_handler, true); //bubbling phase
|
||||
|
||||
/*
|
||||
// this is an idea to integrate image browser extension seamlesly,
|
||||
// without the need to change to the image browser tab extension users will be able to review images after generation
|
||||
// and add them to favorites or delete the ones that don't like on the spot
|
||||
@@ -469,21 +481,22 @@ function onUiUpdateIViewer(){
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onUiUpdate(function() {
|
||||
if(intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
})
|
||||
onUiUpdate(function () {
|
||||
if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
});
|
||||
|
||||
onUiLoaded(function(){
|
||||
spotlight_gallery = new Spotlight();
|
||||
spotlight_gallery.init(gradioApp().querySelector('.gradio-container'), "-gal");
|
||||
tile = spotlight_gallery.addControl("tile", tile_handler);
|
||||
like = spotlight_gallery.addControl("like", like_handler);
|
||||
})
|
||||
onUiLoaded(function () {
|
||||
spotlight_gallery = new Spotlight();
|
||||
spotlight_gallery.init(
|
||||
gradioApp().querySelector(".gradio-container"),
|
||||
"-gal"
|
||||
);
|
||||
tile = spotlight_gallery.addControl("tile", tile_handler);
|
||||
like = spotlight_gallery.addControl("like", like_handler);
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function () {});
|
||||
|
||||
Reference in New Issue
Block a user