141,18 → 141,18 |
'<h3>Nouveau champ :<br><strong class="field-title" data-id="' + fieldIndex + '"></strong></h3>'+ |
// Nom du champ |
'<div class="row">'+ |
'<div class="col-sm-12 mt-3">'+ |
'<div class="col-sm-12 mt-3 mb-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">'+ |
'<div class="col-sm-12 mt-3 mb-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">' + |
'<p class="message m-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>'+ |
160,7 → 160,7 |
'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 + '">'+ |
'<div class="col-sm-12 mt-3 mb-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 custom-select">'+ |
'<option value="text">Champ texte</option>'+ |
176,7 → 176,7 |
'</select>'+ |
'</div>'+ |
// Checkbox "champ requis" |
'<div class="col-sm-12 radio mt-3">'+ |
'<div class="col-sm-12 radio mt-3 mb-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 ?'+ |
183,12 → 183,12 |
'</label>'+ |
'</div>'+ |
// Unité des valeurs |
'<div class="col-sm-12 mt-3">'+ |
'<div class="col-sm-12 mt-3 mb-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">'+ |
'<div class="col-sm-12 mt-3 mb-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>'+ |
202,7 → 202,7 |
'<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+ |
'</div>'+ |
// Boutons supprimer |
'<div class="col-sm-12 mt-3">'+ |
'<div class="col-sm-12 mt-3 mb-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>'+ |
211,6 → 211,9 |
); |
// Animation de l'affichage |
$( 'fieldset.new-field[data-id="' + fieldIndex + '"]').hide().show( 200 ); |
$( 'html, body' ).stop().animate({ |
scrollTop: $( 'fieldset.new-field[data-id="' + fieldIndex + '"]' ).offset().top |
}, 300 ); |
} |
|
// Affichage du nom du champ dès qu'il est renseigné |
239,8 → 242,8 |
fieldIndex, |
// Placeholder (champ type text par défaut) |
'<div class="col-sm-12 mt-3">'+ |
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+ |
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+ |
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir ce 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 ce champ">'+ |
'</div>' |
); |
// Sinon : |
267,8 → 270,8 |
'</p>' + |
// Placeholder |
'<div class="col-sm-12 mt-3">'+ |
'<label for="aide-saisie" title="Deux ou 3 mots ou chiffres pour comprendre ce que doit contenir le champ (ex: min 20, 10 par 10, etc.)">Texte d\'aide à la saisie</label>'+ |
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+ |
'<label for="aide-saisie" title="Deux ou 3 mots ou chiffres pour comprendre ce que doit contenir ce 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 ce champ">'+ |
'</div>'+ |
// Valeur par défaut |
'<div class="col-sm-12 mt-3">'+ |
363,8 → 366,8 |
fieldIndex, |
// Placeholder |
'<div class="col-sm-12 mt-3">'+ |
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+ |
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+ |
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir ce 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 ce champ">'+ |
'</div>' |
); |
break; |
690,7 → 693,7 |
|
var resultsArrayJson = JSON.stringify( datasToSubmit , replacer ); |
|
// JSON.strigify : Gestion des apostrophes dans les valeurs : |
// JSON.stringify : Gestion des apostrophes dans les valeurs : |
function replacer( key , value ) { |
if ( 'fieldValues' === key && 'object' === typeof value ) { |
for ( var i in value ) { |
1633,7 → 1636,7 |
if( !valeurOk( $( '#basic-widget-form #email' ).val() ) ) { |
$( '#signup_submit' ).prop( 'disabled', false ); |
} |
$( '#signup_submit' ).on( 'click dblclick mousedown submit focus keydown keypress keyup touchstart touchend', function() { |
$( '#signup_submit' ).off().on( 'click dblclick mousedown submit focus keydown keypress keyup touchstart touchend', function() { |
if( valeurOk( $( '#basic-widget-form #email' ).val() ) ) { |
return false; |
} |
1649,6 → 1652,128 |
}); |
} |
|
function onGeoloc() { |
// Empêcher que le module carto ne bind ses events partout |
$( '#tb-geolocation' ).on( 'submit blur click focus mousedown mouseleave mouseup change', '*', function( event ) { |
event.preventDefault(); |
return false; |
}); |
// evenement location |
$( '#tb-geolocation' ).on( 'location' , function( location ) { |
var locDatas = location.originalEvent.detail; |
|
if ( valeurOk( locDatas ) ) { |
console.dir( locDatas ); |
|
var latitude = ''; |
var longitude = ''; |
if ( valeurOk( locDatas.geometry.coordinates ) ) { |
if ( 'Point' === locDatas.geometry.type ) { |
if ( valeurOk( locDatas.geometry.coordinates[0] ) ) { |
longitude = locDatas.geometry.coordinates[0].toFixed( 5 ); |
} |
if ( valeurOk( locDatas.geometry.coordinates[1] ) ) { |
latitude = locDatas.geometry.coordinates[1].toFixed( 5 ); |
} |
} else if ( 'LineString' === locDatas.geometry.type ) {// on ne prend qu'un point de la ligne |
if ( valeurOk( locDatas.geometry.coordinates[0][0] ) && valeurOk( locDatas.geometry.coordinates[1][0] ) ) { |
longitude = ( locDatas.geometry.coordinates[0][0] + locDatas.geometry.coordinates[1][0] ) / 2; |
longitude = longitude.toFixed( 5 ); |
} |
if ( valeurOk( locDatas.geometry.coordinates[0][1] && valeurOk( locDatas.geometry.coordinates[1][1] ) ) ){ |
latitude = ( locDatas.geometry.coordinates[0][1] + locDatas.geometry.coordinates[1][1] ) / 2; |
latitude = latitude.toFixed( 5 ); |
} |
} |
} |
if ( valeurOk( latitude ) && valeurOk( longitude ) ) { |
$( '#latitude' ).val( latitude ); |
$( '#longitude' ).val( longitude ); |
} |
} |
}); |
} |
|
function onGeolocManuelle() { |
const coords = ['latitude','longitude','zoom']; |
$( '#latitude,#longitude,#zoom' ).on( 'change', function( event ) { |
var thisCoord = this.id, |
thisVal = $( this ).val(), |
valeur = ''; |
|
if ( $.isNumeric( thisVal ) ) { |
switch( thisCoord ) { |
case 'zoom': |
if( 0 < parseInt( thisVal, 10 ) && 18 >= parseInt( thisVal, 10 ) ) { |
valeur = thisVal; |
} |
break; |
case 'latitude': |
if ( 90 > Math.abs( parseInt( thisVal, 10 ) ) ) { |
valeur = parseFloat( thisVal, 10 ).toFixed( 5 ); |
$( '#latitude' ).val( valeur ); |
} |
break; |
case 'longitude': |
if ( 180 >= Math.abs( parseInt( thisVal, 10 ) ) ) { |
valeur = parseFloat( thisVal, 10 ).toFixed( 5 ); |
$( '#longitude' ).val( valeur ); |
} |
break; |
default: |
break; |
} |
} |
//un champ vide n'est pas une erreur |
if ( $.isNumeric( valeur ) ) { |
$( this ).siblings( 'span.error' ).remove(); |
} else if ( 0 <= $.inArray( thisCoord, coords ) ) { |
// on ne signale pas d'erreur si il n'y a rien dans le champ |
if ( !valeurOk( $( this ).siblings( 'span.error' ) ) && valeurOk( $( this ).val() ) ) { |
$( this ).after( '<span class="error">mauvais format pour ce champ<span>' ); |
} else { |
$( this ).siblings( 'span.error' ).remove(); |
} |
} |
}); |
} |
|
function geolocValidationEtStockage() { |
$( '#signup_submit' ).off().on( 'click', function( event ) { |
var localisation = '', |
latitude = $( '#latitude' ).val(), |
longitude = $( '#longitude' ).val(), |
zoom = $( '#zoom' ).val(); |
|
if ( ( valeurOk( longitude ) && !valeurOk( latitude ) ) || ( !valeurOk( longitude ) && valeurOk( latitude ) ) ) { |
if( !valeurOk( $( '.warning-carto' ) ) ) { |
$( '#new-fields-buttons' ).after( |
'<p class="message warning-carto">'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> Vous avez entré des coordonnées incomplètes<br>'+ |
'Complétez latitude ou longitude, ou placez un marqueur sur la carto, ou effacez ces deux champs'+ |
'</p>' |
); |
} |
return false; |
} else if( valeurOk( $( '.warning-carto' ) ) ) { |
$( '.warning-carto' ).remove(); |
} |
if ( valeurOk( latitude ) && valeurOk( longitude ) ) { |
localisation += 'latitude:' + latitude + ';'; |
localisation += 'longitude:' + longitude; |
} |
if ( valeurOk( zoom ) ) { |
if( valeurOk( localisation ) ) { |
localisation += ';'; |
} |
localisation += 'zoom:' + zoom; |
} |
if ( valeurOk( localisation ) ) { |
$( '#localisation' ).val( localisation ); |
} |
}); |
} |
|
/** |
* Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide |
* et de comparer à une autre valeur : |
1708,6 → 1833,10 |
}); |
// Gestion du champ pot de miel |
potDeMiel(); |
// Geoloc |
onGeoloc(); |
onGeolocManuelle(); |
geolocValidationEtStockage(); |
// Identifiant de champ |
var fieldIndex = 0; |
// Ajout de nouveaux champs |