From 0ccde2af1b8e0f745bcf58724bcb355b3c1f17da Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Thu, 1 Sep 2022 19:59:27 +0100
Subject: [PATCH] Make all WM elements inherit from common templates

---
 core/templates/modals/context.html            | 226 +++++++++---------
 core/templates/modals/drilldown.html          |  16 +-
 .../{modals => partials}/context_table.html   |   0
 core/templates/widgets/drilldown.html         |  43 ++--
 core/templates/widgets/table_results.html     | 104 ++++----
 core/templates/windows/drilldown.html         |   2 +-
 core/templates/{partials => wm}/magnet.html   |   2 +-
 core/templates/wm/modal.html                  |  19 ++
 core/templates/{partials => wm}/panel.html    |   8 +-
 core/templates/wm/widget.html                 |  35 +++
 core/views/ui/drilldown.py                    |   5 +-
 11 files changed, 248 insertions(+), 212 deletions(-)
 rename core/templates/{modals => partials}/context_table.html (100%)
 rename core/templates/{partials => wm}/magnet.html (82%)
 create mode 100644 core/templates/wm/modal.html
 rename core/templates/{partials => wm}/panel.html (67%)
 create mode 100644 core/templates/wm/widget.html

diff --git a/core/templates/modals/context.html b/core/templates/modals/context.html
index 8fec36d..f005671 100644
--- a/core/templates/modals/context.html
+++ b/core/templates/modals/context.html
@@ -1,121 +1,121 @@
+{% extends 'wm/modal.html' %}
+
 {% load index %}
 {% load static %}
 
-<script src="{% static 'modal.js' %}"></script>
-<script>
-  document.addEventListener("restore-modal-scroll", function(event) {
-    var modalContent = document.getElementsByClassName("modal-content")[0];
-    var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
-    var scrollpos = localStorage.getItem('scrollpos_modal_content');
-    if (scrollpos == 'BOTTOM') {
-      modalContent.scrollTop = maxScroll;
-    } else if (scrollpos) {
-      modalContent.scrollTop = scrollpos;
-    };
-  });
+{% block scripts %}
+  <script>
+    document.addEventListener("restore-modal-scroll", function(event) {
+      var modalContent = document.getElementsByClassName("modal-content")[0];
+      var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
+      var scrollpos = localStorage.getItem('scrollpos_modal_content');
+      if (scrollpos == 'BOTTOM') {
+        modalContent.scrollTop = maxScroll;
+      } else if (scrollpos) {
+        modalContent.scrollTop = scrollpos;
+      };
+    });
 
-  document.addEventListener("htmx:beforeSwap", function(event) {
-    var modalContent = document.getElementsByClassName("modal-content")[0];
-    var scrollpos = modalContent.scrollTop;
-    if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
-      localStorage.setItem('scrollpos_modal_content', 'BOTTOM');
-    } else {
-      localStorage.setItem('scrollpos_modal_content', scrollpos);
+    document.addEventListener("htmx:beforeSwap", function(event) {
+      var modalContent = document.getElementsByClassName("modal-content")[0];
+      var scrollpos = modalContent.scrollTop;
+      if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
+        localStorage.setItem('scrollpos_modal_content', 'BOTTOM');
+      } else {
+        localStorage.setItem('scrollpos_modal_content', scrollpos);
+      }
+
+    });
+  </script>
+{% endblock %}
+
+{% block styles %}
+  <style>
+    #tab-content-{{ unique }} div {
+      display: none;
     }
 
-  });
-</script>
-<style>
-  #tab-content-{{ unique }} div {
-    display: none;
-  }
+    #tab-content-{{ unique }} div.is-active {
+        display: block;
+    }
+  </style>
+{% endblock %}
 
-  #tab-content-{{ unique }} div.is-active {
-      display: block;
-  }
-</style>
-
-<div id="modal" class="modal is-active is-clipped">
-  <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>
-          <li class="is-active" data-tab="1">
-            <a>
-              <span class="icon is-small"><i class="fa-solid fa-message-arrow-down"></i></span>
-              <span>Scrollback</span>
-            </a>
-          </li>
-          <li data-tab="2">
-            <a>
-              <span class="icon is-small"><i class="fa-solid fa-messages"></i></span>
-              <span>Context</span>
-            </a>
-          </li>
-          <li data-tab="3">
-            <a>
-              <span class="icon is-small"><i class="fa-solid fa-message"></i></span>
-              <span>Message</span>
-            </a>
-          </li>
-          <li data-tab="4">
-            <a>
-              <span class="icon is-small"><i class="fa-solid fa-asterisk"></i></span>
-              <span>Info</span>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <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' %}
-          {% if user.is_superuser and source == 'irc' %}
-            <form method="PUT">
-              <article class="field has-addons">
-                <article class="control is-expanded has-icons-left">
-                  <input id="context-input" name="msg" class="input" type="text" placeholder="Type your message here">
-                  <span class="icon is-small is-left">
-                    <i class="fas fa-magnifying-glass"></i>
-                  </span>
-                </article>
-                <article class="control">
-                  <article class="field">
-                    <button
-                      id="search"
-                      class="button is-info is-fullwidth"
-                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                      hx-put="{% url 'threshold_irc_msg' net num %}"
-                      hx-vals='{"channel": "{{ channel }}", "nick": "{{ nick }}"}'
-                      hx-trigger="click"
-                      hx-target="#context-input"
-                      hx-swap="outerHTML">
-                      Send
-                    </button>
-                  </article>
-                </article>
-              </article>
-            </form>
-          {% endif %}
-
-        </div>
-        <div data-content="2">
-          <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }} around {{ ts }}</h4>
-          Context
-        </div>
-        <div data-content="3">
-          <h4 class="subtitle is-4">Message details</h4>
-          Message deetails
-        </div>
-        <div data-content="4">
-          <h4 class="subtitle is-4">Information about {{ channel }} on {{ net }}{{ num }}</h4>
-          info
-        </div>
-      </div>
-    </div>
-    <script>initTabs("{{ unique }}");</script>
-    <button class="modal-close is-large" aria-label="close"></button>
+{% block modal_content %}
+  {% include 'partials/notify.html' %}
+  <div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
+    <ul>
+      <li class="is-active" data-tab="1">
+        <a>
+          <span class="icon is-small"><i class="fa-solid fa-message-arrow-down"></i></span>
+          <span>Scrollback</span>
+        </a>
+      </li>
+      <li data-tab="2">
+        <a>
+          <span class="icon is-small"><i class="fa-solid fa-messages"></i></span>
+          <span>Context</span>
+        </a>
+      </li>
+      <li data-tab="3">
+        <a>
+          <span class="icon is-small"><i class="fa-solid fa-message"></i></span>
+          <span>Message</span>
+        </a>
+      </li>
+      <li data-tab="4">
+        <a>
+          <span class="icon is-small"><i class="fa-solid fa-asterisk"></i></span>
+          <span>Info</span>
+        </a>
+      </li>
+    </ul>
   </div>
-</div>
+  <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 'partials/context_table.html' %}
+      {% if user.is_superuser and source == 'irc' %}
+        <form method="PUT">
+          <article class="field has-addons">
+            <article class="control is-expanded has-icons-left">
+              <input id="context-input" name="msg" class="input" type="text" placeholder="Type your message here">
+              <span class="icon is-small is-left">
+                <i class="fas fa-magnifying-glass"></i>
+              </span>
+            </article>
+            <article class="control">
+              <article class="field">
+                <button
+                  id="search"
+                  class="button is-info is-fullwidth"
+                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                  hx-put="{% url 'threshold_irc_msg' net num %}"
+                  hx-vals='{"channel": "{{ channel }}", "nick": "{{ nick }}"}'
+                  hx-trigger="click"
+                  hx-target="#context-input"
+                  hx-swap="outerHTML">
+                  Send
+                </button>
+              </article>
+            </article>
+          </article>
+        </form>
+      {% endif %}
+
+    </div>
+    <div data-content="2">
+      <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }} around {{ ts }}</h4>
+      Context
+    </div>
+    <div data-content="3">
+      <h4 class="subtitle is-4">Message details</h4>
+      Message deetails
+    </div>
+    <div data-content="4">
+      <h4 class="subtitle is-4">Information about {{ channel }} on {{ net }}{{ num }}</h4>
+      info
+    </div>
+  </div>
+  <script>initTabs("{{ unique }}");</script>
+{% endblock %}
diff --git a/core/templates/modals/drilldown.html b/core/templates/modals/drilldown.html
index cdddd17..4eab9de 100644
--- a/core/templates/modals/drilldown.html
+++ b/core/templates/modals/drilldown.html
@@ -1,13 +1,5 @@
-{% load index %}
-{% load static %}
+{% extends 'wm/modal.html' %}
 
-<script src="{% static 'modal.js' %}"></script>
-<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>
-    </div>
-  </div>
-</div>
\ No newline at end of file
+{% block modal_content %}
+  {% include 'window-content/drilldown.html' %}
+{% endblock %}
\ No newline at end of file
diff --git a/core/templates/modals/context_table.html b/core/templates/partials/context_table.html
similarity index 100%
rename from core/templates/modals/context_table.html
rename to core/templates/partials/context_table.html
diff --git a/core/templates/widgets/drilldown.html b/core/templates/widgets/drilldown.html
index b3bb94a..1b460c1 100644
--- a/core/templates/widgets/drilldown.html
+++ b/core/templates/widgets/drilldown.html
@@ -1,28 +1,19 @@
-<div id="drilldown-widget">
-  <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>
+{% extends 'wm/widget.html' %}
 
-<script>
-  var widget_event = new Event('load-widget');
-  document.dispatchEvent(widget_event);
-  // because we remove the element the JS runs in
-  // so we need to run it again here
+
+{% block widget_options %}
+  gs-w="5" gs-h="15"
+{% endblock %}
+
+{% block heading %}
+  Drilldown
+{% endblock %}
+
+{% block panel_content %}
+  {% include 'window-content/drilldown.html' %}
+{% endblock %}
+
+
+{% block custom_script_end %}
   initTabs("{{ unique }}");
-</script>
\ No newline at end of file
+{% endblock %}
\ No newline at end of file
diff --git a/core/templates/widgets/table_results.html b/core/templates/widgets/table_results.html
index 69d0711..e7efc1e 100644
--- a/core/templates/widgets/table_results.html
+++ b/core/templates/widgets/table_results.html
@@ -1,58 +1,54 @@
+{% extends 'wm/widget.html' %}
 {% load static %}
 
-<div id="drilldown-widget">
-  <div id="drilldown-widget-results" class="grid-stack-item" gs-w="10" gs-h="30" gs-y="10" gs-x="1">
-    <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-results"); //grid.compact();'></i>
-          Results
-        </p>
-        <div class="panel-block is-active">
-          <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>
-            </span>
-          
-            {{ table.data|length }} hits in {{ took }}ms
-            {% if exemption is not None %}
-              <span class="icon has-tooltip-bottom" data-tooltip="God mode">
-                <i class="fa-solid fa-book-bible"></i>
-              </span>
-            {% else %}
-              {% if redacted is not None %}
-                <span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
-                  <i class="fa-solid fa-mask"></i>
-                </span>
-              {% endif %}
-            {% endif %}
-            {% if delay is not None %}
-              <span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
-                <i class="fa-solid fa-clock"></i>
-              </span>
-            {% endif %}
-            {% if randomised is True %}
-              <span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
-                <i class="fa-solid fa-shuffle"></i>
-              </span>
-            {% endif %}
-          
-            {% include 'ui/drilldown/table_results_partial.html' %}
-            {% include 'ui/drilldown/sentiment_partial.html' %}
-            
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+{% block widget_options %}
+  gs-w="10" gs-h="30" gs-y="10" gs-x="1"
+{% endblock %}
 
-<script>
+{% block heading %}
+  Results
+{% endblock %}
+
+{% 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 panel_content %}
+  <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>
+  </span>
+
+  {{ table.data|length }} hits in {{ took }}ms
+  {% if exemption is not None %}
+    <span class="icon has-tooltip-bottom" data-tooltip="God mode">
+      <i class="fa-solid fa-book-bible"></i>
+    </span>
+  {% else %}
+    {% if redacted is not None %}
+      <span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
+        <i class="fa-solid fa-mask"></i>
+      </span>
+    {% endif %}
+  {% endif %}
+  {% if delay is not None %}
+    <span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
+      <i class="fa-solid fa-clock"></i>
+    </span>
+  {% endif %}
+  {% if randomised is True %}
+    <span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
+      <i class="fa-solid fa-shuffle"></i>
+    </span>
+  {% endif %}
+
+  {% include 'ui/drilldown/table_results_partial.html' %}
+  {% include 'ui/drilldown/sentiment_partial.html' %}
+{% endblock %}
+
+
+{% block custom_script %}
   grid.removeWidget("drilldown-widget-results");
-  var widget_event = new Event('load-widget');
-  document.dispatchEvent(widget_event);
-</script>
+{% endblock %}
diff --git a/core/templates/windows/drilldown.html b/core/templates/windows/drilldown.html
index b8aebb9..1b8fc99 100644
--- a/core/templates/windows/drilldown.html
+++ b/core/templates/windows/drilldown.html
@@ -1,4 +1,4 @@
-{% extends 'partials/magnet.html' %}
+{% extends 'wm/magnet.html' %}
 
 {% block heading %}
   Drilldown
diff --git a/core/templates/partials/magnet.html b/core/templates/wm/magnet.html
similarity index 82%
rename from core/templates/partials/magnet.html
rename to core/templates/wm/magnet.html
index ab81349..90be2f5 100644
--- a/core/templates/partials/magnet.html
+++ b/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 %}
 
diff --git a/core/templates/wm/modal.html b/core/templates/wm/modal.html
new file mode 100644
index 0000000..c5973af
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/core/templates/partials/panel.html b/core/templates/wm/panel.html
similarity index 67%
rename from core/templates/partials/panel.html
rename to core/templates/wm/panel.html
index 0fe0c75..12cf31e 100644
--- a/core/templates/partials/panel.html
+++ b/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>
-      <i
-        class="fa-solid fa-xmark has-text-grey-light ui-close"
-        data-script="on click remove the closest <nav/>"></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>
diff --git a/core/templates/wm/widget.html b/core/templates/wm/widget.html
new file mode 100644
index 0000000..51951ea
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/core/views/ui/drilldown.py b/core/views/ui/drilldown.py
index 7b754e8..feececb 100644
--- a/core/views/ui/drilldown.py
+++ b/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