chore: new strategy to update map name when editing it

Also propagate share_status (this may be moved to permissions)

umap/static/umap/js/modules/caption.js

@@ -19,7 +19,12 @@ export default class Caption {
   open() {
     const container = DomUtil.create('div', 'umap-caption')
     const hgroup = DomUtil.element({ tagName: 'hgroup', parent: container })
-    DomUtil.createTitle(hgroup, this.map.options.name, 'icon-caption icon-block')
+    DomUtil.createTitle(
+      hgroup,
+      this.map.getDisplayName(),
+      'icon-caption icon-block',
+      'map-name'
+    )
     this.map.addAuthorLink('h4', hgroup)
     if (this.map.options.description) {
       const description = DomUtil.element({

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

@@ -578,11 +578,15 @@ const ControlsMixin = {
   ],
 
   renderEditToolbar: function () {
-    const container = L.DomUtil.create(
+    const className = 'umap-main-edit-toolbox'
-      'div',
+    const container =
-      'umap-main-edit-toolbox with-transition dark',
+      document.querySelector(`.${className}`) ||
-      this._controlContainer
+      L.DomUtil.create(
-    )
+        'div',
+        `${className} with-transition dark`,
+        this._controlContainer
+      )
+    container.innerHTML = ''
     const leftContainer = L.DomUtil.create('div', 'umap-left-edit-toolbox', container)
     const rightContainer = L.DomUtil.create('div', 'umap-right-edit-toolbox', container)
     const logo = L.DomUtil.create('div', 'logo', leftContainer)
@@ -623,23 +627,10 @@ const ControlsMixin = {
       },
       this
     )
-    const update = () => {
-      const status = this.permissions.getShareStatusDisplay()
-      nameButton.textContent = this.getDisplayName()
-      // status is not set until map is saved once
-      if (status) {
-        shareStatusButton.textContent = L._('Visibility: {status}', {
-          status: status,
-        })
-      }
-    }
-    update()
-    this.once('saved', L.bind(update, this))
     if (this.options.editMode === 'advanced') {
       L.DomEvent.on(nameButton, 'click', this.editCaption, this)
       L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
     }
-    this.on('postsync', L.bind(update, this))
     if (this.options.user?.id) {
       L.DomUtil.createLink(
         'umap-user',

umap/static/umap/js/umap.core.js

@@ -141,10 +141,10 @@ L.DomUtil.createButtonIcon = (parent, className, title, callback, size = 16) =>
   return el
 }
 
-L.DomUtil.createTitle = (parent, text, className, tag = 'h3') => {
+L.DomUtil.createTitle = (parent, text, iconClassName, className = '', tag = 'h3') => {
   const title = L.DomUtil.create(tag, '', parent)
-  if (className) L.DomUtil.createIcon(title, className)
+  if (className) L.DomUtil.createIcon(title, iconClassName)
-  L.DomUtil.add('span', '', title, text)
+  L.DomUtil.add('span', className, title, text)
   return title
 }
 

umap/static/umap/js/umap.js

@@ -200,6 +200,7 @@ U.Map = L.Map.extend({
     this.backup()
     this.on('click', this.closeInplaceToolbar)
     this.on('contextmenu', this.onContextMenu)
+    this.propagate()
   },
 
   initSyncEngine: async function () {
@@ -231,6 +232,7 @@ U.Map = L.Map.extend({
           this.renderEditToolbar()
           this.renderControls()
           this.browser.redraw()
+          this.propagate()
           break
         case 'data':
           this.redrawVisibleDataLayers()
@@ -1097,6 +1099,7 @@ U.Map = L.Map.extend({
     } else {
       window.location = data.url
     }
+    this.propagate()
     return true
   },
 
@@ -1118,6 +1121,22 @@ U.Map = L.Map.extend({
     this.fire('saved')
   },
 
+  propagate: function () {
+    let els = document.querySelectorAll('.map-name')
+    for (const el of els) {
+      el.textContent = this.getDisplayName()
+    }
+    const status = this.permissions.getShareStatusDisplay()
+    els = document.querySelectorAll('.share-status')
+    for (const el of els) {
+      if (status) {
+        el.textContent = L._('Visibility: {status}', {
+          status: status,
+        })
+      }
+    }
+  },
+
   star: async function () {
     if (!this.options.umap_id) {
       return U.Alert.error(L._('Please save the map first'))