Merge pull request #2053 from candela97/refactor-apply-custommodal-bu…

…ilder

Refactor to use the new custom modal builder

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

@@ -9,6 +9,7 @@
     import RequestData from "@Content/Modules/RequestData";
     import {onMount} from "svelte";
     import AddTagForm from "./Components/AddTagForm.svelte";
+    import CustomModal from "@Core/Modals/CustomModal";
 
     let customTags: Set<string> = new Set(); // Use Set to enforce unique tags
 
@@ -42,29 +43,19 @@
         let form: AddTagForm|undefined;
         let tag: string = "";
 
-        const observer = new MutationObserver(() => {
-            const modal = document.querySelector("#as_tag_form");
-            if (modal) {
+        const response = await CustomModal({
+            title: L(__customTags),
+            modalFn: (target) => {
                 form = new AddTagForm({
-                    target: modal,
+                    target,
                     props: {tag}
                 });
                 form.$on("change", () => {
                     tag = form!.tag;
                 });
-                observer.disconnect();
+                return form;
             }
         });
-        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() === "") {

src/js/Content/Features/Store/Common/UserNotes/UserNotes.ts

@@ -20,7 +20,7 @@ import Settings from "@Options/Data/Settings";
 import ITADApiFacade from "@Content/Modules/Facades/ITADApiFacade";
 import SteamFacade from "@Content/Modules/Facades/SteamFacade";
 import NotesForm from "./NotesForm.svelte";
-import CustomModal from "@Core/CustomModal";
+import CustomModal from "@Core/Modals/CustomModal";
 
 export default class UserNotes {
 

src/js/Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte

@@ -40,40 +40,45 @@
 </script>
 
 
-<div class="es-wexport">
-    <h2>{L(__export_type)}</h2>
-    <div class="es-wexport__buttons">
-        <label><input type="radio" value="text" bind:group={type} on:change> {L(__export_text)}</label>
-        <label><input type="radio" value="json" bind:group={type} on:change> JSON</label>
+<div class="as_wexport_container">
+    <div class="as_wexport">
+        <h2>{L(__export_type)}</h2>
+        <div class="as_wexport_buttons">
+            <label><input type="radio" value="text" bind:group={type} on:change> {L(__export_text)}</label>
+            <label><input type="radio" value="json" bind:group={type} on:change> JSON</label>
+        </div>
     </div>
-</div>
 
-{#if type === "text"}
-    <div class="es-wexport" transition:slide={{axis: "y", duration: 200}}>
-        <h2>{L(__export_format)}</h2>
-        <div>
-            <input type="text" id="es-wexport-format" bind:value={format} bind:this={input} on:change>
-            <div class="es-wexport__symbols">
-                {#each ["%title%", "%id%", "%appid%", "%url%", "%release_date%", "%price%", "%discount%", "%base_price%", "%type%", "%note%"] as str, index}
-                    {#if index > 0}, {/if}
-                    <button type="button" on:click={() => add(str)}>{str}</button>
-                {/each}
+    {#if type === "text"}
+        <div class="as_wexport" transition:slide={{axis: "y", duration: 200}}>
+            <h2>{L(__export_format)}</h2>
+            <div>
+                <input type="text" bind:value={format} bind:this={input} on:change>
+                <div class="as_wexport_symbols">
+                    {#each ["%title%", "%id%", "%appid%", "%url%", "%release_date%", "%price%", "%discount%", "%base_price%", "%type%", "%note%"] as str, index}
+                        {#if index > 0}, {/if}
+                        <button type="button" on:click={() => add(str)}>{str}</button>
+                    {/each}
+                </div>
             </div>
         </div>
-    </div>
-{/if}
+    {/if}
+</div>
 
 
 <style>
-    .es-wexport {
+    .as_wexport_container {
+        width: 580px;
+    }
+    .as_wexport {
         margin-bottom: 30px;
     }
-    .es-wexport__buttons {
+    .as_wexport_buttons {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 30px
     }
-    .es-wexport__symbols {
+    .as_wexport_symbols {
         margin-top: 2px;
         font-size: 11px;
     }
@@ -94,9 +99,9 @@
     }
     label:has(input[type=radio]:checked) {
         color: white;
-        border-color: #1a97ff
+        border-color: #1a97ff;
     }
-    label input[type=radio]{
+    label input[type=radio] {
         display: none;
     }
 
@@ -124,4 +129,4 @@
         text-decoration: underline;
         color: white;
     }
-</style>
+</style>

src/js/Content/Features/Store/Wishlist/FExportWishlist.ts

@@ -8,6 +8,7 @@ import SteamFacade from "@Content/Modules/Facades/SteamFacade";
 import UserNotes from "@Content/Features/Store/Common/UserNotes/UserNotes";
 import Clipboard from "@Content/Modules/Clipboard";
 import ExportWishlistForm from "@Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte";
+import CustomModal from "@Core/Modals/CustomModal";
 
 type WishlistData = Array<[string, {
     name: string,
@@ -122,11 +123,15 @@ export default class FExportWishlist extends Feature<CWishlist> {
 
         let form: ExportWishlistForm|undefined;
 
-        const observer = new MutationObserver(() => {
-            const modal = document.querySelector("#as_export_form");
-            if (modal) {
+        const response = await CustomModal({
+            title: L(__export_wishlist),
+            options: {
+                okButton: L(__export_download),
+                secondaryActionButton: L(__export_copyClipboard)
+            },
+            modalFn: (target) => {
                 form = new ExportWishlistForm({
-                    target: modal,
+                    target,
                     props: {
                         type: this.type,
                         format: this.format
@@ -136,22 +141,9 @@ export default class FExportWishlist extends Feature<CWishlist> {
                     this.format = form!.format;
                     this.type = form!.type;
                 });
-                observer.disconnect();
+                return form;
             }
         });
-        observer.observe(document.body, {
-            childList: true
-        });
-
-        const response = await SteamFacade.showConfirmDialog(
-            L(__export_wishlist),
-            `<div id="as_export_form" style="width:580px"></div>`,
-            {
-                okButton: L(__export_download),
-                secondaryActionButton: L(__export_copyClipboard)
-            });
-
-        form?.$destroy();
 
         if (response === "CANCEL") {
             return;