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

   // Affiche un retour visuel dès que input:file change
   $fileInput.change( function( event ) {
     // Il est possible de supprimer un fichier
     // donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value
     if( !$.isEmptyObject( event.target.files[0] ) ) {
       var file = event.target.files[0],
+          fileInputId = $( this ).attr( 'id' ),
-          $theReturn = $( '.' + $( this ).attr( 'id' ) );
+          $theReturn = $( '.' + fileInputId );
       // Affichage du nom du fichier
-      $theReturn.text( file.name );
+      $theReturn.text( file.name ).removeClass( 'hidden') ;
+      if( 5242880 < file.size ) {
+        $theReturn.append(
+          '<p class="message">'+
+            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
-      // Si le fichier est une image on l'affiche
+            'La taille du fichier ne doit pas dépasser 5Mo'+
+          '</p>'
+        )
+        .addClass( 'invalid' );
+        // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
+        $( this ).clearInputs();
+        console.log(file);
-      if( file.type.match( 'image/*' ) ) {
+      } else if( file.type.match( 'image/*' ) && 'especes' !== fileInputId ) {
+      // Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche
         // Chemin temporaire de l'image et affichage
         var tmppath = URL.createObjectURL( file );
-        $theReturn.removeClass( 'hidden' ).append( '<img src="' + tmppath + '" width="50%">' );
+        $theReturn.append( '<img src="' + tmppath + '" width="50%">' ).removeClass( 'invalid' );;
+      } else if ( !( 'especes' === fileInputId && file.type.match( 'text/csv' ) ) ) {
+        // on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv
+        if( 'especes' === fileInputId ) {// cas où on demandait un csv
+          $theReturn.append(
+            '<p class="message">'+
+              '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
+              'Le fichier doit être au format csv'+
+            '</p>'
-      } else {
+          )
+          .addClass( 'invalid' );
+        } else { // cas où on demandait un format image
+          $theReturn.append(
+            '<p class="message">'+
+              '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
-        $theReturn.removeClass( 'hidden' ).append(  '<p>Le fichier doit être au format image (jpg, png, etc.)</p>'  );
+              'Le fichier doit être au format image (jpg, png, etc.)'+
+            '</p>'
+          )
+          .addClass( 'invalid' );
+        }
         // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
         $( this ).clearInputs();
         console.log(file);
+      } else {// file "especes" csv ok
+        $theReturn.append( ' <i class="fa fa-check-circle" aria-hidden="true" style="color:#B3C954;font-size:1.3rem"></i>' ).removeClass( 'invalid' );
+      }
+    }
   });
   // Annuler le téléchargement
   $( '.remove-file' ).click( function() {
   $( '#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
       '<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="Donnez un titre à votre champ" required>'+
+      '<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>'+
+      '<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>'+
   $( '#new-fields' ).on( 'input' , '.list-value' , function() {
     var thisValue = $( this ).parent( '.new-value' );
     if( '' !== $( this ).val() ) {
       $( '.is-defaut-value', thisValue ).removeAttr( 'disabled' );
     } else {
-      $( '.is-defaut-value', thisValue ).attr( 'disabled', true ).removeAttr( 'checked' );
+      $( '.is-defaut-value', thisValue ).attr( 'disabled', true ).attr( 'checked' , false );
+    }
   });
+}
 // Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée
 function onClickDefaultValueRemoveOthers( fieldIndex ) {
   var selectedFieldElement = $( '.field-element[data-id="' + fieldIndex + '"]' ).val();
   if( selectedFieldElement === 'select' || selectedFieldElement === 'radio' ) {
     $( '.is-defaut-value[data-id="' + fieldIndex + '"]' ).click( function() {
-     if( $( this ).attr( 'checked' ) ) {
+     if( $( this ).is( ':checked' ) ) {
         // Décocher tous les autres
-        $( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).removeAttr( 'checked' );
+        $( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).attr( 'checked' , false );
+      }
     });
       datasToSubmit[ resultArrayIndex ].mandatory   = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
       // Ajout de l'unité au tableau de resultats
       datasToSubmit[ resultArrayIndex ].unit        = $( '.field-unit' , thisFieldset ).val() || null;
       // Ajout du tooltip au tableau de resultats
       datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null;
-      // Ajout du nom du document d'aide au tableau de resultats
-      datasToSubmit[ resultArrayIndex ].help        = $( '.file-return.help-doc-' + index ).text() || null;
       // Collecte les des données dépendantes de l'élément choisi
       // sous forme d'un tableau de resultats
       onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset );
       if( $.isEmptyObject( datasToSubmit[ resultArrayIndex ].fieldValues ) ){
         delete datasToSubmit[ resultArrayIndex ].fieldValues;
+      }
       // 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
-      if( '' !== $( '.field-help' , thisFieldset ).val() ) {
+        datasToSubmit[ resultArrayIndex ].help = $( '.field-help' , thisFieldset ).get(0).files[0].type;
         $( '.field-help' , thisFieldset ).clone()
           .attr( 'name' , 'help-' + datasToSubmit[ resultArrayIndex ].key )// l'attribut name prend la valeur de la clé
+          .appendTo( '#help-doc-submit' );
+      } else {
-          .appendTo( '#help-doc-submit' );
+        datasToSubmit[ resultArrayIndex ].help = null;
+      }
       resultArrayIndex++;
+    }
+  }
-  }
+  var resultsArrayJson = JSON.stringify( datasToSubmit , replacer );
+  // JSON.strigify : Gestion des apostrophes dans les valeurs :
+  function replacer( key , value ) {
+    if ( 'fieldValues' === key && 'object' === typeof value ) {
+      for ( var i in value ) {
+        if ( typeof value[i] === 'string' ) {
+          value[i] = value[i].replace( /\u0027/g, "&apos;&apos;" );
+        }
+      }
+    } else if ( typeof value === 'string' ) {
+      value = value.replace( /\u0027/g, "&apos;&apos;" );
+    }
+    return value;
+  }
-  var resultsArrayJson = JSON.stringify( datasToSubmit );
+  console.log( resultsArrayJson );
   console.log(resultsArrayJson);
   // Désactivation de tous les champs et boutons (nouveaux champs)
   $( '#new-fields, #new-fields .button , #add-fields , #preview-field' ).addClass( 'disabled' );
   $( '#validate-new-fields' ).addClass( 'validated' );
   $( '.validate-new-fields' ).text( 'Champs validés' );
   // Mise à disposition des données pour le bouron submit
+  $( '#submit-button' ).before(
-  $( '#submit-button' ).before(
+    //la value est passée avec des apostrophes pour que les guillemets de la string json passent bien en string de l'attribut
-    '<input type="hidden" name="champs-supp" id="champs-supp" value="' + resultsArrayJson + '">'
+    '<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>'
   );
+}
       case 'radio':
         datasToSubmitObject.fieldValues.listValue = [];
         // Ajout des valeurs de liste
         onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset );
         // S'il y a une valeur 'autre' on l'indique à la fin de la liste
-        if( $( '.option-other-value' , thisFieldset ).attr( 'checked' ) && -1 === datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) ) {
+        if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) && -1 === datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) ) {
           datasToSubmitObject.fieldValues.listValue.push( 'other' );
+        }
         break;
   $( '.list-value' , thisFieldset ).each( function() {
     var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
      if( $( this ).val() ){
       // Is-default-value non cochée
-      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' , thisFieldset ).attr( 'checked' ) ) {
+      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' , thisFieldset ).is( ':checked' ) ) {
         datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
       // Is-default-value cochée pour select/radio
       } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {
         // Une seule valeur par defaut, devient la première valeur du tableau + '#'
   var fieldHtml               = '',//variable contenant tout le html à afficher
       commonFieldsHtml        = {},//Éléments simples ou chaînes communes aux "listes"
       listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques
       listFieldsHtml          = {},//chaînes & html spécifiques aux listes
       count                   = fieldOptions.length;//nombre d'options, pour les boucles for
+  fieldLabel = fieldLabel.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' );
+  fieldTooltip = fieldTooltip.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' );
+  fieldPlaceholder = fieldPlaceholder.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' );
   //valeurs initiales des chaînes de caractères
   //Éléments simples ou chaînes communes aux "listes"
   commonFieldsHtml = {
     dataIdAttr : ' data-id="' + index + '"',
     helpButton : '',//bouton aide
               // value-id
               listFieldsHtml.optionIdAttr +
               // Name
               commonFieldsHtml.fieldInput.nameAttr +
               // Value
-              ' value="' + fieldOption.optionValue + '"' +
+              ' value="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) + '"' +
               // Checked
               listFieldsHtml.defaultAttr +
               // Class="nom du champ"
               commonFieldsHtml.fieldInput.classAttr +
             '>' +
             // Label de l'option
-            fieldOption.optionText +
+            fieldOption.optionText.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) +
           '</label>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
         fieldHtml +=
       for( let i = 0; i < count; i++ ) {
         let fieldOption = fieldOptions[i];
         // Type="checkbox"
         commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"';
         // Id
-        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
+        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ).toLowerCase() + '"';
         // For
-        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
+        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ).toLowerCase() + '"';
         // Default
         listFieldsHtml.defaultAttr = '';//réinitialisation
         if( fieldOption.isDefault ) {
           listFieldsHtml.defaultAttr = ' checked';//affectation
+        }
               // value-id
               listFieldsHtml.optionIdAttr +
               // Name
               commonFieldsHtml.fieldInput.nameAttr +
               // Value
-              ' value="' + fieldOption.optionValue + '"' +
+              ' value="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) + '"' +
               // Checked
               listFieldsHtml.defaultAttr +
               // Class="nom du champ"
               commonFieldsHtml.fieldInput.classAttr +
               // DataId
               commonFieldsHtml.dataIdAttr +
             '>' +
             // Label de l'option
-            fieldOption.optionText +
+            fieldOption.optionText.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) +
           '</label>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
         fieldHtml +=
+        }
         fieldHtml +=
           '<option' +
             // Value
-            ' value="' + fieldOption.optionValue + '"' +
+            ' value="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) + '"' +
             // Value-id
             listFieldsHtml.optionIdAttr +
             // Selected
             listFieldsHtml.defaultAttr +
           '>' +
             // Option
-            fieldOption.optionText +
+            fieldOption.optionText.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) +
           '</option>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
           commonFieldsHtml.dataIdAttr +
           // Class
           commonFieldsHtml.fieldInput.classAttr +
           // Info-bulle
           commonFieldsHtml.titleAttr +
-          // Info-bulle
+          // Placeholder
           commonFieldsHtml.fieldInput.placeholderAttr +
           // Required
           commonFieldsHtml.fieldInput.mandatoryAttr +
           // Autres attributs
           commonFieldsHtml.fieldInput.otherAttr +

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/manager/squelettes/js/manager.js @ 3185 – Rev 3226 → 3233