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 |