Rev 3244 | Rev 3262 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed
"use strict";
/*************************************
* Fonctions de Style et Affichage *
* des éléments "spéciaux" *
*************************************/
// Logique d'affichage pour le input type=file
function inputFile() {
// Initialisation des variables
var $fileInput = $( '.input-file' ),
$button = $( '.label-file' ),
thisId = '';
// Action lorsque la "barre d'espace" ou "Entrée" est pressée
$( '.label-file' ).keydown( function( event ) {
if ( event.keyCode == 13 || event.keyCode == 32 ) {
$( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
}
});
// Action lorsque le label est cliqué
$( '.label-file' ).click( function(event) {
$( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
return false;
});
// Affiche un retour visuel dès que input:file change
$fileInput.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] ) ) {
var file = event.target.files[0],
fileInputId = $( this ).attr( 'id' ),
$theReturn = $( '.' + fileInputId );
// 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' !== fileInputId ) {
// Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche
// Chemin temporaire de l'image et affichage
var tmppath = URL.createObjectURL( file );
$theReturn.append( '<img src="' + tmppath + '" width="50%">' ).removeClass( 'invalid' );;
} else if ( !( 'especes' === fileInputId && file.type.match( 'text/csv' ) ) ) {
// on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv
if( 'especes' === fileInputId ) {// 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'+
'</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() {
var $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
function 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"
function inputRangeDisplayNumber() {
$( '#zone-appli' ).on( 'input' , 'input[type="range"]' , function () {
$( this ).siblings( '.range-live-value' ).text( $( this ).val() );
});
}
/***********************************************************
* Fonctions pour la création des champs supplémentaires *
***********************************************************/
// Logique globale pour l'ajout de nouveaux champs
function onClickAddNewFields( fieldIndex ) {
// Bouton ajouter un champ
$( '#add-fields' ).click( function() {
// Affichage du formulaire pour un champ
displayNewField( fieldIndex );
// Affichage du nom du champ
onChangeDisplayFieldLabel( fieldIndex );
// Empêcher de créer plus d'une fois la même clé
onChangeCheckKeyUnique();
// Affichage des images/nom des documents importés dans les champs ajoutés
inputFile();
// Recueil des informations correspondantes au nouveau champ
onChangeFieldTypeCollectDetails( fieldIndex );
// Suppression d'un champ
onClickRemoveField();
fieldIndex++;
});
}
// Création/affichage du formulaire d'un nouveau champ
function displayNewField( fieldIndex ) {
// Html du formulaire du nouveaux champs inséré dans le dom
$( '#new-fields' ).append(
'<fieldset data-id="' + fieldIndex + '" class="new-field">'+
'<h3>Nouveau champ :<br><strong class="field-title" data-id="' + fieldIndex + '"></strong></h3>'+
// Nom du champ
'<div class="row">'+
'<div class="col-sm-12 mt-3">'+
'<label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>'+
'<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name form-control" placeholder="Titre de votre champ" title="Le titre du champ" required>'+
'</div>'+
// Clé du champ
'<div class="col-sm-12 mt-3">'+
'<label for="field-key" title="Nom du champ dans la base de données">'+
'Clé du champ *'+
'</label>'+
'<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key form-control" placeholder="Clé du champ" pattern="^(?:[a-z]+(?:(?:[A-Z]+[a-z]+)+)?|[a-z]+(?:(?:-[a-z]+)+)?)$" title="Clé Unique en Camelcase ou minuscule séparés par tirets, pas d\'accents pas de caractères spéciaux." required>'+
'</div>'+
'<p class="message ml-2 mr-2">' +
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
'Une clé doit être unique<br>' +
'En "camelCase" (ecriture chameau)<br>'+
'Ou en minuscule avec tirets ("-") si nécessaire<br>'+
'Pas d\'espaces, aucuns caractères spéciaux (accents, cédilles, etc.).' +
'</p>' +
// Type de champ
'<div class="col-sm-12 mt-3 add-field-select" data-id="' + fieldIndex + '">'+
'<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
'<select name="field-element" data-id="' + fieldIndex + '" class="field-element form-control">'+
'<option value="text">Champ texte</option>'+
'<option value="email">Champ email</option>'+
'<option value="textarea">Champ rédaction</option>'+
'<option value="select">Menu déroulant</option>'+
'<option value="checkbox">Cases à cocher</option>'+
'<option value="list-checkbox">Liste de cases à cocher</option>'+
'<option value="radio">Boutons radio</option>'+
'<option value="date">Calendrier</option>'+
'<option value="range">Curseur (entre 2 bornes)</option>'+
'<option value="number">Nombre</option>'+
'</select>'+
'</div>'+
// Checkbox "champ requis"
'<div class="col-sm-12 radio mt-3">'+
'<label class="radio-label" for="field-is_mandatory" title="Ce champ est obligatoire">'+
'<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory form-control">'+
'Champ requis ?'+
'</label>'+
'</div>'+
// Unité des valeurs
'<div class="col-sm-12 mt-3">'+
'<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+
'<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit form-control" placeholder="symbole de vos unités">'+
'</div>'+
// Tooltip
'<div class="col-sm-12 mt-3">'+
'<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+
'<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description form-control" placeholder="Quelques mots">'+
'</div>'+
// Import d'une image d'aide à afficher en popup
'<div class="input-file-row row">'+
'<div class="input-file-container col-sm-10">'+
'<input type="file" class="input-file field-help" name="field-help' + fieldIndex + '" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="image/*">'+
'<label for="field-help' + fieldIndex + '" class="label-file"><i class="fas fa-download"></i> Popup aide image (.jpg)</label>'+
'</div>'+
'<div class="btn btn-danger btn-sm remove-file" name="remove-file" data-id="' + fieldIndex + '" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>'+
'<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+
'</div>'+
// Boutons supprimer
'<div class="col-sm-12 mt-3">'+
'<label for="remove-field">Supprimer</label>'+
'<div class="remove-field button" name="remove-field" data-id="' + fieldIndex + '" title="Supprimer un champ"><i class="fa fa-skull" aria-hidden="true"></i></div>'+
'</div>'+
'</div>'+
'</fieldset>'
);
// Animation de l'affichage
$( 'fieldset.new-field[data-id="' + fieldIndex + '"]').hide().show( 200 );
}
// Affichage du nom du champ dès qu'il est renseigné
function onChangeDisplayFieldLabel( fieldIndex ) {
$('.field-name[data-id="' + fieldIndex + '"]').change( function() {
$( '.field-title[data-id="' + fieldIndex + '"]' ).text( $( this ).val() );
});
}
// Supprimer un nouveau champ
function onClickRemoveField () {
$( '.remove-field' ).click( function() {
$( this ).closest('fieldset').hide( 200 , function () {
$( this ).remove();
});
});
}
/**** Recueil des informations et détails qui dépendent du type de champ choisi ****/
// Logique de recueil d'informations en fonction du type de champ choisi
function onChangeFieldTypeCollectDetails( fieldIndex ) {
// On insère les champs par défaut de recueil d'informations
displayFieldDetailsCollect(
fieldIndex,
// Placeholder (champ type text par défaut)
'<div class="col-sm-12 mt-3">'+
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+
'</div>'
);
// Sinon :
$( '.field-element[data-id="' + fieldIndex + '"]' ).change( function() {
// On intialise l'index pour les listes la variable qui contiendra un id pour chaque option
var valueIndex = 0;
// Si on hésite on qu'on se trompe dans la liste :
// les champs de détails de l'option précédente doivent être supprimés
$( '.field-details[data-id="' + fieldIndex + '"]' ).hide( 200 , function () {
$( this ).remove();
});
// Html de recueil de données en fonction de l'élément choisi
switch( $( this ).val() ) {
case 'range':
case 'number':
displayFieldDetailsCollect(
fieldIndex,
'<p class="message">'+
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
'Ne pas oublier de prévisualiser !!<br>'+
'Vérifier le bon fonctionnement et changer, si nécessaire, les valeurs de défaut, incrémentation (step), min et max.<br>'+
'Si le navigateur considère que certaines valeurs sont incohérentes il pourrait les modifier automatiquement'+
'</p>' +
// Placeholder
'<div class="col-sm-12 mt-3">'+
'<label for="aide-saisie" title="Deux ou 3 mots ou chiffres pour comprendre ce que doit contenir le champ (ex: min 20, 10 par 10, etc.)">Texte d\'aide à la saisie</label>'+
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+
'</div>'+
// Valeur par défaut
'<div class="col-sm-12 mt-3">'+
'<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+
'<input type="number" name="default" data-id="' + fieldIndex + '" class="default form-control" step="0.01" lang="en">'+
'</div>'+
// Incrémentation ( attribut step="" )
'<div class="col-sm-12 mt-3">'+
'<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step)</label>'+
'<input type="number" name="step" data-id="' + fieldIndex + '" class="step form-control" step="0.01" value="1" lang="en">'+
'</div>'+
// Min
'<div class="col-sm-12 mt-3">'+
'<label for="min" title="valeur min">Valeur minimale</label>'+
'<input type="number" name="min" data-id="' + fieldIndex + '" class="min form-control" step="0.01" value="0" lang="en">'+
'</div>'+
// Max
'<div class="col-sm-12 mt-3">'+
'<label for="max" title="valeur max">Valeur maximale</label>'+
'<input type="number" name="max" data-id="' + fieldIndex + '" class="max form-control" step="0.01" value="1" lang="en">'+
'</div>'
);
break;
case 'date':
displayFieldDetailsCollect(
fieldIndex,
// Date min
'<div class="col-sm-12 mt-3">'+
'<label for="min" title="date min">Date minimale</label>'+
'<input type="date" name="min" data-id="' + fieldIndex + '" class="min form-control" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'+
'</div>'+
// Date max
'<div class="col-sm-12 mt-3">'+
'<label for="max" title="date max">Date maximale</label>'+
'<input type="date" name="max" data-id="' + fieldIndex + '" class="max form-control" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'+
'</div>'
);
break;
case 'select':
case 'checkbox':
case 'list-checkbox':
case 'radio':
displayFieldDetailsCollect(
fieldIndex,
'<p class="message element-message">' +
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> ' +
'Entrez au moins une valeur de ' + $( this ).children( 'option:selected' ).text() +
'</p>'+
// Première option
'<div class="new-value center-block row" data-list-value-id="' + valueIndex +'">'+
// Recueil d'une valeur de la liste
'<div class="col-sm-12 mt-3">'+
'<label for="list-value">Valeur *:</label>'+
'<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value form-control" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
'</div>' +
// Checkbox valeur par défaut
'<div class="col-sm-12 radio mt-3">'+
'<label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">'+
'<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
'Valeur par défaut'+
'</label>'+
'</div>' +
'</div>' +
// Bouton ajout d'une valeur à la liste
'<div class="col-sm-12 mt-3 add-value-container" data-id="' + fieldIndex + '">'+
'<label for="add-value" class="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+
'<div class="button add-value-button" name="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste"><i class="fa fa-puzzle-piece" aria-hidden="true"></i></div>'+
'</div>' +
// checkbox ajouter une valeur "Autre:"
'<div class="col-sm-12 radio mt-3">'+
'<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin" class="radio-label">'+
'<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'+
'Valeur "Autre"'+
'</label>'+
'</div>'
);
break;
case 'email':
case 'text':
case 'textarea':
default:
displayFieldDetailsCollect(
fieldIndex,
// Placeholder
'<div class="col-sm-12 mt-3">'+
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+
'</div>'
);
break;
}
// Ajout des valeurs possibles
// lorsque le champ est une liste ou case à cocher
onClickAddNewValueToList( fieldIndex , valueIndex );
});
}
// Insertion dans le dom des champs de recueil d'informations
function displayFieldDetailsCollect( fieldIndex , fieldDetails ) {
$( '.add-field-select[data-id="' + fieldIndex + '"]' ).after(
'<div class="field-details col-sm-11 mt-3 row" data-id="' + fieldIndex + '">' +
fieldDetails +
'</div>'
).hide().show( 200);
}
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
// Ajout des options des listes (deroulantes, cases à cocher etc.)
function onClickAddNewValueToList( fieldIndex , valueIndex ) {
$( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() {
valueIndex++;
$( '.add-value-container[data-id="' + fieldIndex + '"]' ).before(
'<div class="new-value center-block row" data-list-value-id="' + valueIndex +'">'+
// Recueil d'une valeur de la liste
'<div class="col-sm-12 mt-3">'+
'<label for="list-value">Valeur *:</label>'+
'<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value form-control" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
'</div>' +
// Checkbox valeur par défaut+bouton supprimer
'<div class="col-sm-12 mt-3 row">'+
// Bouton supprimer une option
'<div class="col-sm-5">'+
'<div class="remove-value button" name="remove-value" data-id="' + fieldIndex + '" data-list-value-id="' + valueIndex + '" title="Supprimer une valeur"><i class="fa fa-trash" aria-hidden="true"></i></div>'+
'</div>'+
// Valeur par défaut
'<div class="col-sm-7 radio">'+
'<label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">'+
'<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
'Valeur défaut'+
'</label>'+
'</div>'+
'</div>'+
'</div>'
).hide().show( 200);
// Une seule valeur par défaut pour select et radio
onClickDefaultValueRemoveOthers( fieldIndex );
// Supprimer une valeur
onClickRemoveListValue( fieldIndex );
});
}
// Activer la checkbox de valeur par default uniquement si une valeur est entrée
function onInputListValueLabelEnableDefaultCheckbox() {
$( '#new-fields' ).on( 'input' , '.list-value' , function() {
var $thisDefautValue = $( '.is-defaut-value[data-id="' + $( this ).data( 'id' ) + '"][data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' );
if( '' !== $( this ).val() ) {
$thisDefautValue.removeAttr( 'disabled' );
} else {
$thisDefautValue.attr( 'disabled', true ).attr( 'checked' , false );
}
});
}
// Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée
function onClickDefaultValueRemoveOthers( fieldIndex ) {
var selectedFieldElement = $( '.field-element[data-id="' + fieldIndex + '"]' ).val();
if( selectedFieldElement === 'select' || selectedFieldElement === 'radio' ) {
$( '.is-defaut-value[data-id="' + fieldIndex + '"]' ).click( function() {
if( $( this ).is( ':checked' ) ) {
// Décocher tous les autres
$( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).attr( 'checked' , false );
}
});
}
}
// Bouton supprimer une valeur
function onClickRemoveListValue( fieldIndex ) {
$( '.remove-value.button[data-id="' + fieldIndex + '"]' ).click( function() {
$( '.new-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' ).hide( 200 , function () {
$( this ).remove();
});
});
}
/*********************************************
* Validation et envoi des nouveaux champs *
*********************************************/
// Empêcher de créer plus d'une fois la même clé
function onChangeCheckKeyUnique() {
if( 1 < $( '.field-key' ).length ) {
// Marqueur de valeur dupliquée
var notUnique = false;
$( '.field-key' ).change( function () {
let count = $( '.field-key' ).length;
for(var index = 0 ; index < count ; index++) {
let thisFieldKey = $( '.field-key[data-id="' + index + '"]' );
// Le champ avec cet index pourrait avoir été supprimé
if( 0 < thisFieldKey.length ) {
for( var otherIndex = 0 ; otherIndex < count ; otherIndex++ ) {
let otherFieldKey = $( '.field-key[data-id="' + otherIndex + '"]' );
// Le champ avec cet index pourrait avoir été supprimé
// On vérifie qu'on ne compare pas un champ avec lui-même
// Que les champs ne sont pas vides
// Les champs dupliqués déclanchent le marqueur et les alertes
if(
0 < otherFieldKey.length &&
index !== otherIndex &&
'' !== otherFieldKey.val() &&
'' !== thisFieldKey.val() &&
thisFieldKey.val() === otherFieldKey.val()
) {
// Le marqueur de valeur dupliquée passe à true
notUnique = true;
if( 0 === $( '.invalid-field-key[data-id="' + index + '"]' ).length ) {
// Le champ est signalé en rouge
// Un message d'alerte apparait sous le champ
thisFieldKey.addClass( 'invalid-key' );
thisFieldKey.after(
'<p class="message invalid-field-key" data-id="' + index + '">' +
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
' Vérifiez qu\'aucune clé n\'ait été utilisée plus d\'une fois' +
'</p>'
);
}
}
}
}
}
if( notUnique ) {
// Un message d'alerte apparait au dessus des boutons prévisualiser/valider
if( 0 === $( '.invalid-field-key-bottom' ).length ) {
$( '#new-fields' ).after(
'<p class="message invalid-field-key-bottom">' +
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
' Une clé a été utilisée plusieurs fois' +
'</p>'
);
}
// Les boutons prévisualiser/valider sont désactivés et signalés en rouge
$( '#preview-field , #validate-new-fields' ).addClass( 'invalid-key' ).css( 'pointer-events', 'none' );
} else {// Si on est ok on retire toutes les alertes
// signalements rouges
$( '.field-key' ).each( function() {
$( this ).removeClass( 'invalid-key' );
});
$( '#preview-field , #validate-new-fields' ).removeClass( 'invalid-key' );
// messages d'alerte
$( '.invalid-field-key' ).each( function() {
$( this ).hide( 200 , function () {
$( this ).remove();
});
});
$( '.invalid-field-key-bottom' ).hide( 200 , function () {
$( this ).remove();
});
//réactivation des boutons prévisualiser/valider
$( '#preview-field' )[0].style.removeProperty( 'pointer-events' );
$( '#validate-new-fields' )[0].style.removeProperty( 'pointer-events' )
}
// Réinitialisation
notUnique = false;
});
}
}
// Activation/desactivation des champs valider/previsualiser
function onClickButtonsTagMissingValues() {
$( '#preview-field , #validate-new-fields' ).on( 'click' , function() {
var $button = $( this );
//S'il n'y a pas (plus) de bloc nouveau champ
if( 0 === $( 'fieldset' ).length ) {
return;
}
// Classe "invalid"
missingValuesClass();
if( !$( this ).hasClass( 'invalid' ) ) {
if( $( this ).is( '#validate-new-fields') ) {
// Lancement de l'enregistrement des valeurs à transmettre
onClickStoreNewFields();
} else if( $( this ).is( '#preview-field') ) {
// Lancement de la prévisualisation
newFieldsPreview();
}
}
});
// Si un champ manquant est renseigné
// ou on choisit nouvel élément liste (au moins une option)
// Cette action doit être prise en compte dans la validation
$( '#new-fields' ).on( 'change' , '.invalid[type="text"] , .field-element' , function() {
// S'il on a pas encore cliqué sur prévisualiser/valider
// changer l'élément ne doit pas déclancher le signalement en rouge
if( $( this ).is( '.field-element' ) && !$( '#preview-field , #validate-new-fields' ).hasClass( 'invalid' ) ) {
return;
} else {
// Classe "invalid"
missingValuesClass();
}
});
}
// Classe "invalid"
function missingValuesClass() {
// Si au moins un champ "required" n'est pas rempli
$( '#new-fields input[required]' ).each( function() {
if( 0 === $( this ).val().length ) {
// Le champ est signalé en rouge
$( this ).addClass( 'invalid' );
// Un message d'alerte apparait après le champ
if( 0 === $( this ).next( '.validation-warning' ).length ) {
$( this ).after(
'<p class="validation-warning message">' +
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
' Ce champ est requis' +
'</p>'
);
}
} else {
// Le champ est signalé en rouge
$( this ).removeClass( 'invalid' );
// Le message d'alerte du champ est supprimé
if( 0 < $( this ).next( '.validation-warning' ).length ) {
$( this ).next( '.validation-warning' ).hide( 200 , function () {
$( this ).remove();
});
}
}
});
// Si on a des champs à compléter
if( 0 < $( '.invalid[type="text"]' ).length ) {
// Les boutons sont signalés en rouge
$( '#preview-field , #validate-new-fields' ).addClass( 'invalid' );
// Un message d'alerte apparait avant les boutons
if( 0 === $( '#new-fields' ).next( '.validation-warning' ).length ) {
$( '#new-fields' ).after(
'<p class="validation-warning message">' +
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
' Des informations sont manquantes pour certains champs,' +
' vérifiez ceux signalés en rouge' +
'</p>'
);
}
} else {
// Les signalements et messages sont supprimés
$( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
$( '#new-fields' ).next( '.validation-warning' ).hide( 200 , function () {
$( this ).remove();
});
}
}
/**** Envoi des nouveaux champs ****/
// Enregistrement des valeurs à transmettre
function onClickStoreNewFields() {
// Lorsqu'on valide
var resultArrayIndex = 0;
var count = $( 'fieldset' ).last().data( 'id' );
var helpFileExists = false;
// Savoir si au moins un fichier "aide" est enregistré
$( '.field-help' ).each( function () {
if( '' !== $( this ).val() ){
helpFileExists = true;
}
})
// dans ce cas intégrer dans le formulaire à soumettre un bloc
// qui contiendra une copie de chacun de ces input[type="file"]
if( helpFileExists ){
$( '#submit-button' ).before( '<div id="help-doc-submit" style="position:fixed;visibility:hidden;"></div>' );
}
// On déroule les blocs de champs supplémentaires
for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) {
var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
// Certains indices peuvent correspondre à un champ supprimé
if( 0 < $( thisFieldset ).length ) {
// initialisation du tableau de résultats
datasToSubmit[ resultArrayIndex ] = { fieldValues:{} };
// Ajout de la clé au tableau de resultats
datasToSubmit[ resultArrayIndex ].key = $( '.field-key' , thisFieldset ).val();
// Ajout de le nom au tableau de resultats
datasToSubmit[ resultArrayIndex ].name = $( '.field-name' , thisFieldset ).val();
// Recueil de l'élément choisi pour le tableau de resultats
datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val();
// Ajout de la valeur 'requis' ou non au tableau de resultats
datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
// Ajout de l'unité au tableau de resultats
datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null;
// Ajout du tooltip au tableau de resultats
datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null;
// Collecte les des données dépendantes de l'élément choisi
// sous forme d'un tableau de resultats
onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset );
if( $.isEmptyObject( datasToSubmit[ resultArrayIndex ].fieldValues ) ){
delete datasToSubmit[ resultArrayIndex ].fieldValues;
}
// Copie d'un champ de fichier d'aide dans le bloc d'envoi
if( 0 < $( '.field-help' , thisFieldset ).get(0).files.length ) {
// Présence d'un document d'aide
datasToSubmit[ resultArrayIndex ].help = $( '.field-help' , thisFieldset ).get(0).files[0].type;
$( '.field-help' , thisFieldset ).clone()
.attr( 'name' , 'help-' + datasToSubmit[ resultArrayIndex ].key )// l'attribut name prend la valeur de la clé
.appendTo( '#help-doc-submit' );
} else {
datasToSubmit[ resultArrayIndex ].help = null;
}
resultArrayIndex++;
}
}
var resultsArrayJson = JSON.stringify( datasToSubmit , replacer );
// JSON.strigify : Gestion des apostrophes dans les valeurs :
function replacer( key , value ) {
if ( 'fieldValues' === key && 'object' === typeof value ) {
for ( var i in value ) {
if ( typeof value[i] === 'string' ) {
// value[i] = value[i].replace( /\u0027/g, "''" );
// La solution ci-dessus convient pour stockage dans la base mais pas pour la lecture dans saisie
// du coup astuce moisie:
value[i] = value[i].replace( /\u0027/g, "@apos@" ).replace( /\u0022/g, '@quot@' )
}
}
} else if ( typeof value === 'string' ) {
// value = value.replace( /\u0027/g, "''" );
// La solution ci-dessus convient pour stockage dans la base mais pas pour la lecture dans saisie
// du coup astuce moisie:
value = value.replace( /\u0027/g, "@apos@" ).replace( /\u0022/g, '@quot@' )
}
return value;
}
console.log( resultsArrayJson );
// Désactivation de tous les champs et boutons (nouveaux champs)
$( '#new-fields, #new-fields .button , #add-fields , #preview-field' ).addClass( 'disabled' );
$( '#validate-new-fields' ).addClass( 'validated' );
$( '.validate-new-fields' ).text( 'Champs validés' );
// Mise à disposition des données pour le bouron submit
$( '#submit-button' ).before(
//la value est passée avec des apostrophes pour que les guillemets de la string json passent bien en string de l'attribut
'<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>'
);
}
// Renseigne le tableau de resultat
// pour les données dépendant de l'élément choisi
function onSelectCollectDataValuesToSubmit( datasToSubmitObject , thisFieldset ) {
switch( datasToSubmitObject.element ) {
case 'select':
case 'checkbox':
case 'list-checkbox':
case 'radio':
datasToSubmitObject.fieldValues.listValue = [];
// Ajout des valeurs de liste
onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset );
// S'il y a une valeur 'autre' on l'indique à la fin de la liste
if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) && -1 === datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) ) {
datasToSubmitObject.fieldValues.listValue.push( 'other' );
}
break;
case 'number':
case 'range':
// Placeholder
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
// Valeur par défaut
datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null;
// Incrémentation ( attribut step="" )
datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null;
// Min
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
// Max
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
break;
case 'date':
// Min
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
// Max
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
break;
case 'email':
case 'text':
case 'textarea':
default:
// Placeholder
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
break;
}
return datasToSubmitObject;
}
// Ajout d'une valeur d'un élément liste (select, checkbox etc.)
// dans le tableau de resultats
function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {
$( '.list-value' , thisFieldset ).each( function() {
var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
if( $( this ).val() ){
// Is-default-value non cochée
if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' , thisFieldset ).is( ':checked' ) ) {
datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
// Is-default-value cochée pour select/radio
} else if( 'select' === selectedFieldElement || 'radio' === selectedFieldElement ) {
// Une seule valeur par defaut, devient la première valeur du tableau + '#'
datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );
// Is-default-value cochée pour checkbox/list-checkbox
} else {
// On ajoute simplement la valeur au tableau + '#'
datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' );
}
}
});
}
/************************************************
* Fonction d'affichage des champs classiques *
************************************************/
// Prévisualisation
function DisplayClassicFields() {
// Affichage du titre du widget
renderFields( $( '#titre' ) , $( '.widget-renderer h1' ) );
// Affichage de la description
renderFields( $( '#description' ) , $( '.preview-description' ) );
// Affichage referentiel
$( '#label-taxon span' ).text( ' (' + $( '#referentiel' ).val() + ')' );
$( '#referentiel' ).change( function() {
$( '#label-taxon span' ).text( ' (' + $( this ).val() + ')' );
});
// Affichage du logo s'il existe déjà
if( 0 !== $( '#logo' ).val().length || $( '#logo' )[0].defaultValue ) {
$( '#preview-logo' ).append(
'<img src="' +
$( '#group-settings-form .logo img' ).prop( 'src' ) +
'" width="75%"' +
'>'
);
}
// Affichage du logo chargé
$( '#logo.input-file' ).change( function( event ) {
// Si le 'change' n'était pas une suppression
if( $.isEmptyObject( event.target.files[0] ) ) {
$( '#preview-logo img' ).remove();
// Si on a chargé un logo ou changé le fichier
} else {
$( '#preview-logo' ).append(
'<img src="' +
URL.createObjectURL( event.target.files[0] ) +
'" width="75%"' +
'>'
);
}
});
// Affichage de l'image de fond
$('#image_fond.input-file').change( function ( event ) {
if( !$.isEmptyObject( event.target.files[0] ) ) {
$( '.widget-renderer' ).css('background' ,'url(' + URL.createObjectURL( event.target.files[0] ) + ') no-repeat fixed center center');
} else {
$( '.widget-renderer' )[0].style.removeProperty( 'background' );
}
});
}
// Affichage des infos dès que disponibles
// pour les champs classiques
function renderFields( $source , $taget ) {
if( $source.val() ) {
$taget.text( $source.val() );
}
$source.change( function () {
$taget.text( $( this ).val() );
});
}
/*****************************************************
* Fonction d'affichage des champs supplémentaires *
*****************************************************/
// Construction des éléments à visualiser
function onClickPreviewField( thisFieldset , index ) {
// Récupération des données
// Tous les champs
var fieldLabel = $( '.field-name' , thisFieldset ).val() || '',//nom
fieldKey = $( '.field-key' , thisFieldset ).val() || '',//clé
fieldElement = $( '.field-element' , thisFieldset ).val() || '',//élément
fieldIsMandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ),//champ requis
fieldUnit = $( '.field-unit' , thisFieldset ).val() || '',//unités
fieldTooltip = $( '.field-description' , thisFieldset ).val() || '',//info-bulle
fieldHelp = $( '.file-return.help-doc-' + index ).text() || '',//nom du fichier d'aide
fieldPlaceholder = $( '.aide-saisie' , thisFieldset ).val() || '',//placeholder
// Champs à valeur numérique ou date
fieldStep = $( '.step' , thisFieldset ).val() || '',
fieldMin = $( '.min' , thisFieldset ).val() || '',
fieldMax = $( '.max' , thisFieldset ).val() || '',
// Champs "listes"
fieldDefaultNum = $( '.default' , thisFieldset ).val() || '',// value range/number par default
fieldOtherValue = $( '.option-other-value' , thisFieldset ).is( ':checked' ),//option autre
fieldOptions = collectListOptions( thisFieldset );//Array: toutes les options
// Variables d'affichage
var fieldHtml = '',//variable contenant tout le html à afficher
commonFieldsHtml = {},//Éléments simples ou chaînes communes aux "listes"
listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques
listFieldsHtml = {},//chaînes & html spécifiques aux listes
count = fieldOptions.length;//nombre d'options, pour les boucles for
fieldLabel = fieldLabel.replace( /(')/gm, '''' ).replace( /(")/gm, '""' );
fieldTooltip = fieldTooltip.replace( /(')/gm, '''' ).replace( /(")/gm, '""' );
fieldPlaceholder = fieldPlaceholder.replace( /(')/gm, '''' ).replace( /(")/gm, '""' );
//valeurs initiales des chaînes de caractères
//Éléments simples ou chaînes communes aux "listes"
commonFieldsHtml = {
dataIdAttr : ' data-id="' + index + '"',
helpButton : '',//bouton aide
helpClass : '',//classe de l'élément associé au bouton aide
titleAttr : '',//info-bulle
fieldInput : {//attributs de l'élément
typeAttr : ' type="' + fieldElement + '"',
nameAttr : ' name="' + fieldKey + '"',
classAttr : ' class="' + fieldKey + '"',
placeholderAttr : '',
mandatoryAttr : '',//required
otherAttr : ''
},
fieldLabel : {//attributs et contenu du label
labelContent : fieldLabel,//label
forAttr : ' for="' + fieldKey + '"',//attribut for
classAttr : '',//classe du label
otherAttr : ''//tous autres attributs
}
}
// Pour les éléments de listes (select, checkbox, etc.)
listFieldsHtml = {
containerContent : fieldLabel,//les options peuvent avoir chacune un label
containerClass : '',//une classe pour le conteneur
forAttr : '',//correspond à l'id d'une checkbox/radio/list-checkbox
optionIdAttr : '',//value-id
defaultAttr : ''//default
};
// Changement d'un élément existant:
// supprimer le précédent pour ajouter le nouveau
if( 0 < $( '.preview-fields' , thisFieldset ).length ) {
$( '.preview-fields' , thisFieldset ).remove();
}
// Élément requis
if( fieldIsMandatory ) {
// Attribut required pour le listes
commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
// Nom du champ (éléments listes)
listFieldsHtml.containerContent = '* ' + listFieldsHtml.containerContent;
// Nom du champ (éléments simples)
commonFieldsHtml.fieldLabel.labelContent = '* ' + commonFieldsHtml.fieldLabel.labelContent;
}
// Infobulle
if( '' !== fieldTooltip ) {
commonFieldsHtml.titleAttr = ' title="' + fieldTooltip + '"';
}
// Placeholder
if( '' !== fieldPlaceholder ) {
commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' + fieldPlaceholder + '"';
}
// Fichier d'aide
if( '' !== fieldHelp ) {
// Bouton 'aide'
commonFieldsHtml.helpButton = '<div class="help-button btn btn-outline-info btn-sm border-0"><i class="fas fa-info-circle"></i></div>';
// classe 'aide'
commonFieldsHtml.helpClass = ' and-help';
}
// html à ajouter en fonction de l'élément choisi
switch( fieldElement ) {
case 'checkbox' :
case 'radio' :
listFieldsHtml.containerClass = ' class="' + fieldElement +'"';
commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"';
fieldHtml =
// Conteneur
'<div style="width:100%"' +
// Class="L'élément choisi"
listFieldsHtml.containerClass +
// DataId
commonFieldsHtml.dataIdAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Info bulle
commonFieldsHtml.titleAttr +
' >'+
// Nom du champ
// Classe 'and-help'
'<div class="mt-3 list-label' + commonFieldsHtml.helpClass + '">' +
// Label
listFieldsHtml.containerContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</div>';
// On déroule les différentes valeurs
for( let i = 0; i < count; i++ ) {
let fieldOption = fieldOptions[i];
// L'id de input
listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue + '"';
// Default
listFieldsHtml.defaultAttr = '';//réinitialisation
if( fieldOption.isDefault ) {//affectation
listFieldsHtml.defaultAttr = ' checked';
}
// L'indice de chaque option
// L'option "autre" n'en a pas
if( '' !== fieldOption.optionIndex ) {
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
}
fieldHtml +=
'<label' +
// For
listFieldsHtml.forAttr +
// value-id
listFieldsHtml.optionIdAttr +
// Class du label
commonFieldsHtml.fieldLabel.classAttr +
'>' +
'<input' +
// Type
commonFieldsHtml.fieldInput.typeAttr +
// Id
listFieldsHtml.inputIdAttr +
// DataId
commonFieldsHtml.dataIdAttr +
// value-id
listFieldsHtml.optionIdAttr +
// Name
commonFieldsHtml.fieldInput.nameAttr +
// Value
' value="' + fieldOption.optionValue.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ) + '"' +
// Checked
listFieldsHtml.defaultAttr +
// Class="nom du champ"
commonFieldsHtml.fieldInput.classAttr +
'>' +
// Label de l'option
fieldOption.optionText.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ) +
'</label>';
}
// Si valeur "autre" est cochée
if( fieldOtherValue ) {
fieldHtml +=
'<label for="other"' +
commonFieldsHtml.dataIdAttr +
commonFieldsHtml.fieldLabel.classAttr +
'>' +
'<input' +
commonFieldsHtml.fieldInput.typeAttr +
' id="other-' + fieldElement + '-' + index + '"' +
commonFieldsHtml.fieldInput.nameAttr +
' value="other"' +
commonFieldsHtml.fieldInput.classAttr +
commonFieldsHtml.dataIdAttr +
'>' +
'Autre</label>';
}
// Fin du conteneur
fieldHtml += '</div>';
break;
case 'list-checkbox':
commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"';
fieldHtml =
// Classe 'and-help'
'<div class="multiselect add-field-select' + commonFieldsHtml.helpClass + '"' +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
'<label style="width:100%">' +
// Nom du champ
listFieldsHtml.containerContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<div class="mt-3">'+
'<div class="selectBox"' +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
'<select' +
// DataId
commonFieldsHtml.dataIdAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Info bulle
commonFieldsHtml.titleAttr +
// Class
' class="form-control ' + fieldElement + '"' +
'>' +
// Apparait dans la barre de sélection
'<option>Plusieurs choix possibles</option>' +
'</select>' +
'<div class="overSelect"></div>' +
'</div>' +
'<div class="checkboxes hidden"' +
// DataId
commonFieldsHtml.dataIdAttr +
'>';
// On déroule les différentes valeurs
for( let i = 0; i < count; i++ ) {
let fieldOption = fieldOptions[i];
// Type="checkbox"
commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"';
// Id
listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ).toLowerCase() + '"';
// For
listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ).toLowerCase() + '"';
// Default
listFieldsHtml.defaultAttr = '';//réinitialisation
if( fieldOption.isDefault ) {
listFieldsHtml.defaultAttr = ' checked';//affectation
}
// value-id
if( '' !== fieldOption.optionIndex ) {
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
}
fieldHtml +=
'<label' +
// For
listFieldsHtml.forAttr +
// value-id
listFieldsHtml.optionIdAttr +
// Class du label
commonFieldsHtml.fieldLabel.classAttr+
'>' +
'<input type="checkbox"' +
// Id
listFieldsHtml.inputIdAttr +
// value-id
listFieldsHtml.optionIdAttr +
// Name
commonFieldsHtml.fieldInput.nameAttr +
// Value
' value="' + fieldOption.optionValue.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ) + '"' +
// Checked
listFieldsHtml.defaultAttr +
// Class="nom du champ"
commonFieldsHtml.fieldInput.classAttr +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
// Label de l'option
fieldOption.optionText.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ) +
'</label>';
}
// Si valeur "autre" est cochée
if( fieldOtherValue ) {
fieldHtml +=
'<label for="other"' +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
'<input type="checkbox"' +
' id="other-' + fieldElement + '-' + index + '"' +
commonFieldsHtml.fieldInput.nameAttr +
' value="other"' +
commonFieldsHtml.fieldInput.classAttr +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
'Autre</label>';
}
// Fermeture des conteneurs .multiselect .checkboxes
fieldHtml +=
'</div>'+
'</div>'+
'</div>';
break;
case 'select':
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
commonFieldsHtml.fieldInput.classAttr += ' form-control"';
fieldHtml =
// Conteneur/Wrapper
// +Classe 'and-help'
'<div class="add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
// DataID
commonFieldsHtml.dataIdAttr +
'>' +
'<label class="mt-3" style="width:100%"' +
commonFieldsHtml.fieldLabel.forAttr +
// Info bulle
commonFieldsHtml.titleAttr +
'>' +
// Nom du champ
listFieldsHtml.containerContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<select' +
commonFieldsHtml.fieldInput.nameAttr +
' id="' + fieldKey + '"' +
// Class
commonFieldsHtml.fieldInput.classAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// DataId
commonFieldsHtml.dataIdAttr +
'>';
// On déroule les différentes valeurs
for( let i = 0; i < count; i++ ) {
let fieldOption = fieldOptions[i];
// Default
listFieldsHtml.defaultAttr = '';//réinitialisation
if( fieldOption.isDefault ) {//affectation
listFieldsHtml.defaultAttr = ' selected="selected"';
}
// value-id
if( '' !== fieldOption.optionIndex ) {
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
}
fieldHtml +=
'<option' +
// Value
' value="' + fieldOption.optionValue.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ) + '"' +
// Value-id
listFieldsHtml.optionIdAttr +
// Selected
listFieldsHtml.defaultAttr +
'>' +
// Option
fieldOption.optionText.replace( /(')/gm, '''' ).replace( /(")/gm, '""' ) +
'</option>';
}
// Si valeur "autre" est cochée
if( fieldOtherValue ) {
fieldHtml +=
'<option class="other" value="other"' + commonFieldsHtml.dataIdAttr + '>' +
'Autre' +
'</option>';
}
// Fermeture des conteneurs
fieldHtml +=
'</select>' +
// Fin du conteneur/wrapper
'</div>';
break;
case 'textarea':
// Ouvrir l'attribut class (suppression de '"')
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
// Classe 'custom-range'
commonFieldsHtml.fieldInput.classAttr += ' form-control"';
// Classe 'and-help'
commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"';
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';
fieldHtml =
'<label style="width:100%"' +
// For
commonFieldsHtml.fieldLabel.forAttr +
// Class
commonFieldsHtml.fieldLabel.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Autres attributs
commonFieldsHtml.fieldLabel.otherAttr +
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<textarea' +
// Name
commonFieldsHtml.fieldInput.nameAttr +
// DataId
commonFieldsHtml.dataIdAttr +
// Class
commonFieldsHtml.fieldInput.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Info-bulle
commonFieldsHtml.fieldInput.placeholderAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'></textarea>';
break;
case 'range':
// Ouvrir l'attribut class (suppression de '"')
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
// Classe 'custom-range'
commonFieldsHtml.fieldInput.classAttr += ' custom-range form-control pl-3"';
// Classe 'and-help'
commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"';
// Step
if( '' !== fieldStep ) {
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"';
}
// Min
if( '' !== fieldMin ) {
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"';
}
//Max
if( '' !== fieldMax ) {
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"';
}
fieldHtml =
'<div' +
' class="range"' +
' id="' + fieldKey + '"' +
'>' +
'<label style="width:100%"' +
// For
commonFieldsHtml.fieldLabel.forAttr +
// Class
commonFieldsHtml.fieldLabel.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Autres attributs
commonFieldsHtml.fieldLabel.otherAttr +
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<div class="col-sm-12 row" style="max-width=100%">' +
// Visualiser min max et la valeur de range
'<p class="col-sm-2 range-values text-center font-weight-bold">'+
'Min ' + fieldMin +
'</p>'+
'<div class="range-live-value range-values text-center font-weight-bold col-sm-7">'+
fieldDefaultNum +
'</div>'+
'<p class="col-sm-2 range-values text-center font-weight-bold">'+
'Max ' + fieldMax +
'</p>' +
'<input' +
// Type
commonFieldsHtml.fieldInput.typeAttr +
// Name
commonFieldsHtml.fieldInput.nameAttr +
// DataId
commonFieldsHtml.dataIdAttr +
// Class
commonFieldsHtml.fieldInput.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Default
' value="' + fieldDefaultNum + '"' +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'>' +
'</div>'
'</div>';
break;
case 'number':
// Step
if( '' !== fieldStep ) {
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"';
}
case 'date':
// Ouvrir l'attribut class (suppression de '"')
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
// Classe 'and-help'
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"';
// Min
if( '' !== fieldMin ) {
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"';
}
// Max
if( '' !== fieldMax ) {
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"';
}
// Class du label
commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"';
fieldHtml =
'<div class="number">' +
'<label style="width:100%"' +
// For
commonFieldsHtml.fieldLabel.forAttr +
// Class
commonFieldsHtml.fieldLabel.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Autres attributs
commonFieldsHtml.fieldLabel.otherAttr +
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<input' +
// Type
commonFieldsHtml.fieldInput.typeAttr +
// Name
commonFieldsHtml.fieldInput.nameAttr +
// DataId
commonFieldsHtml.dataIdAttr +
// Class
commonFieldsHtml.fieldInput.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Placeholder
commonFieldsHtml.fieldInput.placeholderAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Default
' value="' + fieldDefaultNum + '"' +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'>' +
'</div>';
break;
case 'text' :
case 'email':
default:
// Ouvrir l'attribut class (suppression de '"')
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
// Classe 'and-help'
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"';
// Class du label
commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"';
fieldHtml =
'<label style="width:100%"' +
// For
commonFieldsHtml.fieldLabel.forAttr +
// Class
commonFieldsHtml.fieldLabel.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Autres attributs
commonFieldsHtml.fieldLabel.otherAttr +
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<input' +
// Type
commonFieldsHtml.fieldInput.typeAttr +
// Name
commonFieldsHtml.fieldInput.nameAttr +
// DataId
commonFieldsHtml.dataIdAttr +
// Class
commonFieldsHtml.fieldInput.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Placeholder
commonFieldsHtml.fieldInput.placeholderAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'>';
break;
}
return fieldHtml;
}
// Construire un tableau des options pour chaque élément de listes
function collectListOptions( thisFieldset ) {
var $details = $( '.field-details' , thisFieldset ),
options = [];
$details.find( '.new-value' ).each( function() {
options.push({
// Valeur transmise (value)
optionValue : $( this ).find('.list-value').val().toLowerCase(),
// Valeur Visible
optionText : $( this ).find('.list-value').val(),
// Booléen "default"
isDefault : $( this ).find( '.is-defaut-value').is( ':checked' ),
// Indice de l'option
optionIndex : $( this ).data( 'list-value-id')
});
});
return options;
}
// Faire apparaitre un champ text "Autre"
function onOtherOption( thisFieldset , index ) {
// Ce champ (dans la prévisualisation)
var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'),
// L'élément choisi
element = $('.field-element' , thisFieldset ).val(),
// Où insérer le champ "Autre"
$element = $( '.' + element , thisPreviewFieldset ),
// html du champ "Autre"
collectOther =
'<div class="col-sm-12 mt-1 collect-other-block">'+
'<label data-id="' + index + '" for="collect-other" style="font-weight:300">Autre option :</label>' +
'<input type="text" name="collect-other" data-id="' + index + '" class="collect-other form-control" >'+
'</div>';
// Pouvoir supprimer le champ "Autre"
function optionRemove( thisPreviewFieldset ) {
$( '.collect-other-block' , thisPreviewFieldset ).remove();
}
switch( element ) {
case 'radio' :
// Lorsqu'un nouveau bouton est coché
$( 'input' , thisPreviewFieldset ).on( 'change' , function () {
if( 'other' === $( this ).val() ) {
// Insertion du champ "Autre" après les boutons
$element.after( collectOther );
} else {
// Suppression du champ autre
optionRemove( thisPreviewFieldset );
}
});
break;
case 'select' :
// Lorsque l'option "Autre" est selectionnée
$( 'select' , thisPreviewFieldset ).on( 'change' , function () {
if( 'other' === $( this).val() ) {
// Insertion du champ "Autre" après les boutons
$element.after( collectOther );
// Suppression du champ autre
} else {
optionRemove( thisPreviewFieldset );
}
});
break;
case 'list-checkbox' :
// Lorsque "Autre" est coché
$( 'input#other-' + element + '-' + index, thisPreviewFieldset ).on( 'click' , function () {
// Insertion du champ "Autre" après les boutons
if( $( this ).is( ':checked' ) ) {
$( '.checkboxes', thisPreviewFieldset ).append( collectOther );
} else {
// Suppression du champ autre
optionRemove( thisPreviewFieldset );
}
});
break;
case 'checkbox' :
// Lorsque "Autre" est coché
$( 'input#other-' + element + '-' + index, thisPreviewFieldset ).on( 'click' , function () {
// Insertion du champ "Autre" après les boutons
if( $( this ).is( ':checked' ) ) {
$element.after( collectOther );
} else {
// Suppression du champ autre
optionRemove( thisPreviewFieldset );
}
});
break;
default :
break;
}
}
// Prévisualisation des nouveaux champs
function newFieldsPreview() {
var count = $( 'fieldset' ).last().data( 'id' );
// Si on a déjà prévisualisé on efface tout pour recommencer
if( 0 < $( '.preview-fields' ).length ) {
$( '.preview-fields' ).each( function () {
$( this ).remove();
});
}
// Au premier ajout d'un champ dans la prévisualisation on ajoute un titre et un message
if( true === firstClick ) {
$( '#zone-supp' ).prepend(
'<h2>Informations propres au projet</h2>' +
'<div class="message">L\'objectif principal de cet aperçu est de vérifier les contenus et repérer d\'éventuelles erreurs</div>'
);
}
// Parcourir tous les blocs d'infos de champs supplémentaires
for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) {
var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
// Certains indices peuvent correspondre à un champ supprimé
if( 0 < $( thisFieldset ).length ) {
// Prévisualisation d'un champ
$( '#zone-supp .preview-container' ).append(
'<div class="preview-fields col-sm-12 row" data-id="' + index + '">'+
onClickPreviewField( thisFieldset , index ) +
'</div>'
);
// Ajout/suppression d'un champ texte "Autre"
if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) ) {
onOtherOption( thisFieldset , index);
}
}
}
// Le titre + message de la section prévisualisation ne sont ajoutés qu'une fois
firstClick = false;
}
// Activation/Desactivation et contenu de la modale Bootstrap
// https://getbootstrap.com/docs/3.3/javascript/#modals
function previewFieldHelpModal() {
$( '#zone-supp' ).on( 'click' , '.help-button' , function ( event ) {
var index = $( this ).closest( '.preview-fields' ).data( 'id' ),
thisFieldset = $( '.new-field[data-id="' + index + '"]' ),
file = $( '.field-help' , thisFieldset )[0].files[0],
tmppath = URL.createObjectURL( file );
// Titre
$( '#help-modal-label' ).text( 'Aide pour : ' + $( '.field-name' , thisFieldset ).val() );
// Contenu
if( file.type.match( 'image/*' ) ) {
$( '#print_content' ).append( '<img src="' + tmppath + '" style="max-width:100%">' );
} else {
$( '#print_content' ).append( '<p>Erreur : le fichier n\'est pas une image</p>' );
}
// Sortie avec la touche escape
$( '#help-modal' ).modal( { keyboard : true } );
// Affichage
$( '#help-modal' ).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
$( '#help-modal' ).on( 'shown.bs.modal' , function () {
$( '#myInput' ).trigger( 'focus' );
})
// Réinitialisation
$( '#help-modal' ).on( 'hidden.bs.modal' , function () {
$( '#help-modal-label' ).text();
$( '#print_content' ).empty();
})
});
}
/***************************
* Lancement des scripts *
***************************/
// Tableau d'envoi des données
var datasToSubmit = new Array();
// Variable permettant un seul affichage du titre
// de la prévisualisation pour les nouveaux champs
var firstClick = true;
jQuery( document ).ready( function() {
// reset de tous les formulaires
$( 'form' ).each( function() {
$( this )[0].reset();
});
// Identifiant de champ
var fieldIndex = 0;
// Ajout de nouveaux champs
onClickAddNewFields( fieldIndex );
// Activation/Desactivation des boutons valider et prévisualiser
onClickButtonsTagMissingValues();
// Prévisualisation des champs classiques
DisplayClassicFields();
// Affichage des images ou nom des documents importés
inputFile();
// Affichage des List-checkbox
inputListCheckbox();
// Activer la checkbox de valeur par default uniquement si une valeur est entrée
onInputListValueLabelEnableDefaultCheckbox();
// Affichage des Range
inputRangeDisplayNumber();
// Modale "aide"
previewFieldHelpModal();
});