Set a umap-fragment web component for lists

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')

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)

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 %}

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>