From 6fcca67758ca013ab6f91eb84dd6b39fa02ccafd Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Wed, 11 Dec 2024 16:32:00 +0100 Subject: [PATCH 01/12] added tooltip data to tag --- src/module/sheet/helpers.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/module/sheet/helpers.ts b/src/module/sheet/helpers.ts index 0df9728362d..ee338f9cc57 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)); From a909b7ed765b86c0ee8634927505cb586bfe3ba2 Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Wed, 11 Dec 2024 18:12:54 +0100 Subject: [PATCH 02/12] add tag tooltip to readonly items --- src/styles/_tags.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/_tags.scss b/src/styles/_tags.scss index 7edad29a00c..72d935d7467 100644 --- a/src/styles/_tags.scss +++ b/src/styles/_tags.scss @@ -85,6 +85,15 @@ } } +// 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; From 8372fb86303c5c4d3338fc805e2b0d5cab7eb9bf Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Thu, 12 Dec 2024 11:38:24 +0100 Subject: [PATCH 03/12] cleanup code --- src/module/sheet/helpers.ts | 1 + src/styles/_tags.scss | 11 ++++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/module/sheet/helpers.ts b/src/module/sheet/helpers.ts index ee338f9cc57..8e0355d89d1 100644 --- a/src/module/sheet/helpers.ts +++ b/src/module/sheet/helpers.ts @@ -232,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 72d935d7467..1de8394f64a 100644 --- a/src/styles/_tags.scss +++ b/src/styles/_tags.scss @@ -87,11 +87,12 @@ // Allow tags to recieve events and disable just the rarity dropdown tags.tagify { - &[disabled]{ - pointer-events: inherit; - select.tag.rarity { - pointer-events: none; - }} + &[disabled] { + pointer-events: inherit; + select.tag.rarity { + pointer-events: none; + } + } } // Tagify and non-tagify paizo style main traits row From 702ba65c1b92c869d3975d35db195870f0c64bcb Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Thu, 12 Dec 2024 13:27:14 +0100 Subject: [PATCH 04/12] Removed browser tooltip from tags --- src/util/tags.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/util/tags.ts b/src/util/tags.ts index b2d177393bb..1e53e422ac2 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -66,6 +66,22 @@ function tagify( editTags, delimiters, whitelist: whitelistTransformed, + templates: { + tag(tagData: TagRecord) { + // Default template without title to prevent the default tag tooltip from showing. + return ` + +
+ ${tagData[this.settings.tagTextProp] || tagData.value} +
+ `; + }, + }, }); DestroyableManager.instance.observe(tagify); From 4d890d660858550cf0181a6901537400d6487bf1 Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Sun, 15 Dec 2024 10:56:23 +0100 Subject: [PATCH 05/12] moved template into a function --- src/util/tags.ts | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/src/util/tags.ts b/src/util/tags.ts index 1e53e422ac2..7b69700a068 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -30,6 +30,20 @@ function transformWhitelist(whitelist: WhitelistData) { .sort((a, b) => a.value.localeCompare(b.value, game.i18n.lang)); } +function getTagifyTagTemplate(tagify: Tagify,tagData: TagRecord) { + return ` + +
+ ${tagData[tagify.settings.tagTextProp] || tagData.value} +
+ ` +} + /** Create a tagify select menu out of a JSON input element */ function tagify(element: HTMLInputElement, options?: TagifyOptions): Tagify; function tagify(element: HTMLTagifyTagsElement, options?: TagifyOptions): Tagify; @@ -69,17 +83,7 @@ function tagify( templates: { tag(tagData: TagRecord) { // Default template without title to prevent the default tag tooltip from showing. - return ` - -
- ${tagData[this.settings.tagTextProp] || tagData.value} -
- `; + return getTagifyTagTemplate(this,tagData); }, }, }); From 46a322fe7c67f6eed7dc65b6ff820155c8ae7413 Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Sun, 15 Dec 2024 10:59:26 +0100 Subject: [PATCH 06/12] lint --- src/util/tags.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/util/tags.ts b/src/util/tags.ts index 7b69700a068..4eb100707a8 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -30,7 +30,7 @@ function transformWhitelist(whitelist: WhitelistData) { .sort((a, b) => a.value.localeCompare(b.value, game.i18n.lang)); } -function getTagifyTagTemplate(tagify: Tagify,tagData: TagRecord) { +function getTagifyTagTemplate(tagify: Tagify, tagData: TagRecord): string { return `,tagData: TagRecord) {
${tagData[tagify.settings.tagTextProp] || tagData.value}
- ` + `; } /** Create a tagify select menu out of a JSON input element */ @@ -83,7 +83,7 @@ function tagify( templates: { tag(tagData: TagRecord) { // Default template without title to prevent the default tag tooltip from showing. - return getTagifyTagTemplate(this,tagData); + return getTagifyTagTemplate(this, tagData); }, }, }); From 95cbcd95589d873e6d321d6f01a6aa07c97229f6 Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Mon, 27 Jan 2025 23:40:29 +0100 Subject: [PATCH 07/12] code cleanup. thanks to @ricardoSlv --- src/util/tags.ts | 42 ++++++++++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 16 deletions(-) diff --git a/src/util/tags.ts b/src/util/tags.ts index 4eb100707a8..d78008d8079 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 @@ -30,20 +31,6 @@ function transformWhitelist(whitelist: WhitelistData) { .sort((a, b) => a.value.localeCompare(b.value, game.i18n.lang)); } -function getTagifyTagTemplate(tagify: Tagify, tagData: TagRecord): string { - return ` - -
- ${tagData[tagify.settings.tagTextProp] || tagData.value} -
- `; -} - /** Create a tagify select menu out of a JSON input element */ function tagify(element: HTMLInputElement, options?: TagifyOptions): Tagify; function tagify(element: HTMLTagifyTagsElement, options?: TagifyOptions): Tagify; @@ -81,9 +68,32 @@ function tagify( delimiters, whitelist: whitelistTransformed, templates: { - tag(tagData: TagRecord) { + tag(tagData: TagRecord): string { // Default template without title to prevent the default tag tooltip from showing. - return getTagifyTagTemplate(this, tagData); + return createHTMLElement("div", { + classes: [tagify.settings.classNames.tag], + dataset: { + contenteditable: "false", + spellcheck: "false", + tabIndex: tagify.settings.a11y.focusableTags ? 0 : -1, + id: tagData.id, + value: tagData.value, + }, + children: [ + createHTMLElement("div", { + dataset: { title: "" }, + classes: [tagify.settings.classNames.tagX], + }), + createHTMLElement("div", { + children: [ + createHTMLElement("span", { + dataset: { text: tagData.value }, + classes: [tagify.settings.classNames.tagText], + }), + ], + }), + ], + }).outerHTML; }, }, }); From f7217e66abead12aac73948bb634fc06cc0c68fc Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Tue, 28 Jan 2025 16:03:46 +0100 Subject: [PATCH 08/12] cleanup + style fixes --- src/styles/_tags.scss | 24 ++++++++++++++---------- src/util/tags.ts | 42 +++++++++++++++++++++++++----------------- 2 files changed, 39 insertions(+), 27 deletions(-) diff --git a/src/styles/_tags.scss b/src/styles/_tags.scss index 1de8394f64a..eca37b0c53d 100644 --- a/src/styles/_tags.scss +++ b/src/styles/_tags.scss @@ -101,7 +101,7 @@ tags.tagify { gap: 0; padding: 0.5em 0.05em; - tag, + .tagify__tag, .tag, select.tag { background-color: var(--color-bg-trait); @@ -110,17 +110,21 @@ tags.tagify { box-shadow: none; margin: 0; - x { - align-items: start; + &__removeBtn { + align-items: inherit; + padding: 0; margin: 0; + line-height: normal; + border-radius: 50px; } - &__removeBtn { - align-items: baseline; + //hides before added by tagify + &__removeBtn::before { + display: none; } } - tag, + .tagify__tag, select.tag { border-width: 2px 3px 2px 2px; @@ -133,7 +137,7 @@ tags.tagify { } } - tag:last-of-type { + .tagify__tag:last-of-type { border-right-width: 5px; } @@ -153,7 +157,7 @@ tags.tagify { } } - tag > div { + .tagify__tag > .text-container { border-radius: 0; display: flex; font: 500 var(--font-size-10) var(--sans-serif); @@ -276,12 +280,12 @@ tags.tags.paizo-style { } } - tag { + .tagify__tag { height: var(--font-size-27); } // In lieu of remove button - tag[readonly="true"] { + .tagify__tag[readonly="true"] { padding-right: var(--space-2); } } diff --git a/src/util/tags.ts b/src/util/tags.ts index d78008d8079..37f84be0d3a 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -70,30 +70,38 @@ function tagify( templates: { tag(tagData: TagRecord): string { // Default template without title to prevent the default tag tooltip from showing. - return createHTMLElement("div", { - classes: [tagify.settings.classNames.tag], - dataset: { - contenteditable: "false", - spellcheck: "false", - tabIndex: tagify.settings.a11y.focusableTags ? 0 : -1, - id: tagData.id, - value: tagData.value, - }, + let removeButton = createHTMLElement("div", { + dataset: {title: ""}, + classes: [this.settings.classNames.tagX], + }); + removeButton.role="button"; + removeButton.ariaLabel="remove tag"; + + let tag = createHTMLElement("div", { + classes: [this.settings.classNames.tag], children: [ + removeButton, createHTMLElement("div", { - dataset: { title: "" }, - classes: [tagify.settings.classNames.tagX], - }), - createHTMLElement("div", { + classes: ["text-container"], children: [ createHTMLElement("span", { - dataset: { text: tagData.value }, - classes: [tagify.settings.classNames.tagText], + innerHTML: tagData[this.settings.tagTextProp] || tagData.value, + classes: [this.settings.classNames.tagText], }), ], }), - ], - }).outerHTML; + ] + }); + + tag.contentEditable= "false"; + tag.spellcheck= false; + tag.tabIndex= this.settings.a11y.focusableTags ? 0 : -1; + + Object.entries(tagData).forEach(([key, value]) => { + tag.setAttribute(key,value); + }); + + return tag.outerHTML; }, }, }); From 412b11c5d5f9efcefef5dad3f1caef24a60e2b62 Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Wed, 29 Jan 2025 10:54:15 +0100 Subject: [PATCH 09/12] lint --- src/util/tags.ts | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/util/tags.ts b/src/util/tags.ts index 37f84be0d3a..3cdb593847e 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -70,14 +70,14 @@ function tagify( templates: { tag(tagData: TagRecord): string { // Default template without title to prevent the default tag tooltip from showing. - let removeButton = createHTMLElement("div", { - dataset: {title: ""}, + const removeButton = createHTMLElement("div", { + dataset: { title: "" }, classes: [this.settings.classNames.tagX], }); - removeButton.role="button"; - removeButton.ariaLabel="remove tag"; + removeButton.role = "button"; + removeButton.ariaLabel = "remove tag"; - let tag = createHTMLElement("div", { + const tag = createHTMLElement("div", { classes: [this.settings.classNames.tag], children: [ removeButton, @@ -90,15 +90,15 @@ function tagify( }), ], }), - ] + ], }); - - tag.contentEditable= "false"; - tag.spellcheck= false; - tag.tabIndex= this.settings.a11y.focusableTags ? 0 : -1; + + tag.contentEditable = "false"; + tag.spellcheck = false; + tag.tabIndex = this.settings.a11y.focusableTags ? 0 : -1; Object.entries(tagData).forEach(([key, value]) => { - tag.setAttribute(key,value); + tag.setAttribute(key, value); }); return tag.outerHTML; From 3c699490adbe29bcbb444765640caed6ff855f82 Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Wed, 29 Jan 2025 12:43:07 +0100 Subject: [PATCH 10/12] code cleanup --- src/util/tags.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/util/tags.ts b/src/util/tags.ts index 3cdb593847e..8552f8714d6 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -97,9 +97,9 @@ function tagify( tag.spellcheck = false; tag.tabIndex = this.settings.a11y.focusableTags ? 0 : -1; - Object.entries(tagData).forEach(([key, value]) => { + for (const [key, value] of Object.entries(tagData)) { tag.setAttribute(key, value); - }); + } return tag.outerHTML; }, From 2ed47a7e2e07473e03147e78ea4676032531fb65 Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Fri, 31 Jan 2025 10:37:16 +0100 Subject: [PATCH 11/12] reintroduced custom elements --- src/styles/_tags.scss | 24 ++++++++++-------------- src/util/tags.ts | 39 +++++++++++++++++---------------------- 2 files changed, 27 insertions(+), 36 deletions(-) diff --git a/src/styles/_tags.scss b/src/styles/_tags.scss index eca37b0c53d..1de8394f64a 100644 --- a/src/styles/_tags.scss +++ b/src/styles/_tags.scss @@ -101,7 +101,7 @@ tags.tagify { gap: 0; padding: 0.5em 0.05em; - .tagify__tag, + tag, .tag, select.tag { background-color: var(--color-bg-trait); @@ -110,21 +110,17 @@ tags.tagify { box-shadow: none; margin: 0; - &__removeBtn { - align-items: inherit; - padding: 0; + x { + align-items: start; margin: 0; - line-height: normal; - border-radius: 50px; } - //hides before added by tagify - &__removeBtn::before { - display: none; + &__removeBtn { + align-items: baseline; } } - .tagify__tag, + tag, select.tag { border-width: 2px 3px 2px 2px; @@ -137,7 +133,7 @@ tags.tagify { } } - .tagify__tag:last-of-type { + tag:last-of-type { border-right-width: 5px; } @@ -157,7 +153,7 @@ tags.tagify { } } - .tagify__tag > .text-container { + tag > div { border-radius: 0; display: flex; font: 500 var(--font-size-10) var(--sans-serif); @@ -280,12 +276,12 @@ tags.tags.paizo-style { } } - .tagify__tag { + tag { height: var(--font-size-27); } // In lieu of remove button - .tagify__tag[readonly="true"] { + tag[readonly="true"] { padding-right: var(--space-2); } } diff --git a/src/util/tags.ts b/src/util/tags.ts index 8552f8714d6..38933288b2a 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -69,30 +69,25 @@ function tagify( whitelist: whitelistTransformed, templates: { tag(tagData: TagRecord): string { - // Default template without title to prevent the default tag tooltip from showing. - const removeButton = createHTMLElement("div", { - dataset: { title: "" }, - classes: [this.settings.classNames.tagX], - }); + const removeButton = document.createElement("x") + removeButton.className = this.settings.classNames.tagX removeButton.role = "button"; removeButton.ariaLabel = "remove tag"; - - const tag = createHTMLElement("div", { - classes: [this.settings.classNames.tag], - children: [ - removeButton, - createHTMLElement("div", { - classes: ["text-container"], - children: [ - createHTMLElement("span", { - innerHTML: tagData[this.settings.tagTextProp] || tagData.value, - classes: [this.settings.classNames.tagText], - }), - ], - }), - ], - }); - + + 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; From c03ea9b4c7d9bb5bc9aab648b28a7aa68f25d4ac Mon Sep 17 00:00:00 2001 From: Kulkodar Date: Fri, 31 Jan 2025 10:39:17 +0100 Subject: [PATCH 12/12] lint --- src/util/tags.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/util/tags.ts b/src/util/tags.ts index 38933288b2a..54a3e12a057 100644 --- a/src/util/tags.ts +++ b/src/util/tags.ts @@ -69,14 +69,14 @@ function tagify( whitelist: whitelistTransformed, templates: { tag(tagData: TagRecord): string { - const removeButton = document.createElement("x") - removeButton.className = this.settings.classNames.tagX + 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) + + const tag = document.createElement("tag"); + tag.className = this.settings.classNames.tag; + tag.appendChild(removeButton); tag.appendChild( createHTMLElement("div", { children: [ @@ -86,8 +86,8 @@ function tagify( }), ], }), - ) - + ); + tag.contentEditable = "false"; tag.spellcheck = false; tag.tabIndex = this.settings.a11y.focusableTags ? 0 : -1;