Sith/sas/templates/sas/album.jinja

200 lines
6.3 KiB
Django/Jinja

{% extends "core/base.jinja" %}
{% block title %}
{% trans %}SAS{% endtrans %}
{% endblock %}
{% macro print_path(file) %}
{% if file and file.parent %}
{{ print_path(file.parent) }}
<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> >
{% endif %}
{% endmacro %}
{% block content %}
<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(album.parent) }} {{ album.get_display_name() }}
<h3>{{ album.get_display_name() }}</h3>
<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a><br>
{% set start = timezone.now() %}
<hr>
{% set edit_mode = user.can_edit(album) %}
{% if edit_mode %}
<form action="" method="post" enctype="multipart/form-data" style="width: 100%;">
{% csrf_token %}
<p>
<input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}"> |
<input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}"> |
<input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}"> |
<input name="paste" type="submit" value="{% trans %}Paste{% endtrans %}">
</p>
{% if clipboard %}
<p>{% trans %}Clipboard: {% endtrans %}
<ul>
{% for f in clipboard %}
<li>{{ f.get_full_path() }}</li>
{% endfor %}
</ul>
</p>
{% endif %}
{% endif %}
<div>
{% for a in album.children_albums.order_by('-date') %}
<div style="display: inline-block;">
{% if edit_mode %}
<input type="checkbox" name="file_list" value="{{ a.id }}">
{% endif %}
{% if user.can_view(a) %}
<a href="{{ url("sas:album", album_id=a.id) }}" style="display: inline-block">
<div class="album{% if not a.is_moderated %} not_moderated{% endif %}">
<div>
{% if a.file %}
<img src="{{ a.get_download_url() }}" alt="{% trans %}preview{% endtrans %}">
{% else %}
<img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
{% endif %}
</div>
{{ a.name }}
</div>
</a>
{% endif %}
</div>
{% endfor %}
</div>
<div>
{% for p in album.children_pictures.order_by('id') %}
<div style="display: inline-block;">
{% if edit_mode %}
<input type="checkbox" name="file_list" value="{{ p.id }}">
{% endif %}
{% if user.can_view(p) %}
<div class="picture{% if not p.is_moderated %} not_moderated{% endif %}">
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
<img src="{{ p.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" />
</a>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% if edit_mode %}
</form>
{% endif %}
<form id="upload_form" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p() }}
<p><input type="submit" value="{% trans %}Upload{% endtrans %}" /></p>
</form>
<p style="font-size: small; color: #444;">{% trans %}Template generation time: {% endtrans %}
{{ timezone.now() - start }}
</p>
{% endblock %}
{% block script %}
{{ super() }}
<script>
$("form#upload_form").submit(function (event) {
var formData = new FormData($(this)[0]);
if(!formData.get('album_name') && !formData.get('images').name)
return false;
if(!formData.get('images').name) {
return true;
}
event.preventDefault();
var errorlist;
if((errorlist = this.querySelector('#upload_form ul.errorlist.nonfield')) === null) {
errorlist = document.createElement('ul');
errorlist.classList.add('errorlist', 'nonfield');
this.insertBefore(errorlist, this.firstElementChild);
}
while(errorlist.childElementCount > 0)
errorlist.removeChild(errorlist.firstElementChild);
var progress;
if((progress = this.querySelector('progress')) === null) {
progress = document.createElement('progress');
progress.value = 0;
var p = document.createElement('p');
p.appendChild(progress);
this.insertBefore(p, this.lastElementChild);
}
var dataHolder;
if(formData.get('album_name')) {
dataHolder = new FormData();
dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
dataHolder.set('album_name', formData.get('album_name'));
$.ajax({
method: 'POST',
url: "{{ url('sas:album_upload', album_id=object.id) }}",
data: dataHolder,
processData: false,
contentType: false,
success: onSuccess
});
}
var images = formData.getAll('images');
var imagesCount = images.length;
var completeCount = 0;
var poolSize = 1;
var imagePool = [];
while(images.length > 0 && imagePool.length < poolSize) {
var image = images.shift();
imagePool.push(image);
sendImage(image);
}
function sendImage(image) {
dataHolder = new FormData();
dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
dataHolder.set('images', image);
$.ajax({
method: 'POST',
url: "{{ url('sas:album_upload', album_id=object.id) }}",
data: dataHolder,
processData: false,
contentType: false,
})
.fail(onSuccess.bind(undefined, image))
.done(onSuccess.bind(undefined, image))
.always(next.bind(undefined, image));
}
function next(image, status, jqXHR) {
var index;
if(index = imagePool.indexOf(image) !== -1) {
imagePool.splice(index, 1);
}
var nextImage;
if(nextImage = images.shift()) {
imagePool.push(nextImage);
sendImage(nextImage);
}
}
function onSuccess(image, data, status, jqXHR) {
if ($(data.responseText).find('.errorlist.nonfield')[0])
var errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
else
var errors = []
while(errors.length > 0)
errorlist.appendChild(errors.shift());
progress.value = ++completeCount / imagesCount;
if(progress.value === 1 && errorlist.children.length === 0)
document.location.reload(true)
}
});
</script>
{% endblock %}