extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-06-20 18:08:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Moved JS&CSS into appropriate files and changed observer to refresh button

Browse Source
This commit is contained in:
ManInDark 2023-08-06 22:06:16 +02:00
parent 3cc951cdaa
commit 73a6e6c737
No known key found for this signature in database
GPG Key ID: 72EC12A5B2D62779
3 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
ui/index.html
View File

@ -458,38 +458,8 @@
</div>
</div>
</div>
<div id="tab-content-gallery" class="tab-content">
<script>
tab = document.getElementById("tab-content-gallery")
new MutationObserver(function() { // to update all the images, just call this function
console.log("clicked")
container = document.getElementById("imagecontainer")
container.remove()
fetch('/all_images')
.then(response => response.text())
.then(text => new DOMParser().parseFromString(text, 'text/html'))
.then(html_like => html_like.getElementsByTagName('div')[0])
.then(div => tab.appendChild(div))
}).observe(tab, {attributes: true})
</script>
<style>
#imagecontainer {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
}
#imagecontainer>img {
width: 30vw;
min-width: 256px;
max-width: 1024px;
height: auto;
margin-block: 1vh;
border: 4px white solid;
}
</style>
<button class="primaryButton" onclick="refreshGallery()">Refresh</button>
<div id="imagecontainer"></div>
</div>
</div>

17
ui/media/css/main.css
View File

@ -1817,3 +1817,20 @@ div#enlarge-buttons {
.imgContainer .spinnerStatus {
font-size: 10pt;
}
/* Gallery CSS */
#imagecontainer {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
}
#imagecontainer>img {
width: 30vw;
min-width: 256px;
max-width: 1024px;
height: auto;
margin-block: 1vh;
border: 4px white solid;
}

12
ui/media/js/main.js
View File

@ -2787,3 +2787,15 @@ let recentResolutionsValues = []
heightField.value = temp
})
})()
/* Gallery JS */
function refreshGallery() {
let container = document.getElementById("imagecontainer")
container.remove()
fetch('/all_images')
.then(response => response.text())
.then(text => new DOMParser().parseFromString(text, 'text/html'))
.then(html_like => html_like.getElementsByTagName('div')[0])
.then(div => document.getElementById("tab-content-gallery").appendChild(div))
}