mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-01 07:35:17 +00:00
Started working on the SAS css
This commit is contained in:
Julien Constant
parent
6374021216
commit
b7f6a7f370
208
core/static/sas/album.scss
Normal file
208
core/static/sas/album.scss
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
|
||||||
|
.navbar {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
> a,
|
||||||
|
> input {
|
||||||
|
padding: 0.4em;
|
||||||
|
margin: 0.1em;
|
||||||
|
font-size: 1.2em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
color: black;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #d4d4d4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-files {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
> .inputs {
|
||||||
|
align-items: flex-end;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
> p {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: calc(100% / 3);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> input {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> input {
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: calc(100% / 3);
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.clipboard {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(0,0,0,.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: fit-content;
|
||||||
|
background-color: rgba(0,0,0,.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px 0 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photos {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
> .photo {
|
||||||
|
background-color: rgba(0, 0, 0, .5);
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
background-position: center center;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
> input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
margin: 5px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
> img {
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.albums {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
> a {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
> input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
margin: 5px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> .album {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
|
||||||
|
width: calc(16 / 9 * 128px);
|
||||||
|
height: 128px;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
|
border-radius: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
background: rgba(0, 0, 0, .3);
|
||||||
|
background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,202 +1,249 @@
|
|||||||
{% extends "core/base.jinja" %}
|
{% extends "core/base.jinja" %}
|
||||||
{% from "core/macros.jinja" import paginate %}
|
{% from "core/macros.jinja" import paginate %}
|
||||||
|
|
||||||
|
{%- block additional_css -%}
|
||||||
|
<link rel="stylesheet" href="{{ scss('core/override.scss') }}">
|
||||||
|
<link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
|
||||||
|
{%- endblock -%}
|
||||||
|
|
||||||
{% block title %}
|
{% block title %}
|
||||||
{% trans %}SAS{% endtrans %}
|
{% trans %}SAS{% endtrans %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% macro print_path(file) %}
|
{% macro print_path(file) %}
|
||||||
{% if file and file.parent %}
|
{% if file and file.parent %}
|
||||||
{{ print_path(file.parent) }}
|
{{ print_path(file.parent) }}
|
||||||
<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> >
|
<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> /
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(album.parent) }} {{ album.get_display_name() }}
|
<code>
|
||||||
<h3>{{ album.get_display_name() }}</h3>
|
<a href="{{ url('sas:main') }}">SAS</a> / {{ print_path(album.parent) }} {{ album.get_display_name() }}
|
||||||
<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a><br>
|
</code>
|
||||||
{% set start = timezone.now() %}
|
|
||||||
<hr>
|
{% set edit_mode = user.can_edit(album) %}
|
||||||
{% set edit_mode = user.can_edit(album) %}
|
{% set start = timezone.now() %}
|
||||||
{% if edit_mode %}
|
|
||||||
<form action="" method="post" enctype="multipart/form-data" style="width: 100%;">
|
{% if edit_mode %}
|
||||||
{% csrf_token %}
|
<form action="" method="post" enctype="multipart/form-data">
|
||||||
<p>
|
{% csrf_token %}
|
||||||
<input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}"> |
|
|
||||||
<input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}"> |
|
<div class="navbar">
|
||||||
<input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}"> |
|
<h3>{{ album.get_display_name() }}</h3>
|
||||||
<input name="paste" type="submit" value="{% trans %}Paste{% endtrans %}">
|
|
||||||
</p>
|
<div class="toolbar">
|
||||||
{% if clipboard %}
|
<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a>
|
||||||
<p>{% trans %}Clipboard: {% endtrans %}
|
<input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}">
|
||||||
<ul>
|
<input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}">
|
||||||
{% for f in clipboard %}
|
<input name="paste" type="submit" value="{% trans %}Paste{% endtrans %}">
|
||||||
<li>{{ f.get_full_path() }}</li>
|
</div>
|
||||||
{% 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>
|
</div>
|
||||||
{{ a.name }}
|
|
||||||
|
{% if clipboard %}
|
||||||
|
<div class="clipboard">
|
||||||
|
{% trans %}Clipboard: {% endtrans %}
|
||||||
|
<ul>
|
||||||
|
{% for f in clipboard %}
|
||||||
|
<li>{{ f.get_full_path() }}</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
<input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}">
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if album.children_albums.count() > 0 %}
|
||||||
|
<h4>{% trans %}Albums{% endtrans %}</h4>
|
||||||
|
<div class="albums">
|
||||||
|
{% for a in album.children_albums.order_by('-date') %}
|
||||||
|
{% if user.can_view(a) %}
|
||||||
|
<a href="{{ url("sas:album", album_id=a.id) }}">
|
||||||
|
<div
|
||||||
|
class="album {% if a.is_moderated %}moderated{% endif %}"
|
||||||
|
style="background-image: url('{% if a.file %}{{ a.get_download_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
{{ a.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if edit_mode %}
|
||||||
|
<input type="checkbox" name="file_list" value="{{ a.id }}">
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
{% endif %}
|
<br>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<h4>{% trans %}Photos{% endtrans %}</h4>
|
||||||
|
{% if pictures | length != 0 %}
|
||||||
|
{% set max = (pictures | length // 6) if pictures | length > 6 else 1 %}
|
||||||
|
<div class="photos">
|
||||||
|
{% for p in pictures %}
|
||||||
|
<div class="photo{% if not p.is_moderated %} moderation{% endif %}">
|
||||||
|
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict" style="background-image: url('{{ p.get_download_thumb_url() }}')">
|
||||||
|
{% if edit_mode %}
|
||||||
|
<input type="checkbox" name="file_list" value="{{ p.id }}">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% else %}
|
||||||
|
{% trans %}This album does not contain any photos.{% endtrans %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="paginator">
|
||||||
|
{{ paginate(pictures, paginator) }}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
{% for p in pictures %}
|
{% if edit_mode %}
|
||||||
<div style="display: inline-block;">
|
</form>
|
||||||
{% if edit_mode %}
|
{% endif %}
|
||||||
<input type="checkbox" name="file_list" value="{{ p.id }}">
|
|
||||||
{% endif %}
|
<hr>
|
||||||
{% if user.can_view(p) %}
|
|
||||||
<div class="picture{% if not p.is_moderated %} not_moderated{% endif %}">
|
<form class="add-files" id="upload_form" action="" method="post" enctype="multipart/form-data">
|
||||||
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
|
{% csrf_token %}
|
||||||
<img src="{{ p.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" />
|
<div class="inputs">
|
||||||
</a>
|
{{ form.as_p() }}
|
||||||
|
|
||||||
|
<input type="submit" value="{% trans %}Upload{% endtrans %}" />
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
</form>
|
||||||
</div>
|
|
||||||
{% endfor %}
|
<p style="font-size: small; color: #444;">{% trans %}Template generation time: {% endtrans %}
|
||||||
</div>
|
{{ timezone.now() - start }}
|
||||||
<br>
|
</p>
|
||||||
{{ paginate(pictures, paginator) }}
|
|
||||||
{% 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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
<script>
|
<script defer>
|
||||||
$("form#upload_form").submit(function (event) {
|
function updateColumns() {
|
||||||
var formData = new FormData($(this)[0]);
|
const fullWidth = $(".photos").width();
|
||||||
|
const nbColumns = Math.min(Math.floor((fullWidth / 100) - 1), 5);
|
||||||
|
|
||||||
if(!formData.get('album_name') && !formData.get('images').name)
|
const photoWidth = (fullWidth - (nbColumns - 1) * 5) / nbColumns;
|
||||||
return false;
|
const photoHeight = (photoWidth * (9/16));
|
||||||
|
|
||||||
if(!formData.get('images').name) {
|
$(".photo").css("width", photoWidth);
|
||||||
return true;
|
$(".photo").css("height", photoHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
event.preventDefault();
|
$(window).resize(updateColumns);
|
||||||
|
updateColumns();
|
||||||
|
</script>
|
||||||
|
|
||||||
var errorlist;
|
<script>
|
||||||
if((errorlist = this.querySelector('#upload_form ul.errorlist.nonfield')) === null) {
|
$("form#upload_form").submit(function (event) {
|
||||||
errorlist = document.createElement('ul');
|
let formData = new FormData($(this)[0]);
|
||||||
errorlist.classList.add('errorlist', 'nonfield');
|
|
||||||
this.insertBefore(errorlist, this.firstElementChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
while(errorlist.childElementCount > 0)
|
if(!formData.get('album_name') && !formData.get('images').name)
|
||||||
errorlist.removeChild(errorlist.firstElementChild);
|
return false;
|
||||||
|
|
||||||
var progress;
|
if(!formData.get('images').name) {
|
||||||
if((progress = this.querySelector('progress')) === null) {
|
return true;
|
||||||
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);
|
event.preventDefault();
|
||||||
|
|
||||||
|
let 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);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function onSuccess(image, data, status, jqXHR) {
|
while(errorList.childElementCount > 0)
|
||||||
if ($(data.responseText).find('.errorlist.nonfield')[0])
|
errorList.removeChild(errorList.firstElementChild);
|
||||||
var errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
|
|
||||||
else
|
let progress;
|
||||||
var errors = []
|
if((progress = this.querySelector('progress')) === null) {
|
||||||
while(errors.length > 0)
|
progress = document.createElement('progress');
|
||||||
errorlist.appendChild(errors.shift());
|
progress.value = 0;
|
||||||
progress.value = ++completeCount / imagesCount;
|
let p = document.createElement('p');
|
||||||
if(progress.value === 1 && errorlist.children.length === 0)
|
p.appendChild(progress);
|
||||||
document.location.reload(true)
|
this.insertBefore(p, this.lastElementChild);
|
||||||
}
|
}
|
||||||
});
|
|
||||||
</script>
|
let 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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let images = formData.getAll('images');
|
||||||
|
let imagesCount = images.length;
|
||||||
|
let completeCount = 0;
|
||||||
|
|
||||||
|
let poolSize = 1;
|
||||||
|
let 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) {
|
||||||
|
let index;
|
||||||
|
if(index = imagePool.indexOf(image) !== -1) {
|
||||||
|
imagePool.splice(index, 1);
|
||||||
|
}
|
||||||
|
let nextImage;
|
||||||
|
if(nextImage = images.shift()) {
|
||||||
|
imagePool.push(nextImage);
|
||||||
|
|
||||||
|
sendImage(nextImage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSuccess(image, data, status, jqXHR) {
|
||||||
|
let errors = [];
|
||||||
|
|
||||||
|
if ($(data.responseText).find('.errorlist.nonfield')[0])
|
||||||
|
errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
|
||||||
|
|
||||||
|
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 %}
|
{% endblock %}
|
||||||
|
|||||||
@ -351,7 +351,7 @@ SITH_FORUM_PAGE_LENGTH = 30
|
|||||||
|
|
||||||
# SAS variables
|
# SAS variables
|
||||||
SITH_SAS_ROOT_DIR_ID = 4
|
SITH_SAS_ROOT_DIR_ID = 4
|
||||||
SITH_SAS_IMAGES_PER_PAGE = 30
|
SITH_SAS_IMAGES_PER_PAGE = 60
|
||||||
|
|
||||||
SITH_BOARD_SUFFIX = "-bureau"
|
SITH_BOARD_SUFFIX = "-bureau"
|
||||||
SITH_MEMBER_SUFFIX = "-membres"
|
SITH_MEMBER_SUFFIX = "-membres"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user