Sith/core/templates/core/user_pictures.jinja

{% extends "core/base.jinja" %}

{%- block additional_css -%}
    <link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
{%- endblock -%}

{% block title %}
{% trans user_name=profile.get_display_name() %}{{ user_name }}'s pictures{% endtrans %}
{% endblock %}

{% block content %}
    <main>
    {% if can_edit(profile, user) %}
        <button id="download_all_pictures", onclick=download_pictures()>{% trans %}Download all my pictures{% endtrans %}</button>
    {% endif %}
    {% for a in albums %}
        <h4>{{ a.name }}</h4>
        <div class="photos">
            {% for p in pictures[a.id] %}
                {% if p.can_be_viewed_by(user) %}
                    <a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
                        <div
                            class="photo{% if not p.is_moderated %} not_moderated{% endif %}"
                            style="background-image: url('{% if p.file %}{{ p.get_download_thumb_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
                        >
                            {% if not p.is_moderated %}
                                <div class="overlay">&nbsp;</div>
                                <div class="text">{% trans %}To be moderated{% endtrans %}</div>
                            {% else %}
                                <div class="text">&nbsp;</div>
                            {% endif %}
                        </div>
                    </a>
                {% else %}
                    <div>
                        <div class="photo">
                            <div class="text">{% trans %}Picture Unavailable{% endtrans %}</div>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <br>
    {% endfor %}
    </main>
{% endblock %}

{% block script %}
    {{ super() }}
    <script type="text/javascript">
        /**
         * Download a list of files.
         * @author speedplane
         */
        function download_files(files) {
          function download_next(i) {
            if (i >= files.length) {
              return;
            }
            var a = document.createElement('a');
            a.href = files[i].download;
            a.target = '_parent';
            // Use a.download if available, it prevents plugins from opening.
            if ('download' in a) {
              a.download = files[i].filename;
            }
            // Add a to the doc for click to work.
            (document.body || document.documentElement).appendChild(a);
            if (a.click) {
              a.click(); // The click method is supported by most browsers.
            } else {
              $(a).click(); // Backup using jquery
            }
            // Delete the temporary link.
            a.parentNode.removeChild(a);
            // Download the next file with a small timeout. The timeout is necessary
            // for IE, which will otherwise only download the first file.
            setTimeout(function() {
              download_next(i + 1);
            }, 500);
          }
          // Initiate the first download.
          download_next(0);
        }
        function download_pictures() {
            $("#download_all_pictures").prop("disabled", true);
            const xhr = new XMLHttpRequest();
            $.ajax({
                type: "GET",
                url: "{{ url('api:pictures') }}?users_identified={{ object.id }}",
                tryCount: 0,
                xhr: function(){
                     return xhr;
                },
                success: function(data){
                    $("#download_all_pictures").prop("disabled", false);
                    to_download = [];
                    data.forEach(picture => 
                        to_download.push({ download: picture["full_size_url"], filename: picture["name"] })
                    );
                    download_files(to_download);
                },
                error: function(data){
                    console.log("Error retrieving data from url: " + data);
                    $("#download_all_pictures").text("{% trans %}Error downloading your pictures{% endtrans %}");
                }
            });
        }
    </script>
{% endblock %}