Function createModifierCard

ui/media/js/image-modifiers.js:28–84

(name, previews, removeBy)

const CUSTOM_MODIFIERS_KEY = "customModifiers"

function createModifierCard(name, previews, removeBy) {
    let cardPreviewImageType = previewImageField.value

    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">No Image</p>
        <img onerror="this.remove()" alt="Modifier Image" class="modifier-card-image">
    </div>
    <div class="modifier-card-container">
        <div class="modifier-card-label">
            <span class="long-label hidden"></span>
            <p class="regular-label"></p>
        </div>
    </div>`

    const image = modifierCard.querySelector(".modifier-card-image")
    const longLabel = modifierCard.querySelector(".modifier-card-label span.long-label")
    const regularLabel = modifierCard.querySelector(".modifier-card-label p.regular-label")

    if (typeof previews == "object") {
        image.src = previews[cardPreviewImageType == "portrait" ? 0 : 1] // 0 index is portrait, 1 landscape
        image.setAttribute("preview-type", cardPreviewImageType)
    } else {
        image.remove()
    }

    const maxLabelLength = 30
    const cardLabel = removeBy ? name.replace("by ", "") : name

    function getFormattedLabel(length) {
        if (cardLabel?.length <= length) {
            return cardLabel
        } else {
            return cardLabel.substring(0, length) + "..."
        }
    }

    modifierCard.dataset.fullName = name // preserve the full name
    regularLabel.dataset.fullName = name // preserve the full name, legacy support for older plugins

    longLabel.innerText = getFormattedLabel(maxLabelLength * 2)
    regularLabel.innerText = getFormattedLabel(maxLabelLength)

    if (cardLabel.length > maxLabelLength) {
        modifierCard.classList.add("support-long-label")

        if (cardLabel.length > maxLabelLength * 2) {
            modifierCard.title = `"${name}"`
        }
    }

    return modifierCard
}