Keep position for widgets that are reloaded
This commit is contained in:
parent
79a8e5f6e4
commit
f26daa2cb4
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 %}
|
|
||||||
|
|
Loading…
Reference in New Issue