chore: add minimal dialog class to replace custom made help box

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"

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;
+}

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;

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,

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)
+  }
+}

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')
+    this.map.dialog.open({ content: container, className: 'dark' })
-  },
-
-  hide: function () {
-    L.DomUtil.removeClass(document.body, 'umap-help-on')
-  },
-
-  visible: function () {
-    return L.DomUtil.hasClass(document.body, 'umap-help-on')
   },
 
   resolve: function (name) {
@@ -424,16 +400,15 @@ U.Help = L.Class.extend({
   },
 
   edit: function () {
-    const container = L.DomUtil.create('div', ''),
+    const container = L.DomUtil.create('div', '')
-      self = this,
+    const title = L.DomUtil.create('h3', '', container)
-      title = L.DomUtil.create('h3', '', container),
+    const actionsContainer = L.DomUtil.create('ul', 'umap-edit-actions', container)
-      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) {

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()) {
+        if (this.dialog.visible) {
-          this.help.hide()
+          this.dialog.close()
         } else {
           this.panel.close()
           this.editPanel?.close()

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;

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;
 }

umap/templates/umap/css.html

@@ -31,4 +31,5 @@
 <link rel="stylesheet" href="{% static 'umap/css/panel.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/css/alert.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/css/tooltip.css' %}" />
+<link rel="stylesheet" href="{% static 'umap/css/dialog.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/theme.css' %}" />

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()