extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-23 00:33:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix card names and toggling

Browse Source 
Fix names and toggling for cards starting  with "By ", e.g. "By the ocean".
This commit is contained in:
patriceac 2023-01-16 23:56:44 -08:00
parent 0a1197055c
commit 66d311258a
2 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/media/js/image-modifiers.js
View File

@ -16,7 +16,7 @@ const modifierThumbnailPath = 'media/modifier-thumbnails'
const activeCardClass = 'modifier-card-active' const activeCardClass = 'modifier-card-active'
const CUSTOM_MODIFIERS_KEY = "customModifiers" const CUSTOM_MODIFIERS_KEY = "customModifiers"
function createModifierCard(name, previews) { function createModifierCard(name, previews, removeBy) {
const modifierCard = document.createElement('div') const modifierCard = document.createElement('div')
modifierCard.className = 'modifier-card' modifierCard.className = 'modifier-card'
modifierCard.innerHTML = ` modifierCard.innerHTML = `
@ -44,10 +44,11 @@ function createModifierCard(name, previews) {
} }
const maxLabelLength = 30 const maxLabelLength = 30
const nameWithoutBy = name.replace('by ', '') const cardLabel = removeBy ? name.replace('by ', '') : name
if(nameWithoutBy.length <= maxLabelLength) { if(cardLabel.length <= maxLabelLength) {
label.querySelector('p').innerText = nameWithoutBy label.querySelector('p').innerText = cardLabel
label.querySelector('p').dataset.fullName = name // preserve the full name
} else { } else {
const tooltipText = document.createElement('span') const tooltipText = document.createElement('span')
tooltipText.className = 'tooltip-text' tooltipText.className = 'tooltip-text'
@ -56,13 +57,13 @@ function createModifierCard(name, previews) {
label.classList.add('tooltip') label.classList.add('tooltip')
label.appendChild(tooltipText) label.appendChild(tooltipText)
label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...' label.querySelector('p').innerText = cardLabel.substring(0, maxLabelLength) + '...'
} }
return modifierCard return modifierCard
} }
function createModifierGroup(modifierGroup, initiallyExpanded) { function createModifierGroup(modifierGroup, initiallyExpanded, removeBy) {
const title = modifierGroup.category const title = modifierGroup.category
const modifiers = modifierGroup.modifiers const modifiers = modifierGroup.modifiers
@ -81,7 +82,7 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
const modifierName = modObj.modifier const modifierName = modObj.modifier
const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`) const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`)
const modifierCard = createModifierCard(modifierName, modifierPreviews) const modifierCard = createModifierCard(modifierName, modifierPreviews, removeBy)
if(typeof modifierCard == 'object') { if(typeof modifierCard == 'object') {
modifiersEl.appendChild(modifierCard) modifiersEl.appendChild(modifierCard)
@ -137,7 +138,7 @@ async function loadModifiers() {
res.reverse() res.reverse()
res.forEach((modifierGroup, idx) => { 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) createCollapsibles(editorModifierEntries)
@ -181,7 +182,7 @@ function refreshModifiersState(newTags) {
} }
}) })
if (found == false) { // custom tag went missing, create one here 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', () => { modifierCard.addEventListener('click', () => {
if (activeTags.map(x => x.name).includes(tag)) { if (activeTags.map(x => x.name).includes(tag)) {

2
ui/plugins/ui/modifiers-toggle.plugin.js
View File

@ -38,7 +38,7 @@
i.parentElement.classList.add('modifier-toggle-inactive') i.parentElement.classList.add('modifier-toggle-inactive')
} }
// refresh activeTags // 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 => { activeTags = activeTags.map(obj => {
if (obj.name === modifierName) { if (obj.name === modifierName) {
return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))}; return {...obj, inactive: (obj.element.classList.contains('modifier-toggle-inactive'))};