94 lines
3.1 KiB
Go
94 lines
3.1 KiB
Go
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-actions button#exapp-dialog-agree {
|
|
border-color: transparent;
|
|
background: var(--color-primary-element, #00679e);
|
|
color: var(--color-primary-element-text, #fff);
|
|
}
|
|
#exapp-dialog-actions button#exapp-dialog-agree.destructive {
|
|
background: var(--color-error, #ffe7e7);
|
|
color: var(--color-error-text, #8a0000);
|
|
}
|
|
#exapp-dialog-actions button#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>`
|