extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-22 21:32:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

Allow creating custom HTML elements for image info button plugins (#1007)

Browse Source 
* Allow creating custom HTML elements for image info button plugins

* Allow arrays and labels

* Add spacing between buttons on the same row
This commit is contained in:
Olivia Godone-Maresca 2023-03-15 09:14:43 -04:00 committed by GitHub
parent 9c4d702434
commit c8f8f329e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -146,6 +146,9 @@ code {
.imgItemInfo * {
margin-bottom: 7px;
}
.imgItemInfo .tasksBtns {
margin-left: 1em;
}
.imgItem .image_clear_btn {
transform: translate(40%, -50%);
}

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

@ -347,23 +347,59 @@ function showImages(reqBody, res, outputContainer, livePreview) {
const imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
const img = imageItemElem.querySelector('img')
const createButton = function(btnInfo) {
const newButton = document.createElement('button')
newButton.classList.add('tasksBtns')
newButton.innerText = btnInfo.text
newButton.addEventListener('click', function(event) {
btnInfo.on_click(req, img, event)
})
if (btnInfo.class !== undefined) {
newButton.classList.add(btnInfo.class)
if (Array.isArray(btnInfo)) {
const wrapper = document.createElement('div');
btnInfo
.map(createButton)
.forEach(buttonElement => wrapper.appendChild(buttonElement))
return wrapper
}
imgItemInfo.appendChild(newButton)
const isLabel = btnInfo.type === 'label'
const newButton = document.createElement(isLabel ? 'span' : 'button')
newButton.classList.add('tasksBtns')
if (btnInfo.html) {
const html = typeof btnInfo.html === 'function' ? btnInfo.html() : btnInfo.html
if (html instanceof HTMLElement) {
newButton.appendChild(html)
} else {
newButton.innerHTML = html
}
} else {
newButton.innerText = typeof btnInfo.text === 'function' ? btnInfo.text() : btnInfo.text
}
if (btnInfo.on_click || !isLabel) {
newButton.addEventListener('click', function(event) {
btnInfo.on_click(req, img, event)
})
}
if (btnInfo.class !== undefined) {
if (Array.isArray(btnInfo.class)) {
newButton.classList.add(...btnInfo.class)
} else {
newButton.classList.add(btnInfo.class)
}
}
return newButton
}
buttons.forEach(btn => {
if (btn.filter && btn.filter(req, img) === false) {
if (Array.isArray(btn)) {
if (btn.find(btnInfo => btnInfo.filter && btnInfo.filter(req, img) === false)) {
return
}
} else if (btn.filter && btn.filter(req, img) === false) {
return
}
createButton(btn)
try {
imgItemInfo.appendChild(createButton(btn))
} catch (err) {
console.error('Error creating image info button from plugin: ', btn, err)
}
})
}
})