Fix setting up widgets containing HTMX code and unify the flow for results and widgets

This commit is contained in:
Mark Veidemanis 2022-08-26 07:20:30 +01:00
parent 2189381fa6
commit 553d4fd33f
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
3 changed files with 8 additions and 25 deletions

View File

@ -83,13 +83,11 @@
// 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;
container.outerHTML = "";
grid.addWidget(widgetelement);
htmx.process(widgetelement);

View File

@ -11,7 +11,6 @@
</p>
<div class="panel-block is-active">
<div class="control">
<div id="results">
{% include 'window-content/drilldown.html' %}
</div>
</div>
@ -19,16 +18,11 @@
</div>
</div>
</div>
</div>
<script>
//var contents = $("#drilldown-widget").outerHTML;
var contents = document.getElementById("drilldown-widget");
var grid = document.getElementById("grid-stack-main").gridstack;
grid.addWidget(contents.innerHTML);
contents.outerHTML = "";
grid.compact();
var widget_event = new Event('load-widget');
document.dispatchEvent(widget_event);
// because we remove the element the JS runs in
// so we need to run it again here
initTabs("{{ unique }}");
</script>

View File

@ -1,6 +1,6 @@
{% load static %}
<div id="drilldown-widget" style="display: block;">
<div id="drilldown-widget">
<div id="drilldown-widget-results" class="grid-stack-item" gs-w="10" gs-h="30" gs-y="10" gs-x="1">
<div class="grid-stack-item-content">
<div class="panel">
@ -52,16 +52,7 @@
</div>
<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);
// }
grid.removeWidget("drilldown-widget-results");
var widget_event = new Event('load-widget');
document.dispatchEvent(widget_event);
</script>