|
<div class="docs-content" data-render>
|
|
# dp-dialog
|
|
|
|
A promise-based modal for confirmations, prompts, and alerts. A single instance is created by
|
|
`Application.js` and reachable as `app.dialog`; it replaces the browser's blocking
|
|
`confirm`/`prompt`/`alert`.
|
|
|
|
Source: `static/js/components/AppDialog.js`.
|
|
|
|
## Methods
|
|
|
|
Each returns a Promise resolving when the user responds.
|
|
|
|
| Method | Resolves with |
|
|
|---|---|
|
|
| `confirm(options)` | `true` if confirmed, `false` if cancelled or dismissed. |
|
|
| `prompt(options)` | the entered string, or `null` if cancelled. |
|
|
| `alert(options)` | `undefined` once acknowledged. |
|
|
|
|
`options`: `title`, `message`, `confirmLabel`, `cancelLabel`, `danger` (red confirm button),
|
|
and for `prompt`: `label`, `value`, `placeholder`.
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<dp-dialog></dp-dialog>
|
|
```
|
|
|
|
```javascript
|
|
const ok = await app.dialog.confirm({
|
|
title: "Delete post",
|
|
message: "This cannot be undone.",
|
|
danger: true,
|
|
});
|
|
if (ok) {
|
|
const name = await app.dialog.prompt({ label: "New name", value: "untitled" });
|
|
}
|
|
```
|
|
</div>
|
|
|
|
<div class="component-demo">
|
|
<div class="component-demo-title">Live example</div>
|
|
<div class="component-demo-stage">
|
|
<button type="button" class="btn btn-primary" id="dlg-confirm">Confirm</button>
|
|
<button type="button" class="btn btn-secondary" id="dlg-prompt">Prompt</button>
|
|
<button type="button" class="btn btn-secondary" id="dlg-alert">Alert</button>
|
|
<span id="dlg-result" class="text-muted"></span>
|
|
</div>
|
|
<dp-dialog id="dialog-demo"></dp-dialog>
|
|
</div>
|
|
<script type="module">
|
|
import "/static/js/components/AppDialog.js";
|
|
const dialog = document.getElementById("dialog-demo");
|
|
const result = document.getElementById("dlg-result");
|
|
document.getElementById("dlg-confirm").addEventListener("click", async () => {
|
|
const ok = await dialog.confirm({ title: "Confirm", message: "Proceed with this action?" });
|
|
result.textContent = `confirm returned: ${ok}`;
|
|
});
|
|
document.getElementById("dlg-prompt").addEventListener("click", async () => {
|
|
const value = await dialog.prompt({ title: "Rename", label: "New name", value: "untitled" });
|
|
result.textContent = `prompt returned: ${JSON.stringify(value)}`;
|
|
});
|
|
document.getElementById("dlg-alert").addEventListener("click", async () => {
|
|
await dialog.alert({ title: "Notice", message: "This is an alert." });
|
|
result.textContent = "alert acknowledged";
|
|
});
|
|
</script>
|