1,5 → 1,8 |
"use strict"; |
|
// déclaration du tableau d'envoi des données? |
// var datasToSubmit = new Array(); |
|
/*************************** |
* Lancement des scripts * |
***************************/ |
6,9 → 9,9 |
|
jQuery( document ).ready( function() { |
|
|
// Initialisation d'un identifiant de champ |
var fieldId = 1; |
|
var fieldId = 0; |
// Ajout de nouveaux champs |
onClickAddNewFields( fieldId ); |
|
26,17 → 29,33 |
|
$( '#add-fields' ).click( function() { |
|
// TODO : La création du tableau ci-dessous est à revoir mais les données sont les bonnes |
// datasToSubmit[fieldId] = { |
// key:'', |
// name:'', |
// element:'', |
// // un objet contenant les renseignements en fonction de l'élément |
// // + contiendrait aussi un tableau des différentes valeus dans le cas où l'élément est une liste : |
// value:'', |
// description:'', |
// unit:'', |
// help:'' |
// }; |
|
// Ajout d'un nouveau champ |
displayNewField( fieldId ); |
|
// Nom du champ affichage titre du champ |
onChangeDisplayFieldLabel( fieldId ); |
|
// En fonction du type de champ choisi on demande les informations correspondantes |
onChangeFieldTypeCollectDetails( fieldId ); |
|
// TODO : recueillir les données et renseigner le tableau de'envoi |
|
// Suppression d'un champ |
onClickRemoveField(); |
|
$('#submit-button').before( |
'<p>hello</p>'+ |
'<input type="hidden" class="name-field-submit" name="name" data-id="' + fieldId+ '" value="">' |
); |
|
// Les images ou les nom des documents importés doivent aussi |
// s'afficher dans les champs ajoutés |
inputFile(); |
46,21 → 65,30 |
} |
|
// Création et logique pour un nouveau champ |
function newField( fieldId ) { |
// Un peu d'animation de l'affichage d'un nouveau champ |
function displayNewField( fieldId ) { |
|
// Le html des nouveaux champs à insérer dans le dom |
var fieldsHtml = |
// Le html des nouveaux champs inséré dans le dom |
$( '#new-fields' ).append( |
'<div data-id="' + fieldId + '" class="new-field">'+ |
'<h3>Nouveau champ :<br><strong class="field-title"></strong></h3>'+ |
|
// Nom du champ |
'<label for="nom-champs" title="Donnez titre à votre champ">Nom du champ</label>'+ |
'<input type="text" class="nom-champs" placeholder="Donnez titre à votre champ" required>'+ |
'<label for="field-name" title="Donnez titre à votre champ">Nom du champ</label>'+ |
'<input type="text" name="field-name" class="field-name" placeholder="Donnez titre à votre champ" required>'+ |
|
// Clé du champ |
'<label for="field-key" title="Clé du champ (son nom dans la base de données)">'+ |
'Clé du champ en camelCase (ecritureChameau)<br>'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'Pas d\'accents ou de cédille, pas de caractères spéciaux.'+ |
'</label>'+ |
'<input type="text" name="field-key" class="field-key" placeholder="Clé du champ" required title="Clé du champ (son nom dans la base de données)">'+ |
|
// Type de champ |
'<label for="type-champ" title="Quel type de champ">Type de champ</label>'+ |
'<label for="field-element" title="Quel type de champ">Type de champ</label>'+ |
'<div class="select-wrapper add-field-select">'+ |
'<select name="type-champ" class="type-champ" required>'+ |
'<select name="field-element" class="field-element" required>'+ |
'<option value="text" selected="selected">Champ texte</option>'+ |
'<option value="email">Champ email</option>'+ |
'<option value="textarea">Champ rédaction</option>'+ |
75,74 → 103,56 |
'</select>'+ |
'</div>'+ |
|
// Clé du champ |
'<label for="cle" title="Clé du champ (son nom dans la base de données)">'+ |
'Clé du champ en camelCase (ecritureChameau)<br>'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'Pas d\'accents ou de cédille, pas de caractères spéciaux.'+ |
'</label>'+ |
'<input type="text" name="cle" class="cle" placeholder="Clé du champ" required title="Clé du champ (son nom dans la base de données)">'+ |
// Checkbox "champ requis" |
'<label for="field-is_mandatory" title="Ce champ est obligatoire">Champ requis ?</label>'+ |
'<input type="checkbox" name="field-is_mandatory" class="field-is_mandatory">'+ |
|
// Unité des valeurs |
'<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+ |
'<input type="text" name="field-unit" class="field-unit" placeholder="symbole de vos unités">'+ |
|
// Tooltip |
'<label for="field-tooltip" title="Ajoutez une info-bulle">Info-bulle</label>'+ |
'<input type="text" name="field-tooltip" class="field-tooltip" placeholder="Quelques mots">'+ |
'<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+ |
'<input type="text" name="field-description" class="field-description" placeholder="Quelques mots">'+ |
|
// Import d'une image ou d'un pdf d'aide à afficher en popup |
'<div class="input-file-container">'+ |
'<input type="file" class="input-file" name="help" id="help" accept="application/pdf, image/*, video/*">'+ |
'<label for="help" class="label-file"><i class="fas fa-download"></i>Image ou pdf d\'aide (popup)</label>'+ |
'<input type="file" class="input-file field-help" name="field-help" accept="application/pdf, image/*, video/*">'+ |
'<label for="field-help" class="label-file"><i class="fas fa-download"></i>Image ou pdf d\'aide (popup)</label>'+ |
'</div>'+ |
'<div class="file-return help"></div>'+ |
|
'<div class="row">'+ |
'<label for="remove-field">Supprimer ce champ</label>'+ |
'<div class="remove-field button" name="remove-field" data-id="' + fieldId + '" title="Supprimer un champ"><i class="fa fa-times" aria-hidden="true"></i></div>'+ |
|
// Checkbox "champ requis" |
'<div class="col-md-5">'+ |
'<label for="required-field" title="Ce champ est obligatoire">Champ requis ?</label>'+ |
'<input type="checkbox" name="required-field" id="required-field">'+ |
'</div>'+ |
|
// Bouton supprimer le champ |
'<div class="col-md-5">'+ |
'<label for="remove-field">Supprimer ce champ</label>'+ |
'<div class="remove-field button" name="remove-field" data-id="' + fieldId + '" title="Supprimer un champ"><i class="fa fa-times" aria-hidden="true"></i></div>' |
'</div>'+ |
|
'</div>'+ |
|
'</div>'; |
'</div>' |
); |
|
$( '#new-fields' ).append( fieldsHtml ); |
// Animation de l'affichage |
$( '.new-field[data-id="' + fieldId + '"]').hide().removeClass( 'hidden' ).show( 200 ); |
} |
|
// Le nom du champ est affiché dès qu'il est renseigné |
onChangeDisplayFieldName( fieldId ); |
// Affichage du nom du champ dès qu'il est renseigné |
function onChangeDisplayFieldLabel( fieldId ) { |
|
// En fonction du type de champ choisi on demande les informations correspondantes |
onChangeFieldTypeCollectDetails( fieldId ); |
} |
$('.new-field[data-id="' + fieldId + '"] .field-name').change( function() { |
|
// Un peu d'animation de l'affichage d'un nouveau champ |
function displayNewField( fieldId ) { |
$( '.new-field[data-id="' + fieldId + '"] .field-title' ).text( $( this ).val() ); |
|
newField( fieldId ); |
$( '.new-field[data-id="' + fieldId + '"]').hide().removeClass( 'hidden' ).show( 200 ); |
// TODO : Renseigner le nom du champs dans le tableau à envoyer |
}); |
} |
|
// Logique pour le bouton supprimer tout un champ |
// Supprimer tout un champ |
function onClickRemoveField() { |
|
$( '.remove-field.button' ).click( function() { |
|
$( '.new-field[data-id="' + $( this ).attr( 'data-id' ) + '"]').fadeOut( 200 , this.remove() ); |
}); |
} |
|
// Affichage du nom du champ dès qu'il est renseigné |
function onChangeDisplayFieldName( fieldId ) { |
|
$('.new-field[data-id="' + fieldId + '"] .nom-champs').change( function() { |
var fieldName = $( this ).val(); |
$( '.new-field[data-id="' + fieldId + '"] .field-title' ).text( fieldName ); |
$( '.name-field-submit[data-id="' + fieldId + '"]' ).val( fieldName ); |
// TODO : supprimer un champ du tableau à envoyer |
}); |
} |
|
151,15 → 161,17 |
// Logique de recueil d'informations en fonction du type de champ choisi |
function onChangeFieldTypeCollectDetails( fieldId ) { |
|
var fieldDetails = |
// Placeholder (champ type text par défaut) |
'<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" class="aide-saisie" placeholder="Ce que doit contenir le champ">'; |
// On insère les champs par défaut de recueil d'informations |
displayFieldDetailsCollect( fieldId , fieldDetails ); |
// var validateRegexp = ''; |
|
$( '.new-field[data-id="' + fieldId + '"] .type-champ' ).change( function() { |
var fieldDetails = |
// Placeholder (champ type text par défaut) |
'<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" class="aide-saisie" placeholder="Ce que doit contenir le champ">'; |
// On insère les champs par défaut de recueil d'informations |
displayFieldDetailsCollect( fieldId , fieldDetails ); |
|
$( '.new-field[data-id="' + fieldId + '"] .field-element' ).change( function() { |
|
// on intialise L'id pour les listes la variable qui contiendra un id pour chaque option |
var valueId = 1; |
|
167,42 → 179,51 |
// les champs de détails de l'option précédente doivent être supprimés |
$( '.new-field[data-id="' + fieldId + '"] .field-details' ).remove(); |
|
// $( this ).val() = le type de champ choisi dans select ".type-champ" |
// Remise à 0 des infos à soumettre dans l'input type hiddes .field-value-submit |
$( '.field-value-submit[data-id="' + fieldId + '"]' ).val(''); |
|
// $( this ).val() = le type de champ choisi dans select ".field-element" |
switch( $( this ).val() ) { |
|
case 'number': |
case 'range': |
// validateRegexp = '^\d+([\.|,]\d+)?$'; |
fieldDetails = |
// Placeholder |
'<label for="aide-saisie" title="Deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ (ex: min 20, 10 par 10, etc.)">Texte d\'aide à la saisie</label>'+ |
'<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" class="aide-saisie" placeholder="Ce que doit contenir le champ">'+ |
|
// Valeur par défaut |
'<label for="default" title="Valeur par défaut">Valeur par défaut (1 par défaut)</label>'+ |
'<input type="number" name="default" class="default" value="1">'+ |
'<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+ |
'<input type="number" name="default" class="default" step="0.01" value="0">'+ |
|
// Incrémentation ( attribut step="" ) |
'<label for="pas" title="De 10 en 10, de 0.5 en 0.5, etc.">Le "pas" d\'incrémentation,<br>(attention, pas devirgule mais un point),<br>par defaut la valeur augmentera de 1 en 1</label>'+ |
'<input type="number" name="pas" class="pas" value="1">'; |
'<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Le "pas" d\'incrémentation (step).<br>Pour l\'utilisateur, par defaut step = 1</label>'+ |
'<input type="number" name="step" class="step" step="0.01" value="1">'+ |
|
// Min |
'<label for="min" title="valeur min">Valeur minimale</label>'+ |
'<input type="number" name="min" class="min" value="1">'+ |
'<input type="number" name="min" class="min" step="0.01" value="0">'+ |
|
// Max |
'<label for="max" title="valeur max">Valeur maximale</label>'+ |
'<input type="number" name="max" class="max" value="1">'; |
'<input type="number" name="max" class="max" step="0.01" value="1">'+ |
'<p class="message"><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> Ne pas oublier de changer la valeur max, fixée à 1 par defaut</p>'; |
break; |
|
case 'date': |
// regex : fevrier à terminer (années non bisextiles inachevé) |
// validateRegexp = '^(?:(?:(?:(?:[0-2][1-9]|[1-3]0|31)\/(?:0[13578]|10|12))|(?:(?:[0-2][1-9]|[1-3]0)\/(?:0[469]|11)))\/(?:[12][0-9]{3}))|(?:(?:[0-2][1-9]|[12]0)\/02\/(?:(?:[12][26]00)|(?:2000)|(?:[12][0-9]0[48])|(?:[12][0-9][2468][048])|(?:[12][0-9][13579][26]))|(?:(?:[0-2][1-8]|[12]0)\/02\/(?:1000|[12][1345789]00|[12][1-9]0[1235679]|)))$' |
var today = new Date(); |
today = today.getDate() + '/' + ( today.getMonth() + 1 ) + '/' + today.getFullYear(); |
fieldDetails = |
// Date min |
'<label for="min" title="valeur min">Valeur minimale</label>'+ |
'<input type="date" name="min" class="min" value="1">'+ |
'<input type="date" name="min" class="min" value="' + today +'">'+ |
|
// Date max |
'<label for="max" title="valeur max">Valeur maximale</label>'+ |
'<input type="date" name="max" class="max" value="1">'; |
'<input type="date" name="max" class="max" value="31/12/2999">'; |
break; |
|
case 'select': |
209,10 → 230,9 |
case 'checkbox': |
case 'list-checkbox': |
case 'radio': |
// validateRegexp = ''; |
fieldDetails = |
// Todo : afficher les noms donnés dans le select ".type-champ" |
// plutot que le nom des éléments html |
'<p class="message">Ajoutez les valeurs de ' + $( this ).val() + '</p>'+ |
'<p class="message">Ajoutez les valeurs de \"' + $( this ).children( 'option:selected' ).text() + '\"</p>'+ |
|
// Bouton ajout d'une valeur à la liste |
'<label for="add-value" class="add-value" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+ |
225,9 → 245,11 |
|
case 'file': |
fieldDetails = ''; |
break; |
|
case 'email': |
case 'text': |
case 'textarea': |
case 'email': |
default: |
fieldDetails = |
// Placeholder |
236,6 → 258,9 |
break; |
} |
|
// Changement du type d'élément à envoyer |
$( '.field-element-submit[data-id="' + fieldId + '"]' ).val( $( this ).val() ); |
|
if( fieldDetails.length > 0 ) { |
//ne pas ajouer une div vide s'il n'y pas d'informations à demander |
displayFieldDetailsCollect( fieldId , fieldDetails ); |
245,6 → 270,11 |
// lorsque le champ est une liste ou case à cocher |
onClickAddNewValueToList( fieldId , valueId ); |
|
// TODO : fonction ci-dessous est déclarée plus bas |
// et servait à envoyer les données collectées |
// mais pas faite pour un tableau |
// onCollectDataValuesToSubmit( fieldId , $( this ).val() ); |
|
}); |
} |
|
261,7 → 291,7 |
|
$( '.new-field[data-id="' + fieldId + '"] .add-value-button' ).click( function() { |
|
var valueHtml = |
$( '.new-field[data-id="' + fieldId + '"] .add-value' ).before( |
'<div class="new-value" data-list-value-id="' + valueId +'">'+ |
|
// Recueil d'une valeur de la liste |
272,7 → 302,7 |
|
'<div class="col-md-5">'+ |
|
// Checkbox "valeur pas défaut" de la liste |
// Checkbox "valeur par défaut" de la liste |
'<label for="is-defaut-value" title="Ceci est la valeur par défaut">Valeur par défaut</label>'+ |
'<input type="checkbox" name="is-defaut-value" class="is-defaut-value">'+ |
|
282,15 → 312,17 |
|
// Bouton "supprimer la valeur" de la liste |
'<label for="remove-value">Supprimer valeur</label>'+ |
'<div class="remove-value button" name="remove-value" data-list-value-id="' + valueId + '" title="Supprimer une valeur"><i class="fa fa-times" aria-hidden="true"></i></div>' |
'<div class="remove-value button" name="remove-value" data-list-value-id="' + valueId + '" title="Supprimer une valeur"><i class="fa fa-times" aria-hidden="true"></i></div>'+ |
|
'</div>'+ |
|
'</div>'+ |
'</div>'; |
'</div>' |
); |
// TODO : collecter les nouvelles valeurs |
// et les ajouter sous forme d'un tableau de données |
// sans oublier d'indiquer la valeur par defaut |
|
$( '.new-field[data-id="' + fieldId + '"] .add-value' ).before( valueHtml ); |
|
// Pouvoir supprimer une valeur |
onClickRemoveListValue( fieldId ); |
|
306,10 → 338,12 |
|
$('.new-field[data-id="' + fieldId + '"] .remove-value.button').click( function() { |
$( '.new-field[data-id="' + fieldId + '"] .new-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' ).fadeOut( 200 , this.remove() ); |
|
// TODO : logique pour retirer une valeur du tableau d'envoi |
}); |
} |
|
// Dans une liste il ne peut y avoir qu'une valeur pas défaut cochée |
// Dans une liste il ne peut y avoir qu'une valeur par défaut cochée |
function onClickDefaultValueRemoveOthers( fieldId ) { |
|
$( '.new-field[data-id="' + fieldId + '"] .is-defaut-value' ).click( function() { |
317,7 → 351,113 |
}); |
} |
|
// TODO : ci-dessous l'envoi des données |
// quand je pensais le faire à travers des input hidden au dessus du submit |
// la logique pourrait encore servir? |
// il manquait juste les valeurs pour les listes (select,checkbox, etc.) |
// et l'ajout d'une valeur 'autre' si la checkbox était checkée |
// |
// // Remplissage de l'attribut valut de l'input hidden .field-value-submit |
// // pour l'envoi des informations qui dépendent de l'élément choisi |
// function onCollectDataValuesToSubmit( fieldId , selectedList ) { |
|
// switch( selectedList ) { |
|
// case 'number': |
// case 'range': |
// //default |
// var ph = 'ph:' + $( '.new-field[data-id="' + fieldId + '"] .aide-saisie' ).val() + ';'; |
// var def = 'def:' + $( '.new-field[data-id="' + fieldId + '"] .default' ).val() + ';'; |
// var step = 'step:' + $( '.new-field[data-id="' + fieldId + '"] .default' ).val() + ';'; |
// var min = 'min:' + $( '.new-field[data-id="' + fieldId + '"] .min' ).val() + ';'; |
// var max = 'max:' + $( '.new-field[data-id="' + fieldId + '"] .max' ).val() + ';'; |
|
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + ph + def + step + min + max + '}'); |
|
// // Placeholder |
// $( '.new-field[data-id="' + fieldId + '"] .aide-saisie' ).change( function() { |
// ph = 'ph:"' + $( this ).val() + '";'; |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + ph + def + step + min + max + '}'); |
// }); |
|
// // Valeur par défaut |
// $( '.new-field[data-id="' + fieldId + '"] .default' ).change( function() { |
// def = 'def:' + $( this ).val() + ';'; |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + ph + def + step + min + max + '}'); |
// }); |
|
// // Incrémentation ( attribut step="" ) |
// $( '.new-field[data-id="' + fieldId + '"] .step' ).change( function() { |
// step = 'step:' + $( this ).val() + ';'; |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + ph + def + step + min + max + '}'); |
// }); |
|
// // Min |
// $( '.new-field[data-id="' + fieldId + '"] .min' ).change( function() { |
// min = 'min:' + $( this ).val() + ';'; |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + ph + def + step + min + max + '}'); |
// }); |
|
// // Max |
// $( '.new-field[data-id="' + fieldId + '"] .max' ).change( function() { |
// max = 'max:' + $( this ).val() + ';'; |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + ph + def + step + min + max + '}'); |
// }); |
|
// break; |
|
// case 'date': |
// // default |
// var min = 'min:' + $( '.new-field[data-id="' + fieldId + '"] .min' ).val() + ';'; |
// var max = 'max:' + $( '.new-field[data-id="' + fieldId + '"] .max' ).val() + ';'; |
|
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + min + max + '}' ); |
|
// // Min |
// $( '.new-field[data-id="' + fieldId + '"] .min' ).change( function() { |
// min = 'min:' + $( this ).val() + ';'; |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + min + max + '}' ); |
// }); |
|
// // Max |
// $( '.new-field[data-id="' + fieldId + '"] .max' ).change( function() { |
// var max = 'max:' + $( this ).val() + ';'; |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{' + min + max + '}' ); |
// }); |
// break; |
|
// case 'select': |
// case 'checkbox': |
// case 'list-checkbox': |
// case 'radio': |
// // // Bouton ajout d'une valeur à la liste |
// // '<label for="add-value" class="add-value" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+ |
// // '<div class="button add-value-button" name="add-value" title="Ajouter une valeur à la liste"><i class="fa fa-plus" aria-hidden="true"></i></div>'+ |
|
// // // checkbox ajouter une valeur "Autre:" |
// // '<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+ |
// // '<input type="checkbox" class="option-other-value" name="option-other-value" title="Ajouter une option \'Autre\' à la fin">'; |
// value = 'lists'; |
// break; |
|
// case 'file': |
// $( '.new-field[data-id="' + fieldId + '"] .input-file' ).change( function() { |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val( '{fileName:' + $( this ).text() + '}'); |
// }); |
// break; |
|
// case 'email': |
// case 'text': |
// case 'textarea': |
// default: |
// // Placeholder |
// $( '.new-field[data-id="' + fieldId + '"] .aide-saisie' ).change( function() { |
// $( '.field-value-submit[data-id="' + fieldId + '"]' ).val('{ph:"' + $( this ).val() + '"}'); |
// }); |
// break; |
// } |
// } |
|
/**************************************** |
* Fonctions pour afficher les images * |
* ou les nom de fichers importés * |