chore(utils): use native events instead of array of callbacks for Wit…

…hEvents

Co-authored-by: David Larlet <[email protected]>

umap/static/umap/js/modules/data/layer.js

@@ -668,9 +668,9 @@ export class DataLayer extends ServerStored {
     ]
     DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
     let builder = new MutatingForm(this, metadataFields)
-    builder.on('set', (helper) => {
+    builder.on('set', ({ detail }) => {
       this._umap.onDataLayersChanged()
-      if (helper.field === 'options.type') {
+      if (detail.helper.field === 'options.type') {
         this.edit()
       }
     })

umap/static/umap/js/modules/form/fields.js

@@ -97,7 +97,7 @@ class BaseElement {
 
   sync() {
     this.set()
-    this.builder.fire('set', this)
+    this.builder.fire('set', { helper: this })
   }
 
   set() {

umap/static/umap/js/modules/utils.js

@@ -451,24 +451,17 @@ export function eachElement(selector, callback) {
 
 export class WithEvents {
   constructor() {
-    this._callbacks = {}
+    this._target = new EventTarget()
   }
 
   on(eventType, callback) {
     if (typeof callback !== 'function') return
-    if (this._callbacks[eventType] === undefined) {
-      this._callbacks[eventType] = []
-    }
-
-    this._callbacks[eventType].push(callback)
+    this._target.addEventListener(eventType, callback)
   }
 
-  fire(eventType, ...args) {
-    if (this._callbacks[eventType] === undefined) return
-
-    for (const callback of this._callbacks[eventType]) {
-      callback(...args)
-    }
+  fire(eventType, detail) {
+    const event = new CustomEvent(eventType, { detail })
+    this._target.dispatchEvent(event)
   }
 }