Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3167 → Rev 3168

/trunk/widget/modules/manager/squelettes/js/manager.js
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 *