Merge branch 'candela97-refactor-blockingwaitdialog' into develop

src/js/Content/Features/Community/MyWorkshop/FWorkshopFileSizes.ts

@@ -128,18 +128,19 @@ export default class FWorkshopFileSizes extends Feature<CMyWorkshop> {
         this._addFileSizes(); // Add file sizes now that data has been fetched
     }
 
-    private getStatus(): string {
-        let statusString = L(__calcWorkshopSize_calcLoading, {
+    private getStatus(): string[] {
+        const status = [];
+
+        status.push(L(__calcWorkshopSize_calcLoading, {
             "i": this._completed,
             "count": this._total
-        });
+        }));
 
         if (this._failed > 0) {
-            statusString += "<br>";
-            statusString += L(__workshop_failed, {"n": this._failed});
+            status.push(L(__workshop_failed, {"n": this._failed}));
         }
 
-        return statusString;
+        return status;
     }
 
     _getFileSizeStr(size: number): string {

src/js/Content/Features/Community/WorkshopBrowse/FWorkshopSubscriberButtons.ts

@@ -154,15 +154,16 @@ export default class FWorkshopSubscriberButtons extends Feature<CWorkshopBrowse>
         return false;
     }
 
-    private getStatus(): string {
-        let status = L(this._method === "subscribe" ? __workshop_subscribeLoading : __workshop_unsubscribeLoading, {
+    private getStatus(): string[] {
+        const status = [];
+
+        status.push(L(this._method === "subscribe" ? __workshop_subscribeLoading : __workshop_unsubscribeLoading, {
             "i": this._completed,
             "count": this._total
-        });
+        }));
 
         if (this._failed > 0) {
-            status += "<br>";
-            status += L(__workshop_failed, {"n": this._failed});
+            status.push(L(__workshop_failed, {"n": this._failed}));
         }
 
         return status;

src/js/Core/Modals/BlockingWaitDialog.ts

@@ -1,39 +1,43 @@
-import HTML from "@Core/Html/Html";
 import SteamFacade from "@Content/Modules/Facades/SteamFacade";
+import type {SvelteComponent} from "svelte";
+import BlockingWaitModal from "./BlockingWaitModal.svelte";
 
-let dialogCounter: number = 0;
+let counter: number = 0;
 
 export default class BlockingWaitDialog {
 
-    private readonly id: string;
+    private readonly modalId: string;
+    private modalComponent: SvelteComponent | undefined;
 
     constructor(
         private readonly title: string,
-        private readonly statusFn: () => string
+        private readonly statusFn: () => string|string[]
     ) {
-        this.id = `as_wait_dialog_${++dialogCounter}`;
-    }
-
-    private getContainer(): HTMLElement|null {
-        return document.querySelector("#" + this.id);
+        this.modalId = `as_wait_dialog-${++counter}`;
     }
 
     async update(): Promise<void> {
-        const container = this.getContainer();
-        if (container) {
-            HTML.inner(container, this.statusFn());
-        } else {
+        if (!this.modalComponent) {
             await SteamFacade.showBlockingWaitDialog(
                 this.title,
-                `<div id="${this.id}">${this.statusFn()}</div>`
+                `<div id="${this.modalId}"></div>`
             );
+
+            const target = document.querySelector<HTMLDivElement>("#" + this.modalId);
+            if (target) {
+                this.modalComponent = new BlockingWaitModal({target});
+            } else {
+                throw new Error("Failed to create blocking wait dialog");
+            }
         }
+
+        this.modalComponent.status = this.statusFn();
     }
 
     dismiss(): void {
-        const container = this.getContainer();
-        if (container) {
-            SteamFacade.dismissActiveModal(this.id);
+        if (this.modalComponent) {
+            this.modalComponent.$destroy();
+            SteamFacade.dismissActiveModal(this.modalId);
         }
     }
 }

src/js/Core/Modals/BlockingWaitModal.svelte

@@ -0,0 +1,17 @@
+<svelte:options accessors />
+
+<script lang="ts">
+    import {__wait} from "@Strings/_strings";
+    import {L} from "@Core/Localization/Localization";
+
+    export let status: string|string[] = L(__wait);
+</script>
+
+
+{#if typeof status === "string"}
+    {status}
+{:else}
+    {#each status as statusStr}
+        <div>{statusStr}</div>
+    {/each}
+{/if}