WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/manager/squelettes/js/manager.js

   $( '#new-fields' ).append(
     '<fieldset data-id="' + fieldIndex + '" class="new-field">'+
       '<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>'+
           '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 + '">'+
+        '<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>'+
             '<option value="email">Champ email</option>'+
             '<option value="textarea">Champ rédaction</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">'+
+        '<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 ?'+
           '</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>'+
         // Import d'une image d'aide à afficher en popup
         '<div class="input-file-row row">'+
           '</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">'+
+        '<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>'+
       '</div>'+
     '</fieldset>'
   );
   // 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é
 function onChangeDisplayFieldLabel( fieldIndex ) {
   // On insère les champs par défaut de recueil d'informations
   displayFieldDetailsCollect(
     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>'+
+      '<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 le champ">'+
+      '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ">'+
     '</div>'
   );
   // Sinon :
   $( '.field-element[data-id="' + fieldIndex + '"]' ).change( function() {
     // On intialise l'index pour les listes la variable qui contiendra un id pour chaque option
             '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
           '<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>'+
+            '<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 le champ">'+
+            '<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">'+
             '<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">'+
       default:
         displayFieldDetailsCollect(
           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>'+
+          '<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 le champ">'+
+          '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ">'+
         '</div>'
       );
         break;
+    }
     // Ajout des valeurs possibles
+    }
+  }
   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 ) {
 function potDeMiel() {
   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;
+    }
   });
       $( '#signup_submit' ).prop( 'disabled', true );
+    }
   });
+}
+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>&nbsp;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 :
 * Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN
   $( 'form' ).each( function() {
     $( this )[0].reset();
   });
   // Gestion du champ pot de miel
   potDeMiel();
+  // Geoloc
+  onGeoloc();
+  onGeolocManuelle();
+  geolocValidationEtStockage();
   // Identifiant de champ
   var fieldIndex = 0;
   // Ajout de nouveaux champs
   onClickAddNewFields( fieldIndex );
   // Activation/Desactivation des boutons valider et prévisualiser

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/manager/squelettes/js/manager.js – Rev 3378 → 3424