Use <dialog> instead of alert(), confirm(), prompt()

Enables some actual concurrency of user interaction and execution of the
mod actions.

diff --git a/quickmod.user.js b/quickmod.user.js
index 5f8c8856c502c13dfe9c7f0c668d047fa0ba742e..0111826e7dfcb4331e567283b2ace722aff82c88 100644 (file)
--- a/quickmod.user.js
+++ b/quickmod.user.js
@@ -143,15 +143,17 @@ async function archiveThreadQuickmod() {
 }
 
 async function asyncAlert(message) {
-    window.alert(message);
+    return showDialog(message);
 }
 
 async function asyncConfirm(message) {
-    return window.confirm(message);
+    return showDialog(message, (dialog) => dialog.returnValue === "OK", true);
 }
 
 async function asyncPrompt(message, defaultValue) {
-    return window.prompt(message, defaultValue);
+    return showDialog(message, (dialog) =>
+        dialog.returnValue === "OK" ? dialog.firstChild.elements["value"].value : null,
+        true, defaultValue);
 }
 
 async function banUser(username, reason) {
@@ -365,6 +367,44 @@ async function send_mcp_request_archival(post, reason) {
     }
 }
 
+async function showDialog(message, returnFunc = null, abortable = false, defaultValue = null) {
+    const dialog = document.body.appendChild(document.createElement("dialog"));
+    dialog.className = "quickmod-dialog";
+    dialog.style.borderColor = "#D31141";
+    dialog.style.maxWidth = "60em";
+
+    const form = dialog.appendChild(document.createElement("form"));
+    form.method = "dialog";
+
+    const p = form.appendChild(document.createElement("p"));
+    p.style.whiteSpace = "pre-line";
+    p.textContent = message;
+
+    if (defaultValue !== null) {
+        const inputP = form.appendChild(document.createElement("p"));
+        inputP.innerHTML = `<input class="inputbox" name="value" type="text" value="${defaultValue}">`;
+    }
+
+    const submitButtons = form.appendChild(document.createElement("fieldset"));
+    submitButtons.className = "submit-buttons";
+    submitButtons.innerHTML = '<input class="button1" type="submit" value="OK"> ';
+    if (abortable) {
+        const abortBtn = submitButtons.appendChild(document.createElement("input"));
+        abortBtn.className = "button2";
+        abortBtn.type = "submit";
+        abortBtn.value = "Abbrechen";
+    }
+
+    dialog.showModal();
+
+    return new Promise((resolve) => {
+        dialog.addEventListener("close", (event) => {
+            event.currentTarget.remove();
+            resolve(returnFunc?.(event.currentTarget));
+        });
+    });
+}
+
 function toAbsoluteURL(relativeOrAbsoluteURL) {
     return new URL(relativeOrAbsoluteURL, window.location);
 }
@@ -399,6 +439,10 @@ function add_buttons() {
     archiveThreadLink.addEventListener("click", archiveThreadQuickmod);
     archiveThreadLink.innerText = "Thema als Spam archivieren";
     archiveThreadLink.style.cursor = "pointer";
+
+    const stylesheet = document.head.appendChild(document.createElement("style")).sheet;
+    /* The pseudo element ::backdrop can only be styled through a rule. */
+    stylesheet.insertRule(".quickmod-dialog::backdrop { background: #333C }");
 }
 
 add_buttons();