Change the image buttons plugins to a list instead of a dict

This commit is contained in:
cmdr2 2022-10-19 21:21:19 +05:30
parent 602686a5d2
commit bae0bec1cc
2 changed files with 15 additions and 17 deletions

View File

@ -366,20 +366,19 @@ function showImages(reqBody, res, outputContainer, livePreview) {
const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel') const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel')
imageSeedLabel.innerText = 'Seed: ' + req.seed imageSeedLabel.innerText = 'Seed: ' + req.seed
const buttons = { let buttons = [
'imgUseBtn': { text: 'Use as Input', on_click: onUseAsInputClick }, { text: 'Use as Input', on_click: onUseAsInputClick },
'imgSaveBtn': { text: 'Download', on_click: onDownloadImageClick }, { text: 'Download', on_click: onDownloadImageClick },
'makeSimilarBtn': { text: 'Make Similar Images', on_click: onMakeSimilarClick }, { text: 'Make Similar Images', on_click: onMakeSimilarClick },
} ]
// include the plugins // include the plugins
Object.assign(buttons, PLUGINS['IMAGE_INFO_BUTTONS']) buttons = buttons.concat(PLUGINS['IMAGE_INFO_BUTTONS'])
const imgItemInfo = imageItemElem.querySelector('.imgItemInfo') const imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
const img = imageItemElem.querySelector('img') const img = imageItemElem.querySelector('img')
const createButton = function(name, btnInfo) { const createButton = function(btnInfo) {
const newButton = document.createElement('button') const newButton = document.createElement('button')
newButton.classList.add(name)
newButton.classList.add('tasksBtns') newButton.classList.add('tasksBtns')
newButton.innerText = btnInfo.text newButton.innerText = btnInfo.text
newButton.addEventListener('click', function() { newButton.addEventListener('click', function() {
@ -387,13 +386,12 @@ function showImages(reqBody, res, outputContainer, livePreview) {
}) })
imgItemInfo.appendChild(newButton) imgItemInfo.appendChild(newButton)
} }
Object.keys(buttons).forEach((name) => { buttons.forEach(btn => {
const btn = buttons[name]
if (btn.filter && btn.filter(req, img) === false) { if (btn.filter && btn.filter(req, img) === false) {
return return
} }
createButton(name, btn) createButton(btn)
}) })
} }
}) })

View File

@ -5,7 +5,7 @@ const PLUGINS = {
* Register new buttons to show on each output image. * Register new buttons to show on each output image.
* *
* Example: * Example:
* PLUGINS['IMAGE_INFO_BUTTONS']['myCustomVariationButton'] = { * PLUGINS['IMAGE_INFO_BUTTONS'].push({
* text: 'Make a Similar Image', * text: 'Make a Similar Image',
* on_click: function(origRequest, image) { * on_click: function(origRequest, image) {
* let newTaskRequest = getCurrentUserRequest() * let newTaskRequest = getCurrentUserRequest()
@ -22,15 +22,15 @@ const PLUGINS = {
* // if this function isn't set, the button will always be visible * // if this function isn't set, the button will always be visible
* return true * return true
* } * }
* } * })
*/ */
IMAGE_INFO_BUTTONS: {} IMAGE_INFO_BUTTONS: []
} }
PLUGINS['IMAGE_INFO_BUTTONS']['custom_imgX2Btn'] = { text: 'Double Size', on_click: getStartNewTaskHandler('img2img_X2') } PLUGINS['IMAGE_INFO_BUTTONS'].push({ text: 'Double Size', on_click: getStartNewTaskHandler('img2img_X2') })
PLUGINS['IMAGE_INFO_BUTTONS']['custom_imgRedoBtn'] = { text: 'Redo', on_click: getStartNewTaskHandler('img2img') } PLUGINS['IMAGE_INFO_BUTTONS'].push({ text: 'Redo', on_click: getStartNewTaskHandler('img2img') })
PLUGINS['IMAGE_INFO_BUTTONS']['custom_upscaleBtn'] = { text: 'Upscale', on_click: getStartNewTaskHandler('upscale'), filter: (req, img) => !req.use_upscale } PLUGINS['IMAGE_INFO_BUTTONS'].push({ text: 'Upscale', on_click: getStartNewTaskHandler('upscale'), filter: (req, img) => !req.use_upscale })
function getStartNewTaskHandler(mode) { function getStartNewTaskHandler(mode) {
return function(reqBody, img) { return function(reqBody, img) {