Make widgets play nice with HTMX

core/templates/base.html

@@ -19,7 +19,7 @@
     <link rel="stylesheet" href="{% static 'css/gridstack.min.css' %}">
     <script src="{% static 'js/bulma-calendar.min.js' %}" integrity="sha384-DThNif0xGXbopX7+PE+UabkuClfI/zELNhaVqoGLutaWB76dyMw0vIQBGmUxSfVQ" crossorigin="anonymous"></script>
     <script src="{% static 'js/bulma-slider.min.js' %}" integrity="sha384-wbyps8iLG8QzJE02viYc/27BtT5HSa11+b5V7QPR1/huVuA8f4LRTNGc82qAIeIZ" crossorigin="anonymous"></script>
-    <script defer src="{% static 'js/htmx.min.js' %}" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
+    <script src="{% static 'js/htmx.min.js' %}" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
     <script defer src="{% static 'js/remove-me.js' %}" integrity="sha384-6fHcFNoQ8QEI3ZDgw9Z/A6Brk64gF7AnFbLgdrumo8/kBbsKQ/wo7wPegj5WkzuG" crossorigin="anonymous"></script>
     <script defer src="{% static 'js/hyperscript.min.js' %}" integrity="sha384-6GYN8BDHOJkkru6zcpGOUa//1mn+5iZ/MyT6mq34WFIpuOeLF52kSi721q0SsYF9" crossorigin="anonymous"></script>
     <script src="{% static 'js/bulma-tagsinput.min.js' %}"></script>

core/templates/ui/drilldown/drilldown.html

@@ -70,6 +70,35 @@
       </div>
     </div>
   </div>
+
+  <script>
+    var grid = GridStack.init({
+      cellHeight: 20,
+      cellWidth: 50,
+      auto: true,
+      float: true,
+      draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
+      removable: false,
+    });
+    // GridStack.init();
+    setupTags();
+    document.addEventListener('load-widget', function(event) {
+      grid.removeWidget("drilldown-widget-results");
+
+      let container = htmx.find('#drilldown-widget');
+      var scripts = htmx.findAll(container, "script");
+      let widgetelement = container.firstElementChild.cloneNode(true);
+      container.firstElementChild.remove();
+      //let grid = document.querySelector('.grid-stack').gridstack;
+      grid.addWidget(widgetelement);
+
+      htmx.process(widgetelement);
+      for (var i = 0; i < scripts.length; i++) {
+        eval(scripts[i].innerHTML);
+      }
+    });
+  </script>
+
   <div id="modals-here">
   </div>
   <div id="items-here">
@@ -82,31 +111,7 @@
     {% endif %}
   </div>
   <script>
-    var grid = GridStack.init({
-      cellHeight: 20,
-      cellWidth: 50,
-      auto: true,
-      float: true,
-      draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
-      removable: false,
-    });
-    // GridStack.init();
-    setupTags();
 
   </script>
-  {% if table %}
-    <script>
-    //var contents = $("#drilldown-widget").outerHTML;
-    var contents = document.getElementById("drilldown-widget");
-    var scripts = contents.getElementsByTagName("script");
-    var grid = document.getElementById("grid-stack-main").gridstack;
-    grid.addWidget(contents.innerHTML);
-    contents.outerHTML = "";
-    // restore scripts that aren't going to be run
-    for (var i = 0; i < scripts.length; i++) {
-      eval(scripts[i].innerHTML);
-    }
-    </script>
     
-  {% endif %}
 {% endblock %}

core/templates/widgets/table_results.html

@@ -52,17 +52,16 @@
 </div>
 
 <script>
-  if (typeof grid != "undefined") {
-    grid.removeWidget("drilldown-widget-results");
-    //var contents = $("#drilldown-widget").outerHTML;
-    var contents = document.getElementById("drilldown-widget");
-    var scripts = contents.getElementsByTagName("script");
-    var grid = document.getElementById("grid-stack-main").gridstack;
-    grid.addWidget(contents.innerHTML);
-    contents.outerHTML = "";
-    // restore scripts that aren't going to be run
-    for (var i = 0; i < scripts.length; i++) {
-      eval(scripts[i].innerHTML);
-    }
-  }
-</script>
+  // let container = htmx.find('#drilldown-widget');
+  // var scripts = container.getElementsByTagName("script");
+  // let widgetelement = container.firstElementChild.cloneNode(true);
+  // container.firstElementChild.remove();
+  // //let grid = document.querySelector('.grid-stack').gridstack;
+  // grid.addWidget(widgetelement);
+  // htmx.process(widgetelement);
+  // for (var i = 0; i < scripts.length; i++) {
+  //   eval(scripts[i].innerHTML);
+  // }
+  var widget_event = new Event('load-widget');
+  document.dispatchEvent(widget_event);
+</script>