patch-detail: refactor JS code into submission.js

Move submission.html script code for toggling header info to a separate
submission.js file that makes the code easy to read and ready for change
in one place.

The listener is moved from the 'href' to separate, explicit click
listener.

Signed-off-by: Raxel Gutierrez <raxel@google.com>
[stephenfin: Removed existing JS href added in previous change and
             update commit message to reflect this]
Signed-off-by: Stephen Finucane <stephen@that.guru>

htdocs/js/submission.js

@@ -0,0 +1,42 @@
+$( document ).ready(function() {
+    function toggleDiv(link_id, headers_id, label_show, label_hide) {
+        const link = document.getElementById(link_id)
+        const headers = document.getElementById(headers_id)
+
+        const hidden = headers.style['display'] == 'none';
+
+        if (hidden) {
+            link.innerHTML = label_hide || 'hide';
+            headers.style['display'] = 'block';
+        } else {
+            link.innerHTML = label_show || 'show';
+            headers.style['display'] = 'none';
+        }
+    }
+
+    // Click listener to show/hide headers
+    document.getElementById("toggle-patch-headers").addEventListener("click", function() {
+        toggleDiv("toggle-patch-headers", "patch-headers");
+    });
+
+    // Click listener to expand/collapse series
+    document.getElementById("toggle-patch-series").addEventListener("click", function() {
+        toggleDiv("toggle-patch-series", "patch-series", "expand", "collapse");
+    });
+
+    // Click listener to show/hide related patches
+    let related = document.getElementById("toggle-related");
+    if (related) {
+        document.getElementById("toggle-related").addEventListener("click", function() {
+            toggleDiv("toggle-related", "related");
+        });
+    }
+
+    // Click listener to show/hide related patches from different projects
+    let relatedOutside = document.getElementById("toggle-related-outside");
+    if (relatedOutside) {
+        document.getElementById("toggle-related-outside").addEventListener("click", function() {
+            toggleDiv("toggle-related-outside", "related-outside", "show from other projects");
+        });
+    }
+});

patchwork/templates/patchwork/submission.html

@@ -4,28 +4,15 @@
 {% load syntax %}
 {% load person %}
 {% load patch %}
+{% load static %}
+
+{% block headers %}
+  <script type="module" src="{% static "js/submission.js" %}"></script>
+{% endblock %}
 
 {% block title %}{{submission.name}}{% endblock %}
 
 {% block body %}
-<script>
-function toggle_div(link_id, headers_id, label_show, label_hide)
-{
-    var link = document.getElementById(link_id)
-    var headers = document.getElementById(headers_id)
-
-    var hidden = headers.style['display'] == 'none';
-
-    if (hidden) {
-        link.innerHTML = label_hide || 'hide';
-        headers.style['display'] = 'block';
-    } else {
-        link.innerHTML = label_show || 'show';
-        headers.style['display'] = 'none';
-    }
-
-}
-</script>
 
 <div>
   {% include "patchwork/partials/download-buttons.html" %}
@@ -62,7 +49,7 @@ <h1>{{ submission.name }}</h1>
  <tr>
   <th>Headers</th>
   <td>
-    <a id="toggle-patch-headers" href="javascript:toggle_div('toggle-patch-headers', 'patch-headers')">show</a>
+    <a id="toggle-patch-headers">show</a>
     <div id="patch-headers" class="patch-headers" style="display:none;">
       <pre>{{submission.headers}}</pre>
     </div>
@@ -75,7 +62,7 @@ <h1>{{ submission.name }}</h1>
    <a href="{% url 'patch-list' project_id=project.linkname %}?series={{ submission.series.id }}">
     {{ submission.series.name }}
    </a> |
-   <a id="toggle-patch-series" href="javascript:toggle_div('toggle-patch-series', 'patch-series', 'expand', 'collapse')">expand</a>
+   <a id="toggle-patch-series">expand</a>
    <div id="patch-series" class="submission-list" style="display:none;">
     <ul>
      {% with submission.series.cover_letter as cover %}
@@ -111,7 +98,7 @@ <h1>{{ submission.name }}</h1>
  <tr>
   <th>Related</th>
   <td>
-   <a id="toggle-related" href="javascript:toggle_div('toggle-related', 'related')">show</a>
+   <a id="toggle-related">show</a>
    <div id="related" class="submission-list" style="display:none;">
     <ul>
      {% for sibling in related_same_project %}