holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the task entries collapsible

Browse Source
This commit is contained in:
cmdr2 2022-09-28 13:44:48 +05:30
parent 38ebb95e63
commit 553525a0fb
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@ -213,7 +213,7 @@
</div> </div>
</body> </body>
<script src="media/main.js?v=13"></script> <script src="media/main.js?v=14"></script>
<script> <script>
async function init() { async function init() {
await loadModifiers() await loadModifiers()

30
ui/media/main.js
View File

@ -687,11 +687,15 @@ async function makeImage() {
taskEntry.className = 'imageTaskContainer' taskEntry.className = 'imageTaskContainer'
taskEntry.innerHTML = ` <div class="taskStatusLabel">Enqueued</div> taskEntry.innerHTML = ` <div class="taskStatusLabel">Enqueued</div>
<button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button> <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
<div class="preview-prompt"></div> <div class="preview-prompt collapsible active"></div>
<div class="taskConfig">${taskConfig}</div> <div class="taskConfig">${taskConfig}</div>
<div class="outputMsg"></div> <div class="collapsible-content" style="display: block">
<div class="progressBar"></div> <div class="outputMsg"></div>
<div class="img-preview">` <div class="progressBar"></div>
<div class="img-preview">
</div>`
createCollapsibles(taskEntry)
task['numOutputsTotal'] = numOutputsTotal task['numOutputsTotal'] = numOutputsTotal
task['taskStatusLabel'] = taskEntry.querySelector('.taskStatusLabel') task['taskStatusLabel'] = taskEntry.querySelector('.taskStatusLabel')
@ -1052,6 +1056,22 @@ function millisecondsToStr(milliseconds) {
return s; return s;
} }
// https://gomakethings.com/finding-the-next-and-previous-sibling-elements-that-match-a-selector-with-vanilla-js/
function getNextSibling(elem, selector) {
// Get the next sibling element
var sibling = elem.nextElementSibling
// If there's no selector, return the first sibling
if (!selector) return sibling
// If the sibling matches our selector, use it
// If not, jump to the next sibling and continue the loop
while (sibling) {
if (sibling.matches(selector)) return sibling
sibling = sibling.nextElementSibling
}
}
function createCollapsibles(node) { function createCollapsibles(node) {
if (!node) { if (!node) {
node = document node = document
@ -1071,7 +1091,7 @@ function createCollapsibles(node) {
c.addEventListener('click', function() { c.addEventListener('click', function() {
this.classList.toggle("active") this.classList.toggle("active")
let content = this.nextElementSibling let content = getNextSibling(this, '.collapsible-content')
if (content.style.display === "block") { if (content.style.display === "block") {
content.style.display = "none" content.style.display = "none"
handle.innerHTML = '&#x2795;' // plus handle.innerHTML = '&#x2795;' // plus