104 lines
3.7 KiB
HTML
104 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% load joinsep %}
|
|
{% block content %}
|
|
<div class="grid-stack" id="grid-stack-main">
|
|
<script>
|
|
var grid = GridStack.init({
|
|
cellHeight: 20,
|
|
cellWidth: 50,
|
|
cellHeightUnit: 'px',
|
|
auto: true,
|
|
float: true,
|
|
draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
|
|
removable: false,
|
|
animate: true,
|
|
});
|
|
// GridStack.init();
|
|
|
|
// a widget is ready to be loaded
|
|
document.addEventListener('load-widget', function(event) {
|
|
let containers = htmx.findAll('#widget');
|
|
for (let x = 0, len = containers.length; x < len; x++) {
|
|
container = containers[x];
|
|
// get the scripts, they won't be run on the new element so we need to eval them
|
|
let widgetelement = container.firstElementChild.cloneNode(true);
|
|
console.log(widgetelement);
|
|
var scripts = htmx.findAll(widgetelement, "script");
|
|
var new_id = widgetelement.id;
|
|
|
|
// check if there's an existing element like the one we want to swap
|
|
let grid_element = htmx.find('#grid-stack-main');
|
|
let existing_widget = htmx.find(grid_element, "#"+new_id);
|
|
|
|
// get the size and position attributes
|
|
if (existing_widget) {
|
|
let attrs = existing_widget.getAttributeNames();
|
|
for (let i = 0, len = attrs.length; i < len; i++) {
|
|
if (attrs[i].startsWith('gs-')) { // only target gridstack attributes
|
|
widgetelement.setAttribute(attrs[i], existing_widget.getAttribute(attrs[i]));
|
|
}
|
|
}
|
|
}
|
|
// clear the queue element
|
|
container.outerHTML = "";
|
|
// container.firstElementChild.outerHTML = "";
|
|
grid.addWidget(widgetelement);
|
|
|
|
// re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
|
|
htmx.process(widgetelement);
|
|
|
|
// update the size of the widget according to its content
|
|
var added_widget = htmx.find(grid_element, "#"+new_id);
|
|
var itemContent = htmx.find(added_widget, ".control");
|
|
var scrollheight = itemContent.scrollHeight+80;
|
|
var verticalmargin = 0;
|
|
var cellheight = grid.opts.cellHeight;
|
|
var height = Math.ceil((scrollheight + verticalmargin) / (cellheight + verticalmargin));
|
|
var opts = {
|
|
h: height,
|
|
}
|
|
grid.update(
|
|
added_widget,
|
|
opts
|
|
);
|
|
|
|
// run the JS scripts inside the added element again
|
|
for (var i = 0; i < scripts.length; i++) {
|
|
eval(scripts[i].innerHTML);
|
|
}
|
|
}
|
|
// clear the containers we just added
|
|
// for (let x = 0, len = containers.length; x < len; x++) {
|
|
// container = containers[x];
|
|
// container.inner = "";
|
|
// }
|
|
grid.compact();
|
|
});
|
|
</script>
|
|
<!-- <div>
|
|
<div
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{# url 'example' type='widget' #}"
|
|
hx-target="#widgets-here"
|
|
hx-trigger="load"
|
|
hx-swap="afterend"
|
|
style="display: none;"></div>
|
|
<div
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{# url 'example' type='widget' #}"
|
|
hx-target="#widgets-here"
|
|
hx-trigger="load"
|
|
hx-swap="afterend"
|
|
style="display: none;"></div>
|
|
<div
|
|
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
|
hx-get="{# url 'example' type='widget' #}"
|
|
hx-target="#widgets-here"
|
|
hx-trigger="load"
|
|
hx-swap="afterend"
|
|
style="display: none;"></div>
|
|
</div> -->
|
|
|
|
{% endblock %}
|