From cbc48e31e16a8b72f27246ef6ce14a4303e15ac7 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Sat, 19 Nov 2022 19:25:28 -0800
Subject: [PATCH] Fix duplicate custom modifiers activation states

Fixing activation state for custom modifier cards sharing the same tag where only one of the cards gets (de)activated.
---
 ui/media/js/image-modifiers.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index 8cf26a49..aada0e70 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -90,9 +90,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
                 if (activeTags.map(x => x.name).includes(modifierName)) {
                     // remove modifier from active array
                     activeTags = activeTags.filter(x => x.name != modifierName)
-                    modifierCard.classList.remove(activeCardClass)
-
-                    modifierCard.querySelector('.modifier-card-image-overlay').innerText = '+'
+                    toggleCardState(modifierName, false)
                 } else {
                     // add modifier to active array
                     activeTags.push({
@@ -101,10 +99,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
                         'originElement': modifierCard,
                         'previews': modifierPreviews
                     })
-
-                    modifierCard.classList.add(activeCardClass)
-
-                    modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-'
+                    toggleCardState(modifierName, true)
                 }
 
                 refreshTagsList()
@@ -220,8 +215,7 @@ function refreshTagsList() {
             let idx = activeTags.indexOf(tag)
 
             if (idx !== -1 && activeTags[idx].originElement !== undefined) {
-                activeTags[idx].originElement.classList.remove(activeCardClass)
-                activeTags[idx].originElement.querySelector('.modifier-card-image-overlay').innerText = '+'
+                toggleCardState(activeTags[idx].name, false)
 
                 activeTags.splice(idx, 1)
                 refreshTagsList()
@@ -234,6 +228,22 @@ function refreshTagsList() {
     editorModifierTagsList.appendChild(brk)
 }
 
+function toggleCardState(modifierName, makeActive) {
+    document.querySelector('#editor-modifiers').querySelectorAll('.modifier-card').forEach(card => {
+        const name = card.querySelector('.modifier-card-label').innerText
+        if (modifierName == name) {
+            if(makeActive) {
+                card.classList.add(activeCardClass)
+                card.querySelector('.modifier-card-image-overlay').innerText = '-'
+            }
+            else{
+                card.classList.remove(activeCardClass)
+                card.querySelector('.modifier-card-image-overlay').innerText = '+'
+            }
+        }
+    })
+}
+
 function changePreviewImages(val) {
     const previewImages = document.querySelectorAll('.modifier-card-image-container img')