FCustomTags: rework and svelte-fy

src/css/augmentedsteam.css

@@ -1616,17 +1616,6 @@ label.es_dlc_label > input:checked::after {
   background-size: auto;
 }
 
-/***************************************
- * addCustomTags() to community guides
- *
- **************************************/
-.es_tag {
-	text-transform: capitalize;
-}
-.es_tag::placeholder {
-	text-transform: none;
-}
-
 
 /* || SEARCH PAGE FILTERS */
 

src/js/Content/Features/Community/EditGuide/CEditGuide.ts

@@ -1,4 +1,3 @@
-import FMultiLanguageGuide from "./FMultiLanguageGuide";
 import FCustomTags from "./FCustomTags";
 import Context from "@Content/Modules/Context/Context";
 import ContextType from "@Content/Modules/Context/ContextType";
@@ -8,10 +7,9 @@ export default class CEditGuide extends Context {
     constructor() {
 
         // Don't apply features if there's an error message (e.g. not your guide thus can't edit)
-        const hasFeatures = !document.getElementById("message");
+        const hasFeatures = document.getElementById("message") === null;
 
         super(ContextType.EDIT_GUIDE, hasFeatures ? [
-            FMultiLanguageGuide,
             FCustomTags,
         ] : []);
     }

src/js/Content/Features/Community/EditGuide/Components/AddTagForm.svelte

@@ -0,0 +1,21 @@
+<svelte:options accessors />
+
+<script lang="ts">
+    import {__enterTag} from "@Strings/_strings";
+    import {L} from "@Core/Localization/Localization";
+
+    export let tag: string;
+</script>
+
+
+<input placeholder="{L(__enterTag)}" bind:value={tag} on:change>
+
+
+<style>
+    input {
+        text-transform: capitalize;
+    }
+    input::placeholder {
+        text-transform: none;
+    }
+</style>

src/js/Content/Features/Community/EditGuide/FCustomTags.svelte

@@ -0,0 +1,118 @@
+<svelte:options immutable={false} />
+
+<script lang="ts">
+    import {__addTag, __customTags} from "@Strings/_strings";
+    import {L} from "@Core/Localization/Localization";
+    import LocalStorage from "@Core/Storage/LocalStorage";
+    import HTML from "@Core/Html/Html";
+    import SteamFacade from "@Content/Modules/Facades/SteamFacade";
+    import RequestData from "@Content/Modules/RequestData";
+    import {onMount} from "svelte";
+    import AddTagForm from "./Components/AddTagForm.svelte";
+
+    let customTags: Set<string> = new Set(); // Use Set to enforce unique tags
+
+    async function addTags(): Promise<void> {
+
+        const params = new URLSearchParams(window.location.search);
+        let tags: string[];
+
+        // id param only appears when editing existing guides; fetch tags from guide page (add preview=true to support unpublished)
+        if (params.has("id")) {
+            const data = await RequestData.getText(`https://steamcommunity.com/sharedfiles/filedetails/?id=${params.get("id")}&preview=true`);
+            const dom = HTML.toDom(data);
+            tags = [...dom.querySelectorAll(".workshopTags > a")].map(node => node.textContent!.trim());
+        } else {
+            tags = (await LocalStorage.get("guide_tags")) ?? [];
+        }
+
+        for (const tag of tags) {
+            const node = document.querySelector<HTMLInputElement>(`[name="tags[]"][value="${tag.replace(/"/g, '\\"')}"]`);
+            if (node) {
+                node.checked = true;
+            } else {
+                customTags.add(tag);
+            }
+        }
+        customTags = customTags;
+    }
+
+    async function showDialog(): Promise<void> {
+
+        let form: AddTagForm|undefined;
+        let tag: string = "";
+
+        const observer = new MutationObserver(() => {
+            const modal = document.querySelector("#as_tag_form");
+            if (modal) {
+                form = new AddTagForm({
+                    target: modal,
+                    props: {tag}
+                });
+                form.$on("change", () => {
+                    tag = form!.tag;
+                });
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true
+        });
+
+        const response = await SteamFacade.showConfirmDialog(
+            L(__customTags),
+            `<div id="as_tag_form"></div>`
+        );
+
+        form?.$destroy();
+
+        if (response === "OK") {
+            if (tag.trim() === "") {
+                return;
+            }
+            tag = tag.slice(0, 1).toUpperCase() + tag.slice(1);
+
+            customTags.add(tag);
+            customTags = customTags;
+        }
+    }
+
+    const submitBtn = document.querySelector("[href*=SubmitGuide]");
+    if (submitBtn) {
+        submitBtn.removeAttribute("href");
+        submitBtn.addEventListener("click", async () => {
+
+            const recentTags: string[] = [...document.querySelectorAll<HTMLInputElement>("[name='tags[]']:checked")]
+                .map(node => node.value);
+
+            await LocalStorage.set("guide_tags", recentTags);
+            SteamFacade.submitGuide();
+        });
+    }
+
+    onMount(() => {
+        addTags();
+    });
+</script>
+
+
+<div class="tag_category_container" id="checkboxgroup_2">
+    <div class="tag_category_desc">{L(__customTags)}</div>
+    {#each customTags as tag}
+        <div>
+            <input type="checkbox" name="tags[]" value="{tag}" class="inputTagsFilter" checked>
+            {tag}
+        </div>
+    {/each}
+    <!-- svelte-ignore a11y-click-events-have-key-events a11y-missing-attribute -->
+    <a class="btn_blue_white_innerfade btn_small_thin as_add_tag" on:click={showDialog} role="button" tabindex="0">
+        <span>{L(__addTag)}</span>
+    </a>
+</div>
+
+
+<style>
+    .as_add_tag {
+        margin-top: 8px;
+    }
+</style>

src/js/Content/Features/Community/EditGuide/FCustomTags.ts

@@ -1,81 +1,23 @@
-import {__addTag, __customTags, __enterTag} from "@Strings/_strings";
-import {L} from "@Core/Localization/Localization";
+import self_ from "./FCustomTags.svelte";
 import Feature from "@Content/Modules/Context/Feature";
 import type CEditGuide from "@Content/Features/Community/EditGuide/CEditGuide";
-import DOMHelper from "@Content/Modules/DOMHelper";
-import HTML from "@Core/Html/Html";
-import LocalStorage from "@Core/Storage/LocalStorage";
 
 export default class FCustomTags extends Feature<CEditGuide> {
 
     override apply(): void {
-        this._addTags();
-        this._rememberTags();
-    }
-
-    _addTags(): void {
-        const langSection = document.querySelector("#checkboxgroup_1");
-        if (!langSection) { return; }
-
-        // @ts-ignore
-        document.addEventListener("as_addTag", (e: CustomEvent<string>) => {
-            this._addTag(e.detail, true);
-        });
-
-        HTML.afterEnd(langSection,
-            `<div class="tag_category_container" id="checkboxgroup_2">
-                <div class="tag_category_desc">${L(__customTags)}</div>
-                <div><a style="margin-top: 8px;" class="btn_blue_white_innerfade btn_small_thin" id="es_add_tag">
-                    <span>${L(__addTag)}</span>
-                </a></div>
-            </div>`);
-
-        DOMHelper.insertScript("scriptlets/Community/EditGuide/customTags.js", {
-            customTags: L(__customTags),
-            enterTag: L(__enterTag)
-        });
-    }
-
-    async _rememberTags(): Promise<void> {
-
-        const submitBtn = document.querySelector("[href*=SubmitGuide]");
-        if (!submitBtn) { return; }
-
-        const params = new URLSearchParams(window.location.search);
-        const curId = params.get("id") ?? "recent";
-        const savedTags: Record<string, string[]> = (await LocalStorage.get("es_guide_tags")) ?? {};
-        if (!savedTags[curId]) {
-            savedTags[curId] = savedTags.recent ?? [];
+        const anchor = document.querySelector("#checkboxgroup_1");
+        if (!anchor) {
+            throw new Error("Node not found");
         }
 
-        for (const [id, tags] of Object.entries(savedTags)) {
-            for (const tag of tags) {
-                const node = document.querySelector<HTMLInputElement>(`[name="tags[]"][value="${tag.replace(/"/g, '\\"')}"]`);
-                if (node && curId === id) {
-                    node.checked = true;
-                } else if (!node) {
-                    this._addTag(tag, curId === id);
-                }
-            }
+        // Make language options multi-selectable
+        for (const tag of anchor.querySelectorAll<HTMLInputElement>("[name='tags[]']")) {
+            tag.type = "checkbox";
         }
 
-        submitBtn.removeAttribute("href");
-        submitBtn.addEventListener("click", () => {
-            savedTags.recent = [];
-            savedTags[curId] = Array.from(
-                document.querySelectorAll<HTMLInputElement>("[name='tags[]']:checked")
-            ).map(node => node.value);
-
-            LocalStorage.set("es_guide_tags", savedTags);
-
-            DOMHelper.insertScript("scriptlets/Community/EditGuide/submitGuide.js");
+        new self_({
+            target: anchor.parentElement!,
+            anchor: anchor.nextElementSibling ?? undefined,
         });
     }
-
-    _addTag(name: string, checked: boolean = true): void {
-        const _name = HTML.escape(name);
-        const attr = checked ? " checked" : "";
-        const tag = `<div><input type="checkbox" name="tags[]" value="${_name}" class="inputTagsFilter"${attr}>${_name}</div>`;
-        HTML.beforeBegin("#es_add_tag", tag);
-    }
 }

src/js/Content/Modules/Facades/SteamFacade.ts

@@ -127,4 +127,10 @@ export default class SteamFacade {
     static openFriendChatInWebChat(steamid: string, accountid: number): void {
         Messenger.call(MessageHandler.SteamFacade, "openFriendChatInWebChat", [steamid, accountid]);
     }
+
+    // edit guide
+
+    static submitGuide(): void {
+        Messenger.call(MessageHandler.SteamFacade, "submitGuide");
+    }
 }

src/js/Core/Storage/LocalStorage.ts

@@ -25,7 +25,8 @@ export interface LocalStorageSchema extends StorageSchema {
     show_review_section: boolean,
     hide_login_warn_store: boolean,
     hide_login_warn_community: boolean,
-    es_guide_tags: Record<string, string[]>,
+    es_guide_tags: Record<string, string[]>, // TODO deprecated
+    guide_tags: string[],
     market_stats: {
         startListing: string|null,
         purchaseTotal: number,

src/scriptlets/SteamScriptlet.js

@@ -107,6 +107,12 @@
         static openFriendChatInWebChat(steamid, accountid) {
             OpenFriendChatInWebChat(steamid, accountid);
         }
+
+        // edit guide
+
+        static submitGuide() {
+            SubmitGuide();
+        }
     }
 
     document.addEventListener("as_SteamFacade", async function(e) {