| 3892 |
idir |
1 |
import {findFieldset} from './utils.js';
|
|
|
2 |
|
|
|
3 |
/*************************************
|
|
|
4 |
* Fonctions de Style et Affichage *
|
|
|
5 |
* des éléments "spéciaux" *
|
|
|
6 |
*************************************/
|
|
|
7 |
export const displayFields = () => {
|
|
|
8 |
inputFile();
|
|
|
9 |
inputListCheckbox();
|
|
|
10 |
inputRangeDisplayNumber();
|
|
|
11 |
previewFieldHelpModal();
|
|
|
12 |
};
|
|
|
13 |
|
|
|
14 |
// Logique d'affichage pour le input type=file
|
|
|
15 |
export const inputFile = () => {
|
|
|
16 |
const fileInputSelector = '.input-file',
|
|
|
17 |
$button = $('.label-file'),
|
|
|
18 |
focusOnIntputFile = selector => $('#'+selector+fileInputSelector).focus();
|
|
|
19 |
|
|
|
20 |
// focus lorsque la "barre d'espace" ou "Entrée" est pressée
|
|
|
21 |
$button.on('keydown', function(event) {
|
|
|
22 |
if (event.keyCode == 13 || event.keyCode == 32) {
|
|
|
23 |
focusOnIntputFile($(this).attr('for'));
|
|
|
24 |
}
|
|
|
25 |
});
|
|
|
26 |
// focus lorsque le label est cliqué
|
|
|
27 |
$button.on('click', function () {
|
|
|
28 |
focusOnIntputFile($(this).attr('for'));
|
|
|
29 |
return false;
|
|
|
30 |
});
|
|
|
31 |
|
|
|
32 |
// Affiche un retour visuel dès que input:file change
|
|
|
33 |
$(fileInputSelector).on('change', function(event) {
|
|
|
34 |
// Il est possible de supprimer un fichier
|
|
|
35 |
// donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value
|
|
|
36 |
if (!$.isEmptyObject(event.target.files[0])) {
|
|
|
37 |
const file = event.target.files[0],
|
|
|
38 |
fileSelector = $(this).attr('id'),
|
|
|
39 |
$theReturn = $('.'+fileSelector);
|
|
|
40 |
|
|
|
41 |
// Affichage du nom du fichier
|
|
|
42 |
$theReturn.text(file.name).removeClass('hidden');
|
|
|
43 |
|
|
|
44 |
if (5242880 < file.size) {
|
|
|
45 |
$theReturn.append(
|
|
|
46 |
`<p class="message">
|
|
|
47 |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
|
|
|
48 |
La taille du fichier ne doit pas dépasser 5Mo
|
|
|
49 |
</p>`
|
|
|
50 |
)
|
|
|
51 |
.addClass('invalid');
|
|
|
52 |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
|
|
|
53 |
$(this).clearInputs();
|
|
|
54 |
console.log(file);
|
|
|
55 |
|
|
|
56 |
} else if (file.type.match('image/*') && 'especes' !== fileSelector) {
|
|
|
57 |
// Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche
|
|
|
58 |
// Chemin temporaire de l'image et affichage
|
|
|
59 |
const tmppath = URL.createObjectURL(file);
|
|
|
60 |
|
|
|
61 |
$theReturn.append(`<img src="${tmppath}" width="50%">`).removeClass('invalid');
|
|
|
62 |
|
|
|
63 |
} else if (!('especes' === fileSelector && file.type.match('text/(:?csv|tab-separated-values)'))) {
|
|
|
64 |
// on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv
|
|
|
65 |
console.log(file.type);
|
|
|
66 |
|
|
|
67 |
if ('especes' === fileSelector) {// cas où on demandait un csv
|
|
|
68 |
$theReturn.append(
|
|
|
69 |
`<p class="message">
|
|
|
70 |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
|
|
|
71 |
Le fichier doit être au format csv ou tsv
|
|
|
72 |
</p>`
|
|
|
73 |
)
|
|
|
74 |
.addClass('invalid');
|
|
|
75 |
} else { // cas où on demandait un format image
|
|
|
76 |
$theReturn.append(
|
|
|
77 |
`<p class="message">'+
|
|
|
78 |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
|
|
|
79 |
Le fichier doit être au format image (jpg, png, etc.)
|
|
|
80 |
</p>`
|
|
|
81 |
)
|
|
|
82 |
.addClass('invalid');
|
|
|
83 |
}
|
|
|
84 |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
|
|
|
85 |
$(this).clearInputs();
|
|
|
86 |
console.log(file);
|
|
|
87 |
} else {// file "especes" csv ok
|
|
|
88 |
$theReturn.append(' <i class="fa fa-check-circle" aria-hidden="true" style="color:#B3C954;font-size:1.3rem"></i>').removeClass('invalid');
|
|
|
89 |
}
|
|
|
90 |
}
|
|
|
91 |
});
|
|
|
92 |
// Annuler le téléchargement
|
|
|
93 |
$('.remove-file').click(function () {
|
|
|
94 |
const $thisFileInput = $(this).prev('.input-file-container').find('.input-file');
|
|
|
95 |
|
|
|
96 |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
|
|
|
97 |
$thisFileInput.clearInputs();
|
|
|
98 |
$thisFileInput.triggerHandler('change');
|
|
|
99 |
// $thisFileInput.unwrap();
|
|
|
100 |
$(this).next('.file-return').addClass('hidden').empty();
|
|
|
101 |
});
|
|
|
102 |
};
|
|
|
103 |
|
|
|
104 |
// Style et affichage des list-checkboxes
|
|
|
105 |
export const inputListCheckbox = () => {
|
|
|
106 |
// On écoute le click sur une list-checkbox ('.selectBox')
|
|
|
107 |
// à tout moment de son insertion dans le dom
|
|
|
108 |
$('#zone-appli').on('click', '.selectBox', function () {
|
|
|
109 |
$(`.checkboxes[data-id="${$(this).data('id')}"]`).toggleClass('hidden');
|
|
|
110 |
});
|
|
|
111 |
};
|
|
|
112 |
|
|
|
113 |
// Style et affichage des input type="range"
|
|
|
114 |
export const inputRangeDisplayNumber = () => {
|
|
|
115 |
$('#zone-appli').on('input', 'input[type="range"]', function () {
|
|
|
116 |
$(this).siblings('.range-live-value').text($(this).val());
|
|
|
117 |
});
|
|
|
118 |
};
|
|
|
119 |
|
|
|
120 |
|
|
|
121 |
// Activation/Desactivation et contenu de la modale Bootstrap
|
|
|
122 |
// https://getbootstrap.com/docs/3.3/javascript/#modals
|
|
|
123 |
export const previewFieldHelpModal = () => {
|
|
|
124 |
$('#zone-supp').on('click', '.help-button', function () {
|
|
|
125 |
const index = $(this).closest('.preview-fields').data('id'),
|
|
|
126 |
$thisFieldset = findFieldset(index),
|
|
|
127 |
file = $('.field-help', $thisFieldset)[0].files[0],
|
|
|
128 |
tmppath = URL.createObjectURL(file),
|
|
|
129 |
$helpModal = $('#help-modal'),
|
|
|
130 |
$helpModalLabel = $('#help-modal-label'),
|
|
|
131 |
$printContent = $('#print_content');
|
|
|
132 |
|
|
|
133 |
// Titre
|
|
|
134 |
$helpModalLabel.text('Aide pour : '+$('.field-name', $thisFieldset).val());
|
|
|
135 |
// Contenu
|
|
|
136 |
if (file.type.match('image/*')) {
|
|
|
137 |
$printContent.append(`<img src="${tmppath}" style="max-width:100%">`);
|
|
|
138 |
} else {
|
|
|
139 |
$printContent.append('<p>Erreur : le fichier n’est pas une image</p>');
|
|
|
140 |
}
|
|
|
141 |
// Sortie avec la touche escape
|
|
|
142 |
$helpModal.modal({keyboard: true});
|
|
|
143 |
// Affichage
|
|
|
144 |
$helpModal.modal({show: true});
|
|
|
145 |
// Remplacer l'autofocus qui ne fonctionne plus en HTML5
|
|
|
146 |
// Message dans la doc de bootstrap :
|
|
|
147 |
// Due to how HTML5 defines its semantics,
|
|
|
148 |
// the autofocus HTML attribute has no effect in Bootstrap modals.
|
|
|
149 |
// To achieve the same effect, use some custom JavaScript
|
|
|
150 |
$helpModal.on('shown.bs.modal', function () {
|
|
|
151 |
$('#myInput').trigger('focus');
|
|
|
152 |
})
|
|
|
153 |
// Réinitialisation
|
|
|
154 |
$helpModal.on('hidden.bs.modal', function () {
|
|
|
155 |
$helpModalLabel.text();
|
|
|
156 |
$printContent.empty();
|
|
|
157 |
})
|
|
|
158 |
});
|
|
|
159 |
};
|