Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3240 → Rev 3241

/trunk/widget/modules/manager/squelettes/js/manager.js
102,12 → 102,9
 
// Style et affichage des input type="range"
function inputRangeDisplayNumber() {
$( '#zone-supp' ).on( 'input' , '.range input[type="range"]' , function () {
$( this ).next( 'input[type="number"]' ).val ( $( this ).val() );
$( '#zone-appli' ).on( 'input' , 'input[type="range"]' , function () {
$( this ).siblings( '.range-live-value' ).text( $( this ).val() );
});
$( '#zone-supp' ).on( 'input' , '.range input[type="number"]' , function () {
$( this ).prev( 'input[type="range"]' ).val ( $( this ).val() );
});
}
 
/***********************************************************
142,55 → 139,73
'<fieldset data-id="' + fieldIndex + '" class="new-field">'+
'<h3>Nouveau champ :<br><strong class="field-title" data-id="' + fieldIndex + '"></strong></h3>'+
// Nom du champ
'<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" placeholder="Titre de votre champ" title="Le titre du champ" required>'+
// Clé du champ
'<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" 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>'+
'<p class="message">' +
'<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
'<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
'<div class="select-wrapper add-field-select" data-id="' + fieldIndex + '">'+
'<select name="field-element" data-id="' + fieldIndex + '" class="field-element">'+
'<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 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>'+
// Checkbox "champ requis"
'<label for="field-is_mandatory" title="Ce champ est obligatoire">Champ requis ?</label>'+
'<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" 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" data-id="' + fieldIndex + '" class="field-unit" placeholder="symbole de vos unités">'+
// Tooltip
'<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+
'<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description" placeholder="Quelques mots">'+
// Import d'une image d'aide à afficher en popup
'<div class="input-file-container">'+
'<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="remove-file button" 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>'+
// Boutons supprimer
'<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>'+
'</fieldset>'
);
// Animation de l'affichage
222,8 → 237,10
displayFieldDetailsCollect(
fieldIndex,
// 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" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'
'<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() {
237,26 → 254,41
 
// Html de recueil de données en fonction de l'élément choisi
switch( $( this ).val() ) {
case 'range':
case 'number':
case 'range':
displayFieldDetailsCollect(
fieldIndex,
'<p class="message"><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> Ne pas oublier de changer, si nécessaire, les valeurs step, min et max</p>' +
'<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
'<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" placeholder="Ce que doit contenir le champ">'+
'<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
'<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+
'<input type="number" name="default" data-id="' + fieldIndex + '" class="default" step="0.01" lang="en">'+
'<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="" )
'<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step) :<br>defaut = +1</label>'+
'<input type="number" name="step" data-id="' + fieldIndex + '" class="step" step="0.01" value="1" lang="en">'+
'<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
'<label for="min" title="valeur min">Valeur minimale</label>'+
'<input type="number" name="min" data-id="' + fieldIndex + '" class="min" step="0.01" value="0" lang="en">'+
'<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
'<label for="max" title="valeur max">Valeur maximale</label>'+
'<input type="number" name="max" data-id="' + fieldIndex + '" class="max" step="0.01" value="1" lang="en">'
'<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;
 
264,11 → 296,15
displayFieldDetailsCollect(
fieldIndex,
// Date min
'<label for="min" title="date min">Date minimale</label>'+
'<input type="date" name="min" data-id="' + fieldIndex + '" class="min" 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 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
'<label for="max" title="date max">Date maximale</label>'+
'<input type="date" name="max" data-id="' + fieldIndex + '" class="max" 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 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;
 
283,20 → 319,32
'Entrez au moins une valeur de ' + $( this ).children( 'option:selected' ).text() +
'</p>'+
// Première option
'<div class="new-value" data-list-value-id="' + valueIndex +'">'+
'<div class="new-value center-block row" data-list-value-id="' + valueIndex +'">'+
// Recueil d'une valeur de la liste
'<label for="list-value">Valeur *:</label>'+
'<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
'<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
'<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" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
'<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
'<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 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:"
'<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+
'<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'
'<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;
 
307,8 → 355,10
displayFieldDetailsCollect(
fieldIndex,
// Placeholder
'<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" placeholder="Ce que doit contenir le champ">'
'<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 form-control" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'+
'</div>'
);
break;
}
321,7 → 371,7
// 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" data-id="' + fieldIndex + '">' +
'<div class="field-details col-sm-11 mt-3 row" data-id="' + fieldIndex + '">' +
fieldDetails +
'</div>'
).hide().show( 200);
333,23 → 383,26
function onClickAddNewValueToList( fieldIndex , valueIndex ) {
$( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() {
valueIndex++;
$( '.add-value[data-id="' + fieldIndex + '"]' ).before(
'<div class="new-value" data-list-value-id="' + 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
'<label for="list-value">Valeur *:</label>'+
'<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
'<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="row">'+
'<div class="col-md-5">'+
// Valeur par défaut
'<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" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
'</div>'+
'<div class="col-md-5">'+
// Bouton supprimer une option
'<label for="remove-value">supprimer valeur</label>'+
'<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);
363,11 → 416,11
// Activer la checkbox de valeur par default uniquement si une valeur est entrée
function onInputListValueLabelEnableDefaultCheckbox() {
$( '#new-fields' ).on( 'input' , '.list-value' , function() {
var thisValue = $( this ).parent( '.new-value' );
var $thisDefautValue = $( '.is-defaut-value[data-id="' + $( this ).data( 'id' ) + '"][data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' );
if( '' !== $( this ).val() ) {
$( '.is-defaut-value', thisValue ).removeAttr( 'disabled' );
$thisDefautValue.removeAttr( 'disabled' );
} else {
$( '.is-defaut-value', thisValue ).attr( 'disabled', true ).attr( 'checked' , false );
$thisDefautValue.attr( 'disabled', true ).attr( 'checked' , false );
}
});
}
410,7 → 463,7
 
for(var index = 0 ; index < count ; index++) {
let thisFieldKey = $( '.field-key[data-id="' + index + '"]' );
// Le champ avec cet index paourrait avoir été supprimé
// 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 + '"]' );
611,7 → 664,6
}
// Copie d'un champ de fichier d'aide dans le bloc d'envoi
if( 0 < $( '.field-help' , thisFieldset ).get(0).files.length ) {
console.log( $( '.field-help' , thisFieldset ).get(0).files[0].type );
// Présence d'un document d'aide
datasToSubmit[ resultArrayIndex ].help = $( '.field-help' , thisFieldset ).get(0).files[0].type;
$( '.field-help' , thisFieldset ).clone()
739,10 → 791,14
function DisplayClassicFields() {
// Affichage du titre du widget
renderFields( $( '#titre' ) , $( '.widget-renderer h1' ) );
// Affichage du nom du projet
renderFields( $( '#projet' ) , $( '.projet-description' ));
// 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(
770,7 → 826,7
// 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 center');
$( '.widget-renderer' ).css('background' ,'url(' + URL.createObjectURL( event.target.files[0] ) + ') no-repeat fixed center center');
} else {
$( '.widget-renderer' )[0].style.removeProperty( 'background' );
}
863,9 → 919,9
// Attribut required pour le listes
commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
// Nom du champ (éléments listes)
listFieldsHtml.containerContent += ' *';
listFieldsHtml.containerContent = '* ' + listFieldsHtml.containerContent;
// Nom du champ (éléments simples)
commonFieldsHtml.fieldLabel.labelContent += ' *';
commonFieldsHtml.fieldLabel.labelContent = '* ' + commonFieldsHtml.fieldLabel.labelContent;
}
// Infobulle
if( '' !== fieldTooltip ) {
878,7 → 934,7
// Fichier d'aide
if( '' !== fieldHelp ) {
// Bouton 'aide'
commonFieldsHtml.helpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
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';
}
887,6 → 943,7
case 'checkbox' :
case 'radio' :
listFieldsHtml.containerClass = ' class="' + fieldElement +'"';
commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"';
fieldHtml =
// Conteneur
'<div' +
901,12 → 958,12
' >'+
// Nom du champ
// Classe 'and-help'
'<div class="list-label' + commonFieldsHtml.helpClass + '">' +
'<div class="mt-3 list-label' + commonFieldsHtml.helpClass + '">' +
// Label
listFieldsHtml.containerContent +
'</div>' +
// Bouton 'help'
commonFieldsHtml.helpButton;
// Bouton 'help'
commonFieldsHtml.helpButton +
'</div>';
// On déroule les différentes valeurs
for( let i = 0; i < count; i++ ) {
let fieldOption = fieldOptions[i];
930,8 → 987,8
listFieldsHtml.forAttr +
// value-id
listFieldsHtml.optionIdAttr +
// Class="nom du champ"
commonFieldsHtml.fieldInput.classAttr +
// Class du label
commonFieldsHtml.fieldLabel.classAttr +
'>' +
'<input' +
// Type
960,10 → 1017,11
fieldHtml +=
'<label for="other"' +
commonFieldsHtml.dataIdAttr +
commonFieldsHtml.fieldLabel.classAttr +
'>' +
'<input' +
commonFieldsHtml.fieldInput.typeAttr +
' id="other"' +
' id="other-' + fieldElement + '-' + index + '"' +
commonFieldsHtml.fieldInput.nameAttr +
' value="other"' +
commonFieldsHtml.fieldInput.classAttr +
976,9 → 1034,10
break;
 
case 'list-checkbox':
commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"';
fieldHtml =
// Classe 'and-help'
'<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' +
'<div class="multiselect add-field-select' + commonFieldsHtml.helpClass + '"' +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
985,28 → 1044,33
'<label>' +
// Nom du champ
listFieldsHtml.containerContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<div class="selectBox"' +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
'<select' +
'<div class="mt-3">'+
'<div class="selectBox"' +
// DataId
commonFieldsHtml.dataIdAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Info bulle
commonFieldsHtml.titleAttr +
'>' +
// 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 +
'>';
'<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];
1032,6 → 1096,8
listFieldsHtml.forAttr +
// value-id
listFieldsHtml.optionIdAttr +
// Class du label
commonFieldsHtml.fieldLabel.classAttr+
'>' +
'<input type="checkbox"' +
// Id
1061,7 → 1127,7
commonFieldsHtml.dataIdAttr +
'>' +
'<input type="checkbox"' +
' id="other"' +
' id="other-' + fieldElement + '-' + index + '"' +
commonFieldsHtml.fieldInput.nameAttr +
' value="other"' +
commonFieldsHtml.fieldInput.classAttr +
1072,28 → 1138,31
}
// Fermeture des conteneurs .multiselect .checkboxes
fieldHtml +=
'</div>'+
'</div>' +
// Bouton 'help'
commonFieldsHtml.helpButton;
'</div>'+
'</div>'+
'</div>';
break;
 
case 'select':
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
commonFieldsHtml.fieldInput.classAttr += ' form-control"';
fieldHtml =
'<label' +
commonFieldsHtml.fieldLabel.forAttr +
// Info bulle
commonFieldsHtml.titleAttr +
'>' +
// Nom du champ
listFieldsHtml.containerContent +
'</label>' +
// Conteneur/Wrapper
// +Classe 'and-help'
'<div class="select-wrapper add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
'<div class="add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
// DataID
commonFieldsHtml.dataIdAttr +
'>' +
'<label class="mt-3"' +
commonFieldsHtml.fieldLabel.forAttr +
// Info bulle
commonFieldsHtml.titleAttr +
'>' +
// Nom du champ
listFieldsHtml.containerContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<select' +
commonFieldsHtml.fieldInput.nameAttr +
' id="' + fieldKey + '"' +
1142,14 → 1211,16
fieldHtml +=
'</select>' +
// Fin du conteneur/wrapper
'</div>' +
// Bouton 'help'
commonFieldsHtml.helpButton;
'</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="' + commonFieldsHtml.helpClass + '"';
commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"';
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';
 
1166,9 → 1237,9
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
// Bouton 'help'
commonFieldsHtml.helpButton +
'<textarea' +
// Name
commonFieldsHtml.fieldInput.nameAttr +
1188,8 → 1259,12
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="' + commonFieldsHtml.helpClass + '"';
commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"';
// Step
if( '' !== fieldStep ) {
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"';
1202,7 → 1277,6
if( '' !== fieldMax ) {
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"';
}
 
fieldHtml =
'<div' +
' class="range"' +
1220,40 → 1294,40
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
// Bouton 'help'
commonFieldsHtml.helpButton +
'<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 +
'>' +
'<input' +
' type="number"' +
' name="' + fieldKey + 'Output"' +
// Info-bulle
commonFieldsHtml.titleAttr +
// Placeholder
commonFieldsHtml.fieldInput.placeholderAttr +
' value="' + fieldDefaultNum + '"' +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
'<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;
 
1266,7 → 1340,7
// Ouvrir l'attribut class (suppression de '"')
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
// Classe 'and-help'
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"';
// Min
if( '' !== fieldMin ) {
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"';
1275,6 → 1349,8
if( '' !== fieldMax ) {
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"';
}
// Class du label
commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"';
fieldHtml =
'<div class="number">' +
'<label' +
1289,6 → 1365,8
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<input' +
// Type
1310,8 → 1388,6
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'>' +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</div>';
break;
 
1321,7 → 1397,9
// Ouvrir l'attribut class (suppression de '"')
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
// Classe 'and-help'
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"';
// Class du label
commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"';
 
fieldHtml =
'<label' +
1336,6 → 1414,8
'>' +
// Nom du champ
commonFieldsHtml.fieldLabel.labelContent +
// Bouton 'help'
commonFieldsHtml.helpButton +
'</label>' +
'<input' +
// Type
1354,9 → 1434,7
commonFieldsHtml.fieldInput.mandatoryAttr +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'>' +
// Bouton 'help'
commonFieldsHtml.helpButton;
'>';
break;
}
return fieldHtml;
1386,18 → 1464,19
function onOtherOption( thisFieldset , index ) {
// Ce champ (dans la prévisualisation)
var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'),
//L'élément choisi
// L'élément choisi
element = $('.field-element' , thisFieldset ).val(),
// Où insérer le champ "Autre"
$element = $( '.' + element , thisPreviewFieldset ),
// html du champ "Autre"
collectOther =
'<label data-id="' + index + '" for="collect-other">Autre option :</label>' +
'<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >';
'<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 ) {
$( 'label[for="collect-other"]' , thisPreviewFieldset ).remove();
$( 'input.collect-other' , thisPreviewFieldset ).remove();
$( '.collect-other-block' , thisPreviewFieldset ).remove();
}
 
switch( element ) {
1427,12 → 1506,23
});
break;
 
case 'checkbox' :
case 'list-checkbox' :
// Lorsque "Autre" est coché
$( 'input#other' , thisPreviewFieldset ).on( 'click' , function () {
$( '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
1469,7 → 1559,7
if( 0 < $( thisFieldset ).length ) {
// Prévisualisation d'un champ
$( '#zone-supp .preview-container' ).append(
'<div class="preview-fields" data-id="' + index + '">'+
'<div class="preview-fields col-sm-12 row" data-id="' + index + '">'+
onClickPreviewField( thisFieldset , index ) +
'</div>'
);
1502,7 → 1592,7
// Sortie avec la touche escape
$( '#help-modal' ).modal( { keyboard : true } );
// Affichage
$( '#help-modal' ).modal( 'show' );
$( '#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,
1529,7 → 1619,15
// de la prévisualisation pour les nouveaux champs
var firstClick = true;
 
// Positionnement de la prévisualisation
$( window ).ready( function() {
});
 
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