From a70e608e428170a989a97d80c3b8456e080cb71c Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 24 Feb 2025 17:05:54 +0100
Subject: [PATCH 1/2] chore: use template for map advanced buttons

---
 umap/static/umap/css/icon.css       |  6 +++
 umap/static/umap/js/modules/umap.js | 66 +++++++++++++----------------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/umap/static/umap/css/icon.css b/umap/static/umap/css/icon.css
index 047ca9a5..521e7529 100644
--- a/umap/static/umap/css/icon.css
+++ b/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);
 }
diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js
index bd5eb3e4..4b7f9792 100644
--- a/umap/static/umap/js/modules/umap.js
+++ b/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)
-    if (this.permissions.isOwner()) {
-      const deleteButton = Utils.loadTemplate(`
-        <button class="button" type="button">
+    const tpl = `
+    <div class="button-bar half">
+        <button class="button" type="button" data-ref=del hidden>
           <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
-        </button>`)
-      deleteButton.addEventListener('click', () => this.del())
-      advancedButtons.appendChild(deleteButton)
-
-      DomUtil.createButton(
-        'button umap-empty',
-        advancedButtons,
-        translate('Clear data'),
-        this.emptyDataLayers,
-        this
-      )
-      DomUtil.createButton(
-        'button umap-empty',
-        advancedButtons,
-        translate('Remove layers'),
-        this.removeDataLayers,
-        this
-      )
+        </button>
+        <button class="button" type="button" data-ref=clear hidden>
+          <i class="icon icon-24 icon-empty"></i>${translate('Clear data')}
+        </button>
+        <button class="button" type="button" data-ref=empty hidden>
+          <i class="icon icon-24 icon-empty"></i>${translate('Remove layers')}
+        </button>
+        <button class="button" type="button" data-ref=clone>
+          <i class="icon icon-24 icon-clone"></i>${translate('Clone this map')}
+        </button>
+        <button class="button" type="button" data-ref=download>
+          <i class="icon icon-24 icon-download"></i>${translate('Open share & download panel')}
+        </button>
+    </div>
+    `
+    const [bar, { del, clear, empty, clone, download }] =
+      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(
-      'button umap-clone',
-      advancedButtons,
-      translate('Clone this map'),
-      this.clone,
-      this
-    )
-    DomUtil.createButton(
-      'button umap-download',
-      advancedButtons,
-      translate('Open share & download panel'),
-      this.share.open,
-      this.share
-    )
+    clone.addEventListener('click', () => this.clone())
+    download.addEventListener('click', () => this.share.open())
   }
 
   edit() {

From ab571925ff4623d7910c785d302a668f38630839 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 24 Feb 2025 17:19:46 +0100
Subject: [PATCH 2/2] chore: use template for layer advanced buttons

---
 umap/static/umap/js/modules/data/layer.js | 54 ++++++++++-------------
 1 file changed, 23 insertions(+), 31 deletions(-)

diff --git a/umap/static/umap/js/modules/data/layer.js b/umap/static/umap/js/modules/data/layer.js
index b8f06bb5..dee5dd5b 100644
--- a/umap/static/umap/js/modules/data/layer.js
+++ b/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 deleteButton = Utils.loadTemplate(`
-      <button class="button" type="button">
+    const filename = `${Utils.slugify(this.options.name)}.geojson`
+    const tpl = `
+    <div class="button-bar half">
+      <button class="button" type="button" data-ref=del>
         <i class="icon icon-24 icon-delete"></i>${translate('Delete')}
-      </button>`)
-    deleteButton.addEventListener('click', () => {
+      </button>
+      <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(
-        'button umap-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)
+      empty.hidden = false
+      empty.addEventListener('click', () => this.empty())
     }
+    clone.addEventListener('click', () => this.clone().edit())
+    if (this.createdOnServer) download.hidden = false
     const backButton = DomUtil.createButtonIcon(
       undefined,
       'icon-back',