From bae0bec1cc9c64a603887479572715814900005c Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Wed, 19 Oct 2022 21:21:19 +0530
Subject: [PATCH] Change the image buttons plugins to a list instead of a dict

---
 ui/media/js/main.js    | 20 +++++++++-----------
 ui/media/js/plugins.js | 12 ++++++------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index c266dd7b..609e3cbe 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -366,20 +366,19 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             const imageSeedLabel = imageItemElem.querySelector('.imgSeedLabel')
             imageSeedLabel.innerText = 'Seed: ' + req.seed
 
-            const buttons = {
-                'imgUseBtn': { text: 'Use as Input', on_click: onUseAsInputClick },
-                'imgSaveBtn': { text: 'Download', on_click: onDownloadImageClick },
-                'makeSimilarBtn': { text: 'Make Similar Images', on_click: onMakeSimilarClick },
-            }
+            let buttons = [
+                { text: 'Use as Input', on_click: onUseAsInputClick },
+                { text: 'Download', on_click: onDownloadImageClick },
+                { text: 'Make Similar Images', on_click: onMakeSimilarClick },
+            ]
 
             // include the plugins
-            Object.assign(buttons, PLUGINS['IMAGE_INFO_BUTTONS'])
+            buttons = buttons.concat(PLUGINS['IMAGE_INFO_BUTTONS'])
 
             const imgItemInfo = imageItemElem.querySelector('.imgItemInfo')
             const img = imageItemElem.querySelector('img')
-            const createButton = function(name, btnInfo) {
+            const createButton = function(btnInfo) {
                 const newButton = document.createElement('button')
-                newButton.classList.add(name)
                 newButton.classList.add('tasksBtns')
                 newButton.innerText = btnInfo.text
                 newButton.addEventListener('click', function() {
@@ -387,13 +386,12 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                 })
                 imgItemInfo.appendChild(newButton)
             }
-            Object.keys(buttons).forEach((name) => {
-                const btn = buttons[name]
+            buttons.forEach(btn => {
                 if (btn.filter && btn.filter(req, img) === false) {
                     return
                 }
 
-                createButton(name, btn)
+                createButton(btn)
             })
         }
     })
diff --git a/ui/media/js/plugins.js b/ui/media/js/plugins.js
index 92ca296c..bbbfe333 100644
--- a/ui/media/js/plugins.js
+++ b/ui/media/js/plugins.js
@@ -5,7 +5,7 @@ const PLUGINS = {
      * Register new buttons to show on each output image.
      * 
      * Example:
-     * PLUGINS['IMAGE_INFO_BUTTONS']['myCustomVariationButton'] = {
+     * PLUGINS['IMAGE_INFO_BUTTONS'].push({
      *   text: 'Make a Similar Image',
      *   on_click: function(origRequest, image) {
      *     let newTaskRequest = getCurrentUserRequest()
@@ -22,15 +22,15 @@ const PLUGINS = {
      *     // if this function isn't set, the button will always be visible
      *     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']['custom_imgRedoBtn'] = { 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: 'Double Size', on_click: getStartNewTaskHandler('img2img_X2') })
+PLUGINS['IMAGE_INFO_BUTTONS'].push({ text: 'Redo', on_click: getStartNewTaskHandler('img2img') })
+PLUGINS['IMAGE_INFO_BUTTONS'].push({ text: 'Upscale', on_click: getStartNewTaskHandler('upscale'), filter: (req, img) => !req.use_upscale })
 
 function getStartNewTaskHandler(mode) {
     return function(reqBody, img) {