diff --git a/docs-users/fr/tutorials/5-multimedia-tooltips.md b/docs-users/fr/tutorials/5-multimedia-tooltips.md
index 5b925791..2278d4da 100644
--- a/docs-users/fr/tutorials/5-multimedia-tooltips.md
+++ b/docs-users/fr/tutorials/5-multimedia-tooltips.md
@@ -12,7 +12,7 @@
data-url="https://umap.openstreetmap.fr/fr/map/new/"
data-alt="Panneau d’aide au formatage."
data-caption="Panneau d’aide au formatage."
- data-selector=".umap-help-box"
+ data-selector=".umap-dialog"
data-width="510"
data-height="326"
data-padding="5"
diff --git a/umap/static/umap/css/dialog.css b/umap/static/umap/css/dialog.css
new file mode 100644
index 00000000..b83061f6
--- /dev/null
+++ b/umap/static/umap/css/dialog.css
@@ -0,0 +1,17 @@
+.umap-dialog {
+ z-index: 10001;
+ margin: auto;
+ margin-top: 100px;
+ width: 50vw;
+ max-width: 100vw;
+ max-height: 50vh;
+ padding: 20px;
+ border: 1px solid #222;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ border-radius: 5px;
+}
+.umap-dialog .umap-close-link {
+ float: right;
+ width: 100px;
+}
diff --git a/umap/static/umap/css/panel.css b/umap/static/umap/css/panel.css
index 80f168b7..8dca758a 100644
--- a/umap/static/umap/css/panel.css
+++ b/umap/static/umap/css/panel.css
@@ -7,6 +7,7 @@
overflow-x: auto;
z-index: 1010;
background-color: var(--background-color);
+ color: var(--text-color);
opacity: 0.98;
cursor: initial;
border-radius: 5px;
@@ -14,7 +15,6 @@
}
.panel.dark {
border: 1px solid #222;
- color: #efefef;
}
.panel.full {
width: initial;
diff --git a/umap/static/umap/js/modules/global.js b/umap/static/umap/js/modules/global.js
index 226f67a5..42aff04e 100644
--- a/umap/static/umap/js/modules/global.js
+++ b/umap/static/umap/js/modules/global.js
@@ -4,6 +4,7 @@ import Facets from './facets.js'
import Caption from './caption.js'
import { Panel, EditPanel, FullPanel } from './ui/panel.js'
import Alert from './ui/alert.js'
+import Dialog from './ui/dialog.js'
import Tooltip from './ui/tooltip.js'
import * as Utils from './utils.js'
import { SCHEMA } from './schema.js'
@@ -24,6 +25,7 @@ window.U = {
Facets,
Panel,
Alert,
+ Dialog,
Tooltip,
EditPanel,
FullPanel,
diff --git a/umap/static/umap/js/modules/ui/dialog.js b/umap/static/umap/js/modules/ui/dialog.js
new file mode 100644
index 00000000..a1542103
--- /dev/null
+++ b/umap/static/umap/js/modules/ui/dialog.js
@@ -0,0 +1,44 @@
+import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from '../i18n.js'
+
+export default class Dialog {
+ constructor(parent) {
+ this.parent = parent
+ this.container = DomUtil.create(
+ 'dialog',
+ 'umap-dialog',
+ this.parent
+ )
+ DomEvent.disableClickPropagation(this.container)
+ DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
+ DomEvent.on(this.container, 'wheel', DomEvent.stopPropagation)
+ DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
+ }
+
+ get visible() {
+ return this.container.open
+ }
+
+ close() {
+ this.container.close()
+ }
+
+ open({className, content, modal} = {}) {
+ this.container.innerHTML = ''
+ if (modal) this.container.showModal()
+ else this.container.show()
+ if (className) {
+ this.container.classList.add(className)
+ }
+ const closeButton = DomUtil.createButton(
+ 'umap-close-link',
+ this.container,
+ '',
+ () => this.container.close()
+ )
+ DomUtil.createIcon(closeButton, 'icon-close')
+ const label = DomUtil.create('span', '', closeButton)
+ label.title = label.textContent = translate('Close')
+ this.container.appendChild(content)
+ }
+}
diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index cf196478..149a6681 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -346,22 +346,6 @@ U.Help = L.Class.extend({
initialize: function (map) {
this.map = map
- this.box = L.DomUtil.create(
- 'div',
- 'umap-help-box with-transition dark',
- document.body
- )
- const closeButton = L.DomUtil.createButton(
- 'umap-close-link',
- this.box,
- '',
- this.hide,
- this
- )
- L.DomUtil.add('i', 'umap-close-icon', closeButton)
- const label = L.DomUtil.create('span', '', closeButton)
- label.title = label.textContent = L._('Close')
- this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
this.isMacOS = /mac/i.test(
// eslint-disable-next-line compat/compat -- Fallback available.
navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform
@@ -377,20 +361,12 @@ U.Help = L.Class.extend({
},
show: function () {
- this.content.innerHTML = ''
+ const container = L.DomUtil.add('div')
for (let i = 0, name; i < arguments.length; i++) {
name = arguments[i]
- L.DomUtil.add('div', 'umap-help-entry', this.content, this.resolve(name))
+ L.DomUtil.add('div', 'umap-help-entry', container, this.resolve(name))
}
- L.DomUtil.addClass(document.body, 'umap-help-on')
- },
-
- hide: function () {
- L.DomUtil.removeClass(document.body, 'umap-help-on')
- },
-
- visible: function () {
- return L.DomUtil.hasClass(document.body, 'umap-help-on')
+ this.map.dialog.open({ content: container, className: 'dark' })
},
resolve: function (name) {
@@ -424,16 +400,15 @@ U.Help = L.Class.extend({
},
edit: function () {
- const container = L.DomUtil.create('div', ''),
- self = this,
- title = L.DomUtil.create('h3', '', container),
- actionsContainer = L.DomUtil.create('ul', 'umap-edit-actions', container)
+ const container = L.DomUtil.create('div', '')
+ const title = L.DomUtil.create('h3', '', container)
+ const actionsContainer = L.DomUtil.create('ul', 'umap-edit-actions', container)
const addAction = (action) => {
const actionContainer = L.DomUtil.add('li', '', actionsContainer)
L.DomUtil.add('i', action.options.className, actionContainer),
L.DomUtil.add('span', '', actionContainer, action.options.tooltip)
L.DomEvent.on(actionContainer, 'click', action.addHooks, action)
- L.DomEvent.on(actionContainer, 'click', self.hide, self)
+ L.DomEvent.on(actionContainer, 'click', this.map.dialog.close, this.map.dialog)
}
title.textContent = L._('Where do we go from here?')
for (const id in this.map.helpMenuActions) {
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 5dda78d1..054ff897 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -59,6 +59,7 @@ U.Map = L.Map.extend({
this.panel = new U.Panel(this)
this.alert = new U.Alert(this._controlContainer)
this.tooltip = new U.Tooltip(this._controlContainer)
+ this.dialog = new U.Dialog(this._controlContainer)
if (this.hasEditMode()) {
this.editPanel = new U.EditPanel(this)
this.fullPanel = new U.FullPanel(this)
@@ -525,8 +526,8 @@ U.Map = L.Map.extend({
L.DomEvent.stop(e)
this.search()
} else if (e.keyCode === U.Keys.ESC) {
- if (this.help.visible()) {
- this.help.hide()
+ if (this.dialog.visible) {
+ this.dialog.close()
} else {
this.panel.close()
this.editPanel?.close()
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 8d872b92..f2e1971c 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -390,24 +390,6 @@ ul.photon-autocomplete {
/* ********************************* */
/* Help Lightbox */
/* ********************************* */
-.umap-help-box {
- z-index: 10001;
- position: absolute;
- margin: 0 calc(50% - 500px/2);
- width: 500px;
- max-width: 100vw;
- padding: 40px 20px;
- border: 1px solid #222;
- background-color: var(--color-darkGray);
- color: #efefef;
- font-size: 0.8em;
- visibility: hidden;
- top: -100%;
-}
-.umap-help-box .umap-close-link {
- float: right;
- width: 100px;
-}
.umap-help-button {
display: inline-block;
width: 16px;
@@ -426,10 +408,6 @@ ul.photon-autocomplete {
.dark .umap-help-button {
background-image: url('./img/16-white.svg');
}
-.umap-help-on .umap-help-box {
- visibility: visible;
- top: 100px;
-}
.umap-help-entry + .umap-help-entry {
margin-top: 10px;
border-top: 1px solid #aaa;
diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css
index 16d5a7f7..c12c5114 100644
--- a/umap/static/umap/vars.css
+++ b/umap/static/umap/vars.css
@@ -11,6 +11,7 @@
--background-color: var(--color-light);
--color-accent: var(--color-brightCyan);
+ --text-color: black;
/* Buttons. */
--button-primary-background: var(--color-waterMint);
@@ -29,4 +30,5 @@
}
.dark {
--background-color: var(--color-darkGray);
+ --text-color: #efefef;
}
diff --git a/umap/templates/umap/css.html b/umap/templates/umap/css.html
index 4e12a22d..1233cbb6 100644
--- a/umap/templates/umap/css.html
+++ b/umap/templates/umap/css.html
@@ -31,4 +31,5 @@
+
diff --git a/umap/tests/integration/test_dashboard.py b/umap/tests/integration/test_dashboard.py
index 86e8ff78..1d0d003f 100644
--- a/umap/tests/integration/test_dashboard.py
+++ b/umap/tests/integration/test_dashboard.py
@@ -28,7 +28,7 @@ def test_owner_can_delete_map_after_confirmation(map, live_server, login):
def test_dashboard_map_preview(map, live_server, datalayer, login):
page = login(map.owner)
page.goto(f"{live_server.url}/en/me")
- dialog = page.locator("dialog")
+ dialog = page.get_by_role("dialog")
expect(dialog).to_be_hidden()
button = page.get_by_role("button", name="Open preview")
expect(button).to_be_visible()