Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3891 → Rev 3892

/trunk/widget/modules/manager/squelettes/js/display.js
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();
})
});
};