Make all WM elements inherit from common templates

core/templates/modals/context.html

@@ -1,7 +1,9 @@
+{% extends 'wm/modal.html' %}
+
 {% load index %}
 {% load static %}
 
-<script src="{% static 'modal.js' %}"></script>
+{% block scripts %}
   <script>
     document.addEventListener("restore-modal-scroll", function(event) {
       var modalContent = document.getElementsByClassName("modal-content")[0];
@@ -25,6 +27,9 @@
 
     });
   </script>
+{% endblock %}
+
+{% block styles %}
   <style>
     #tab-content-{{ unique }} div {
       display: none;
@@ -34,11 +39,9 @@
         display: block;
     }
   </style>
+{% endblock %}
 
-<div id="modal" class="modal is-active is-clipped">
+{% block modal_content %}
-  <div class="modal-background"></div>
-  <div class="modal-content">
-    <div class="box">
   {% include 'partials/notify.html' %}
   <div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
     <ul>
@@ -71,7 +74,7 @@
   <div id="tab-content-{{ unique }}">
     <div class="is-active" data-content="1">
       <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
-          {% include 'modals/context_table.html' %}
+      {% include 'partials/context_table.html' %}
       {% if user.is_superuser and source == 'irc' %}
         <form method="PUT">
           <article class="field has-addons">
@@ -114,8 +117,5 @@
       info
     </div>
   </div>
-    </div>
   <script>initTabs("{{ unique }}");</script>
-    <button class="modal-close is-large" aria-label="close"></button>
+{% endblock %}
-  </div>
-</div>

core/templates/modals/drilldown.html

@@ -1,13 +1,5 @@
-{% load index %}
+{% extends 'wm/modal.html' %}
-{% load static %}
 
-<script src="{% static 'modal.js' %}"></script>
+{% block modal_content %}
-<div id="modal" class="modal is-active is-clipped">
-  <div class="modal-background"></div>
-  <div class="modal-content">
-    <div class="box">
   {% include 'window-content/drilldown.html' %}
-      <button class="modal-close is-large" aria-label="close"></button>
+{% endblock %}
-    </div>
-  </div>
-</div>

core/templates/widgets/drilldown.html

@@ -1,28 +1,19 @@
-<div id="drilldown-widget">
+{% extends 'wm/widget.html' %}
-  <div id="drilldown-widget-{{ unique }}" class="grid-stack-item" gs-w="5" gs-h="15">
-    <div class="grid-stack-item-content">
-      <div class="panel">
-        <p class="panel-heading" style="padding: .2em; line-height: .5em;">
-          <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
-          <i
-            class="fa-solid fa-xmark has-text-grey-light ui-close"
-            onclick='grid.removeWidget("drilldown-widget-{{ unique }}"); grid.compact();'></i>
-          Drilldown
-        </p>
-        <div class="panel-block is-active">
-          <div class="control">
-            {% include 'window-content/drilldown.html' %}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 
-<script>
+
-  var widget_event = new Event('load-widget');
+{% block widget_options %}
-  document.dispatchEvent(widget_event);
+  gs-w="5" gs-h="15"
-  // because we remove the element the JS runs in
+{% endblock %}
-  // so we need to run it again here
+
+{% block heading %}
+  Drilldown
+{% endblock %}
+
+{% block panel_content %}
+  {% include 'window-content/drilldown.html' %}
+{% endblock %}
+
+
+{% block custom_script_end %}
   initTabs("{{ unique }}");
-</script>
+{% endblock %}

core/templates/widgets/table_results.html

@@ -1,18 +1,21 @@
+{% extends 'wm/widget.html' %}
 {% load static %}
 
-<div id="drilldown-widget">
+{% block widget_options %}
-  <div id="drilldown-widget-results" class="grid-stack-item" gs-w="10" gs-h="30" gs-y="10" gs-x="1">
+  gs-w="10" gs-h="30" gs-y="10" gs-x="1"
-    <div class="grid-stack-item-content">
+{% endblock %}
-      <div class="panel">
+
-        <p class="panel-heading" style="padding: .2em; line-height: .5em;">
+{% block heading %}
-          <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
+  Results
+{% endblock %}
+
+{% block close_button %}
   <i
     class="fa-solid fa-xmark has-text-grey-light ui-close"
-            onclick='grid.removeWidget("drilldown-widget-results"); //grid.compact();'></i>
+    onclick='grid.removeWidget("drilldown-widget-{{ unique }}"); //grid.compact();'></i>
-          Results
+{% endblock %}
-        </p>
+
-        <div class="panel-block is-active">
+{% block panel_content %}
-          <div class="control">
   <script src="{% static 'js/column-shifter.js' %}"></script>
   <span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
     <i class="fa-solid fa-chart-mixed"></i>
@@ -43,16 +46,9 @@
 
   {% include 'ui/drilldown/table_results_partial.html' %}
   {% include 'ui/drilldown/sentiment_partial.html' %}
+{% endblock %}
 
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 
-<script>
+{% block custom_script %}
   grid.removeWidget("drilldown-widget-results");
-  var widget_event = new Event('load-widget');
+{% endblock %}
-  document.dispatchEvent(widget_event);
-</script>

core/templates/windows/drilldown.html

@@ -1,4 +1,4 @@
-{% extends 'partials/magnet.html' %}
+{% extends 'wm/magnet.html' %}
 
 {% block heading %}
   Drilldown

core/templates/wm/magnet.html

@@ -1,5 +1,5 @@
 <magnet-block attract-distance="10" align-to="outer|center" class="floating-window">
-  {% extends 'partials/panel.html' %}
+  {% extends 'wm/panel.html' %}
   {% block heading %}
   {% endblock %}
 

core/templates/wm/modal.html

@@ -0,0 +1,19 @@
+{% load static %}
+
+<script src="{% static 'modal.js' %}"></script>
+{% block scripts %}
+{% endblock %}
+
+{% block styles %}
+{% endblock %}
+
+<div id="modal" class="modal is-active is-clipped">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+    <div class="box">
+      {% block modal_content %}
+      {% endblock %}
+      <button class="modal-close is-large" aria-label="close"></button>
+    </div>
+  </div>
+</div>

core/templates/wm/panel.html

@@ -2,9 +2,11 @@
   <nav class="panel">
     <p class="panel-heading" style="padding: .2em; line-height: .5em;">
       <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
+      {% block close_button %}
         <i
           class="fa-solid fa-xmark has-text-grey-light ui-close"
           data-script="on click remove the closest <nav/>"></i>
+      {% endblock %}
       {% block heading %}
       {% endblock %}
     </p>

core/templates/wm/widget.html

@@ -0,0 +1,35 @@
+<div id="drilldown-widget">
+  <div id="drilldown-widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% endblock %}>
+    <div class="grid-stack-item-content">
+
+      <nav class="panel">
+        <p class="panel-heading" style="padding: .2em; line-height: .5em;">
+          <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
+          {% block close_button %}
+            <i
+              class="fa-solid fa-xmark has-text-grey-light ui-close"
+              onclick='grid.removeWidget("drilldown-widget-{{ unique }}"); grid.compact();'></i>
+          {% endblock %}
+          {% block heading %}
+          {% endblock %}
+        </p>
+        <article class="panel-block is-active">
+          <div class="control">
+            {% block panel_content %}
+            {% endblock %}
+          </div>
+        </article>
+      </nav>
+    </div>
+  </div>
+</div>
+
+<script>
+  {% block custom_script %}
+  {% endblock %}
+  var widget_event = new Event('load-widget');
+  document.dispatchEvent(widget_event);
+  {% block custom_script_end %}
+  {% endblock %}
+</script>
+  

core/views/ui/drilldown.py

@@ -206,7 +206,8 @@ def drilldown_search(request, return_context=False, template=None):
         context["class"] = "warning"
 
     # unique = str(uuid.uuid4())[:8]
-    # context["unique"] = unique
+    context["unique"] = "results"
+    context["widget_options"] = ""
 
     response = render(request, template_name, context)
     if request.GET:
@@ -289,7 +290,7 @@ class DrilldownContextModal(APIView):
 
     def post(self, request):
         if request.resolver_match.url_name == "modal_context_table":
-            self.template_name = "modals/context_table.html"
+            self.template_name = "partials/context_table.html"
 
         size = 20
         nicks_sensitive = None