easydiffusion/ui/media/js/image-modifiers.js

let activeTags = []
let modifiers = []

let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
let editorTagsContainer = document.querySelector('#editor-inputs-tags-container')
let modifierCardSizeSlider = document.querySelector('#modifier-card-size-slider')
let previewImageField = document.querySelector('#preview-image')

const modifierThumbnailPath = 'media/modifier-thumbnails'
const activeCardClass = 'modifier-card-active'

function createModifierCard(name, previews) {
    const modifierCard = document.createElement('div')
    modifierCard.className = 'modifier-card'
    modifierCard.innerHTML = `
    <div class="modifier-card-overlay"></div>
    <div class="modifier-card-image-container">
        <div class="modifier-card-image-overlay">+</div>
        <p class="modifier-card-error-label"></p>
        <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
    </div>
    <div class="modifier-card-container">
        <div class="modifier-card-label"><p></p></div>
    </div>`

    const image = modifierCard.querySelector('.modifier-card-image')
    const errorText =  modifierCard.querySelector('.modifier-card-error-label')
    const label = modifierCard.querySelector('.modifier-card-label')

    errorText.innerText = 'No Image'

    if (typeof previews == 'object') {
        image.src = previews[0]; // portrait
        image.setAttribute('preview-type', 'portrait')
    } else {
        image.remove()
    }

    const maxLabelLength = 30
    const nameWithoutBy = name.replace('by ', '')

    if(nameWithoutBy.length <= maxLabelLength) {
        label.querySelector('p').innerText = nameWithoutBy
    } else {
        const tooltipText = document.createElement('span')
        tooltipText.className = 'tooltip-text'
        tooltipText.innerText = name

        label.classList.add('tooltip')
        label.appendChild(tooltipText)

        label.querySelector('p').innerText = nameWithoutBy.substring(0, maxLabelLength) + '...'
    }

    return modifierCard
}

async function loadModifiers() {
    try {
        let res = await fetch('/get/modifiers')
        if (res.status === 200) {
            res = await res.json()

            modifiers = res; // update global variable

            res.forEach((modifierGroup, idx) => {
                const title = modifierGroup.category
                const modifiers = modifierGroup.modifiers

                const titleEl = document.createElement('h5')
                titleEl.className = 'collapsible'
                titleEl.innerText = title

                const modifiersEl = document.createElement('div')
                modifiersEl.classList.add('collapsible-content', 'editor-modifiers-leaf')

                if (idx == 0) {
                    titleEl.className += ' active'
                    modifiersEl.style.display = 'block'
                }

                modifiers.forEach(modObj => {
                    const modifierName = modObj.modifier
                    const modifierPreviews = modObj?.previews?.map(preview => `${modifierThumbnailPath}/${preview.path}`)

                    const modifierCard = createModifierCard(modifierName, modifierPreviews)

                    if(typeof modifierCard == 'object') {
                        modifiersEl.appendChild(modifierCard)

                        modifierCard.addEventListener('click', () => {
                            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 = '+'
                            } else {
                                // add modifier to active array
                                activeTags.push({
                                    'name': modifierName,
                                    'element': modifierCard.cloneNode(true),
                                    'originElement': modifierCard,
                                    'previews': modifierPreviews
                                })

                                modifierCard.classList.add(activeCardClass)

                                modifierCard.querySelector('.modifier-card-image-overlay').innerText = '-'
                            }

                            refreshTagsList()
                        })
                    }
                })

                let brk = document.createElement('br')
                brk.style.clear = 'both'
                modifiersEl.appendChild(brk)

                let e = document.createElement('div')
                e.appendChild(titleEl)
                e.appendChild(modifiersEl)

                editorModifierEntries.appendChild(e)
            })

            createCollapsibles(editorModifierEntries)
        }
    } catch (e) {
        console.log('error fetching modifiers', e)
    }
}

function refreshTagsList() {
    editorModifierTagsList.innerHTML = ''

    if (activeTags.length == 0) {
        editorTagsContainer.style.display = 'none'
        return
    } else {
        editorTagsContainer.style.display = 'block'
    }

    activeTags.forEach((tag, index) => {
        tag.element.querySelector('.modifier-card-image-overlay').innerText = '-'
        tag.element.classList.add('modifier-card-tiny')

        editorModifierTagsList.appendChild(tag.element)

        tag.element.addEventListener('click', () => {
            let idx = activeTags.indexOf(tag)

            if (idx !== -1) {
                activeTags[idx].originElement.classList.remove(activeCardClass)
                activeTags[idx].originElement.querySelector('.modifier-card-image-overlay').innerText = '+'

                activeTags.splice(idx, 1)
                refreshTagsList()
            }
        })
    })

    let brk = document.createElement('br')
    brk.style.clear = 'both'
    editorModifierTagsList.appendChild(brk)
}

function changePreviewImages(val) {
    const previewImages = document.querySelectorAll('.modifier-card-image-container img')

    let previewArr = []

    modifiers.map(x => x.modifiers).forEach(x => previewArr.push(...x.map(m => m.previews)))
    
    previewArr = previewArr.map(x => {
        let obj = {}

        x.forEach(preview => {
            obj[preview.name] = preview.path
        })
        
        return obj
    })

    previewImages.forEach(previewImage => {
        const currentPreviewType = previewImage.getAttribute('preview-type')
        const relativePreviewPath = previewImage.src.split(modifierThumbnailPath + '/').pop()

        const previews = previewArr.find(preview => relativePreviewPath == preview[currentPreviewType])

        if(typeof previews == 'object') {
            let preview = null

            if (val == 'portrait') {
                preview = previews.portrait
            }
            else if (val == 'landscape') {
                preview = previews.landscape
            }

            if(preview != null) {
                previewImage.src = `${modifierThumbnailPath}/${preview}`
                previewImage.setAttribute('preview-type', val)
            }
        }
    })
}

function resizeModifierCards(val) {
    const cardSizePrefix = 'modifier-card-size_'
    const modifierCardClass = 'modifier-card'

    const modifierCards = document.querySelectorAll(`.${modifierCardClass}`)
    const cardSize = n => `${cardSizePrefix}${n}`

    modifierCards.forEach(card => {
        // remove existing size classes
        const classes = card.className.split(' ').filter(c => !c.startsWith(cardSizePrefix))
        card.className = classes.join(' ').trim()

        if(val != 0) {
            card.classList.add(cardSize(val))
        }
    })
}

modifierCardSizeSlider.onchange = () => resizeModifierCards(modifierCardSizeSlider.value)
previewImageField.onchange = () => changePreviewImages(previewImageField.value)