diff --git a/src/module/sheet/helpers.ts b/src/module/sheet/helpers.ts index 0df9728362d..8e0355d89d1 100644 --- a/src/module/sheet/helpers.ts +++ b/src/module/sheet/helpers.ts @@ -42,12 +42,15 @@ function createTagifyTraits(traits: Iterable, { sourceTraits, record }: return [...traitSlugs, ...hiddenTraits] .map((slug) => { const label = game.i18n.localize(record?.[slug] ?? slug); + const traitDescriptions: Record = CONFIG.PF2E.traitsDescriptions; + const tooltip = traitDescriptions[slug]; return { id: slug, value: label, readonly: readonlyTraits.has(slug), // Must be undefined for tagify to work hidden: !traitSlugs.has(slug) || undefined, + "data-tooltip": tooltip, }; }) .sort((t1, t2) => t1.value.localeCompare(t2.value)); @@ -229,6 +232,7 @@ interface TagifyEntry { * Tagify treats any value as true, even false or null. */ hidden?: true; + "data-tooltip"?: string; } export { diff --git a/src/styles/_tags.scss b/src/styles/_tags.scss index 7edad29a00c..1de8394f64a 100644 --- a/src/styles/_tags.scss +++ b/src/styles/_tags.scss @@ -85,6 +85,16 @@ } } +// Allow tags to recieve events and disable just the rarity dropdown +tags.tagify { + &[disabled] { + pointer-events: inherit; + select.tag.rarity { + pointer-events: none; + } + } +} + // Tagify and non-tagify paizo style main traits row .tags.paizo-style { border: none; diff --git a/src/util/tags.ts b/src/util/tags.ts index b2d177393bb..54a3e12a057 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -3,6 +3,7 @@ import { HTMLTagifyTagsElement } from "@system/html-elements/tagify-tags.ts"; import Tagify, { TagifySettings } from "@yaireo/tagify"; import { DestroyableManager } from "./destroyables.ts"; import { objectHasKey } from "./misc.ts"; +import { createHTMLElement } from "@util"; function traitSlugToObject(trait: string, dictionary: Record): TraitViewData { // Look up trait labels from `npcAttackTraits` instead of `weaponTraits` in case a battle form attack is @@ -66,6 +67,38 @@ function tagify( editTags, delimiters, whitelist: whitelistTransformed, + templates: { + tag(tagData: TagRecord): string { + const removeButton = document.createElement("x"); + removeButton.className = this.settings.classNames.tagX; + removeButton.role = "button"; + removeButton.ariaLabel = "remove tag"; + + const tag = document.createElement("tag"); + tag.className = this.settings.classNames.tag; + tag.appendChild(removeButton); + tag.appendChild( + createHTMLElement("div", { + children: [ + createHTMLElement("span", { + innerHTML: tagData[this.settings.tagTextProp] || tagData.value, + classes: [this.settings.classNames.tagText], + }), + ], + }), + ); + + tag.contentEditable = "false"; + tag.spellcheck = false; + tag.tabIndex = this.settings.a11y.focusableTags ? 0 : -1; + + for (const [key, value] of Object.entries(tagData)) { + tag.setAttribute(key, value); + } + + return tag.outerHTML; + }, + }, }); DestroyableManager.instance.observe(tagify);