From 66d311258a804f18276966834a9f54701222b607 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Mon, 16 Jan 2023 23:56:44 -0800
Subject: [PATCH] Fix card names and toggling

Fix names and toggling for cards starting  with "By ", e.g. "By the ocean".
---
 ui/media/js/image-modifiers.js           | 19 ++++++++++---------
 ui/plugins/ui/modifiers-toggle.plugin.js |  2 +-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index 0d611602..c28a5872 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -16,7 +16,7 @@ const modifierThumbnailPath = 'media/modifier-thumbnails'
 const activeCardClass = 'modifier-card-active'
 const CUSTOM_MODIFIERS_KEY = "customModifiers"
 
-function createModifierCard(name, previews) {
+function createModifierCard(name, previews, removeBy) {
     const modifierCard = document.createElement('div')
     modifierCard.className = 'modifier-card'
     modifierCard.innerHTML = `
@@ -44,10 +44,11 @@ function createModifierCard(name, previews) {
     }
 
     const maxLabelLength = 30
-    const nameWithoutBy = name.replace('by ', '')
+    const cardLabel = removeBy ? name.replace('by ', '') : name
 
-    if(nameWithoutBy.length <= maxLabelLength) {
-        label.querySelector('p').innerText = nameWithoutBy
+    if(cardLabel.length <= maxLabelLength) {
+        label.querySelector('p').innerText = cardLabel
+        label.querySelector('p').dataset.fullName = name // preserve the full name
     } else {
         const tooltipText = document.createElement('span')
         tooltipText.className = 'tooltip-text'
@@ -56,13 +57,13 @@ function createModifierCard(name, previews) {
         label.classList.add('tooltip')
         label.appendChild(tooltipText)
 
-        label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...'
+        label.querySelector('p').innerText = cardLabel.substring(0, maxLabelLength) + '...'
     }
 
     return modifierCard
 }
 
-function createModifierGroup(modifierGroup, initiallyExpanded) {
+function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
     const title = modifierGroup.category
     const modifiers = modifierGroup.modifiers
 
@@ -81,7 +82,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
         const modifierName = modObj.modifier
         const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`)
 
-        const modifierCard = createModifierCard(modifierName, modifierPreviews)
+        const modifierCard = createModifierCard(modifierName, modifierPreviews, removeBy)
 
         if(typeof modifierCard == 'object') {
             modifiersEl.appendChild(modifierCard)
@@ -137,7 +138,7 @@ async function loadModifiers() {
             res.reverse()
 
             res.forEach((modifierGroup, idx) => {
-                createModifierGroup(modifierGroup, idx === res.length - 1)
+                createModifierGroup(modifierGroup, idx === res.length - 1, modifierGroup === 'Artist' ? true : false) // only remove "By " for artists
             })
 
             createCollapsibles(editorModifierEntries)
@@ -181,7 +182,7 @@ function refreshModifiersState(newTags) {
             }
         })
         if (found == false) { // custom tag went missing, create one here
-            let modifierCard = createModifierCard(tag, undefined) // create a modifier card for the missing tag, no image
+            let modifierCard = createModifierCard(tag, undefined, false) // create a modifier card for the missing tag, no image
             
             modifierCard.addEventListener('click', () => {
                 if (activeTags.map(x => x.name).includes(tag)) {
diff --git a/ui/plugins/ui/modifiers-toggle.plugin.js b/ui/plugins/ui/modifiers-toggle.plugin.js
index cf0fedc8..e7416164 100644
--- a/ui/plugins/ui/modifiers-toggle.plugin.js
+++ b/ui/plugins/ui/modifiers-toggle.plugin.js
@@ -38,7 +38,7 @@
                     i.parentElement.classList.add('modifier-toggle-inactive')
                 }
                 // refresh activeTags
-                let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText
+                let modifierName = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].dataset.fullName
                 activeTags = activeTags.map(obj => {
                     if (obj.name === modifierName) {
                         return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))};