102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
(() => {
|
|
function ensureRoot() {
|
|
let root = document.getElementById("uiDialogRoot");
|
|
if (root) return root;
|
|
root = document.createElement("div");
|
|
root.id = "uiDialogRoot";
|
|
root.className = "ui-dialog-root";
|
|
document.body.appendChild(root);
|
|
return root;
|
|
}
|
|
|
|
function closeDialog(resolve, value, overlay) {
|
|
if (overlay && overlay.parentNode) overlay.parentNode.removeChild(overlay);
|
|
resolve(value);
|
|
}
|
|
|
|
function createDialog({ title, message, mode = "alert", confirmText = "确定", cancelText = "取消", placeholder = "", defaultValue = "" }) {
|
|
return new Promise((resolve) => {
|
|
const root = ensureRoot();
|
|
const overlay = document.createElement("div");
|
|
overlay.className = "ui-dialog-overlay";
|
|
overlay.innerHTML = `
|
|
<div class="ui-dialog" role="dialog" aria-modal="true">
|
|
<h3 class="ui-dialog-title"></h3>
|
|
<div class="ui-dialog-message"></div>
|
|
<input class="ui-dialog-input" type="text" />
|
|
<div class="ui-dialog-actions">
|
|
<button class="ui-dialog-btn secondary ui-dialog-cancel" type="button">${cancelText}</button>
|
|
<button class="ui-dialog-btn primary ui-dialog-confirm" type="button">${confirmText}</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
root.appendChild(overlay);
|
|
|
|
const titleEl = overlay.querySelector(".ui-dialog-title");
|
|
const msgEl = overlay.querySelector(".ui-dialog-message");
|
|
const inputEl = overlay.querySelector(".ui-dialog-input");
|
|
const cancelBtn = overlay.querySelector(".ui-dialog-cancel");
|
|
const okBtn = overlay.querySelector(".ui-dialog-confirm");
|
|
if (titleEl) titleEl.textContent = title || "提示";
|
|
if (msgEl) msgEl.textContent = message || "";
|
|
if (inputEl) {
|
|
inputEl.placeholder = placeholder || "";
|
|
inputEl.value = defaultValue || "";
|
|
}
|
|
|
|
if (mode === "alert") {
|
|
if (cancelBtn) cancelBtn.style.display = "none";
|
|
} else if (mode === "confirm") {
|
|
if (inputEl) inputEl.style.display = "none";
|
|
} else if (mode === "prompt") {
|
|
if (inputEl) inputEl.style.display = "block";
|
|
}
|
|
|
|
const onEsc = (e) => {
|
|
if (e.key === "Escape") {
|
|
document.removeEventListener("keydown", onEsc);
|
|
if (mode === "alert") closeDialog(resolve, true, overlay);
|
|
else closeDialog(resolve, null, overlay);
|
|
}
|
|
};
|
|
document.addEventListener("keydown", onEsc);
|
|
|
|
if (cancelBtn) {
|
|
cancelBtn.addEventListener("click", () => {
|
|
document.removeEventListener("keydown", onEsc);
|
|
if (mode === "confirm") closeDialog(resolve, false, overlay);
|
|
else closeDialog(resolve, null, overlay);
|
|
});
|
|
}
|
|
if (okBtn) {
|
|
okBtn.addEventListener("click", () => {
|
|
document.removeEventListener("keydown", onEsc);
|
|
if (mode === "prompt") closeDialog(resolve, inputEl ? inputEl.value : "", overlay);
|
|
else if (mode === "confirm") closeDialog(resolve, true, overlay);
|
|
else closeDialog(resolve, true, overlay);
|
|
});
|
|
}
|
|
|
|
if (mode === "prompt" && inputEl) {
|
|
window.setTimeout(() => inputEl.focus(), 0);
|
|
} else if (okBtn) {
|
|
window.setTimeout(() => okBtn.focus(), 0);
|
|
}
|
|
});
|
|
}
|
|
|
|
window.uiAlert = async (message, title = "提示") => createDialog({ title, message, mode: "alert", confirmText: "我知道了" });
|
|
window.uiConfirm = async (message, title = "请确认") =>
|
|
createDialog({ title, message, mode: "confirm", confirmText: "确认", cancelText: "取消" });
|
|
window.uiPrompt = async (message, title = "请输入", defaultValue = "", placeholder = "") =>
|
|
createDialog({
|
|
title,
|
|
message,
|
|
mode: "prompt",
|
|
confirmText: "确认",
|
|
cancelText: "取消",
|
|
defaultValue,
|
|
placeholder,
|
|
});
|
|
})();
|