Attention une mise à jour du service Gitlab va être effectuée le mardi 30 novembre entre 17h30 et 18h00. 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. Cette mise à jour intermédiaire en version 14.0.12 nous permettra de rapidement pouvoir mettre à votre disposition une version plus récente.

Commit 089c4d70 authored by LETORT Sebastien's avatar LETORT Sebastien
Browse files

make bootstrap formatted input-file has been replaced by a span group...

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 20dcae51
Pipeline #92529 passed with stages
in 3 minutes and 17 seconds
...@@ -304,3 +304,17 @@ a.fa-layers.disabled:not(.btn) { ...@@ -304,3 +304,17 @@ a.fa-layers.disabled:not(.btn) {
height: 100%; height: 100%;
} }
} }
/* code used in job creation page : file-chooser */
.input-file-container * {
margin-bottom: 0.5rem;
}
.input-text {
flex:auto;
}
/* we hide the input-file field */
.input-file {
display: none;
}
/*
* misc_allgo
*
* Miscellaneous functions usd in allgo website.
*/
{
/* == File chooser on webapp_list view which create a job ==
* closure to reduce to scope of variables.
* i_btn : counter used to define ids.
* add_btn : the add button in the form, aims to add a file-chooser.
*
* 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
*
* Originally the field was generated with bootstrap.
* I didn't find a way to add a new one with this library.
*/
let i_btn = 2;
let add_btn = $('#add_input_file');
function make_input_text_display_the_files(input_file)
{ // input file is a jquery object
input_file.change( function( event ) {
let files = $.map( this.files, function(v){ return v.name; } );
input_file.next()[0].value = files.join(","); // fill the input-text
});
}
function add_rem_button_func(span_elt)
{ //span_elt is the top jquery object containing the file chooser
span_elt.children('button').click(function(e)
{
span_elt.children('input')
.each(function(i){ this.value = ''; });
});
}
function create_file_chooser(field_name)
{
const html_string = `
<span class="input-group input-file-container">
<label for="input-file0${i_btn}" class="btn btn-secondary" tabindex="0">Choose file</label>
<input type="file" class="input-file" name="${field_name}" id="input-file0${i_btn}" multiple>
<input type="text" class="input-text" disabled >
<button type="button" >x</button>
</span>`;
let elt = $(html_string);
// add behaviours
make_input_text_display_the_files( $(elt).children('.input-file') );
add_rem_button_func( elt );
++i_btn;
return elt;
}
make_input_text_display_the_files( $('#input-file01') );
add_rem_button_func( $('#input-file01').parent() );
// add its functionnality to the '+' button
add_btn.click(function(e)
{
// get input-file name
let field_name = $(this).next('span').children('input')[0].name;
let new_span = create_file_chooser(field_name);
// insert the new span right before the last 'small' tag
let div_grp = add_btn[0].parentElement;
$(div_grp).children('small').last().before( new_span );
});
} // == File chooser
...@@ -107,7 +107,13 @@ ...@@ -107,7 +107,13 @@
<div class="form-group"> <div class="form-group">
{{ form.files.label_tag }} {{ 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 id="add_input_file" type="button" >+</button>
<span class="input-group input-file-container">
<label for="input-file01" class="btn btn-secondary" tabindex="0">Choose file</label>
<input type="file" class="input-file" name="{{ form.files.name }}" id="input-file01" multiple>
<input type="text" class="input-text" disabled >
<button type="button" >x</button>
</span>
<small class="form-text text-muted">{{ form.files.help_text }}</small> <small class="form-text text-muted">{{ form.files.help_text }}</small>
</div> </div>
...@@ -230,4 +236,5 @@ ...@@ -230,4 +236,5 @@
{{ block.super }} {{ block.super }}
<script defer src="{% static 'js/tooltip.js' %}"></script> <script defer src="{% static 'js/tooltip.js' %}"></script>
<script defer src="{% static 'js/copy.js' %}"></script> <script defer src="{% static 'js/copy.js' %}"></script>
<script defer src="{% static 'js/misc_allgo.js' %}"></script>
{% endblock %} {% 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