Keep position for widgets that are reloaded

core/templates/ui/drilldown/drilldown.html

@@ -82,15 +82,42 @@
     });
     // GridStack.init();
     setupTags();
+
+    // a widget is ready to be loaded
     document.addEventListener('load-widget', function(event) {
       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");
       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 = "";
 
-      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);
+
+      // run the JS scripts inside the added element again
+      // for instance, this will fix the dropdown
       for (var i = 0; i < scripts.length; i++) {
         eval(scripts[i].innerHTML);
       }

core/templates/ui/drilldown/search_partial.html

@@ -417,7 +417,7 @@
         value="{{ params.query_full }}"
         class="input"
         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">
         <i class="fas fa-magnifying-glass"></i>
       </span>
@@ -433,7 +433,7 @@
       class="input"
       type="tags"
       name="tags"
-      placeholder="Add tags"
+      placeholder="nick: john"
       value="{{ params.tags }}">
   </div>
   <div class="is-hidden"></div>

core/templates/widgets/table_results.html

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