From fdffde842a59332ad0434e5a375550c62bf04896 Mon Sep 17 00:00:00 2001 From: Kim Mantas Date: Wed, 27 Nov 2024 17:53:32 +0000 Subject: [PATCH] Audit uses of innerHTML --- less/v2/chat.less | 4 ++ .../components/damage-application.mjs | 7 +-- .../components/effect-application.mjs | 12 +++-- .../components/enchantment-application.mjs | 21 ++++---- module/documents/chat-message.mjs | 54 ++++++++++++------- module/enrichers.mjs | 3 +- 6 files changed, 63 insertions(+), 38 deletions(-) diff --git a/less/v2/chat.less b/less/v2/chat.less index f6ce2a5b44..4779115fc7 100644 --- a/less/v2/chat.less +++ b/less/v2/chat.less @@ -444,7 +444,9 @@ font-size: var(--font-size-10); line-height: 1; } +} +.message { p.supplement { margin: 0; font-size: var(--font-size-11); @@ -458,6 +460,8 @@ margin-right: .25rem; } } + + .dice-roll + p.supplement { margin: .5rem 0; } } /* Damage & Effects Trays */ diff --git a/module/applications/components/damage-application.mjs b/module/applications/components/damage-application.mjs index e61e15b743..0704a6222f 100644 --- a/module/applications/components/damage-application.mjs +++ b/module/applications/components/damage-application.mjs @@ -134,9 +134,9 @@ export default class DamageApplicationElement extends TargetedApplicationMixin(C li.classList.add("target"); li.dataset.targetUuid = uuid; li.innerHTML = ` - ${name} +
- ${name} + ${changeSources ? `${changeSources}` : ""}
@@ -147,7 +147,8 @@ export default class DamageApplicationElement extends TargetedApplicationMixin(C
`; - + Object.assign(li.querySelector(".gold-icon"), { alt: name, src: actor.img }); + li.querySelector(".name-stacked .title").append(name); const menu = li.querySelector("menu"); for ( const [value, display] of MULTIPLIERS ) { const entry = document.createElement("li"); diff --git a/module/applications/components/effect-application.mjs b/module/applications/components/effect-application.mjs index 662b102644..d3d67efccf 100644 --- a/module/applications/components/effect-application.mjs +++ b/module/applications/components/effect-application.mjs @@ -100,9 +100,9 @@ export default class EffectApplicationElement extends TargetedApplicationMixin(C li.classList.add("effect"); li.dataset.id = effect.id; li.innerHTML = ` - ${effect.name} +
- ${effect.name} + ${effect.duration.label}
`; + Object.assign(li.querySelector(".gold-icon"), { alt: effect.name, src: effect.img }); + li.querySelector(".name-stacked .title").append(effect.name); this.effectsList.append(li); li.addEventListener("click", this._onApplyEffect.bind(this)); } @@ -130,14 +132,16 @@ export default class EffectApplicationElement extends TargetedApplicationMixin(C li.classList.add("target"); li.dataset.targetUuid = uuid; li.innerHTML = ` - ${name} +
- ${name} +
`; + Object.assign(li.querySelector(".gold-icon"), { alt: name, src: actor.img }); + li.querySelector(".name-stacked .title").append(name); return li; } diff --git a/module/applications/components/enchantment-application.mjs b/module/applications/components/enchantment-application.mjs index 2ab806866e..70bc5810af 100644 --- a/module/applications/components/enchantment-application.mjs +++ b/module/applications/components/enchantment-application.mjs @@ -99,16 +99,18 @@ export default class EnchantmentApplicationElement extends HTMLElement { * Build a list of enchanted items. Will be called whenever the enchanted items are changed in order to update * the card list. */ - async buildItemList() { - const enchantedItems = await dnd5e.registry.enchantments.applied(this.enchantmentActivity.uuid).map(enchantment => { + buildItemList() { + const enchantedItems = dnd5e.registry.enchantments.applied(this.enchantmentActivity.uuid).map(enchantment => { const item = enchantment.parent; const div = document.createElement("div"); div.classList.add("preview"); div.dataset.enchantmentUuid = enchantment.uuid; div.innerHTML = ` - ${item.name} - ${item.name} + + `; + Object.assign(div.querySelector("img"), { alt: item.name, src: item.img }); + div.querySelector(".name").append(item.name); if ( item.isOwner ) { const control = document.createElement("a"); control.ariaLabel = game.i18n.localize("DND5E.ENCHANTMENT.Action.Remove"); @@ -119,14 +121,9 @@ export default class EnchantmentApplicationElement extends HTMLElement { } return div; }); - if ( enchantedItems.length ) { - this.dropArea.replaceChildren(...enchantedItems); - } else { - this.dropArea.innerHTML = `

${game.i18n.localize("DND5E.ENCHANT.DropArea")}

`; - } - if ( this.countArea ) { - this.countArea.querySelector(".current").innerText = enchantedItems.length; - } + if ( enchantedItems.length ) this.dropArea.replaceChildren(...enchantedItems); + else this.dropArea.innerHTML = `

${game.i18n.localize("DND5E.ENCHANT.DropArea")}

`; + if ( this.countArea ) this.countArea.querySelector(".current").innerText = enchantedItems.length; } /* -------------------------------------------- */ diff --git a/module/documents/chat-message.mjs b/module/documents/chat-message.mjs index cf27de0e1f..4747a5590e 100644 --- a/module/documents/chat-message.mjs +++ b/module/documents/chat-message.mjs @@ -260,11 +260,16 @@ export default class ChatMessage5e extends ChatMessage { const avatar = document.createElement("a"); avatar.classList.add("avatar"); if ( actor ) avatar.dataset.uuid = actor.uuid; - avatar.innerHTML = `${nameText}`; + const avatarImg = document.createElement("img"); + Object.assign(avatarImg, { src: img, alt: nameText }); + avatar.append(avatarImg); const name = document.createElement("span"); name.classList.add("name-stacked"); - name.innerHTML = `${nameText}`; + const title = document.createElement("span"); + title.classList.add("title"); + title.append(nameText); + name.append(title); const subtitle = document.createElement("span"); subtitle.classList.add("subtitle"); @@ -311,14 +316,19 @@ export default class ChatMessage5e extends ChatMessage { flavor.innerHTML = `
- ${item.name}
- ${item.name} ${subtitle}
`; + const icon = document.createElement("img"); + Object.assign(icon, { className: "gold-icon", src: item.img, alt: item.name }); + flavor.querySelector("header").insertAdjacentElement("afterbegin", icon); + const title = document.createElement("span"); + title.classList.add("title"); + title.append(item.name); + flavor.querySelector(".name-stacked").insertAdjacentElement("afterbegin", title); html.querySelector(".message-header .flavor-text").remove(); html.querySelector(".message-content").insertAdjacentElement("afterbegin", flavor); } @@ -415,22 +425,30 @@ export default class ChatMessage5e extends ChatMessage { `; const evaluation = tray.querySelector("ul"); - evaluation.innerHTML = targets.map(({ name, ac, uuid }) => { + const rows = targets.map(({ name, ac, uuid }) => { if ( !game.user.isGM && (visibility !== "all") ) ac = ""; const isMiss = !attackRoll.isCritical && ((attackRoll.total < ac) || attackRoll.isFumble); - return [` -
  • - -
    ${name}
    - ${(ac !== "") ? ` -
    - - ${(ac === null) ? "∞" : ac} -
    - ` : ""} -
    • - `, isMiss]; - }).sort((a, b) => (a[1] === b[1]) ? 0 : a[1] ? 1 : -1).reduce((str, [li]) => str + li, ""); + const li = document.createElement("li"); + Object.assign(li.dataset, { uuid, miss: isMiss }); + li.className = `target ${isMiss ? "miss" : "hit"}`; + li.innerHTML = ` + +
    + ${(ac !== "") ? ` +
    + + ${(ac === null) ? "∞" : ac} +
    + ` : ""} + `; + li.querySelector(".name").append(name); + return li; + }).sort((a, b) => { + const missA = Boolean(a.dataset.miss); + const missB = Boolean(b.dataset.miss); + return missA === missB ? 0 : missA ? 1 : -1; + }); + evaluation.append(...rows); evaluation.querySelectorAll("li.target").forEach(target => { target.addEventListener("click", this._onTargetMouseDown.bind(this)); target.addEventListener("pointerover", this._onTargetHoverIn.bind(this)); diff --git a/module/enrichers.mjs b/module/enrichers.mjs index cfa1b7fa4f..7e1cd7d20d 100644 --- a/module/enrichers.mjs +++ b/module/enrichers.mjs @@ -731,7 +731,8 @@ function createRollLink(label, dataset) { // Add main link const link = document.createElement("a"); link.dataset.action = "roll"; - link.innerHTML = `${label}`; + link.innerHTML = ''; + link.append(label); span.insertAdjacentElement("afterbegin", link); // Add chat request link for GMs