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

   $( '#add-fields' ).click( function() {
     // Affichage du formulaire pour un champ
     displayNewField( fieldIndex );
     // Affichage du nom du champ
     onChangeDisplayFieldLabel( fieldIndex );
+    // Empêcher de créer plus d'une fois la même clé
+    onChangeCheckKeyUnique();
     // Affichage des images/nom des documents importés dans les champs ajoutés
     inputFile();
     // Recueil des informations correspondantes au nouveau champ
     onChangeFieldTypeCollectDetails( fieldIndex );
     // Suppression d'un champ
 /*********************************************
  *  Validation et envoi des nouveaux champs  *
+ *********************************************/
+// Empêcher de créer plus d'une fois la même clé
+function onChangeCheckKeyUnique() {
+ if( 1 < $( '.field-key' ).length ) {
+    let notUnique = false;
+    $( '.field-key' ).change( function () {
+          // On force le type de thisString en number pour comparer à l'index du for (plus bas)
+      let thisIndex = Number( $( this ).attr( 'data-id' ) ),
+          thisFieldKey = $( '.field-key[data-id="' + thisIndex + '"]' ),
+          count = $( '.field-key' ).length;
+      for(var index = 0 ; index < count ; index++) {
+        let loopFieldKey = $( '.field-key[data-id="' + index + '"]' );
+        // Si cet index ne correspond pas à un champ supprimé
+        // On compare la valeur avec les autres champs
+        if( 0 < loopFieldKey.length && thisIndex !== index && thisFieldKey.val() === loopFieldKey.val()) {
+          notUnique = true;
+        }
+      }
+      if( notUnique ) {
+        // Le champ est signalé en rouge
+        thisFieldKey.addClass( 'invalid' );
+        // Un message d'alerte apparait sous le champ
+        if( 0 === $( '.invalid-field-key[data-id="' + thisIndex + '"]' ).length ) {
+          thisFieldKey.after(
+            '<p class="message invalid-field-key" data-id="' + thisIndex + '">' +
+              '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
+              ' Vous avez déjà utilisé cette clé!' +
+            '</p>'
+          );
+        }
+        // Un message d'alerte apparait au dessus des boutons prévisualiser/valider
+        if( 0 === $( '.invalid-field-key-bottom' ).length ) {
+          $( '#new-fields' ).append(
+            '<p class="message invalid-field-key-bottom">' +
+              '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
+              ' Une clé a été utilisée plusieurs fois' +
+            '</p>'
+          );
+        }
+        // Les boutons prévisualiser/valider sont désactivés et signalés en rouge
+        $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' ).css( 'pointer-events', 'none' );
+      // Si on est ok on retire toutes les alertes
+      } else {
+        thisFieldKey.removeClass( 'invalid' );
+        $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
+        $( '.invalid-field-key[data-id="' + thisIndex + '"]' ).hide( 200 , function () {
+          $( this ).remove();
+        });
+        $( '.invalid-field-key-bottom' ).hide( 200 , function () {
+          $( this ).remove();
+        });
+        $( '#preview-field' )[0].style.removeProperty( 'pointer-events' );
+        $( '#validate-new-fields' )[0].style.removeProperty( 'pointer-events' )
+      }
+      // Réinitialisation
+      notUnique = false;
+    });
+  }
  *********************************************/
 //Activation/Désactivation des boutons valider/prévisualiser
 function activatePreviewAndValidateButtons() {
   var invalidElementInfos = false, // true si aucune option n'a été entrée pour un élément de liste (select, radio, etc.)
       // Ajout de le nom au tableau de resultats
       datasToSubmit[ resultArrayIndex ].name = $( '.field-name' , thisFieldset ).val();
       // Recueil de l'élément choisi pour le tableau de resultats
       datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val();
       // Ajout de la valeur 'requis' ou non au tableau de resultats
-      datasToSubmit[ resultArrayIndex ].mandatory = false;
-      // Ajout de "champ requis"
-      if( $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ) ) {
+      datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
-        datasToSubmit[ resultArrayIndex ].mandatory = true;
-      }
       // Ajout de l'unité au tableau de resultats
-      if ( $( '.field-unit' , thisFieldset ).val() ) {
-        datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val();
+      datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null;
-      }
       // Ajout du tooltip au tableau de resultats
-      if ( $( '.field-description' , thisFieldset ).val() ) {
-        datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val();
+      datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null;
-      }
       // Ajout du nom du document d'aide au tableau de resultats
-      if ( $('.file-return.help-doc-' + index ).text() ) {
-        datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text();
+      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;
         break;
       case 'number':
       case 'range':
-        // Placeholder
-        if( $( '.aide-saisie' , thisFieldset ).val() ) {
+        // Placeholder
-         datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val();
         datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
-        // Valeur par défaut
-        if( $( '.default' , thisFieldset ).val() ) {
+        // Valeur par défaut
-          datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val();
         datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null;
-        // Incrémentation ( attribut step="" )
-        if( $( '.step' , thisFieldset ).val() ) {
+        // Incrémentation ( attribut step="" )
-          datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val();
          datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null;
-        // Min
-        if( $( '.min' , thisFieldset ).val() ) {
+        // Min
-          datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val();
         datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
-        // Max
-        if( $( '.max' , thisFieldset ).val() ) {
+        // Max
-          datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val();
         datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
         break;
-      case 'date':
-        // Min
+      case 'date':
-        if( $( '.min' , thisFieldset ).val() ) {
-          datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val();
+        // Min
-        }
-        // Max
+        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
-        if( $( '.max' , thisFieldset ).val() ) {
-         datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val();
+        // Max
         datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
         break;
       case 'email':
       case 'text':
-      case 'textarea':
-      default:
+      case 'textarea':
-        // Placeholder
-        if( $( '.aide-saisie' , thisFieldset ).val() ) {
+      default:
-          datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val();
+        // Placeholder
         datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
         break;
+    }
     return datasToSubmitObject;
+}
 // Ajout d'une valeur d'un élément liste (select, checkbox etc.)
+// dans le tableau de resultats
-// dans le tableau de resultats
+function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {
+  $( '.list-value' , thisFieldset ).each( function() {
-function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {
+    var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
   $( '.list-value' , thisFieldset ).each( function() {
+     if( $( this ).val() ){
-    var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
+      // Is-default-value non cochée
+      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' , thisFieldset ).attr( 'checked' ) ) {
-     if( $( this ).val() ){
+        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
+      // Is-default-value cochée pour select/radio
-      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr('data-list-value-id') + '"]' , thisFieldset ).attr( 'checked' ) ) {
+      } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {
+        // Une seule valeur par defaut, devient la première valeur du tableau + '#'
-        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
+        datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );
-      } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {
+      // Is-default-value cochée pour checkbox/list-checkbox
-        datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );
+      } else {
-      } else {
+        // On ajoute simplement la valeur au tableau + '#'
         datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' );
+      }
+    }
   });
-}
+}
-/************************************************
- *  Fonction d'affichage des champs classiques  *
- ************************************************/
-// Affichage des infos dès que disponibles
-// pour les champs classiques
-function renderFields( $source , $taget ) {
-  if($source.val()) {
-    $taget.text( $source.val() );
-  $source.change( function () {
+/************************************************
-    $taget.text( $( this ).val() );
+ *  Fonction d'affichage des champs classiques  *
-  });
+ ************************************************/
 // Prévisualisation
 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 du logo s'il existe déjà
-  if( $('#logo').val() ) {
+  // Affichage du logo s'il existe déjà
-    $( '#preview-logo' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') );
+  if( $('#logo').val() || $('#logo')[0].defaultValue ) {
-  }
-  // Affichage du logo chargé
+    $( '#preview-logo img' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') );
+  }
+  // Affichage du logo chargé
+  $( '#logo.input-file' ).change( function( event ) {
-  $( '#logo.input-file' ).change( function( event ) {
+    // Si le 'change' était pas une suppression
     if( $.isEmptyObject( event.target.files[0] ) ) {
-    if( !$.isEmptyObject( event.target.files[0] ) ) {
+      $( '#preview-logo img' ).prop( 'src' , '' );
-      $( '#preview-logo img' ).prop( 'src' , URL.createObjectURL( event.target.files[0] ) );
+    // Si on a chargé un logo ou changé le fichier
     } else {
       $( '.widget-renderer' )[0].style.removeProperty( 'background' );
+    }
   });
+}
+// Affichage des infos dès que disponibles
+// pour les champs classiques
+function renderFields( $source , $taget ) {
+  if($source.val()) {
+    $taget.text( $source.val() );
+  }
+  $source.change( function () {
+    $taget.text( $( this ).val() );
+  });
+}
-// /*****************************************************
+/*****************************************************
-//  *  Fonction d'affichage des champs supplémentaires  *
+ *  Fonction d'affichage des champs supplémentaires  *
-//  *****************************************************/
+ *****************************************************/
+// Construction des éléments à visualiser
-// Construction des éléments à visualiser
+function onClickPreviewField( thisFieldset , index ) {
-function onClickPreviewField( thisFieldset , index ) {
+  // Récupération des données
+      // Tous les champs
-  var fieldLabel       = $( '.field-name'            , thisFieldset ).val(),
+  var fieldLabel       = $( '.field-name'            , thisFieldset ).val(),//nom
-      fieldKey         = $( '.field-key'             , thisFieldset ).val(),
+      fieldKey         = $( '.field-key'             , thisFieldset ).val(),//clé
-      fieldElement     = $( '.field-element'         , thisFieldset ).val(),
+      fieldElement     = $( '.field-element'         , thisFieldset ).val(),//élément
-      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),
+      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),//champ requis
-      fieldUnit        = $( '.field-unit'            , thisFieldset ).val(),
+      fieldUnit        = $( '.field-unit'            , thisFieldset ).val(),//unités
-      fieldTooltip     = $( '.field-description'     , thisFieldset ).val(),
+      fieldTooltip     = $( '.field-description'     , thisFieldset ).val(),//info-bulle
-      fieldHelp        = $( '.file-return.help-doc-' + index ).text(),
+      fieldHelp        = $( '.file-return.help-doc-' + index ).text(),//nom du fichier d'aide
-      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',
+      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',//placeholder
-      fieldDefaultNum  = $( '.default'               , thisFieldset ).val(),
+      // Champs à valeur numérique ou date
+      fieldStep        = $( '.step'                  , thisFieldset ).val(),
+      fieldMin         = $( '.min'                   , thisFieldset ).val(),
-      fieldStep        = $( '.step'                  , thisFieldset ).val(),
+      fieldMax         = $( '.max'                   , thisFieldset ).val(),
-      fieldMin         = $( '.min'                   , thisFieldset ).val(),
+      // Champs "listes"
-      fieldMax         = $( '.max'                   , thisFieldset ).val(),
-      fieldOtherValue  = $( '.option-other-value'    , thisFieldset ).is( ':checked' ),
-      fieldOptions     = collectListOptions( thisFieldset );
+      fieldDefaultNum  = $( '.default'               , thisFieldset ).val(),//option pas default
+      fieldOtherValue  = $( '.option-other-value'    , thisFieldset ).is( ':checked' ),//option autre
+      fieldOptions     = collectListOptions( thisFieldset );//Array: toutes les options
+  // Variables d'affichage
-  var fieldHtmlObject  = {},
+  var fieldHtml               = '',//variable contenant tout le html à afficher
-      fieldHtml        = '',
+      commonFieldsHtml        = {},//Éléments simples ou chaînes communes aux "listes"
-      constHtml        = {},
+      listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques
-      listHtml         = {},
-      count            = fieldOptions.length,
+      listFieldsHtml          = {},//chaînes & html spécifiques aux listes
-      fieldHelpClass   = '';
+      count                   = fieldOptions.length;//nombre d'options, pour les boucles for
+  //valeurs initiales des chaînes de caractères
+  //Éléments simples ou chaînes communes aux "listes"
+  commonFieldsHtml = {
-  // Pour les éléments simples
+    dataIdAttr : ' data-id="' + index + '"',
-  fieldHtmlObject = {
+    helpButton : '',//bouton aide
+    helpClass  : '',//classe de l'élément associé au bouton aide
-    fieldHelpButton : '',
+    titleAttr  : '',//info-bulle
+    fieldInput : {//attributs de l'élément
-    fieldTitleAttr : '',
+      typeAttr        : ' type="' + fieldElement + '"',
-    fieldLabel     : {
+      nameAttr        : ' name="' + fieldKey + '"',
-      labelForAttr         :' for="' + fieldKey + '"',
+      classAttr       : ' class="' +  fieldKey + '"',
-      labelClassAttr       :'',
+      placeholderAttr : '',
-      labelOtherAttr       : '',
+      mandatoryAttr   : '',//required
-      labelContent         : fieldLabel
+      otherAttr       : ''
     },
-    fieldInput     : {
-      inputTypeAttr        : ' type="' + fieldElement + '"',
+    fieldLabel : {//attributs et contenu du label
-      inputNameAttr        : ' name="' + fieldKey + '"',
-      inputDataIdAttr      : ' data-id="' + index + '"',
+      labelContent    : fieldLabel,//label
-      inputClassAttr       : ' class="' +  fieldKey + '"',
+      forAttr         : ' for="' + fieldKey + '"',//attribut for
-      inputPlaceholderAttr : '',
+      classAttr       : '',//classe du label
-      inputOtherAttr       : ''
       otherAttr       : ''//tous autres attributs
-  }
+    }
+  }
   // Pour les éléments de listes (select, checkbox, etc.)
-  constHtml = {
-    fieldContainerContent : fieldLabel,
-    fieldDataIdAttr       : ' data-id="' + index + '"',
-    fieldTitleAttr        : '',
-    fieldMandatoryAttr    : '',
-    fieldContainerClass   : ''
-  };
-  listHtml = {
+  listFieldsHtml = {
-    optionLabel : {},
+    containerContent : fieldLabel,//les options peuvent avoir chacune un label
-    optionInput  : {
+    containerClass   : '',//une classe pour le conteneur
-      inputTypeAttr    : ' type="'  + fieldElement + '"',
-      inputNameAttr    : ' name="'  + fieldKey + '"',
-      inputClassAttr   : ' class="' +  fieldKey + '"',
+    forAttr          : '',//correspond à l'id d'une checkbox/radio/list-checkbox
-      inputOptionIdAttr : ''
     optionIdAttr     : '',//value-id
-  };
+    defaultAttr      : ''//default
   };
   // Changement d'un élément existant:
   // supprimer le précédent pour ajouter le nouveau
-  if( 0 < $( '.preview-fields' , thisFieldset ).length ) {
-    $( '.preview-fields' , thisFieldset ).remove();
+  if( 0 < $( '.preview-fields' , thisFieldset ).length ) {
     $( '.preview-fields' , thisFieldset ).remove();
+  }
-  // Si l'élément est requis
+  // Élément requis
   if( fieldIsMandatory ) {
-    // Attribut required
+    // Attribut required pour le listes
-    fieldHtmlObject.fieldInput.inputOtherAttr += ' required="required"';
+    commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
     // Nom du champ (éléments listes)
-    constHtml.fieldContainerContent         += ' *';
+    listFieldsHtml.containerContent         += ' *';
-    // Nom du champ (éléments simples)
-    fieldHtmlObject.fieldLabel.labelContent += ' *';
+    // Nom du champ (éléments simples)
     commonFieldsHtml.fieldLabel.labelContent += ' *';
+  }
-  // Si on a une infobulle
+  // Infobulle
-  if( '' !== fieldTooltip ) {
-    fieldHtmlObject.fieldTitleAttr = ' title="' +  fieldTooltip + '"';
+  if( '' !== fieldTooltip ) {
     commonFieldsHtml.titleAttr = ' title="' +  fieldTooltip + '"';
+  }
-  // Si on a un placeholder
-  if( '' !== fieldPlaceholder ) {
+  // Placeholder
-    fieldHtmlObject.fieldInput.inputPlaceholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
+  if( '' !== fieldPlaceholder ) {
-    console.log(fieldPlaceholder);
+    commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
+  }
-  }
+  // Fichier d'aide
+  if( '' !== fieldHelp ) {
+    // Bouton 'aide'
-  if( '' !== fieldHelp ) {
+    commonFieldsHtml.helpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
-    fieldHtmlObject.fieldHelpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
-    fieldHelpClass = ' and-help';
+    // classe 'aide'
     commonFieldsHtml.helpClass = ' and-help';
+  }
   // html à ajouter en fonction de l'élément choisi
   switch( fieldElement ) {
     case 'checkbox' :
     case 'radio' :
-      constHtml.fieldContainerClass = ' class="' + fieldElement +'"';
+      listFieldsHtml.containerClass = ' class="' + fieldElement +'"';
       fieldHtml =
         // Conteneur
         '<div' +
           // Class="L'élément choisi"
-          constHtml.fieldContainerClass +
+          listFieldsHtml.containerClass +
           // DataId
-          constHtml.fieldDataIdAttr +
+          commonFieldsHtml.dataIdAttr +
           // Required
-          constHtml.fieldMandatoryAttr +
+          commonFieldsHtml.fieldInput.mandatoryAttr +
           // Info bulle
+          commonFieldsHtml.titleAttr +
-          constHtml.fieldTitleAttr +
+        ' >'+
+          // Nom du champ
-        ' >'+
+          // Classe 'and-help'
-          // Nom du champ
+          '<div class="list-label' + commonFieldsHtml.helpClass + '">' +
+            // Label
-          '<div class="list-label' + fieldHelpClass + '">' +
+            listFieldsHtml.containerContent +
-            constHtml.fieldContainerContent +
+          '</div>' +
-          '</div>' +
+          // Bouton 'help'
-          fieldHtmlObject.fieldHelpButton;
+          commonFieldsHtml.helpButton;
-      // On déroule les différentes valeurs
-      for ( let i = 0; i < count; i++ ) {
+      // On déroule les différentes valeurs
-        let fieldOption = fieldOptions[i];
+      for( let i = 0; i < count; i++ ) {
+        let fieldOption = fieldOptions[i];
-        listHtml.optionInput.inputDefaultAttr = '';
+        // L'id de input
-        listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
+        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
-        listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue + '"';
+        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue + '"';
+        // Default
-        // Si c'est une/l'option par défaut
+        listFieldsHtml.defaultAttr = '';//réinitialisation
-        if( fieldOption.isDefault ) {
-          listHtml.optionInput.inputDefaultAttr = ' checked';
+        if( fieldOption.isDefault ) {//affectation
           listFieldsHtml.defaultAttr = ' checked';
+        }
         // L'indice de chaque option
         // L'option "autre" n'en a pas
         if( '' !== fieldOption.optionIndex ) {
-          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+        }
         fieldHtml +=
           '<label' +
             // For
-            listHtml.optionLabel.labelForAttr +
+            listFieldsHtml.forAttr +
             // value-id
-            listHtml.optionInput.inputOptionIdAttr +
+            listFieldsHtml.optionIdAttr +
             // Class="nom du champ"
+            commonFieldsHtml.fieldInput.classAttr +
+          '>' +
-            listHtml.optionInput.inputClassAttr +
+            '<input' +
-          '>' +
+              // Type
-            '<input' +
+              commonFieldsHtml.fieldInput.typeAttr +
-              // Type
+              // Id
-              listHtml.optionInput.inputTypeAttr +
+              listFieldsHtml.inputIdAttr +
               // DataId
-              constHtml.fieldDataIdAttr +
+              commonFieldsHtml.dataIdAttr +
               // value-id
-              listHtml.optionInput.inputOptionIdAttr +
+              listFieldsHtml.optionIdAttr +
               // Name
-              listHtml.optionInput.inputNameAttr +
+              commonFieldsHtml.fieldInput.nameAttr +
               // Value
               ' value="' + fieldOption.optionValue + '"' +
               // Checked
-              listHtml.optionInput.inputDefaultAttr +
+              listFieldsHtml.defaultAttr +
               // Class="nom du champ"
-              listHtml.optionInput.inputClassAttr +
+              commonFieldsHtml.fieldInput.classAttr +
-            '>' +
-            // Label de l'option
+            '>' +
-            fieldOption.optionText +
+            // Label de l'option
-          '</label>';
+            fieldOption.optionText +
           '</label>';
         // Si valeur "autre" est cochée
         if( fieldOtherValue ) {
           fieldHtml +=
             '<label for="other"' +
-              constHtml.fieldDataIdAttr +
+              commonFieldsHtml.dataIdAttr +
             '>' +
               '<input' +
-                listHtml.optionInput.inputTypeAttr +
+                commonFieldsHtml.fieldInput.typeAttr +
                 ' id="other"' +
-                listHtml.optionInput.inputNameAttr +
+                commonFieldsHtml.fieldInput.nameAttr +
                 ' value="other"' +
-                listHtml.optionInput.inputClassAttr +
+                commonFieldsHtml.fieldInput.classAttr +
-                constHtml.fieldDataIdAttr +
+                commonFieldsHtml.dataIdAttr +
               '>' +
             'Autre</label>';
-        }
+        }
       // Fin du conteneur
-      fieldHtml += '</div>';
+      // Fin du conteneur
+      fieldHtml += '</div>';
+      break;
       break;
+    case 'list-checkbox':
-    case 'list-checkbox':
+      fieldHtml =
-      fieldHtml =
+        // Classe 'and-help'
-        '<div class="multiselect ' + fieldElement + fieldHelpClass + '"' +
+        '<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' +
           // DataId
-          constHtml.fieldDataIdAttr +
+          commonFieldsHtml.dataIdAttr +
         '>' +
           '<label>' +
             // Nom du champ
-            constHtml.fieldContainerContent +
+            listFieldsHtml.containerContent +
-          '</label>' +
-          '<div class="selectBox"' +
+          '</label>' +
-            // DataId
+          '<div class="selectBox"' +
-            constHtml.fieldDataIdAttr +
+            // DataId
-          '>' +
+            commonFieldsHtml.dataIdAttr +
+          '>' +
             '<select' +
               // DataId
-              constHtml.fieldDataIdAttr +
+              commonFieldsHtml.dataIdAttr +
               // Required
-              constHtml.fieldMandatoryAttr +
+              commonFieldsHtml.fieldInput.mandatoryAttr +
               // Info bulle
-              constHtml.fieldTitleAttr +
+              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
-            constHtml.fieldDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
           '>';
+      // On déroule les différentes valeurs
-      // On déroule les différentes valeurs
+      for( let i = 0; i < count; i++ ) {
+        let fieldOption = fieldOptions[i];
-      for ( let i = 0; i < count; i++ ) {
+        // Type="checkbox"
+        commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"';
-        let fieldOption = fieldOptions[i];
+        // Id
-        listHtml.optionInput.inputTypeAttr = ' type="checkbox"';
+        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
-        listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
+        // For
-        listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
+        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
-        listHtml.optionInput.inputDefaultAttr = '';
+        // Default
         listFieldsHtml.defaultAttr = '';//réinitialisation
         if( fieldOption.isDefault ) {
-          listHtml.optionInput.inputDefaultAttr = ' checked';
+          listFieldsHtml.defaultAttr = ' checked';//affectation
+        }
-        if( '' !== fieldOption.optionIndex ) {
+        // value-id
+        if( '' !== fieldOption.optionIndex ) {
-          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+        }
         fieldHtml +=
           '<label' +
+            // For
+            listFieldsHtml.forAttr +
-            listHtml.optionLabel.labelForAttr +
+            // value-id
-            // value-id
+            listFieldsHtml.optionIdAttr +
-            listHtml.optionInput.inputOptionIdAttr +
+          '>' +
-          '>' +
+            '<input type="checkbox"' +
               // Id
-            '<input type="checkbox"' +
+              listFieldsHtml.inputIdAttr +
               // value-id
-              listHtml.optionInput.inputOptionIdAttr +
+              listFieldsHtml.optionIdAttr +
               // Name
-              listHtml.optionInput.inputNameAttr +
+              commonFieldsHtml.fieldInput.nameAttr +
               // Value
               ' value="' + fieldOption.optionValue + '"' +
               // Checked
-              listHtml.optionInput.inputDefaultAttr +
+              listFieldsHtml.defaultAttr +
               // Class="nom du champ"
-              listHtml.optionInput.inputClassAttr +
+              commonFieldsHtml.fieldInput.classAttr +
               // DataId
-              constHtml.fieldDataIdAttr +
-            '>' +
+              commonFieldsHtml.dataIdAttr +
-            // Label de l'option
+            '>' +
-            fieldOption.optionText +
+            // Label de l'option
-          '</label>';
+            fieldOption.optionText +
           '</label>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
         fieldHtml +=
           '<label for="other"' +
             // DataId
-            constHtml.fieldDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
           '>' +
             '<input type="checkbox"' +
               ' id="other"' +
-              listHtml.optionInput.inputNameAttr +
+              commonFieldsHtml.fieldInput.nameAttr +
               ' value="other"' +
-              listHtml.optionInput.inputClassAttr +
-              // DataId
+              commonFieldsHtml.fieldInput.classAttr +
-              constHtml.fieldDataIdAttr +
+              // DataId
-            '>' +
+              commonFieldsHtml.dataIdAttr +
-          'Autre</label>';
+            '>' +
+          'Autre</label>';
       }
       // Fermeture des conteneurs .multiselect .checkboxes
       fieldHtml +=
         '</div>'+
       '</div>' +
-      fieldHtmlObject.fieldHelpButton;
+      // Bouton 'help'
       commonFieldsHtml.helpButton;
       break;
     case 'select':
       fieldHtml =
         '<label' +
-          ' for="' + fieldKey + '"' +
+          commonFieldsHtml.fieldLabel.forAttr +
+          // Info bulle
-          // Info bulle
+          commonFieldsHtml.titleAttr +
+        '>' +
-          constHtml.fieldTitleAttr +
+          // Nom du champ
-        '>' +
+          listFieldsHtml.containerContent +
-          // Nom du champ
+        '</label>' +
-          constHtml.fieldContainerContent +
+        // Conteneur/Wrapper
-        '</label>' +
+        // +Classe 'and-help'
-        // Conteneur/Wrapper
+        '<div class="select-wrapper add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
-        '<div class="select-wrapper add-field-select ' + fieldElement + fieldHelpClass + '"' +
+          // DataID
-          constHtml.fieldDataIdAttr +
+          commonFieldsHtml.dataIdAttr +
         '>' +
           '<select' +
-            ' name="' + fieldKey + '"' +
+            commonFieldsHtml.fieldInput.nameAttr +
             ' id="' + fieldKey + '"' +
-            //Class
+            // Class
-            listHtml.optionInput.inputClassAttr +
+            commonFieldsHtml.fieldInput.classAttr +
             // Required
-            constHtml.fieldMandatoryAttr +
-            // DataId
+            commonFieldsHtml.fieldInput.mandatoryAttr +
-            constHtml.fieldDataIdAttr +
+            // DataId
-          '>';
+            commonFieldsHtml.dataIdAttr +
-      // On déroule les différentes valeurs
+          '>';
       for ( let i = 0; i < count; i++ ) {
-        let fieldOption = fieldOptions[i];
+      // On déroule les différentes valeurs
       for( let i = 0; i < count; i++ ) {
-        listHtml.optionInput.inputDefaultAttr = '';
+        let fieldOption = fieldOptions[i];
-        listHtml.optionInput.inputdisabledAttr = '';
+        // Default
         listFieldsHtml.defaultAttr = '';//réinitialisation
-        if( fieldOption.isDefault ) {
+        if( fieldOption.isDefault ) {//affectation
-          listHtml.optionInput.inputDefaultAttr = ' selected="selected"';
+          listFieldsHtml.defaultAttr = ' selected="selected"';
+        }
         // value-id
         if( '' !== fieldOption.optionIndex ) {
-          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
         }
         fieldHtml +=
           '<option' +
             // Value
             ' value="' + fieldOption.optionValue + '"' +
-            // Value-id
-            listHtml.optionInput.inputOptionIdAttr +
+            // Value-id
-            // Selected
+            listFieldsHtml.optionIdAttr +
-            listHtml.optionInput.inputDefaultAttr +
+            // Selected
-          '>' +
+            listFieldsHtml.defaultAttr +
-            // Option
+          '>' +
-            fieldOption.optionText +
+            // Option
-          '</option>';
+            fieldOption.optionText +
-      }
+          '</option>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
         fieldHtml +=
-          '<option class="other" value="other"' + constHtml.fieldDataIdAttr + '>' +
+          '<option class="other" value="other"' + commonFieldsHtml.dataIdAttr + '>' +
             'Autre' +
-          '</option>';
           '</option>';
+      }
+      // Fermeture des conteneurs
       fieldHtml +=
           '</select>' +
-        // Fin du conteneur/wrapper
+        // Fin du conteneur/wrapper
         '</div>' +
+        // Bouton 'help'
-        fieldHtmlObject.fieldHelpButton;
+        commonFieldsHtml.helpButton;
       break;
-      break;
+    case 'file' :
       // Ouvrir l'attribut class (suppression de '"')
-    case 'file' :
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
-      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
+      commonFieldsHtml.fieldInput.classAttr += ' input-file"';
-      fieldHtmlObject.fieldInput.inputClassAttr += ' input-file"';
+      // Class du label
+      commonFieldsHtml.fieldLabel.classAttr = ' class="label-file"';
-      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="label-file"';
+      // Type de fichiers acceptés
+      commonFieldsHtml.fieldInput.otherAttr += ' accept="application/pdf, image/*, video/*"';
       fieldHtmlObject.fieldInput.inputOtherAttr += ' accept="application/pdf, image/*, video/*"';
+      fieldHtml =
-      fieldHtml =
+        // Classe 'and-help'
-        '<div class="input-file-container' + fieldHelpClass + '">' +
+        '<div class="input-file-container' + commonFieldsHtml.helpClass + '">' +
           '<input' +
             // Type
+            commonFieldsHtml.fieldInput.typeAttr +
+            // Name
-            fieldHtmlObject.fieldInput.inputTypeAttr +
+            commonFieldsHtml.fieldInput.nameAttr +
-            // Name
+            // DataId
-            fieldHtmlObject.fieldInput.inputNameAttr +
+            commonFieldsHtml.dataIdAttr +
-            // DataId
-            fieldHtmlObject.fieldInput.inputDataIdAttr +
+            // Class
-            // Class
+            commonFieldsHtml.fieldInput.classAttr +
-            fieldHtmlObject.fieldInput.inputClassAttr +
+            // Info-bulle
-            // Info-bulle
+            commonFieldsHtml.titleAttr +
-            fieldHtmlObject.fieldTitleAttr +
+            // Placeholder
-            // Placeholder
+            commonFieldsHtml.fieldInput.placeholderAttr +
-            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+            // Required
-            // Autres attributs
+            commonFieldsHtml.fieldInput.mandatoryAttr +
-            fieldHtmlObject.fieldInput.inputOtherAttr +
+            // Autres attributs
-          '>' +
+            commonFieldsHtml.fieldInput.otherAttr +
           '>' +
-          '<label' +
-            // For
+          '<label' +
-            fieldHtmlObject.fieldLabel.labelForAttr +
+            // For
-            // Class
+            commonFieldsHtml.fieldLabel.forAttr +
-            fieldHtmlObject.fieldLabel.labelClassAttr +
+            // Class
-            // Info-bulle
+            commonFieldsHtml.fieldLabel.classAttr +
-            fieldHtmlObject.fieldTitleAttr +
-          '><i class="fas fa-download"></i> ' +
+            // Info-bulle
-            // Nom du champ
+            commonFieldsHtml.titleAttr +
+          '><i class="fas fa-download"></i> ' +
-            fieldHtmlObject.fieldLabel.labelContent +
+            // Nom du champ
-          '</label>' +
+            commonFieldsHtml.fieldLabel.labelContent +
+          '</label>' +
         '</div>' +
         // Bouton supprimer le fichier
         '<div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>' +
+        // Bouton 'help'
-        fieldHtmlObject.fieldHelpButton;
+        commonFieldsHtml.helpButton;
+      break;
       break;
+    case 'textarea':
-    case 'textarea':
+      // Classe 'and-help'
-      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"';
+      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
       // Autres attributs
-      fieldHtmlObject.fieldInput.inputOtherAttr += ' id="' + fieldKey + '"';
+      commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';
       fieldHtml =
-        '<label' +
+        '<label' +
           // For
-          fieldHtmlObject.fieldLabel.labelForAttr +
-          // Class
+          commonFieldsHtml.fieldLabel.forAttr +
-          fieldHtmlObject.fieldLabel.labelClassAttr +
+          // Class
-          // Info-bulle
+          commonFieldsHtml.fieldLabel.classAttr +
-          fieldHtmlObject.fieldTitleAttr +
+          // Info-bulle
-          // Autres attributs
+          commonFieldsHtml.titleAttr +
-          fieldHtmlObject.fieldLabel.labelOtherAttr +
+          // Autres attributs
-        '>' +
+          commonFieldsHtml.fieldLabel.otherAttr +
-          // Nom du champ
+        '>' +
-          fieldHtmlObject.fieldLabel.labelContent +
+          // Nom du champ
-        '</label>' +
+          commonFieldsHtml.fieldLabel.labelContent +
+        '</label>' +
+        // Bouton 'help'
+        commonFieldsHtml.helpButton +
-        fieldHtmlObject.fieldHelpButton +
+        '<textarea' +
+          // Name
-        '<textarea' +
+          commonFieldsHtml.fieldInput.nameAttr +
-          // Name
-          fieldHtmlObject.fieldInput.inputNameAttr +
+          // DataId
-          // DataId
+          commonFieldsHtml.dataIdAttr +
+          // Class
-          fieldHtmlObject.fieldInput.inputDataIdAttr +
+          commonFieldsHtml.fieldInput.classAttr +
-          // Class
+          // Info-bulle
-          fieldHtmlObject.fieldInput.inputClassAttr +
+          commonFieldsHtml.titleAttr +
           // Info-bulle
-          fieldHtmlObject.fieldTitleAttr +
+          commonFieldsHtml.fieldInput.placeholderAttr +
-          // Info-bulle
+          // Required
-          fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+          commonFieldsHtml.fieldInput.mandatoryAttr +
           // Autres attributs
-          fieldHtmlObject.fieldInput.inputOtherAttr +
+          commonFieldsHtml.fieldInput.otherAttr +
         '></textarea>';
         break;
-        break;
     case 'range':
-    case 'range':
+      // Classe 'and-help'
-      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"';
+      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
       // Step
       if( '' !== fieldStep ) {
-        fieldHtmlObject.fieldInput.inputOtherAttr += ' step="' +  fieldStep + '"';
+        commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
+      }
+      // Min
       if( '' !== fieldMin ) {
-        fieldHtmlObject.fieldInput.inputOtherAttr += ' min="' +  fieldMin + '"';
+        commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
+      }
+      //Max
       if( '' !== fieldMax ) {
-        fieldHtmlObject.fieldInput.inputOtherAttr += ' max="' +  fieldMax + '"';
+        commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
       }
-      fieldHtml =
+      fieldHtml =
         '<div class="number">' +
           '<label' +
             // For
-            fieldHtmlObject.fieldLabel.labelForAttr +
+            commonFieldsHtml.fieldLabel.forAttr +
             // Class
-            fieldHtmlObject.fieldLabel.labelClassAttr +
+            commonFieldsHtml.fieldLabel.classAttr +
             // Info-bulle
-            fieldHtmlObject.fieldTitleAttr +
+            commonFieldsHtml.titleAttr +
             // Autres attributs
-            fieldHtmlObject.fieldLabel.labelOtherAttr +
+            commonFieldsHtml.fieldLabel.otherAttr +
           '>' +
             // Nom du champ
-            fieldHtmlObject.fieldLabel.labelContent +
+            commonFieldsHtml.fieldLabel.labelContent +
           '</label>' +
+          // Bouton 'help'
+          commonFieldsHtml.helpButton +
-          fieldHtmlObject.fieldHelpButton +
+          '<input' +
             // Type
-          '<input' +
-            // Type
+            commonFieldsHtml.fieldInput.typeAttr +
-            fieldHtmlObject.fieldInput.inputTypeAttr +
             // Name
-            fieldHtmlObject.fieldInput.inputNameAttr +
+            commonFieldsHtml.fieldInput.nameAttr +
             // DataId
+            commonFieldsHtml.dataIdAttr +
-            fieldHtmlObject.fieldInput.inputDataIdAttr +
+            // Class
+            commonFieldsHtml.fieldInput.classAttr +
-            // Class
+            // Info-bulle
-            fieldHtmlObject.fieldInput.inputClassAttr +
+            commonFieldsHtml.titleAttr +
             // Info-bulle
-            fieldHtmlObject.fieldTitleAttr +
+            commonFieldsHtml.fieldInput.placeholderAttr +
-            // Info-bulle
+            // Required
-            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+            commonFieldsHtml.fieldInput.mandatoryAttr +
             // Autres attributs
-            fieldHtmlObject.fieldInput.inputOtherAttr +
+            commonFieldsHtml.fieldInput.otherAttr +
           '>' +
+        '</div>';
-        '</div>';
+        break;
-        break;
+    case 'date':
-    case 'date':
+    case 'number':
-    case 'number':
+      // Ouvrir l'attribut class (suppression de '"')
-      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
-      fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"';
+      // Classe 'and-help'
+      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
-      if( '' !== fieldStep ) {
+      // Step
-        fieldHtmlObject.fieldInput.inputOtherAttr += ' step="' +  fieldStep + '"';
+      if( '' !== fieldStep ) {
         commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
+      }
-      if( '' !== fieldMin ) {
+      // Min
-        fieldHtmlObject.fieldInput.inputOtherAttr += ' min="' +  fieldMin + '"';
+      if( '' !== fieldMin ) {
         commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
+      }
-      if( '' !== fieldMax ) {
+      // Max
-        fieldHtmlObject.fieldInput.inputOtherAttr += ' max="' +  fieldMax + '"';
+      if( '' !== fieldMax ) {
-      }
         commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
       fieldHtml =
-        '<div class="number">' +
+      fieldHtml =
-          '<label' +
+        '<div class="number">' +
-            // For
+          '<label' +
-            fieldHtmlObject.fieldLabel.labelForAttr +
+            // For
-            // Class
+            commonFieldsHtml.fieldLabel.forAttr +
-            fieldHtmlObject.fieldLabel.labelClassAttr +
+            // Class
-            // Info-bulle
+            commonFieldsHtml.fieldLabel.classAttr +
-            fieldHtmlObject.fieldTitleAttr +
+            // Info-bulle
-            // Autres attributs
+            commonFieldsHtml.titleAttr +
-            fieldHtmlObject.fieldLabel.labelOtherAttr +
+            // Autres attributs
-          '>' +
+            commonFieldsHtml.fieldLabel.otherAttr +
+          '>' +
+            // Nom du champ
-            // Nom du champ
+            commonFieldsHtml.fieldLabel.labelContent +
-            fieldHtmlObject.fieldLabel.labelContent +
+          '</label>' +
-          '</label>' +
+          '<input' +
+            // Type
-          '<input' +
+            commonFieldsHtml.fieldInput.typeAttr +
-            // Type
-            fieldHtmlObject.fieldInput.inputTypeAttr +
+            // Name
-            // Name
-            fieldHtmlObject.fieldInput.inputNameAttr +
+            commonFieldsHtml.fieldInput.nameAttr +
             // DataId
-            fieldHtmlObject.fieldInput.inputDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
             // Class
+            commonFieldsHtml.fieldInput.classAttr +
-            fieldHtmlObject.fieldInput.inputClassAttr +
+            // Info-bulle
+            commonFieldsHtml.titleAttr +
             // Info-bulle
-            fieldHtmlObject.fieldTitleAttr +
+            commonFieldsHtml.fieldInput.placeholderAttr +
-            // Info-bulle
+            // Required
-            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+            commonFieldsHtml.fieldInput.mandatoryAttr +
             // Autres attributs
-            fieldHtmlObject.fieldInput.inputOtherAttr +
+            commonFieldsHtml.fieldInput.otherAttr +
           '>' +
           // Bouton 'help'
-          fieldHtmlObject.fieldHelpButton +
+          commonFieldsHtml.helpButton +
         '</div>';
-        '</div>';
+        break;
-        break;
+    case 'text' :
+    case 'email':
-    case 'text' :
+    default:
-    case 'email':
-    default:
+      // Ouvrir l'attribut class (suppression de '"')
-      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
-      fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"';
+      // Classe 'and-help'
       commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
-      fieldHtml =
-        '<label' +
+      fieldHtml =
-          // For
+        '<label' +
-          fieldHtmlObject.fieldLabel.labelForAttr +
+          // For
-          // Class
+          commonFieldsHtml.fieldLabel.forAttr +
-          fieldHtmlObject.fieldLabel.labelClassAttr +
+          // Class
-          // Info-bulle
+          commonFieldsHtml.fieldLabel.classAttr +
-          fieldHtmlObject.fieldTitleAttr +
+          // Info-bulle
-          // Autres attributs
+          commonFieldsHtml.titleAttr +
+          // Autres attributs
+          commonFieldsHtml.fieldLabel.otherAttr +
-          fieldHtmlObject.fieldLabel.labelOtherAttr +
+        '>' +
-        '>' +
+          // Nom du champ
-          // Nom du champ
+          commonFieldsHtml.fieldLabel.labelContent +
-          fieldHtmlObject.fieldLabel.labelContent +
+        '</label>' +
-        '</label>' +
+        '<input' +
-        '<input' +
+          // Type
-          // Type
+          commonFieldsHtml.fieldInput.typeAttr +
-          fieldHtmlObject.fieldInput.inputTypeAttr +
           // Name
-          fieldHtmlObject.fieldInput.inputNameAttr +
+          commonFieldsHtml.fieldInput.nameAttr +
           // DataId
-          fieldHtmlObject.fieldInput.inputDataIdAttr +
+          commonFieldsHtml.dataIdAttr +
           // Class
-          fieldHtmlObject.fieldInput.inputClassAttr +
+          commonFieldsHtml.fieldInput.classAttr +
           // Info-bulle
-          fieldHtmlObject.fieldTitleAttr +
-          // Info-bulle
+          commonFieldsHtml.titleAttr +
-          fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+          // Info-bulle
-          // Autres attributs
+          commonFieldsHtml.fieldInput.placeholderAttr +
-          fieldHtmlObject.fieldInput.inputOtherAttr +
+          // Required
-        '>' +
+          commonFieldsHtml.fieldInput.mandatoryAttr +
           // Autres attributs
-        fieldHtmlObject.fieldHelpButton;
+          commonFieldsHtml.fieldInput.otherAttr +
         '>' +
-      break;
+        // Bouton 'help'
         commonFieldsHtml.helpButton;
-  return fieldHtml;
+      break;
+  }
   return fieldHtml;
 // Construire un tableau des options pour chaque élément de listes
 function collectListOptions( thisFieldset ) {
+// Construire un tableau des options pour chaque élément de listes
+function collectListOptions( thisFieldset ) {
   var $details = $( '.field-details' , thisFieldset ),
       options = [];
   $details.find( '.new-value' ).each( function() {
     options.push({
-    options.push({
+      // Valeur transmise (value)
-      // Valeur transmise (value)
+      optionValue : $( this ).find('.list-value').val().toLowerCase(),
-      optionValue : $( this ).find('.list-value').val().toLowerCase(),
+      // Valeur Visible
-      // Valeur Visible
       optionText  : capitalize( $( this ).find('.list-value').val() ),
       // Booléen "default"
       isDefault   : $( this ).find( '.is-defaut-value').is( ':checked' ),
       // Indice de l'option
       optionIndex : $( this ).attr('data-list-value-id')
     });
   });
-  });
+  return options;
-  return options;
+}
 // Faire apparaitre un champ text "Autre"
 function onOtherOption( thisFieldset , index ) {
-// Faire apparaitre un champ text "Autre"
+  // Ce champ (dans la prévisualisation)
-function onOtherOption( thisFieldset , index ) {
+  var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'),
-  //L'élément choisi
+      //L'élément choisi
-  var element = $('.field-element' , thisFieldset ).val(),
+      element             = $('.field-element' , thisFieldset ).val(),
       // Où insérer le champ "Autre"
-      $element = $( '.' + element , thisFieldset ),
+      $element            = $( '.' + element , thisPreviewFieldset ),
-      // html du champ "Autre"
-      collectOther =
+      // html du champ "Autre"
-        '<label data-id="' + index + '" for="collect-other">Autre option :</label>' +
+      collectOther        =
-        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >';
+        '<label data-id="' + index + '" for="collect-other">Autre option :</label>' +
+        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >';
   // Pouvoir supprimer le champ "Autre"
-  function optionRemove( thisFieldset ) {
+  function optionRemove( thisPreviewFieldset ) {
-    $( 'label[for="collect-other"]' , thisFieldset ).remove();
+    $( 'label[for="collect-other"]' , thisPreviewFieldset ).remove();
-    $( 'input.collect-other' , thisFieldset ).remove();
+    $( 'input.collect-other' , thisPreviewFieldset ).remove();
+  }
   switch( element ) {
     case 'radio' :
-      // Lorsqu'un nouveau bouton est coché
-      $( 'input' , thisFieldset ).on( 'change' , function () {
+      // Lorsqu'un nouveau bouton est coché
-        if( 'other' === $( this ).val() ) {
+      $( 'input' , thisPreviewFieldset ).on( 'change' , function () {
-          // Insertion du champ "Autre" après les boutons
+  console.log($( this ));
-          $element.after( collectOther );
+        if( 'other' === $( this ).val() ) {
-        } else {
+          // Insertion du champ "Autre" après les boutons
-          // Suppression du champ autre
+          $element.after( collectOther );
-          optionRemove( thisFieldset );
+        } else {
           // Suppression du champ autre
-      });
+          optionRemove( thisPreviewFieldset );
+        }
-      break;
+      });
       break;
     case 'select' :
-      // Lorsque l'option "Autre" est selectionnée
-      $( 'select' , thisFieldset ).on( 'change' , function () {
+    case 'select' :
-        if( 'other' === $( this).val() ) {
+      // Lorsque l'option "Autre" est selectionnée
-          // Insertion du champ "Autre" après les boutons
+      $( 'select' , thisPreviewFieldset ).on( 'change' , function () {
-          $element.after( collectOther );
+        if( 'other' === $( this).val() ) {
       $( '#zone-supp .preview-container' ).append(
         '<div class="preview-fields" data-id="' + index + '">'+
           onClickPreviewField( thisFieldset , index ) +
         '</div>'
       );
       // Ajout/suppression d'un champ texte "Autre"
       if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) ) {
         onOtherOption( thisFieldset , index);
+      }
+    }
+  }
   // Le titre + message de la section prévisualisation ne sont ajoutés qu'une fois
   firstClick = false;
+}
+// Activation/Desactivation et contenu de la modale Bootstrap
 // https://getbootstrap.com/docs/3.3/javascript/#modals
 function previewFieldHelpModal() {
   $( '#zone-supp' ).on( 'click' , '.help-button' , function ( event ) {
     var index = $( this ).closest( '.preview-fields' ).attr( 'data-id' ),
         thisFieldset = $( '.new-field[data-id="' + index + '"]' ),
         file = $( '.field-help' , thisFieldset )[0].files[0],
-        tmppath = URL.createObjectURL( file ),
+        tmppath = URL.createObjectURL( file );
-        helpModalHtml = '';
     // Titre
     $( '#help-modal-label' ).text( 'Aide pour : ' +  $( '.field-name' , thisFieldset ).val() );
     // Contenu
     if( file.type.match( 'image' ) ) {
         $( '#print_content' ).append( '<img src="' + tmppath + '" style="max-width:100%">' );
     } else if( file.type.match( 'pdf' ) ) {
         $( '#print_content' ).append( '<iframe src="' + tmppath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );
-    }
+    }
     // Sortie avec la touche escape
+    $( '#help-modal' ).modal( { keyboard : true } );
-    $( '#help-modal' ).modal( { keyboard : true } );
+    // Affichage
-    $( '#help-modal' ).modal( 'show' );
+    $( '#help-modal' ).modal( 'show' );
+    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
+    // Message dans la doc de bootstrap :
+    // Due to how HTML5 defines its semantics,
+    // the autofocus HTML attribute has no effect in Bootstrap modals.
     // To achieve the same effect, use some custom JavaScript
     $( '#help-modal' ).on( 'shown.bs.modal' , function () {
       $( '#myInput' ).trigger( 'focus' );
-    })
+    })
     // Réinitialisation
     $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
       $( '#help-modal-label' ).text();
       $( '#print_content' ).empty();
     })
   });
-}
+}
 /***************************
  *  Lancement des scripts  *
  ***************************/
-// Tableau d'envoi des données
- var datasToSubmit = new Array();
- var firstClick = true;
 // Tableau d'envoi des données
-jQuery( document ).ready( function() {
+var datasToSubmit = new Array();
-  // console.log($(location).attr('search'));
+var firstClick = true;
   // console.log($(location).attr('search').search('='));
-  // console.log($(location).attr('search').charAt(6));
+jQuery( document ).ready( function() {
   // Identifiant de champ
-  var fieldIndex = 0;
-  // Ajout de nouveaux champs
+  var fieldIndex = 0;
-  onClickAddNewFields( fieldIndex );
+  // Ajout de nouveaux champs
-  // Activation/Desactivation des boutons valider et prévisualiser
-  activatePreviewAndValidateButtons();
   onClickAddNewFields( fieldIndex );
-  // Prévisualisation des champs classiques
+  // Activation/Desactivation des boutons valider et prévisualiser
-  DisplayClassicFields()
+  activatePreviewAndValidateButtons();
   // Prévisualisation des champs classiques
+  DisplayClassicFields();
   // Affichage des images ou nom des documents importés
-  inputFile();
-  // Affichage des List-checkbox
+  inputFile();

Subversion Repositories eFlore/Applications.cel

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