diff --git a/umap/static/umap/css/dialog.css b/umap/static/umap/css/dialog.css index d186d7e3..a3ffca7e 100644 --- a/umap/static/umap/css/dialog.css +++ b/umap/static/umap/css/dialog.css @@ -16,9 +16,7 @@ } :where([data-component="no-dialog"]:not([hidden])) { display: block; - inset-inline-start: 50%; - position: fixed; - transform: translateX(-50%); + position: relative; } :where([data-component*="dialog"] menu) { display: flex; diff --git a/umap/static/umap/css/window.css b/umap/static/umap/css/window.css index e45e9056..a4768fbd 100644 --- a/umap/static/umap/css/window.css +++ b/umap/static/umap/css/window.css @@ -10,7 +10,6 @@ position: sticky; top: 0; height: var(--panel-header-height); - float: right; } .window .buttons li { cursor: pointer; diff --git a/umap/static/umap/js/modules/ui/dialog.js b/umap/static/umap/js/modules/ui/dialog.js index 32d0b85b..798ef167 100644 --- a/umap/static/umap/js/modules/ui/dialog.js +++ b/umap/static/umap/js/modules/ui/dialog.js @@ -1,4 +1,3 @@ -import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js' import { translate } from '../i18n.js' // From https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/ @@ -55,8 +54,8 @@ export default class Dialog {
` document.body.appendChild(this.dialog) @@ -69,21 +68,29 @@ export default class Dialog { this.dialog.setAttribute('aria-labelledby', this.elements.message.id) this.dialog.addEventListener('click', (event) => { if (event.target.closest('[data-close]')) { - this.dialog.close('cancel') + this.close() } }) + if (!this.dialogSupported) { + this.elements.form.addEventListener('submit', (event) => { + event.preventDefault() + this.dialog.returnValue = 'accept' + this.close() + this.dialog.returnValue = undefined + }) + } this.dialog.addEventListener('keydown', (e) => { if (e.key === 'Enter') { - if (!this.dialogSupported) e.preventDefault() - console.log('Enter') - this.elements.accept.click() + if (!this.dialogSupported) { + e.preventDefault() + this.elements.form.requestSubmit() + } } if (e.key === 'Escape') { e.stopPropagation() - this.dialog.close('cancel') + this.close() } }) - this.toggle() } currentZIndex() { @@ -133,12 +140,17 @@ export default class Dialog { } toggle(open = false) { - if (this.dialogSupported && open) this.dialog.show() - if (!this.dialogSupported) { + if (this.dialogSupported) { + if (open) this.dialog.show() + else this.dialog.close() + } else { this.dialog.hidden = !open if (this.elements.target && !open) { this.elements.target.focus() } + if (!open) { + this.dialog.dispatchEvent(new CustomEvent('close')) + } } } @@ -146,8 +158,7 @@ export default class Dialog { return new Promise((resolve) => { this.dialog.addEventListener( 'close', - (status) => { - this.toggle() + (event) => { if (this.dialog.returnValue === 'accept') { const value = this.hasFormData ? this.collectFormData(new FormData(this.elements.form))