Add a Dialog an ExApp page can open for a message, confirm, or prompt.

The page waits for the choice. App navigation includes the same piece.
2026-09-28 21:10:20 +02:00
parent d4c18e63bb
commit 0a387815a0
9 changed files with 772 additions and 4 deletions
@@ -0,0 +1,93 @@
+package gonexapp
+
+import (
+	_ "embed"
+	"html/template"
+)
+
+//go:embed dialog.js
+var dialogJS string
+
+// DialogHTML is the Dialog markup and script for an ExApp page.
+// App navigation includes it. A page the ExApp renders itself inserts the
+// same fragment. The page then calls exappDialog.message, exappDialog.confirm,
+// or exappDialog.prompt and waits for the user's choice.
+func DialogHTML() template.HTML {
+	return template.HTML(dialogStyle + dialogMarkup + "<script>" + dialogJS + "</script>")
+}
+
+const dialogStyle = `<style>
+#exapp-dialog {
+  border: none;
+  padding: 0;
+  background: transparent;
+  max-width: calc(100% - 2rem);
+}
+#exapp-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
+#exapp-dialog-panel {
+  box-sizing: border-box;
+  width: min(28rem, 100%);
+  padding: 1.1rem 1.25rem 1rem;
+  border-radius: var(--border-radius-element, 8px);
+  border-top: 4px solid var(--color-primary-element, #00679e);
+  background: var(--color-main-background, #fff);
+  color: var(--color-main-text, #222);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
+}
+#exapp-dialog[data-severity="warning"] #exapp-dialog-panel { border-top-color: var(--color-warning, #eca700); }
+#exapp-dialog[data-severity="error"] #exapp-dialog-panel { border-top-color: var(--color-error, #e9322d); }
+#exapp-dialog-heading { margin: 0 0 0.6rem; font-size: 1.15rem; }
+#exapp-dialog-severity {
+  margin: 0 0 0.35rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+#exapp-dialog-message { margin: 0; white-space: pre-wrap; }
+#exapp-dialog-value {
+  box-sizing: border-box;
+  width: 100%;
+  margin-top: 0.8rem;
+  padding: 0.4rem 0.5rem;
+  border: 1px solid var(--color-border, #ccc);
+  border-radius: var(--border-radius-element, 8px);
+  background: var(--color-main-background, #fff);
+  color: inherit;
+  font: inherit;
+}
+#exapp-dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.1rem; }
+#exapp-dialog-actions button {
+  min-height: var(--default-clickable-area, 34px);
+  padding: 0 0.9rem;
+  border: 1px solid var(--color-border, #ccc);
+  border-radius: var(--border-radius-element, 8px);
+  background: var(--color-main-background, #fff);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+#exapp-dialog-agree {
+  border-color: transparent;
+  background: var(--color-primary-element, #00679e);
+  color: var(--color-primary-element-text, #fff);
+}
+#exapp-dialog-agree.destructive {
+  background: var(--color-error, #e9322d);
+  color: #fff;
+}
+#exapp-dialog-agree:disabled { opacity: 0.45; cursor: default; }
+</style>`
+
+const dialogMarkup = `<dialog id="exapp-dialog" aria-modal="true">
+  <div id="exapp-dialog-panel">
+    <h2 id="exapp-dialog-heading" hidden></h2>
+    <p id="exapp-dialog-severity" hidden></p>
+    <p id="exapp-dialog-message"></p>
+    <input id="exapp-dialog-value" hidden autocomplete="off">
+    <div id="exapp-dialog-actions">
+      <button type="button" id="exapp-dialog-cancel">Cancel</button>
+      <button type="button" id="exapp-dialog-agree">OK</button>
+    </div>
+  </div>
+</dialog>`