New file |
0,0 → 1,159 |
import {findFieldset} from './utils.js'; |
|
/************************************* |
* Fonctions de Style et Affichage * |
* des éléments "spéciaux" * |
*************************************/ |
export const displayFields = () => { |
inputFile(); |
inputListCheckbox(); |
inputRangeDisplayNumber(); |
previewFieldHelpModal(); |
}; |
|
// Logique d'affichage pour le input type=file |
export const inputFile = () => { |
const fileInputSelector = '.input-file', |
$button = $('.label-file'), |
focusOnIntputFile = selector => $('#'+selector+fileInputSelector).focus(); |
|
// focus lorsque la "barre d'espace" ou "Entrée" est pressée |
$button.on('keydown', function(event) { |
if (event.keyCode == 13 || event.keyCode == 32) { |
focusOnIntputFile($(this).attr('for')); |
} |
}); |
// focus lorsque le label est cliqué |
$button.on('click', function () { |
focusOnIntputFile($(this).attr('for')); |
return false; |
}); |
|
// Affiche un retour visuel dès que input:file change |
$(fileInputSelector).on('change', function(event) { |
// Il est possible de supprimer un fichier |
// donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value |
if (!$.isEmptyObject(event.target.files[0])) { |
const file = event.target.files[0], |
fileSelector = $(this).attr('id'), |
$theReturn = $('.'+fileSelector); |
|
// Affichage du nom du fichier |
$theReturn.text(file.name).removeClass('hidden'); |
|
if (5242880 < file.size) { |
$theReturn.append( |
`<p class="message"> |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
La taille du fichier ne doit pas dépasser 5Mo |
</p>` |
) |
.addClass('invalid'); |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$(this).clearInputs(); |
console.log(file); |
|
} else if (file.type.match('image/*') && 'especes' !== fileSelector) { |
// Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche |
// Chemin temporaire de l'image et affichage |
const tmppath = URL.createObjectURL(file); |
|
$theReturn.append(`<img src="${tmppath}" width="50%">`).removeClass('invalid'); |
|
} else if (!('especes' === fileSelector && file.type.match('text/(:?csv|tab-separated-values)'))) { |
// on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv |
console.log(file.type); |
|
if ('especes' === fileSelector) {// cas où on demandait un csv |
$theReturn.append( |
`<p class="message"> |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
Le fichier doit être au format csv ou tsv |
</p>` |
) |
.addClass('invalid'); |
} else { // cas où on demandait un format image |
$theReturn.append( |
`<p class="message">'+ |
<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> |
Le fichier doit être au format image (jpg, png, etc.) |
</p>` |
) |
.addClass('invalid'); |
} |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$(this).clearInputs(); |
console.log(file); |
} else {// file "especes" csv ok |
$theReturn.append(' <i class="fa fa-check-circle" aria-hidden="true" style="color:#B3C954;font-size:1.3rem"></i>').removeClass('invalid'); |
} |
} |
}); |
// Annuler le téléchargement |
$('.remove-file').click(function () { |
const $thisFileInput = $(this).prev('.input-file-container').find('.input-file'); |
|
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$thisFileInput.clearInputs(); |
$thisFileInput.triggerHandler('change'); |
// $thisFileInput.unwrap(); |
$(this).next('.file-return').addClass('hidden').empty(); |
}); |
}; |
|
// Style et affichage des list-checkboxes |
export const inputListCheckbox = () => { |
// On écoute le click sur une list-checkbox ('.selectBox') |
// à tout moment de son insertion dans le dom |
$('#zone-appli').on('click', '.selectBox', function () { |
$(`.checkboxes[data-id="${$(this).data('id')}"]`).toggleClass('hidden'); |
}); |
}; |
|
// Style et affichage des input type="range" |
export const inputRangeDisplayNumber = () => { |
$('#zone-appli').on('input', 'input[type="range"]', function () { |
$(this).siblings('.range-live-value').text($(this).val()); |
}); |
}; |
|
|
// Activation/Desactivation et contenu de la modale Bootstrap |
// https://getbootstrap.com/docs/3.3/javascript/#modals |
export const previewFieldHelpModal = () => { |
$('#zone-supp').on('click', '.help-button', function () { |
const index = $(this).closest('.preview-fields').data('id'), |
$thisFieldset = findFieldset(index), |
file = $('.field-help', $thisFieldset)[0].files[0], |
tmppath = URL.createObjectURL(file), |
$helpModal = $('#help-modal'), |
$helpModalLabel = $('#help-modal-label'), |
$printContent = $('#print_content'); |
|
// Titre |
$helpModalLabel.text('Aide pour : '+$('.field-name', $thisFieldset).val()); |
// Contenu |
if (file.type.match('image/*')) { |
$printContent.append(`<img src="${tmppath}" style="max-width:100%">`); |
} else { |
$printContent.append('<p>Erreur : le fichier n’est pas une image</p>'); |
} |
// Sortie avec la touche escape |
$helpModal.modal({keyboard: true}); |
// Affichage |
$helpModal.modal({show: true}); |
// Remplacer l'autofocus qui ne fonctionne plus en HTML5 |
// Message dans la doc de bootstrap : |
// Due to how HTML5 defines its semantics, |
// the autofocus HTML attribute has no effect in Bootstrap modals. |
// To achieve the same effect, use some custom JavaScript |
$helpModal.on('shown.bs.modal', function () { |
$('#myInput').trigger('focus'); |
}) |
// Réinitialisation |
$helpModal.on('hidden.bs.modal', function () { |
$helpModalLabel.text(); |
$printContent.empty(); |
}) |
}); |
}; |