HTML要素でダイアログを表現

packages/astro/src/components/Dialog.astro

@@ -0,0 +1,53 @@
+<dialog id="dialog">
+    <p id="dialog-content"></p>
+    <div id="dialog-button-box">
+        <button id="dialog-ok">OK</button>
+        <button id="dialog-cancel">キャンセル</button>
+    </div>
+</dialog>
+
+<style>
+    #dialog {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        right: auto;
+        bottom: auto;
+        transform: translate(-50%, -50%);
+        background-color: white;
+        padding: 0.5em;
+        border: 2px solid silver;
+        border-radius: 0.5em;
+    }
+
+    #dialog::backdrop {
+        backdrop-filter: blur(8px);
+    }
+
+    #dialog-button-box {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    #dialog-button-box button {
+        background-color: #c0c0c040;
+        padding: 0.5em;
+        border-radius: 0.5em;
+    }
+
+    #dialog-button-box button:hover {
+        background-color: #c0c0c0;
+    }
+
+    #dialog-ok {
+        display: block;
+    }
+
+    #dialog-cancel {
+        display: block;
+    }
+
+    #dialog.info #dialog-cancel {
+        display: none;
+    }
+</style>

packages/astro/src/components/dialog.mts

@@ -0,0 +1,46 @@
+const dialog = document.getElementById('dialog') as HTMLDialogElement;
+const dialogContent = document.getElementById('dialog-content') as HTMLParagraphElement;
+const okButton = document.getElementById('dialog-ok') as HTMLButtonElement;
+const cancelButton = document.getElementById('dialog-cancel') as HTMLButtonElement;
+
+interface Resolvers {
+    resolve: (value: boolean) => void;
+    reject: (reason?: any) => void;
+}
+
+let resolvers: Resolvers | null = null;
+
+function prepare(content: string): void {
+    if (resolvers != null) {
+        resolvers.reject(new Error('Another dialog has been opened'));
+    }
+    dialogContent.innerText = content;
+    dialog.showModal();
+}
+
+function promise(): Promise<boolean> {
+    return new Promise((resolve, reject) => {
+        resolvers = { resolve, reject };
+    });
+}
+
+export function confirm(content: string): Promise<boolean> {
+    dialog.classList.remove('info');
+    prepare(content);
+    return promise();
+}
+
+export async function info(content: string): Promise<void> {
+    dialog.classList.add('info');
+    prepare(content);
+    await promise();
+}
+
+function close(value: boolean) {
+    resolvers?.resolve(value);
+    dialog.close();
+}
+
+okButton.addEventListener('click', () => close(true));
+
+cancelButton.addEventListener('click', () => close(false));

packages/astro/src/components/upload.mts

@@ -1,9 +1,11 @@
+import * as dialog from "./dialog.mts";
+
 export async function uploadFiles(files?: FileList | null): Promise<void> {
         if (files == null) {
             return;
         }
         const file = files[0];
-        if (!window.confirm(`${file.name} をアップロードしますか？`)) return;
+        if (!await dialog.confirm(`${file.name} をアップロードしますか？`)) return;
         let formData = new FormData();
         formData.append("file", file);
         let params = new URLSearchParams({
@@ -15,11 +17,11 @@ export async function uploadFiles(files?: FileList | null): Promise<void> {
         });
         if (res.status == 200) {
             let json = await res.json();
-            alert(`アップロードしました: ${json.fileName}`);
+            await dialog.info(`アップロードしました: ${json.fileName}`);
             return location.reload();
         }
         else if (res.status == 401)
-            return alert("ログインに失敗しました");
+            return await dialog.info("ログインに失敗しました");
         else
-            return alert(`不明なエラー: ${res.status} ${res.statusText}`);
+            return await dialog.info(`不明なエラー: ${res.status} ${res.statusText}`);
 }

packages/astro/src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import { ViewTransitions } from "astro:transitions";
 import Header from "../components/Header.astro";
+import Dialog from "../components/Dialog.astro";
 
 let bodyClass = Astro.url.searchParams.get('layout') == 'grid' ? 'grid-layout' : null;
 ---
@@ -23,6 +24,7 @@ let bodyClass = Astro.url.searchParams.get('layout') == 'grid' ? 'grid-layout' :
             <div id="list-wrapper">
                 <slot />
             </div>
+            <Dialog>test</Dialog>
         </div>
     </body>
 
@@ -43,11 +45,16 @@ let bodyClass = Astro.url.searchParams.get('layout') == 'grid' ? 'grid-layout' :
     body {
         height: 100%;
     }
+
+    button {
+        cursor: pointer;
+    }
 </style>
 
 <style>
     #body-wrapper {
         --body-padding-width: 8px;
+        position: relative;
         display: flex;
         flex-flow: column nowrap;
         height: calc(100% - 2 * var(--body-padding-width));