Add "not" button to Compendium Browser filter tags (#11035)

foundryvtt · Nov 2, 2023 · 9b96327 · 9b96327
1 parent d212d5a
commit 9b96327
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 8 deletions.
diff --git a/src/module/apps/compendium-browser/index.ts b/src/module/apps/compendium-browser/index.ts
@@ -4,7 +4,19 @@ import { ActionType, ItemType } from "@item/base/data/index.ts";
 import { PHYSICAL_ITEM_TYPES } from "@item/physical/values.ts";
 import { BaseSpellcastingEntry } from "@item/spellcasting-entry/index.ts";
 import type { UserPF2e } from "@module/user/document.ts";
-import { ErrorPF2e, htmlQuery, htmlQueryAll, isBlank, isObject, localizer, objectHasKey, setHasElement } from "@util";
+import {
+    ErrorPF2e,
+    createHTMLElement,
+    fontAwesomeIcon,
+    htmlClosest,
+    htmlQuery,
+    htmlQueryAll,
+    isBlank,
+    isObject,
+    localizer,
+    objectHasKey,
+    setHasElement,
+} from "@util";
 import { getSelectedOrOwnActors } from "@util/token-actor-utils.ts";
 import Tagify from "@yaireo/tagify";
 import noUiSlider from "nouislider";
@@ -596,13 +608,14 @@ class CompendiumBrowser extends Application {
                     tagify.on("click", (event) => {
                         const target = event.detail.event.target as HTMLElement;
                         if (!target) return;
-
-                        const value = event.detail.data.value;
-                        const selected = data.selected.find((s) => s.value === value);
-                        if (selected) {
-                            const current = !!selected.not;
-                            selected.not = !current;
-                            this.render();
+                        const action = htmlClosest(target, "[data-action]")?.dataset?.action;
+                        if (action === "toggle-not") {
+                            const value = event.detail.data.value;
+                            const selected = data.selected.find((s) => s.value === value);
+                            if (selected) {
+                                selected.not = !selected.not;
+                                this.render();
+                            }
                         }
                     });
                     tagify.on("change", (event) => {
@@ -632,6 +645,17 @@ class CompendiumBrowser extends Application {
                             }
                         });
                     }
+
+                    for (const tag of htmlQueryAll(container, "tag")) {
+                        const icon = fontAwesomeIcon("ban", { style: "solid" });
+                        icon.classList.add("fa-2xs");
+                        const notButton = createHTMLElement("a", {
+                            classes: ["conjunction-not-button"],
+                            children: [icon],
+                            dataset: { action: "toggle-not" },
+                        });
+                        tag.appendChild(notButton);
+                    }
                 }
             }
 

diff --git a/src/styles/_tags.scss b/src/styles/_tags.scss
@@ -218,6 +218,31 @@ tags.tags.paizo-style {
             text-decoration: line-through;
             text-decoration-color: var(--color-text-trait);
         }
+
+        &-button {
+            order: 4;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50px;
+            cursor: pointer;
+            background: var(--tag-remove-btn-bg);
+            color: var(--tag-remove-btn-color);
+
+            width: 14px;
+            height: 14px;
+            // Not needed for Firefox
+            -webkit-padding-before: 2px;
+            margin-left: 2px;
+
+            overflow: hidden;
+            transition: 0.2s ease-out;
+
+            &:hover {
+                color: white;
+                background: var(--tag-remove-btn-bg--hover);
+            }
+        }
     }
 
     tag {