chore: replace panel:xxx events

umap/static/umap/css/icon.css

@@ -80,7 +80,7 @@
     background-position: -27px -120px;
 }
 .icon-settings {
-    background-position: -27px -93px;
+    background-position: -23px -97px;
 }
 .icon-share {
     background-position: 0px -120px;

umap/static/umap/js/modules/browser.js

@@ -61,10 +61,6 @@ export default class Browser {
     return `browse_data_datalayer_${L.stamp(datalayer)}`
   }
 
-  onDataLayerChanged(e) {
-    this.updateDatalayer(e.target)
-  }
-
   addDataLayer(datalayer, parent) {
     let className = `datalayer ${datalayer.getHidableClass()}`
     if (this.map.panel.MODE !== 'condensed') className += ' show-list'
@@ -73,10 +69,6 @@ export default class Browser {
     container.id = this.datalayerId(datalayer)
     const ul = DomUtil.create('ul', '', container)
     this.updateDatalayer(datalayer)
-    datalayer.on('datachanged', this.onDataLayerChanged, this)
-    this.map.ui.once('panel:closed', () => {
-      datalayer.off('datachanged', this.onDataLayerChanged, this)
-    })
   }
 
   updateDatalayer(datalayer) {
@@ -127,6 +119,14 @@ export default class Browser {
     })
   }
 
+  update() {
+    if (!this.isOpen()) return
+    this.dataContainer.innerHTML = ''
+    this.map.eachBrowsableDataLayer((datalayer) => {
+      this.addDataLayer(datalayer, this.dataContainer)
+    })
+  }
+
   open() {
     // Get once but use it for each feature later
     this.filterKeys = this.map.getFilterKeys()
@@ -137,7 +137,7 @@ export default class Browser {
 
     DomUtil.createTitle(container, translate('Browse data'), 'layers')
     const formContainer = DomUtil.create('div', '', container)
-    const dataContainer = DomUtil.create('div', '', container)
+    this.dataContainer = DomUtil.create('div', '', container)
 
     const fields = [
       ['options.filter', { handler: 'Input', placeholder: translate('Filter') }],
@@ -154,9 +154,7 @@ export default class Browser {
       className: 'umap-browser',
     })
 
-    this.map.eachBrowsableDataLayer((datalayer) => {
+    this.update()
-      this.addDataLayer(datalayer, dataContainer)
-    })
   }
 
   static backButton(map) {

umap/static/umap/js/modules/panel.js

@@ -5,8 +5,9 @@ export class Panel {
   MODE = 'condensed'
   CLASSNAME = 'left'
 
-  constructor(parent) {
+  constructor(map) {
-    this.parent = parent
+    this.parent = map._container
+    this.map = map
     this.container = DomUtil.create('div', '', this.parent)
     DomEvent.disableClickPropagation(this.container)
     DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
@@ -35,13 +36,8 @@ export class Panel {
     }
     if (e.className) DomUtil.addClass(body, e.className)
     const promise = new Promise((resolve, reject) => {
-      if (DomUtil.hasClass(this.container, 'on')) {
-        // Already open.
-        resolve()
-      } else {
-        DomEvent.once(this.container, 'transitionend', resolve)
       DomUtil.addClass(this.container, 'on')
-      }
+      resolve()
     })
     DomEvent.on(closeLink, 'click', this.close, this)
     DomEvent.on(resizeLink, 'click', this.resize, this)
@@ -63,6 +59,8 @@ export class Panel {
   close() {
     if (DomUtil.hasClass(this.container, 'on')) {
       DomUtil.removeClass(this.container, 'on')
+      this.map.invalidateSize({ pan: false })
+      this.map.editedFeature = null
     }
   }
 }

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

@@ -1298,10 +1298,7 @@ U.SearchControl = L.Control.extend({
       this.map.fire('dataload', { id: id })
     })
     this.search.resultsContainer = resultsContainer
-    this.map.ui.once('panel:ready', () => {
+    this.map.panel.open({ data: { html: container } }).then(input.focus)
-      input.focus()
-    })
-    this.map.panel.open({ data: { html: container } })
   },
 })
 

umap/static/umap/js/umap.js

@@ -56,10 +56,10 @@ U.Map = L.Map.extend({
     if (geojson.geometry) this.options.center = this.latLng(geojson.geometry)
     this.urls = new U.URLs(this.options.urls)
 
-    this.panel = new U.Panel(this._container)
+    this.panel = new U.Panel(this)
     if (this.hasEditMode()) {
-      this.editPanel = new U.EditPanel(this._container)
+      this.editPanel = new U.EditPanel(this)
-      this.fullPanel = new U.FullPanel(this._container)
+      this.fullPanel = new U.FullPanel(this)
     }
     this.ui = new U.UI(this._container)
     this.ui.on('dataloading', (e) => this.fire('dataloading', e))
@@ -149,14 +149,6 @@ U.Map = L.Map.extend({
       this.options.onLoadPanel = 'datalayers'
     }
 
-    this.ui.on(
-      'panel:closed',
-      function () {
-        this.invalidateSize({ pan: false })
-      },
-      this
-    )
-
     let isDirty = false // self status
     try {
       Object.defineProperty(this, 'isDirty', {
@@ -208,13 +200,6 @@ U.Map = L.Map.extend({
     this.initCaptionBar()
     if (this.hasEditMode()) {
       this.editTools = new U.Editable(this)
-      this.ui.on(
-        'panel:closed panel:open',
-        function () {
-          this.editedFeature = null
-        },
-        this
-      )
       this.renderEditToolbar()
     }
     this.initShortcuts()
@@ -478,6 +463,11 @@ U.Map = L.Map.extend({
       if (!pane.dataset || !pane.dataset.id) continue
       this.datalayers_index.push(this.datalayers[pane.dataset.id])
     }
+    this.onDataLayersChanged()
+  },
+
+  onDataLayersChanged: function () {
+    if (this.browser) this.browser.update()
   },
 
   ensurePanesOrder: function () {
@@ -971,6 +961,7 @@ U.Map = L.Map.extend({
     this.dirty_datalayers = []
     this.initTileLayers()
     this.isDirty = false
+    this.onDataLayersChanged()
   },
 
   checkDirty: function () {

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

@@ -594,6 +594,7 @@ U.DataLayer = L.Evented.extend({
     // Automatically, others will be shown manually, and thus will
     // be in the "forced visibility" mode
     if (this.autoLoaded()) this.map.on('zoomend', this.onZoomEnd, this)
+    this.on('datachanged', this.map.onDataLayersChanged, this.map)
   },
 
   render: function (fields, builder) {
@@ -845,6 +846,7 @@ U.DataLayer = L.Evented.extend({
       if (L.Util.indexOf(this.map.datalayers_index, this) === -1)
         this.map.datalayers_index.push(this)
     }
+    this.map.onDataLayersChanged()
   },
 
   _dataUrl: function () {
@@ -1152,6 +1154,8 @@ U.DataLayer = L.Evented.extend({
     delete this.map.datalayers[L.stamp(this)]
     this.map.datalayers_index.splice(this.getRank(), 1)
     this.parentPane.removeChild(this.pane)
+    this.map.onDataLayersChanged()
+    this.off('datachanged', this.map.onDataLayersChanged, this.map)
     this.fire('erase')
     this._leaflet_events_bk = this._leaflet_events
     this.map.off('moveend', this.onMoveEnd, this)
@@ -1214,6 +1218,7 @@ U.DataLayer = L.Evented.extend({
     L.DomUtil.createTitle(container, L._('Layer properties'), 'icon-layers')
     let builder = new U.FormBuilder(this, metadataFields, {
       callback: function (e) {
+        this.map.onDataLayersChanged()
         if (e.helper.field === 'options.type') {
           this.edit()
         }

umap/static/umap/map.css

@@ -660,7 +660,7 @@ ul.photon-autocomplete {
     display: inline-block; /* Prevents underline on hover. */
 }
 .umap-edit-enabled .leaflet-top {
-    top: 48px;
+    top: 46px;
 }
 .umap-caption-bar-enabled .umap-caption-bar {
     display: block;
@@ -935,7 +935,7 @@ a.umap-control-caption,
 .umap-browser.dark .datalayer li:nth-child(even) {
     background-color: #2c3233;
 }
-.umap-browser .datalayer i.feature-color {
+.umap-browser .datalayer .feature-color {
     box-shadow: 0 0 2px 0 black inset;
     cursor: inherit;
     -moz-box-sizing:border-box;
@@ -948,7 +948,7 @@ a.umap-control-caption,
     text-align: center;
     margin-left: 5px;
 }
-.umap-browser.dark .datalayer i.feature-color {
+.umap-browser.dark .datalayer .feature-color {
     box-shadow: 0 0 2px 0 #999 inset;
 }
 .umap-browser .datalayer .feature-color img {