v0.1.0-pre.044

kb-app-demo-desktop/frontend/ts/splash.ts

@@ -0,0 +1,40 @@
+// file: kb-app-demo-desktop/frontend/ts/splash.ts
+// version: 1
+
+import { listen } from "@tauri-apps/api/event";
+
+type SplashOrder = {
+    order: string;
+    msg: string | null;
+    status: string | null;
+    duration_ms: number | null;
+};
+
+const container = document.querySelector<HTMLElement>("#splash-container");
+const messages = document.querySelector<HTMLElement>("#messages-container");
+
+function duration(order: SplashOrder): number {
+    if (typeof order.duration_ms !== "number" || !Number.isFinite(order.duration_ms) || order.duration_ms <= 0) {
+        return 500;
+    }
+    return order.duration_ms;
+}
+
+async function applyOrder(order: SplashOrder): Promise<void> {
+    if (!container) {
+        return;
+    }
+    if (order.order === "add_msg" && messages && order.msg) {
+        messages.textContent = order.msg;
+        messages.dataset.status = order.status ?? "info";
+        return;
+    }
+    if (order.order === "fadein" || order.order === "fadeout") {
+        container.style.transition = `opacity ${duration(order)}ms ease-in-out`;
+        container.style.opacity = order.order === "fadein" ? "1" : "0";
+    }
+}
+
+void listen<SplashOrder>("splash", event => {
+    void applyOrder(event.payload);
+});