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(); // GridStack.init();
setupTags(); setupTags();
document.addEventListener('load-widget', function(event) { document.addEventListener('load-widget', function(event) {
grid.removeWidget("drilldown-widget-results");
let container = htmx.find('#drilldown-widget'); let container = htmx.find('#drilldown-widget');
var scripts = htmx.findAll(container, "script"); var scripts = htmx.findAll(container, "script");
let widgetelement = container.firstElementChild.cloneNode(true); let widgetelement = container.firstElementChild.cloneNode(true);
container.firstElementChild.remove(); container.outerHTML = "";
//let grid = document.querySelector('.grid-stack').gridstack;
grid.addWidget(widgetelement); grid.addWidget(widgetelement);
htmx.process(widgetelement); htmx.process(widgetelement);

View File

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

View File

@ -1,6 +1,6 @@
{% load static %} {% 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 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="grid-stack-item-content">
<div class="panel"> <div class="panel">
@ -52,16 +52,7 @@
</div> </div>
<script> <script>
// let container = htmx.find('#drilldown-widget'); grid.removeWidget("drilldown-widget-results");
// 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'); var widget_event = new Event('load-widget');
document.dispatchEvent(widget_event); document.dispatchEvent(widget_event);
</script> </script>