Keep position for widgets that are reloaded

This commit is contained in:
Mark Veidemanis 2022-09-02 07:20:30 +01:00
parent 79a8e5f6e4
commit f26daa2cb4
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
3 changed files with 30 additions and 8 deletions

View File

@ -82,15 +82,42 @@
}); });
// GridStack.init(); // GridStack.init();
setupTags(); setupTags();
// a widget is ready to be loaded
document.addEventListener('load-widget', function(event) { document.addEventListener('load-widget', function(event) {
let container = htmx.find('#drilldown-widget'); let container = htmx.find('#drilldown-widget');
// get the scripts, they won't be run on the new element so we need to eval them
var scripts = htmx.findAll(container, "script"); var scripts = htmx.findAll(container, "script");
let widgetelement = container.firstElementChild.cloneNode(true); let widgetelement = container.firstElementChild.cloneNode(true);
// 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, '#drilldown-widget-results');
// 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.outerHTML = "";
grid.addWidget(widgetelement); // temporary workaround, other widgets can be duplicated, but not results
if (widgetelement.id == 'drilldown-widget-results') {
grid.removeWidget("drilldown-widget-{{ unique }}");
}
grid.addWidget(widgetelement);
// re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
htmx.process(widgetelement); htmx.process(widgetelement);
// run the JS scripts inside the added element again
// for instance, this will fix the dropdown
for (var i = 0; i < scripts.length; i++) { for (var i = 0; i < scripts.length; i++) {
eval(scripts[i].innerHTML); eval(scripts[i].innerHTML);
} }

View File

@ -417,7 +417,7 @@
value="{{ params.query_full }}" value="{{ params.query_full }}"
class="input" class="input"
type="text" type="text"
placeholder="msg: science AND nick: BillNye AND channel: #science"> placeholder="msg: science AND src: 4ch AND channel: 100293">
<span class="icon is-small is-left"> <span class="icon is-small is-left">
<i class="fas fa-magnifying-glass"></i> <i class="fas fa-magnifying-glass"></i>
</span> </span>
@ -433,7 +433,7 @@
class="input" class="input"
type="tags" type="tags"
name="tags" name="tags"
placeholder="Add tags" placeholder="nick: john"
value="{{ params.tags }}"> value="{{ params.tags }}">
</div> </div>
<div class="is-hidden"></div> <div class="is-hidden"></div>

View File

@ -47,8 +47,3 @@
{% include 'ui/drilldown/table_results_partial.html' %} {% include 'ui/drilldown/table_results_partial.html' %}
{% include 'ui/drilldown/sentiment_partial.html' %} {% include 'ui/drilldown/sentiment_partial.html' %}
{% endblock %} {% endblock %}
{% block custom_script %}
grid.removeWidget("drilldown-widget-{{ unique }}");
{% endblock %}