Attention une mise à jour du service Gitlab va être effectuée le mardi 14 décembre entre 13h30 et 14h00. Cette mise à jour va générer une interruption du service dont nous ne maîtrisons pas complètement la durée mais qui ne devrait pas excéder quelques minutes.

Commit 652e2213 authored by BAIRE Anthony's avatar BAIRE Anthony
Browse files

squashed merge request !183

commit 08eb24e5
Merge: cc0b7eb0 2698751b
Author: LETORT Sebastien <sebastien.letort@irisa.fr>
Date:   Wed Sep 18 10:50:33 2019 +0200

    Merge branch 'django' into 336-impossible-de-choisir-plusieurs-fichiers-de-dossiers-differents

commit cc0b7eb0
Author: LETORT Sebastien <sebastien.letort@irisa.fr>
Date:   Wed Sep 18 10:41:05 2019 +0200

    no more specific css for file-chooser.
    all js code written in html template -> rm misc_allgo.js.

commit 089c4d70
Author: LETORT Sebastien <sebastien.letort@irisa.fr>
Date:   Fri Sep 6 16:59:14 2019 +0200

    make bootstrap formatted input-file has been replaced by a span group (label+input-file+input-text+clear btn), with a '+' button.
    a new js script has been added to manage this file-chooser behaviour.
    some css properties have also been added.
parent a803d6eb
......@@ -104,10 +104,16 @@
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
{{ form.files.label_tag }}
<input type="file" class="form-control-file filestyle" name="{{ form.files.name }}" id="inputGroupFile01" data-buttonBefore="true" data-badge="true" multiple>
<button type="button" class="btn btn-secondary btn-sm" onClick="add_input_file($(this).next())">+</button>
<span class="form-inline input-group">
<label for="input-file01" class="btn btn-secondary mr-sm-2" tabindex="0">Choose file</label>
<input type="file" id="input-file01" name="{{ form.files.name }}" style="display:none"
multiple onChange="list_filenames_in_next_elt(this)">
<input type="text" class="mr-sm-2 form-control" disabled >
<button type="button" class="btn btn-secondary" onClick="$(this).prev()[0].value='';">x</button>
</span>
<small class="form-text text-muted">{{ form.files.help_text }}</small>
</div>
......@@ -230,4 +236,51 @@
{{ block.super }}
<script defer src="{% static 'js/tooltip.js' %}"></script>
<script defer src="{% static 'js/copy.js' %}"></script>
<script>
function list_filenames_in_next_elt(elt)
{
let files = $.map( elt.files, function(v){ return v.name; } );
$(elt).next()[0].value = files.join(",");
}
{
/* == File chooser - to allow selection of file from different directories ==
* closure to reduce to scope of variables.
* i_btn : counter used to define ids.
*
* The file-chooser is composed of those elements :
* span
* - label, used as button to activate the input-file
* - input type file, hidden.
* - input type text, used to display the selected files.
* This seems to be quite "classical" management of input-file when style is involved.
* https://www.quirksmode.org/dom/inputfile.html
* https://buzut.net/customisez-le-input-file/
* https://www.creativejuiz.fr/blog/tutoriels/input-file-personnalise-css-js
*
* Here we clone the first span element, update ids
* and insert the new span right before the small help text line.
*/
let i_btn = 2;
function add_input_file(span_elt)
{
let new_span = $(span_elt).clone(false);
let new_id = "input-file0"+i_btn;
new_span.children('label')
.prop("for", new_id);
inputs = new_span.children('input');
inputs[0].id = new_id;
inputs[1].value = '';
++i_btn;
let last_small = $(span_elt).parent().children('small').last();
last_small.before(new_span);
}
} // == File chooser
</script>
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment