chore: use template for map advanced buttons (and fix icons) (#2523)

Before:


![image](https://github.com/user-attachments/assets/fc8dd27f-aa03-4eaf-ba21-e041b0548e51)

After:


![image](https://github.com/user-attachments/assets/2b9b15ca-542b-4114-b57c-c88189a7260a)

umap/static/umap/css/icon.css

@@ -65,6 +65,9 @@ html[dir="rtl"] .icon {
 .icon-center {
     background-position: calc(var(--tile) * 4) calc(var(--tile) * 2);
 }
+.icon-clone {
+    background-position: calc(var(--tile) * 7) calc(var(--tile) * 2);
+}
 .icon-close {
     background-position: var(--tile) 0px;
 }
@@ -95,6 +98,9 @@ html[dir="rtl"] .icon {
     cursor: move;
     float: inline-end;
 }
+.icon-empty {
+    background-position: calc(var(--tile) * 7) calc(var(--tile) * 3);
+}
 .icon-eye {
     background-position: calc(var(--tile) * 2) var(--tile);
 }

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

@@ -838,44 +838,36 @@ export class DataLayer extends ServerStored {
       container,
       translate('Advanced actions')
     )
-    const advancedButtons = DomUtil.create('div', 'button-bar half', advancedActions)
+    const filename = `${Utils.slugify(this.options.name)}.geojson`
-    const deleteButton = Utils.loadTemplate(`
+    const tpl = `
-      <button class="button" type="button">
+    <div class="button-bar half">
+      <button class="button" type="button" data-ref=del>
         <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
-      </button>`)
+      </button>
-    deleteButton.addEventListener('click', () => {
+      <button class="button" type="button" data-ref=empty hidden>
+        <i class="icon icon-24 icon-empty"></i>${translate('Empty')}
+      </button>
+      <button class="button" type="button" data-ref=clone>
+        <i class="icon icon-24 icon-clone"></i>${translate('Clone')}
+      </button>
+      <a class="button" href="${this._dataUrl()}" download="${filename}" data-ref=download hidden>
+        <i class="icon icon-24 icon-download"></i>${translate('Download')}
+      </a>
+    </div>
+    `
+    const [bar, { del, empty, clone, download }] = Utils.loadTemplateWithRefs(tpl)
+    advancedActions.appendChild(bar)
+    del.addEventListener('click', () => {
       this.del()
       this._umap.editPanel.close()
     })
-    advancedButtons.appendChild(deleteButton)
 
     if (!this.isRemoteLayer()) {
-      const emptyLink = DomUtil.createButton(
+      empty.hidden = false
-        'button umap-empty',
+      empty.addEventListener('click', () => this.empty())
-        advancedButtons,
-        translate('Empty'),
-        this.empty,
-        this
-      )
-    }
-    const cloneLink = DomUtil.createButton(
-      'button umap-clone',
-      advancedButtons,
-      translate('Clone'),
-      function () {
-        const datalayer = this.clone()
-        datalayer.edit()
-      },
-      this
-    )
-    if (this.createdOnServer) {
-      const filename = `${Utils.slugify(this.options.name)}.geojson`
-      const download = Utils.loadTemplate(`
-        <a class="button" href="${this._dataUrl()}" download="${filename}">
-          <i class="icon icon-24 icon-download"></i>${translate('Download')}
-        </a>`)
-      advancedButtons.appendChild(download)
     }
+    clone.addEventListener('click', () => this.clone().edit())
+    if (this.createdOnServer) download.hidden = false
     const backButton = DomUtil.createButtonIcon(
       undefined,
       'icon-back',

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

@@ -1096,44 +1096,38 @@ export default class Umap extends ServerStored {
       container,
       translate('Advanced actions')
     )
-    const advancedButtons = DomUtil.create('div', 'button-bar half', advancedActions)
+    const tpl = `
-    if (this.permissions.isOwner()) {
+    <div class="button-bar half">
-      const deleteButton = Utils.loadTemplate(`
+        <button class="button" type="button" data-ref=del hidden>
-        <button class="button" type="button">
           <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
-        </button>`)
+        </button>
-      deleteButton.addEventListener('click', () => this.del())
+        <button class="button" type="button" data-ref=clear hidden>
-      advancedButtons.appendChild(deleteButton)
+          <i class="icon icon-24 icon-empty"></i>${translate('Clear data')}
-
+        </button>
-      DomUtil.createButton(
+        <button class="button" type="button" data-ref=empty hidden>
-        'button umap-empty',
+          <i class="icon icon-24 icon-empty"></i>${translate('Remove layers')}
-        advancedButtons,
+        </button>
-        translate('Clear data'),
+        <button class="button" type="button" data-ref=clone>
-        this.emptyDataLayers,
+          <i class="icon icon-24 icon-clone"></i>${translate('Clone this map')}
-        this
+        </button>
-      )
+        <button class="button" type="button" data-ref=download>
-      DomUtil.createButton(
+          <i class="icon icon-24 icon-download"></i>${translate('Open share & download panel')}
-        'button umap-empty',
+        </button>
-        advancedButtons,
+    </div>
-        translate('Remove layers'),
+    `
-        this.removeDataLayers,
+    const [bar, { del, clear, empty, clone, download }] =
-        this
+      Utils.loadTemplateWithRefs(tpl)
-      )
+    advancedActions.appendChild(bar)
+    if (this.permissions.isOwner()) {
+      del.hidden = false
+      del.addEventListener('click', () => this.del())
+      clear.hidden = false
+      clear.addEventListener('click', () => this.emptyDataLayers())
+      empty.hidden = false
+      empty.addEventListener('click', () => this.removeDataLayers())
     }
-    DomUtil.createButton(
+    clone.addEventListener('click', () => this.clone())
-      'button umap-clone',
+    download.addEventListener('click', () => this.share.open())
-      advancedButtons,
-      translate('Clone this map'),
-      this.clone,
-      this
-    )
-    DomUtil.createButton(
-      'button umap-download',
-      advancedButtons,
-      translate('Open share & download panel'),
-      this.share.open,
-      this.share
-    )
   }
 
   edit() {