chore: Use web components to display alerts + a11y roles

umap/settings/base.py

@@ -182,6 +182,7 @@ TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
         "APP_DIRS": True,
+        "DIRS": [os.path.join(PROJECT_DIR, STATIC_ROOT)],
         "OPTIONS": {
             "context_processors": (
                 "django.contrib.auth.context_processors.auth",

umap/static/umap/css/alert.css

@@ -1,75 +0,0 @@
-#umap-alert-container {
-    min-height: 46px;
-    line-height: 46px;
-    padding-left: 10px;
-    width: calc(100% - 500px);
-    position: absolute;
-    top: -46px;
-    left: 250px;  /* Keep save/cancel button accessible. */
-    right: 250px;
-    box-shadow: 0 1px 7px #999999;
-    visibility: hidden;
-    background: none repeat scroll 0 0 rgba(20, 22, 23, 0.8);
-    font-weight: bold;
-    color: #fff;
-    font-size: 0.8em;
-    z-index: 1012;
-    border-radius: 2px;
-}
-#umap-alert-container.error {
-    background-color: #c60f13;
-}
-.umap-alert #umap-alert-container {
-    visibility: visible;
-    top: 23px;
-}
-#umap-alert-container .umap-action {
-    margin-left: 10px;
-    background-color: #fff;
-    color: #000;
-    padding: 5px;
-    border-radius: 4px;
-}
-#umap-alert-container .umap-action:hover {
-    color: #000;
-}
-#umap-alert-container .error .umap-action {
-    background-color: #666;
-    color: #eee;
-}
-#umap-alert-container .error .umap-action:hover {
-    color: #fff;
-}
-#umap-alert-container input {
-    padding: 5px;
-    border-radius: 4px;
-    width: 100%;
-}
-#umap-alert-container .umap-close-link {
-    color: #fff;
-    float: right;
-    padding-right: 10px;
-    width: 100px;
-    line-height: 1;
-    margin: .5rem;
-    background-color: #202425;
-    font-size: .7rem;
-}
-#umap-alert-container .umap-close-icon {
-    background-position: -74px -55px;
-}
-#umap-alert-container .umap-alert-actions {
-    display: flex;
-    margin: 1rem;
-}
-#umap-alert-container .umap-alert-actions .umap-action {
-    margin-bottom: 0;
-}
-
-@media all and (orientation:portrait) {
-    #umap-alert-container {
-        width: 100%;
-        left: 0;
-        right: 0;
-    }
-}

umap/static/umap/js/components/alerts/alert.css

@@ -0,0 +1,45 @@
+[role="dialog"] {
+    box-sizing: border-box;
+    min-height: 46px;
+    line-height: 46px;
+    padding: var(--panel-gutter);
+    position: absolute;
+    box-shadow: 0 1px 7px #999999;
+    background: none repeat scroll 0 0 rgba(20, 22, 23, 0.8);
+    font-weight: bold;
+    color: #fff;
+    font-size: 0.8em;
+    z-index: 1012;
+    border-radius: 2px;
+    margin-top: calc(var(--header-height) + var(--panel-gutter));
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    left: 50%;
+    transform: translate(-50%, 0);
+    min-width: 80%;
+}
+[role="dialog"][data-level='error'] {
+    background-color: #c60f13;
+}
+[role="dialog"] > div {
+    margin: 0 auto;
+}
+[role="dialog"] [data-close] {
+    color: #fff;
+    max-width: 42px;
+    line-height: initial;
+    margin: 0;
+    margin-left: var(--panel-gutter);
+    background-color: #202425;
+    font-size: 0.7rem;
+}
+[role="dialog"] [data-close] .icon + span {
+    margin-left: 0;
+}
+#link-wrapper form {
+    display: flex;
+}
+#link-wrapper form input[type='button'] {
+    max-width: 100px;
+}

umap/static/umap/js/components/alerts/alert.html

@@ -0,0 +1,72 @@
+{% load i18n static %}
+
+<style type="text/css">
+  @import "{% static 'umap/js/components/alerts/alert.css' %}";
+</style>
+
+<umap-alert hidden>
+  <div role="dialog">
+    <div>
+      <p role="alert"></p>
+    </div>
+    <button class="umap-close-link dark button" aria-label="{% translate "Close" %}" data-close>
+      <i class="icon icon-16 icon-close"></i>
+    </button>
+  </div>
+</umap-alert>
+
+<umap-alert-creation hidden>
+  <div role="dialog">
+    <div>
+      <p role="alert"></p>
+      <div id="link-wrapper">
+        <form class="umap-alert-actions">
+          <input type="url" name="url">
+          <input type="button" value="{% translate "Copy link" %}">
+        </form>
+      </div>
+      <div id="form-wrapper" hidden>
+        <p>{% translate "You can also receive that URL by email:" %}</p>
+        <form class="umap-alert-actions">
+          <input type="email" name="email" class="umap-alert-input" required>
+          <input type="submit" value="{% translate "Send me the link" %}" class="umap-action">
+        </form>
+      </div>
+    </div>
+    <button class="umap-close-link dark button" aria-label="{% translate "Close" %}" data-close>
+      <i class="icon icon-16 icon-close"></i>
+    </button>
+  </div>
+</umap-alert-creation>
+
+<umap-alert-choice hidden>
+  <div role="dialog">
+    <div>
+      <p role="alert">
+        {% blocktranslate %}
+          Woops! Someone else seems to have edited the data. You can save anyway, but this will erase the changes made by others.
+        {% endblocktranslate %}
+      </p>
+      <div id="choice-wrapper">
+        <form class="umap-alert-actions">
+          <button type="button" data-close>{% translate "Cancel" %}</button>
+          <input type="submit" value="{% translate "Save anyway" %}">
+        </form>
+      </div>
+    </div>
+    <button class="umap-close-link dark button" aria-label="{% translate "Close" %}" data-close>
+      <i class="icon icon-16 icon-close"></i>
+    </button>
+  </div>
+</umap-alert-choice>
+
+<script type="module">
+  import {
+    uMapAlert,
+    uMapAlertCreation,
+    uMapAlertChoice
+  } from '{% static 'umap/js/components/alerts/alert.js' %}'
+  customElements.define('umap-alert', uMapAlert)
+  customElements.define('umap-alert-creation', uMapAlertCreation)
+  customElements.define('umap-alert-choice', uMapAlertChoice)
+</script>

umap/static/umap/js/components/alerts/alert.js

@@ -0,0 +1,169 @@
+class uMapAlert extends HTMLElement {
+  static info(message, duration = 5000) {
+    const event = new CustomEvent('umap:alert', {
+      bubbles: true,
+      cancelable: true,
+      detail: { message, duration },
+    })
+    document.dispatchEvent(event)
+  }
+
+  // biome-ignore lint/style/useNumberNamespace: Number.Infinity returns undefined by default
+  static error(message, duration = Infinity) {
+    const event = new CustomEvent('umap:alert', {
+      bubbles: true,
+      cancelable: true,
+      detail: { level: 'error', message, duration },
+    })
+    document.dispatchEvent(event)
+  }
+
+  constructor() {
+    super()
+    this.container = this.querySelector('[role="dialog"]')
+    this.element = this.container.querySelector('[role="alert"]')
+  }
+
+  _hide() {
+    this.setAttribute('hidden', 'hidden')
+  }
+
+  _show() {
+    this.removeAttribute('hidden')
+  }
+
+  _displayAlert(detail) {
+    const { level = 'info', duration = 5000, message = '' } = detail
+    this.container.dataset.level = level
+    this.container.dataset.duration = duration
+    this.element.textContent = message
+    this._show()
+    if (Number.isFinite(duration)) {
+      setTimeout(() => {
+        this._hide()
+      }, duration)
+    }
+  }
+
+  connectedCallback() {
+    this.addEventListener('click', (event) => {
+      if (event.target.closest('[data-close]')) {
+        this._hide()
+      }
+    })
+    document.addEventListener('umap:alert', (event) => {
+      this._displayAlert(event.detail)
+    })
+  }
+}
+
+class uMapAlertCreation extends uMapAlert {
+  static info(
+    message,
+    // biome-ignore lint/style/useNumberNamespace: Number.Infinity returns undefined by default
+    duration = Infinity,
+    editLink = undefined,
+    sendLink = undefined
+  ) {
+    const event = new CustomEvent('umap:alert-creation', {
+      bubbles: true,
+      cancelable: true,
+      detail: { message, duration, editLink, sendLink },
+    })
+    document.dispatchEvent(event)
+  }
+
+  constructor() {
+    super()
+    this.linkWrapper = this.container.querySelector('#link-wrapper')
+    this.formWrapper = this.container.querySelector('#form-wrapper')
+  }
+
+  _displayCreationAlert(detail) {
+    const {
+      level = 'info',
+      duration = 5000,
+      message = '',
+      editLink = undefined,
+      sendLink = undefined,
+    } = detail
+    uMapAlert.prototype._displayAlert.call(this, { level, duration, message })
+    this.linkWrapper.querySelector('input[type="url"]').value = editLink
+    const button = this.linkWrapper.querySelector('input[type="button"]')
+    button.addEventListener('click', (event) => {
+      event.preventDefault()
+      L.Util.copyToClipboard(editLink)
+      event.target.value = L._('✅ Copied!')
+    })
+    if (sendLink) {
+      this.formWrapper.removeAttribute('hidden')
+      const form = this.formWrapper.querySelector('form')
+      form.addEventListener('submit', async (event) => {
+        event.preventDefault()
+        const formData = new FormData(form)
+        const server = new U.ServerRequest()
+        this._hide()
+        await server.post(sendLink, {}, formData)
+      })
+    }
+  }
+
+  connectedCallback() {
+    this.addEventListener('click', (event) => {
+      if (event.target.closest('[data-close]')) {
+        this._hide()
+      }
+    })
+    document.addEventListener('umap:alert-creation', (event) => {
+      this._displayCreationAlert(event.detail)
+    })
+  }
+}
+
+class uMapAlertChoice extends uMapAlert {
+  static error(
+    message,
+    // biome-ignore lint/style/useNumberNamespace: Number.Infinity returns undefined by default
+    duration = Infinity
+  ) {
+    const event = new CustomEvent('umap:alert-choice', {
+      bubbles: true,
+      cancelable: true,
+      detail: { message, duration },
+    })
+    document.dispatchEvent(event)
+  }
+
+  constructor() {
+    super()
+    this.choiceWrapper = this.container.querySelector('#choice-wrapper')
+  }
+
+  _displayChoiceAlert(detail) {
+    const { level = 'error', duration = 5000, message = '' } = detail
+    uMapAlert.prototype._displayAlert.call(this, { level, duration, message })
+    const button = this.choiceWrapper.querySelector('input[type="submit"]')
+    button.addEventListener('click', (event) => {
+      event.preventDefault()
+      document.dispatchEvent(
+        new CustomEvent('umap:alert-choice-confirm', {
+          bubbles: true,
+          cancelable: true,
+        })
+      )
+    })
+  }
+
+  connectedCallback() {
+    this.addEventListener('click', (event) => {
+      if (event.target.closest('[data-close]')) {
+        this._hide()
+      }
+    })
+    document.addEventListener('umap:alert-choice', (event) => {
+      this._displayChoiceAlert(event.detail)
+    })
+  }
+}
+
+export { uMapAlert, uMapAlertCreation, uMapAlertChoice }

umap/static/umap/js/modules/autocomplete.js

@@ -1,7 +1,6 @@
 import { DomUtil, DomEvent, setOptions } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import { ServerRequest } from './request.js'
-import Alert from './ui/alert.js'
 
 export class BaseAutocomplete {
   constructor(el, options) {
@@ -220,8 +219,7 @@ export class BaseAutocomplete {
 class BaseAjax extends BaseAutocomplete {
   constructor(el, options) {
     super(el, options)
-    const alert = new Alert(document.querySelector('header'))
+    this.server = new ServerRequest()
-    this.server = new ServerRequest(alert)
   }
   optionToResult(option) {
     return {

umap/static/umap/js/modules/global.js

@@ -3,7 +3,6 @@ import Browser from './browser.js'
 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'
@@ -14,6 +13,11 @@ import Orderable from './orderable.js'
 import Importer from './importer.js'
 import Help from './help.js'
 import { SyncEngine } from './sync/engine.js'
+import {
+  uMapAlert as Alert,
+  uMapAlertCreation as AlertCreation,
+  uMapAlertChoice as AlertChoice,
+} from '../components/alerts/alert.js'
 
 // Import modules and export them to the global scope.
 // For the not yet module-compatible JS out there.
@@ -21,6 +25,8 @@ import { SyncEngine } from './sync/engine.js'
 // By alphabetic order
 window.U = {
   Alert,
+  AlertCreation,
+  AlertChoice,
   AjaxAutocomplete,
   AjaxAutocompleteMultiple,
   Browser,

umap/static/umap/js/modules/importer.js

@@ -163,16 +163,12 @@ export default class Importer {
         this.map.processFileToImport(file, layer, type)
       }
     } else {
-      if (!type)
+      if (!type) return U.Alert.error(L._('Please choose a format'))
-        return this.map.alert.open({
-          content: translate('Please choose a format'),
-          level: 'error',
-        })
       if (this.rawInput.value && type === 'umap') {
         try {
           this.map.importRaw(this.rawInput.value, type)
         } catch (e) {
-          this.alert.open({ content: translate('Invalid umap data'), level: 'error' })
+          U.Alert.error(L._('Invalid umap data'))
           console.error(e)
         }
       } else {

umap/static/umap/js/modules/request.js

@@ -1,5 +1,4 @@
-// Uses `L._`` from Leaflet.i18n which we cannot import as a module yet
+import { translate } from './i18n.js'
-import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 
 export class RequestError extends Error {}
 
@@ -47,11 +46,6 @@ class BaseRequest {
 // In case of error, an alert is sent, but non 20X status are not handled
 // The consumer must check the response status by hand
 export class Request extends BaseRequest {
-  constructor(alert) {
-    super()
-    this.alert = alert
-  }
-
   fire(name, params) {
     document.body.dispatchEvent(new CustomEvent(name, params))
   }
@@ -85,7 +79,7 @@ export class Request extends BaseRequest {
   }
 
   _onError(error) {
-    this.alert.open({ content: L._('Problem in the response'), level: 'error' })
+    U.Alert.error(translate('Problem in the response'))
   }
 
   _onNOK(error) {
@@ -131,9 +125,9 @@ export class ServerRequest extends Request {
     try {
       const data = await response.json()
       if (data.info) {
-        this.alert.open({ content: data.info, level: 'info' })
+        U.Alert.info(data.info)
       } else if (data.error) {
-        this.alert.open({ content: data.error, level: 'error' })
+        U.Alert.error(data.error)
         return this._onError(new Error(data.error))
       }
       return [data, response, null]
@@ -148,10 +142,7 @@ export class ServerRequest extends Request {
 
   _onNOK(error) {
     if (error.status === 403) {
-      this.alert.open({
+      U.Alert.error(error.message || translate('Action not allowed :('))
-        content: error.message || L._('Action not allowed :('),
-        level: 'error',
-      })
     }
     return [{}, error.response, error]
   }

umap/static/umap/js/modules/ui/alert.js

@@ -1,82 +0,0 @@
-import { DomUtil, DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
-import { translate } from '../i18n.js'
-
-const ALERTS = []
-let ALERT_ID = null
-
-export default class Alert {
-  constructor(parent) {
-    this.parent = parent
-    this.container = DomUtil.create('div', 'with-transition', this.parent)
-    this.container.id = 'umap-alert-container'
-    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)
-  }
-
-  open(params) {
-    if (DomUtil.hasClass(this.parent, 'umap-alert')) ALERTS.push(params)
-    else this._open(params)
-  }
-
-  _open(params) {
-    if (!params) {
-      if (ALERTS.length) params = ALERTS.pop()
-      else return
-    }
-    let timeoutID
-    const level_class = params.level && params.level == 'info' ? 'info' : 'error'
-    this.container.innerHTML = ''
-    DomUtil.addClass(this.parent, 'umap-alert')
-    DomUtil.addClass(this.container, level_class)
-    const close = () => {
-      if (timeoutID && timeoutID !== ALERT_ID) {
-        return
-      } // Another alert has been forced
-      this.container.innerHTML = ''
-      DomUtil.removeClass(this.parent, 'umap-alert')
-      DomUtil.removeClass(this.container, level_class)
-      if (timeoutID) window.clearTimeout(timeoutID)
-      this._open()
-    }
-    const closeButton = DomUtil.createButton(
-      'umap-close-link',
-      this.container,
-      '',
-      close,
-      this
-    )
-    DomUtil.create('i', 'umap-close-icon', closeButton)
-    const label = DomUtil.create('span', '', closeButton)
-    label.title = label.textContent = translate('Close')
-    DomUtil.element({
-      tagName: 'div',
-      innerHTML: params.content,
-      parent: this.container,
-    })
-    let action, el, input
-    const form = DomUtil.create('div', 'umap-alert-actions', this.container)
-    for (let action of params.actions || []) {
-      if (action.input) {
-        input = DomUtil.element({
-          tagName: 'input',
-          parent: form,
-          className: 'umap-alert-input',
-          placeholder: action.input,
-        })
-      }
-      el = DomUtil.createButton(
-        'umap-action',
-        form,
-        action.label,
-        action.callback,
-        action.callbackContext
-      )
-      DomEvent.on(el, 'click', close, this)
-    }
-    if (params.duration !== Infinity) {
-      ALERT_ID = timeoutID = window.setTimeout(close, params.duration || 3000)
-    }
-  }
-}

umap/static/umap/js/umap.controls.js

@@ -1086,7 +1086,7 @@ U.Search = L.PhotonSearch.extend({
       if (latlng.isValid()) {
         this.reverse.doReverse(latlng)
       } else {
-        this.map.alert.open({ content: 'Invalid latitude or longitude', mode: 'error' })
+        U.Alert.error(L._('Invalid latitude or longitude'))
       }
       return
     }

umap/static/umap/js/umap.features.js

@@ -764,10 +764,7 @@ U.Marker = L.Marker.extend({
     const builder = new U.FormBuilder(this, coordinatesOptions, {
       callback: function () {
         if (!this._latlng.isValid()) {
-          this.map.alert.open({
+          U.Alert.error(L._('Invalid latitude or longitude'))
-            content: L._('Invalid latitude or longitude'),
-            level: 'error',
-          })
           builder.resetField('_latlng.lat')
           builder.resetField('_latlng.lng')
         }
@@ -966,7 +963,7 @@ U.PathMixin = {
     items.push({
       text: L._('Display measure'),
       callback: function () {
-        this.map.alert.open({ content: this.getMeasure(), level: 'info' })
+        U.Alert.info(this.getMeasure())
       },
       context: this,
     })

umap/static/umap/js/umap.js

@@ -13,7 +13,7 @@ L.Map.mergeOptions({
   // we cannot rely on this because of the y is overriden by Leaflet
   // See https://github.com/Leaflet/Leaflet/pull/9201
   // And let's remove this -y when this PR is merged and released.
-  demoTileInfos: { 's': 'a', 'z': 9, 'x': 265, 'y': 181, '-y': 181, 'r': '' },
+  demoTileInfos: { s: 'a', z: 9, x: 265, y: 181, '-y': 181, r: '' },
   licences: [],
   licence: '',
   enableMarkerDraw: true,
@@ -59,7 +59,6 @@ U.Map = L.Map.extend({
     this.urls = new U.URLs(this.options.urls)
 
     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()) {
@@ -68,8 +67,8 @@ U.Map = L.Map.extend({
     }
     L.DomEvent.on(document.body, 'dataloading', (e) => this.fire('dataloading', e))
     L.DomEvent.on(document.body, 'dataload', (e) => this.fire('dataload', e))
-    this.server = new U.ServerRequest(this.alert)
+    this.server = new U.ServerRequest()
-    this.request = new U.Request(this.alert)
+    this.request = new U.Request()
 
     this.initLoader()
     this.name = this.options.name
@@ -391,7 +390,7 @@ U.Map = L.Map.extend({
       icon: 'umap-fake-class',
       iconLoading: 'umap-fake-class',
       flyTo: this.options.easing,
-      onLocationError: (err) => this.alert.open({ content: err.message }),
+      onLocationError: (err) => U.Alert.error(err.message),
     })
     this._controls.fullscreen = new L.Control.Fullscreen({
       title: { false: L._('View Fullscreen'), true: L._('Exit Fullscreen') },
@@ -680,10 +679,7 @@ U.Map = L.Map.extend({
     } catch (e) {
       console.error(e)
       this.removeLayer(tilelayer)
-      this.alert.open({
+      U.Alert.error(`${L._('Error in the tilelayer URL')}: ${tilelayer._url}`)
-        content: `${L._('Error in the tilelayer URL')}: ${tilelayer._url}`,
-        level: 'error',
-      })
       // Users can put tilelayer URLs by hand, and if they add wrong {variable},
       // Leaflet throw an error, and then the map is no more editable
     }
@@ -715,10 +711,7 @@ U.Map = L.Map.extend({
     } catch (e) {
       this.removeLayer(overlay)
       console.error(e)
-      this.alert.open({
+      U.Alert.error(`${L._('Error in the overlay URL')}: ${overlay._url}`)
-        content: `${L._('Error in the overlay URL')}: ${overlay._url}`,
-        level: 'error',
-      })
     }
   },
 
@@ -843,10 +836,7 @@ U.Map = L.Map.extend({
     if (this.options.umap_id) {
       // We do not want an extra message during the map creation
       // to avoid the double notification/alert.
-      this.alert.open({
+      U.Alert.info(L._('The zoom and center have been modified.'))
-        content: L._('The zoom and center have been modified.'),
-        level: 'info',
-      })
     }
   },
 
@@ -886,12 +876,11 @@ U.Map = L.Map.extend({
   processFileToImport: function (file, layer, type) {
     type = type || U.Utils.detectFileType(file)
     if (!type) {
-      this.alert.open({
+      U.Alert.error(
-        content: L._('Unable to detect format of file {filename}', {
+        L._('Unable to detect format of file {filename}', {
           filename: file.name,
-        }),
-        level: 'error',
         })
+      )
       return
     }
     if (type === 'umap') {
@@ -947,10 +936,7 @@ U.Map = L.Map.extend({
         self.importRaw(rawData)
       } catch (e) {
         console.error('Error importing data', e)
-        self.alert.open({
+        U.Alert.error(L._('Invalid umap data in {filename}', { filename: file.name }))
-          content: L._('Invalid umap data in {filename}', { filename: file.name }),
-          level: 'error',
-        })
       }
     }
   },
@@ -1058,57 +1044,54 @@ U.Map = L.Map.extend({
     const [data, _, error] = await this.server.post(uri, {}, formData)
     // FIXME: login_required response will not be an error, so it will not
     // stop code while it should
-    if (!error) {
+    if (error) {
-      let duration = 3000,
+      return
-        alert = { content: L._('Map has been saved!'), level: 'info' }
+    }
+
     if (!this.options.umap_id) {
-        alert.content = L._('Congratulations, your map has been created!')
       this.options.umap_id = data.id
       this.permissions.setOptions(data.permissions)
       this.permissions.commit()
-        if (data.permissions && data.permissions.anonymous_edit_url) {
+      if (data?.permissions?.anonymous_edit_url) {
-          alert.duration = Infinity
+        const send_edit_link_url =
-          alert.content =
+          this.options.urls.map_send_edit_link &&
+          this.urls.get('map_send_edit_link', {
+            map_id: this.options.umap_id,
+          })
+        this.once('saved', () => {
+          U.AlertCreation.info(
             L._(
-              'Your map has been created! As you are not logged in, here is your secret link to edit the map, please keep it safe:'
+              'Your map has been created! As you are not logged in, ' +
-            ) + `<br>${data.permissions.anonymous_edit_url}`
+                'here is your secret link to edit the map, please keep it safe:'
-
+            ),
-          alert.actions = [
+            Number.Infinity,
-            {
+            data.permissions.anonymous_edit_url,
-              label: L._('Copy link'),
+            send_edit_link_url
-              callback: () => {
+          )
-                L.Util.copyToClipboard(data.permissions.anonymous_edit_url)
-                this.alert.open({
-                  content: L._('Secret edit link copied to clipboard!'),
-                  level: 'info',
         })
-              },
+      } else {
-              callbackContext: this,
+        this.once('saved', () => {
-            },
+          U.Alert.info(L._('Congratulations, your map has been created!'))
-          ]
-          if (this.options.urls.map_send_edit_link) {
-            alert.actions.push({
-              label: L._('Send me the link'),
-              input: L._('Email'),
-              callback: this.sendEditLink,
-              callbackContext: this,
         })
       }
-        }
+    } else {
-      } else if (!this.permissions.isDirty) {
+      if (!this.permissions.isDirty) {
         // Do not override local changes to permissions,
         // but update in case some other editors changed them in the meantime.
         this.permissions.setOptions(data.permissions)
         this.permissions.commit()
       }
-      // Update URL in case the name has changed.
+      this.once('saved', () => {
-      if (history && history.pushState)
+        U.Alert.info(data.info || L._('Map has been saved!'))
-        history.pushState({}, this.options.name, data.url)
+      })
-      else window.location = data.url
-      alert.content = data.info || alert.content
-      this.once('saved', () => this.alert.open(alert))
-      this.permissions.save()
     }
+    // Update URL in case the name has changed.
+    if (history?.pushState) {
+      history.pushState({}, this.options.name, data.url)
+    } else {
+      window.location = data.url
+    }
+    this.permissions.save()
   },
 
   save: function () {
@@ -1126,33 +1109,20 @@ U.Map = L.Map.extend({
     }
   },
 
-  sendEditLink: async function () {
-    const input = this.alert.container.querySelector('input')
-    const email = input.value
-
-    const formData = new FormData()
-    formData.append('email', email)
-
-    const url = this.urls.get('map_send_edit_link', { map_id: this.options.umap_id })
-    await this.server.post(url, {}, formData)
-  },
-
   star: async function () {
-    if (!this.options.umap_id)
+    if (!this.options.umap_id) {
-      return this.alert.open({
+      return U.Alert.error(L._('Please save the map first'))
-        content: L._('Please save the map first'),
+    }
-        level: 'error',
-      })
     const url = this.urls.get('map_star', { map_id: this.options.umap_id })
     const [data, response, error] = await this.server.post(url)
-    if (!error) {
+    if (error) {
-      this.options.starred = data.starred
+      return
-      let msg = data.starred
-        ? L._('Map has been starred')
-        : L._('Map has been unstarred')
-      this.alert.open({ content: msg, level: 'info' })
-      this.renderControls()
     }
+    this.options.starred = data.starred
+    U.Alert.info(
+      data.starred ? L._('Map has been starred') : L._('Map has been unstarred')
+    )
+    this.renderControls()
   },
 
   geometry: function () {

umap/static/umap/js/umap.layer.js

@@ -958,7 +958,7 @@ U.DataLayer = L.Evented.extend({
       const doc = new DOMParser().parseFromString(x, 'text/xml')
       const errorNode = doc.querySelector('parsererror')
       if (errorNode) {
-        this.map.alert.open({ content: L._('Cannot parse data'), level: 'error' })
+        U.Alert.error(L._('Cannot parse data'))
       }
       return doc
     }
@@ -993,7 +993,7 @@ U.DataLayer = L.Evented.extend({
                 message: err[0].message,
               })
             }
-            this.map.alert.open({ content: message, level: 'error', duration: 10000 })
+            U.Alert.error(message, 10000)
             console.error(err)
           }
           if (result && result.features.length) {
@@ -1020,7 +1020,7 @@ U.DataLayer = L.Evented.extend({
         const gj = JSON.parse(c)
         callback(gj)
       } catch (err) {
-        this.map.alert.open({ content: `Invalid JSON file: ${err}` })
+        U.Alert.error(`Invalid JSON file: ${err}`)
         return
       }
     }
@@ -1121,12 +1121,11 @@ U.DataLayer = L.Evented.extend({
         return this.geojsonToFeatures(geometry.geometries)
 
       default:
-        this.map.alert.open({
+        U.Alert.error(
-          content: L._('Skipping unknown geometry.type: {type}', {
+          L._('Skipping unknown geometry.type: {type}', {
             type: geometry.type || 'undefined',
-          }),
-          level: 'error',
           })
+        )
     }
   },
 
@@ -1706,27 +1705,14 @@ U.DataLayer = L.Evented.extend({
     const [data, response, error] = await this.map.server.post(url, headers, formData)
     if (error) {
       if (response && response.status === 412) {
-        const msg = L._(
+        U.AlertChoice.error(
-          'Woops! Someone else seems to have edited the data. You can save anyway, but this will erase the changes made by others.'
+          L._(
+            'Woops! Someone else seems to have edited the data. ' +
+              'You can save anyway, but this will erase the changes made by others.'
           )
-        const actions = [
+        )
-          {
+        document.addEventListener('umap:alert-choice-confirm', async (event) => {
-            label: L._('Save anyway'),
-            callback: async () => {
-              // Save again,
-              // but do not pass the reference version this time
           await this._trySave(url, {}, formData)
-            },
-          },
-          {
-            label: L._('Cancel'),
-          },
-        ]
-        this.map.alert.open({
-          content: msg,
-          level: 'error',
-          duration: 100000,
-          actions: actions,
         })
       }
     } else {

umap/static/umap/js/umap.permissions.js

@@ -52,11 +52,9 @@ U.MapPermissions = L.Class.extend({
 
   edit: function () {
     if (this.map.options.editMode !== 'advanced') return
-    if (!this.map.options.umap_id)
+    if (!this.map.options.umap_id) {
-      return this.map.alert.open({
+      return U.Alert.info(L._('Please save the map first'))
-        content: L._('Please save the map first'),
+    }
-        level: 'info',
-      })
     const container = L.DomUtil.create('div', 'permissions-panel')
     const fields = []
     L.DomUtil.createTitle(container, L._('Update permissions'), 'icon-key')
@@ -140,10 +138,7 @@ U.MapPermissions = L.Class.extend({
     const [data, response, error] = await this.map.server.post(this.getAttachUrl())
     if (!error) {
       this.options.owner = this.map.options.user
-      this.map.alert.open({
+      U.Alert.info(L._('Map has been attached to your account'))
-        content: L._('Map has been attached to your account'),
-        level: 'info',
-      })
       this.map.editPanel.close()
     }
   },

umap/static/umap/js/umap.tableeditor.js

@@ -83,10 +83,7 @@ U.TableEditor = L.Class.extend({
 
   validateName: function (name) {
     if (name.indexOf('.') !== -1) {
-      this.datalayer.map.alert.open({
+      U.Alert.error(L._('Invalide property name: {name}', { name: name }))
-        content: L._('Invalide property name: {name}', { name: name }),
-        level: 'error',
-      })
       return false
     }
     return true

umap/templates/umap/content.html

@@ -38,8 +38,7 @@
   {{ block.super }}
   <script type="text/javascript">
     window.addEventListener('DOMContentLoaded', event => {
-      const alert = new U.Alert(document.querySelector('header'))
+      const server = new U.ServerRequest()
-      const server = new U.ServerRequest(alert)
       const getMore = async function (e) {
         L.DomEvent.stop(e)
         const [{html}, response, error] = await server.get(this.href)

umap/templates/umap/css.html

@@ -29,7 +29,6 @@
 <link rel="stylesheet" href="{% static 'umap/nav.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/map.css' %}" />
 <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/templates/umap/map_init.html

@@ -1,17 +1,11 @@
 {% load umap_tags %}
+
+{% include "umap/messages.html" %}
 <div id="map"></div>
 <!-- djlint:off -->
 <script defer type="text/javascript">
   window.addEventListener('DOMContentLoaded', (event) => {
     U.MAP = new U.Map("map", {{ map_settings|notag|safe }})
-    {% for m in messages %}
-      {# We have just one, but we need to loop, as for messages API #}
-      U.MAP.alert.open({
-        content: "{{ m }}",
-        level: "{{ m.tags }}",
-        duration: 100000
-      })
-    {% endfor %}
   })
 </script>
 <!-- djlint:on -->

umap/templates/umap/messages.html

@@ -1,11 +1,9 @@
-<div class="wrapper">
+{% load i18n %}
-  <div class="row">
+
-    {% if messages %}
+{% include "umap/js/components/alerts/alert.html" %}
-      <ul class="messages">
+
 {% for message in messages %}
-          <li {% if message.tags %}class="{{ message.tags }}"{% endif %}>{{ message }}</li>
+  <script type="module" defer>
+    U.Alert.info("{{ message }}")
+  </script>
 {% endfor %}
-      </ul>
-    {% endif %}
-  </div>
-</div>

umap/views.py

@@ -906,6 +906,7 @@ class MapDelete(DeleteView):
             return HttpResponseForbidden(_("Only its owner can delete the map."))
         self.object.delete()
         home_url = reverse("home")
+        messages.info(self.request, _("Map successfully deleted."))
         if is_ajax(self.request):
             return simple_json_response(redirect=home_url)
         else: