mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-21 02:18:24 +02:00
Moved JS&CSS into appropriate files and changed observer to refresh button
This commit is contained in:
parent
3cc951cdaa
commit
73a6e6c737
@ -458,38 +458,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="tab-content-gallery" class="tab-content">
|
<div id="tab-content-gallery" class="tab-content">
|
||||||
<script>
|
<button class="primaryButton" onclick="refreshGallery()">Refresh</button>
|
||||||
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>
|
|
||||||
<div id="imagecontainer"></div>
|
<div id="imagecontainer"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1817,3 +1817,20 @@ div#enlarge-buttons {
|
|||||||
.imgContainer .spinnerStatus {
|
.imgContainer .spinnerStatus {
|
||||||
font-size: 10pt;
|
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;
|
||||||
|
}
|
@ -2787,3 +2787,15 @@ let recentResolutionsValues = []
|
|||||||
heightField.value = temp
|
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))
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user