[PATCH v3 03/10] patch-detail: refactor JS code into submission.js

[Stephen Finucane]

On Fri, 2021-08-13 at 05:31 +0000, Raxel Gutierrez wrote:
> 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.
> 

This isn't entirely accurate since there's clearly more than code motion going
on here. The click listeners should have been added in the previous patch. I've
moved their removal to this patch and updated the commit message before applyin
both.

Thanks!

Stephen

> Signed-off-by: Raxel Gutierrez <raxel at google.com>
> ---
>  htdocs/js/submission.js                       | 42 +++++++++++++++++++
>  patchwork/templates/patchwork/submission.html | 23 +++-------
>  2 files changed, 47 insertions(+), 18 deletions(-)
>  create mode 100644 htdocs/js/submission.js
> 
> diff --git a/htdocs/js/submission.js b/htdocs/js/submission.js
> new file mode 100644
> index 0000000..9676f34
> --- /dev/null
> +++ b/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");
> +        });
> +    }
> +});
> \ No newline at end of file
> diff --git a/patchwork/templates/patchwork/submission.html b/patchwork/templates/patchwork/submission.html
> index 2e457cf..19d9413 100644
> --- a/patchwork/templates/patchwork/submission.html
> +++ b/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" %}