From 7b5b5b1b2222bf76df340e1caf22b3f9ecc0dcef Mon Sep 17 00:00:00 2001
From: David Larlet <david@larlet.fr>
Date: Tue, 9 Jan 2024 14:45:16 -0500
Subject: [PATCH] Set a umap-fragment web component for lists

---
 umap/static/umap/js/umap.components.js | 13 +++++++++++++
 umap/templates/umap/content.html       |  6 ------
 umap/templates/umap/js.html            |  1 +
 umap/templates/umap/map_fragment.html  | 12 +++---------
 4 files changed, 17 insertions(+), 15 deletions(-)
 create mode 100644 umap/static/umap/js/umap.components.js

diff --git a/umap/static/umap/js/umap.components.js b/umap/static/umap/js/umap.components.js
new file mode 100644
index 00000000..652ca826
--- /dev/null
+++ b/umap/static/umap/js/umap.components.js
@@ -0,0 +1,13 @@
+class UmapFragment extends HTMLElement {
+  connectedCallback() {
+    new L.U.Map(this.firstElementChild.id, JSON.parse(this.dataset.settings))
+  }
+}
+
+function register(Class, tagName) {
+  if ('customElements' in window && !customElements.get(tagName)) {
+    customElements.define(tagName, Class)
+  }
+}
+
+register(UmapFragment, 'umap-fragment')
diff --git a/umap/templates/umap/content.html b/umap/templates/umap/content.html
index 29cc8329..1019bd6b 100644
--- a/umap/templates/umap/content.html
+++ b/umap/templates/umap/content.html
@@ -68,12 +68,6 @@
           callback: function (data) {
             const container = this.parentNode
             container.innerHTML = data
-            Array.prototype.forEach.call(
-              container.querySelectorAll('script:not([type="application/json"])'),
-              function (item) {
-                eval(item.firstChild.textContent)
-              }
-            )
             const more = document.querySelector('.more_button')
             if (more) {
               L.DomEvent.on(more, 'click', getMore, more)
diff --git a/umap/templates/umap/js.html b/umap/templates/umap/js.html
index 6f9cd75f..eb1429e3 100644
--- a/umap/templates/umap/js.html
+++ b/umap/templates/umap/js.html
@@ -58,4 +58,5 @@
         <script src="{{ STATIC_URL }}umap/js/umap.share.js" defer></script>
         <script src="{{ STATIC_URL }}umap/js/umap.js" defer></script>
         <script src="{{ STATIC_URL }}umap/js/umap.ui.js" defer></script>
+        <script src="{{ STATIC_URL }}umap/js/umap.components.js" defer></script>
 {% endcompress %}
diff --git a/umap/templates/umap/map_fragment.html b/umap/templates/umap/map_fragment.html
index 9aef37c9..12ef96d1 100644
--- a/umap/templates/umap/map_fragment.html
+++ b/umap/templates/umap/map_fragment.html
@@ -1,10 +1,4 @@
 {% load umap_tags %}
-<div id="{{ unique_id }}" class="map_fragment"></div>
-<!-- djlint:off -->
-<script type="text/javascript">
-  // Wait for JS modules to be loaded
-  window.addEventListener('DOMContentLoaded', (event) => {
-    new L.U.Map("{{ unique_id }}", {{ map_settings|notag|safe }})
-  });
-</script>
-<!-- djlint:on -->
+<umap-fragment data-settings='{{ map_settings|notag|safe }}'>
+  <div id="{{ unique_id }}" class="map_fragment"></div>
+</umap-fragment>