WebSVN – eFlore/Applications.cel – Path Comparison – / – /trunk/widget Rev 3175 and /trunk/widget/ Rev 3176

Ignore whitespace Rev 3175 → Rev 3176

 /trunk/widget/modules/manager/squelettes/creation.tpl.html
 ,24 → 29,23
     <link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
     <!-- Jquery -->
-    <script type="text/javascript" src="http://localhost/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
-    <script type="text/javascript" src="http://localhost/commun/jquery/jquery-ui/1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
-    <script type="text/javascript" src="http://localhost/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script>
-    <script type="text/javascript" src="http://localhost/commun/jquery/validate/1.9.0/jquery.validate.js"></script>
-    <script type="text/javascript" src="http://localhost/commun/jquery/validate/1.9.0/messages_fr.js"></script>
-    <script type="text/javascript" src="http://localhost/commun/jquery/form/2.95/jquery.form.min.js"></script>
-    <script type="text/javascript" src="http://localhost/commun/bootstrap/3.1.0/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
+    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
+    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script>
+    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.9.0/jquery.validate.js"></script>
+    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
+    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
+    <script src="https://resources.tela-botanica.org/bootstrap/3.1.0/js/bootstrap.min.js"></script>
     <!-- Barre de navigation -->
     <?php if ($bar !== false): ?>
-      <script src="<?php echo $url_script_navigation; ?>"></script>
+            <script src="<?php echo $url_script_navigation; ?>"></script>
     <?php endif; ?>
     <!-- CSS -->
-    <link rel="stylesheet" type="text/css" href="http://localhost/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" media="screen" />
+    <link href="https://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="https://resources.tela-botanica.org/bootstrap/3.1.0/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" href="<?php echo $url_base; ?>modules/manager/squelettes/css/manager.css" media="screen" />
-    <link rel="stylesheet" type="text/css" href="http://localhost/commun/bootstrap/3.1.0/css/bootstrap.min.css" />
     <link rel="stylesheet" type="text/css" id="telabotanica-style-css" href="https://www.tela-botanica.org/wp-content/themes/telabotanica/dist/bundle.css?ver=4.9.7" media="all">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
 ,13 → 125,33
                 <textarea name="description" id="description"><?php echo isset($widget['description']) ? $widget['description'] : ''; ?></textarea>
                 <div class="input-file-container">
-                    <input type="file" class="input-file" name="logo" id="logo"  accept="image">
-                    <label for="logo" class="label-file"><i class="fas fa-download"></i> Logo</label>
+                  <?php
+                    if( isset( $widget['logo'] ) ) :
+                      $logo_src = $widget['logo'];
+                      $logo_img =
+                        '<img id="pre-existent-logo" src="' . $logo_src . '"><br>Pour changer, télécharger un nouveau fichier.';
+                      $logo_hidden = '';
+                      $logo_file_name = array_reverse(explode('/', $logo_src));
+                    else :
+                      $logo_src = '';
+                      $logo_img = '';
+                      $logo_hidden = ' hidden';
+                      $logo_file_name = [];
+                    endif;
+                  ?>
+                  <input type="file" class="input-file" name="logo" id="logo"  accept="image" value="<?php echo $logo_src; ?>">
+                  <label for="logo" class="label-file"><i class="fas fa-download"></i> Logo</label>
                 </div>
-                <div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
-                <div class="file-return logo hidden"></div>
+                <div class="remove-file button" name="remove-file" title="Supprimer le fichier">
+                  <i class="fas fa-times" aria-hidden="true"></i>
+                </div>
+                <div class="file-return logo<?php echo $logo_hidden; ?>">
+                  <?php echo $logo_file_name[0]; ?>
+                  <?php echo $logo_img; ?>
+                </div>
-                <?php echo isset($widget['logo']) ? '<img src="'.$widget['logo'].'"><br />Pour changer, télécharger un nouveau fichier.': ''; ?>
                 <div class="input-file-container">
                     <input type="file" class="input-file" name="fond" id="fond" value="<?php echo $widget['titre']; ?>">

 /trunk/widget/modules/manager/squelettes/css/manager.css
 ,6 → 278,16
   background-color: initial;
 }
+/* annuler un position absolute provenant de bundle.css */
+#zone-appli #register-page #group-settings-form .widget-blocks fieldset > p {
+  position: static;
+  right: initial;
+  top: initial;
+  width: auto;
+  text-align: left;
+  color: #606060;
+}
 /*************************************************/
 /**** Style des select ****/

 /trunk/widget/modules/manager/squelettes/js/manager.js
 ,6 → 75,8
     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
 ,6 → 341,67
  *  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.)
 ,23 → 528,13
       // 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 = true;
-      }
+      datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
       // 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 );
 ,36 → 589,22
       case 'number':
       case 'range':
         // Placeholder
-        if( $( '.aide-saisie' , thisFieldset ).val() ) {
-         datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val();
-        }
+        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
         // Valeur par défaut
-        if( $( '.default' , thisFieldset ).val() ) {
-          datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val();
-        }
+        datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null;
         // Incrémentation ( attribut step="" )
-        if( $( '.step' , thisFieldset ).val() ) {
-          datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val();
-        }
+         datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null;
         // Min
-        if( $( '.min' , thisFieldset ).val() ) {
-          datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val();
-        }
+        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
         // Max
-        if( $( '.max' , thisFieldset ).val() ) {
-          datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val();
-        }
+        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
         break;
       case 'date':
         // Min
-        if( $( '.min' , thisFieldset ).val() ) {
-          datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val();
-        }
+        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
         // Max
-        if( $( '.max' , thisFieldset ).val() ) {
-         datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val();
-        }
+        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
         break;
       case 'email':
 ,9 → 612,7
       case 'textarea':
       default:
         // Placeholder
-        if( $( '.aide-saisie' , thisFieldset ).val() ) {
-          datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val();
-        }
+        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
         break;
     }
     return datasToSubmitObject;
 ,12 → 623,18
 function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {
   $( '.list-value' , thisFieldset ).each( function() {
     var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
      if( $( this ).val() ){
-      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr('data-list-value-id') + '"]' , thisFieldset ).attr( 'checked' ) ) {
+      // Is-default-value non cochée
+      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' , thisFieldset ).attr( '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 + '#'
         datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );
+      // Is-default-value cochée pour checkbox/list-checkbox
       } else {
+        // On ajoute simplement la valeur au tableau + '#'
         datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' );
       }
     }
 ,18 → 645,7
  *  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() );
-  });
-}
+// Prévisualisation
 function DisplayClassicFields() {
   // Affichage du titre du widget
   renderFields( $('#titre') , $( '.widget-renderer h1' ) );
 ,16 → 654,17
   // Affichage de la description
   renderFields( $('#description') , $( '.preview-description' ) );
   // Affichage du logo s'il existe déjà
-  if( $('#logo').val() ) {
-    $( '#preview-logo' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') );
+  if( $('#logo').val() || $('#logo')[0].defaultValue ) {
+    $( '#preview-logo img' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') );
   }
   // Affichage du logo chargé
   $( '#logo.input-file' ).change( function( event ) {
-    if( !$.isEmptyObject( event.target.files[0] ) ) {
+    // Si le 'change' était pas une suppression
+    if( $.isEmptyObject( event.target.files[0] ) ) {
+      $( '#preview-logo img' ).prop( 'src' , '' );
+    // Si on a chargé un logo ou changé le fichier
+    } else {
       $( '#preview-logo img' ).prop( 'src' , URL.createObjectURL( event.target.files[0] ) );
-    } else {
-      $( '#preview-logo img' ).prop( 'src' , '' );
     }
   });
   // Affichage de l'image de fond
 ,192 → 677,192
   });
 }
+// 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
 function onClickPreviewField( thisFieldset , index ) {
-  var fieldLabel       = $( '.field-name'            , thisFieldset ).val(),
-      fieldKey         = $( '.field-key'             , thisFieldset ).val(),
-      fieldElement     = $( '.field-element'         , thisFieldset ).val(),
-      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),
-      fieldUnit        = $( '.field-unit'            , thisFieldset ).val(),
-      fieldTooltip     = $( '.field-description'     , thisFieldset ).val(),
-      fieldHelp        = $( '.file-return.help-doc-' + index ).text(),
-      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',
-      fieldDefaultNum  = $( '.default'               , thisFieldset ).val(),
+  // Récupération des données
+      // Tous les champs
+  var fieldLabel       = $( '.field-name'            , thisFieldset ).val(),//nom
+      fieldKey         = $( '.field-key'             , thisFieldset ).val(),//clé
+      fieldElement     = $( '.field-element'         , thisFieldset ).val(),//élément
+      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),//champ requis
+      fieldUnit        = $( '.field-unit'            , thisFieldset ).val(),//unités
+      fieldTooltip     = $( '.field-description'     , thisFieldset ).val(),//info-bulle
+      fieldHelp        = $( '.file-return.help-doc-' + index ).text(),//nom du fichier d'aide
+      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',//placeholder
+      // Champs à valeur numérique ou date
       fieldStep        = $( '.step'                  , thisFieldset ).val(),
       fieldMin         = $( '.min'                   , thisFieldset ).val(),
       fieldMax         = $( '.max'                   , thisFieldset ).val(),
-      fieldOtherValue  = $( '.option-other-value'    , thisFieldset ).is( ':checked' ),
-      fieldOptions     = collectListOptions( thisFieldset );
-  var fieldHtmlObject  = {},
-      fieldHtml        = '',
-      constHtml        = {},
-      listHtml         = {},
-      count            = fieldOptions.length,
-      fieldHelpClass   = '';
-  // Pour les éléments simples
-  fieldHtmlObject = {
-    fieldHelpButton : '',
-    fieldTitleAttr : '',
-    fieldLabel     : {
-      labelForAttr         :' for="' + fieldKey + '"',
-      labelClassAttr       :'',
-      labelOtherAttr       : '',
-      labelContent         : fieldLabel
+      // Champs "listes"
+      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 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
+  //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
+    helpClass  : '',//classe de l'élément associé au bouton aide
+    titleAttr  : '',//info-bulle
+    fieldInput : {//attributs de l'élément
+      typeAttr        : ' type="' + fieldElement + '"',
+      nameAttr        : ' name="' + fieldKey + '"',
+      classAttr       : ' class="' +  fieldKey + '"',
+      placeholderAttr : '',
+      mandatoryAttr   : '',//required
+      otherAttr       : ''
     },
-    fieldInput     : {
-      inputTypeAttr        : ' type="' + fieldElement + '"',
-      inputNameAttr        : ' name="' + fieldKey + '"',
-      inputDataIdAttr      : ' data-id="' + index + '"',
-      inputClassAttr       : ' class="' +  fieldKey + '"',
-      inputPlaceholderAttr : '',
-      inputOtherAttr       : ''
+    fieldLabel : {//attributs et contenu du label
+      labelContent    : fieldLabel,//label
+      forAttr         : ' for="' + fieldKey + '"',//attribut for
+      classAttr       : '',//classe du label
+      otherAttr       : ''//tous autres attributs
     }
   }
   // Pour les éléments de listes (select, checkbox, etc.)
-  constHtml = {
-    fieldContainerContent : fieldLabel,
-    fieldDataIdAttr       : ' data-id="' + index + '"',
-    fieldTitleAttr        : '',
-    fieldMandatoryAttr    : '',
-    fieldContainerClass   : ''
+  listFieldsHtml = {
+    containerContent : fieldLabel,//les options peuvent avoir chacune un label
+    containerClass   : '',//une classe pour le conteneur
+    forAttr          : '',//correspond à l'id d'une checkbox/radio/list-checkbox
+    optionIdAttr     : '',//value-id
+    defaultAttr      : ''//default
   };
-  listHtml = {
-    optionLabel : {},
-    optionInput  : {
-      inputTypeAttr    : ' type="'  + fieldElement + '"',
-      inputNameAttr    : ' name="'  + fieldKey + '"',
-      inputClassAttr   : ' class="' +  fieldKey + '"',
-      inputOptionIdAttr : ''
-    }
-  };
   // 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();
   }
-  // Si l'élément est requis
+  // Élément requis
   if( fieldIsMandatory ) {
-    // Attribut required
-    fieldHtmlObject.fieldInput.inputOtherAttr += ' required="required"';
+    // Attribut required pour le listes
+    commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
     // Nom du champ (éléments listes)
-    constHtml.fieldContainerContent         += ' *';
+    listFieldsHtml.containerContent         += ' *';
     // Nom du champ (éléments simples)
-    fieldHtmlObject.fieldLabel.labelContent += ' *';
+    commonFieldsHtml.fieldLabel.labelContent += ' *';
   }
-  // Si on a une infobulle
+  // Infobulle
   if( '' !== fieldTooltip ) {
-    fieldHtmlObject.fieldTitleAttr = ' title="' +  fieldTooltip + '"';
+    commonFieldsHtml.titleAttr = ' title="' +  fieldTooltip + '"';
   }
-  // Si on a un placeholder
+  // Placeholder
   if( '' !== fieldPlaceholder ) {
-    fieldHtmlObject.fieldInput.inputPlaceholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
-    console.log(fieldPlaceholder);
+    commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
   }
+  // Fichier d'aide
   if( '' !== fieldHelp ) {
-    fieldHtmlObject.fieldHelpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
-    fieldHelpClass = ' and-help';
+    // Bouton 'aide'
+    commonFieldsHtml.helpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
+    // 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
-          constHtml.fieldTitleAttr +
+          commonFieldsHtml.titleAttr +
         ' >'+
           // Nom du champ
-          '<div class="list-label' + fieldHelpClass + '">' +
-            constHtml.fieldContainerContent +
+          // Classe 'and-help'
+          '<div class="list-label' + commonFieldsHtml.helpClass + '">' +
+            // Label
+            listFieldsHtml.containerContent +
           '</div>' +
-          fieldHtmlObject.fieldHelpButton;
+          // Bouton 'help'
+          commonFieldsHtml.helpButton;
       // On déroule les différentes valeurs
-      for ( let i = 0; i < count; i++ ) {
+      for( let i = 0; i < count; i++ ) {
         let fieldOption = fieldOptions[i];
-        listHtml.optionInput.inputDefaultAttr = '';
-        listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
-        listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue + '"';
-        // Si c'est une/l'option par défaut
-        if( fieldOption.isDefault ) {
-          listHtml.optionInput.inputDefaultAttr = ' checked';
+        // L'id de input
+        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
+        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue + '"';
+        // Default
+        listFieldsHtml.defaultAttr = '';//réinitialisation
+        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"
-            listHtml.optionInput.inputClassAttr +
+            commonFieldsHtml.fieldInput.classAttr +
           '>' +
             '<input' +
               // Type
-              listHtml.optionInput.inputTypeAttr +
+              commonFieldsHtml.fieldInput.typeAttr +
+              // Id
+              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>';
         // 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 +
-                constHtml.fieldDataIdAttr +
+                commonFieldsHtml.fieldInput.classAttr +
+                commonFieldsHtml.dataIdAttr +
               '>' +
             'Autre</label>';
         }
 ,31 → 869,30
       }
       // Fin du conteneur
       fieldHtml += '</div>';
       break;
     case 'list-checkbox':
       fieldHtml =
-        '<div class="multiselect ' + fieldElement + fieldHelpClass + '"' +
+        // Classe 'and-help'
+        '<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' +
           // DataId
-          constHtml.fieldDataIdAttr +
+          commonFieldsHtml.dataIdAttr +
         '>' +
           '<label>' +
             // Nom du champ
-            constHtml.fieldContainerContent +
+            listFieldsHtml.containerContent +
           '</label>' +
           '<div class="selectBox"' +
             // DataId
-            constHtml.fieldDataIdAttr +
+            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>' +
 ,116 → 901,117
           '</div>' +
           '<div class="checkboxes hidden"' +
             // DataId
-            constHtml.fieldDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
           '>';
       // On déroule les différentes valeurs
-      for ( let i = 0; i < count; i++ ) {
+      for( let i = 0; i < count; i++ ) {
         let fieldOption = fieldOptions[i];
-        listHtml.optionInput.inputTypeAttr = ' type="checkbox"';
-        listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
-        listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
-        listHtml.optionInput.inputDefaultAttr = '';
+        // Type="checkbox"
+        commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"';
+        // Id
+        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
+        // For
+        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
+        // Default
+        listFieldsHtml.defaultAttr = '';//réinitialisation
         if( fieldOption.isDefault ) {
-          listHtml.optionInput.inputDefaultAttr = ' checked';
+          listFieldsHtml.defaultAttr = ' checked';//affectation
         }
+        // value-id
         if( '' !== fieldOption.optionIndex ) {
-          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
         }
         fieldHtml +=
           '<label' +
-            listHtml.optionLabel.labelForAttr +
+            // For
+            listFieldsHtml.forAttr +
             // value-id
-            listHtml.optionInput.inputOptionIdAttr +
+            listFieldsHtml.optionIdAttr +
           '>' +
             '<input type="checkbox"' +
+              // Id
+              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>';
       }
       // 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 +
+              commonFieldsHtml.fieldInput.classAttr +
               // DataId
-              constHtml.fieldDataIdAttr +
+              commonFieldsHtml.dataIdAttr +
             '>' +
           '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
-          constHtml.fieldTitleAttr +
+          commonFieldsHtml.titleAttr +
         '>' +
           // Nom du champ
-          constHtml.fieldContainerContent +
+          listFieldsHtml.containerContent +
         '</label>' +
         // Conteneur/Wrapper
-        '<div class="select-wrapper add-field-select ' + fieldElement + fieldHelpClass + '"' +
-          constHtml.fieldDataIdAttr +
+        // +Classe 'and-help'
+        '<div class="select-wrapper add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
+          // DataID
+          commonFieldsHtml.dataIdAttr +
         '>' +
           '<select' +
-            ' name="' + fieldKey + '"' +
+            commonFieldsHtml.fieldInput.nameAttr +
             ' id="' + fieldKey + '"' +
-            //Class
-            listHtml.optionInput.inputClassAttr +
+            // Class
+            commonFieldsHtml.fieldInput.classAttr +
             // Required
-            constHtml.fieldMandatoryAttr +
+            commonFieldsHtml.fieldInput.mandatoryAttr +
             // DataId
-            constHtml.fieldDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
           '>';
       // On déroule les différentes valeurs
-      for ( let i = 0; i < count; i++ ) {
+      for( let i = 0; i < count; i++ ) {
         let fieldOption = fieldOptions[i];
-        listHtml.optionInput.inputDefaultAttr = '';
-        listHtml.optionInput.inputdisabledAttr = '';
-        if( fieldOption.isDefault ) {
-          listHtml.optionInput.inputDefaultAttr = ' selected="selected"';
+        // Default
+        listFieldsHtml.defaultAttr = '';//réinitialisation
+        if( fieldOption.isDefault ) {//affectation
+          listFieldsHtml.defaultAttr = ' selected="selected"';
         }
+        // value-id
         if( '' !== fieldOption.optionIndex ) {
-          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
         }
         fieldHtml +=
 ,131 → 1019,132
             // Value
             ' value="' + fieldOption.optionValue + '"' +
             // Value-id
-            listHtml.optionInput.inputOptionIdAttr +
+            listFieldsHtml.optionIdAttr +
             // Selected
-            listHtml.optionInput.inputDefaultAttr +
+            listFieldsHtml.defaultAttr +
           '>' +
             // 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>';
       }
+      // Fermeture des conteneurs
       fieldHtml +=
           '</select>' +
         // Fin du conteneur/wrapper
         '</div>' +
-        fieldHtmlObject.fieldHelpButton;
+        // Bouton 'help'
+        commonFieldsHtml.helpButton;
       break;
     case 'file' :
-      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
-      fieldHtmlObject.fieldInput.inputClassAttr += ' input-file"';
+      // Ouvrir l'attribut class (suppression de '"')
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
+      commonFieldsHtml.fieldInput.classAttr += ' input-file"';
+      // Class du label
+      commonFieldsHtml.fieldLabel.classAttr = ' class="label-file"';
+      // Type de fichiers acceptés
+      commonFieldsHtml.fieldInput.otherAttr += ' accept="application/pdf, image/*, video/*"';
-      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="label-file"';
-      fieldHtmlObject.fieldInput.inputOtherAttr += ' accept="application/pdf, image/*, video/*"';
       fieldHtml =
-        '<div class="input-file-container' + fieldHelpClass + '">' +
+        // Classe 'and-help'
+        '<div class="input-file-container' + commonFieldsHtml.helpClass + '">' +
           '<input' +
             // Type
-            fieldHtmlObject.fieldInput.inputTypeAttr +
+            commonFieldsHtml.fieldInput.typeAttr +
             // Name
-            fieldHtmlObject.fieldInput.inputNameAttr +
+            commonFieldsHtml.fieldInput.nameAttr +
             // DataId
-            fieldHtmlObject.fieldInput.inputDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
             // Class
-            fieldHtmlObject.fieldInput.inputClassAttr +
+            commonFieldsHtml.fieldInput.classAttr +
             // Info-bulle
-            fieldHtmlObject.fieldTitleAttr +
+            commonFieldsHtml.titleAttr +
             // Placeholder
-            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+            commonFieldsHtml.fieldInput.placeholderAttr +
+            // Required
+            commonFieldsHtml.fieldInput.mandatoryAttr +
             // Autres attributs
-            fieldHtmlObject.fieldInput.inputOtherAttr +
+            commonFieldsHtml.fieldInput.otherAttr +
           '>' +
           '<label' +
             // For
-            fieldHtmlObject.fieldLabel.labelForAttr +
+            commonFieldsHtml.fieldLabel.forAttr +
             // Class
-            fieldHtmlObject.fieldLabel.labelClassAttr +
+            commonFieldsHtml.fieldLabel.classAttr +
             // Info-bulle
-            fieldHtmlObject.fieldTitleAttr +
+            commonFieldsHtml.titleAttr +
           '><i class="fas fa-download"></i> ' +
             // Nom du champ
-            fieldHtmlObject.fieldLabel.labelContent +
+            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>' +
-        fieldHtmlObject.fieldHelpButton;
+        // Bouton 'help'
+        commonFieldsHtml.helpButton;
       break;
     case 'textarea':
-      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"';
+      // Classe 'and-help'
+      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
       // Autres attributs
-      fieldHtmlObject.fieldInput.inputOtherAttr += ' id="' + fieldKey + '"';
+      commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';
       fieldHtml =
         '<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>' +
-        fieldHtmlObject.fieldHelpButton +
+        // Bouton 'help'
+        commonFieldsHtml.helpButton +
         '<textarea' +
           // Name
-          fieldHtmlObject.fieldInput.inputNameAttr +
+          commonFieldsHtml.fieldInput.nameAttr +
           // DataId
-          fieldHtmlObject.fieldInput.inputDataIdAttr +
+          commonFieldsHtml.dataIdAttr +
           // Class
-          fieldHtmlObject.fieldInput.inputClassAttr +
+          commonFieldsHtml.fieldInput.classAttr +
           // Info-bulle
-          fieldHtmlObject.fieldTitleAttr +
+          commonFieldsHtml.titleAttr +
           // Info-bulle
-          fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+          commonFieldsHtml.fieldInput.placeholderAttr +
+          // Required
+          commonFieldsHtml.fieldInput.mandatoryAttr +
           // Autres attributs
-          fieldHtmlObject.fieldInput.inputOtherAttr +
+          commonFieldsHtml.fieldInput.otherAttr +
         '></textarea>';
         break;
     case 'range':
-      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"';
+      // Classe 'and-help'
+      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 =
 ,140 → 1151,141
         '<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
-            fieldHtmlObject.fieldInput.inputTypeAttr +
+            commonFieldsHtml.fieldInput.typeAttr +
             // Name
-            fieldHtmlObject.fieldInput.inputNameAttr +
+            commonFieldsHtml.fieldInput.nameAttr +
             // DataId
-            fieldHtmlObject.fieldInput.inputDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
             // Class
-            fieldHtmlObject.fieldInput.inputClassAttr +
+            commonFieldsHtml.fieldInput.classAttr +
             // Info-bulle
-            fieldHtmlObject.fieldTitleAttr +
+            commonFieldsHtml.titleAttr +
             // Info-bulle
-            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+            commonFieldsHtml.fieldInput.placeholderAttr +
+            // Required
+            commonFieldsHtml.fieldInput.mandatoryAttr +
             // Autres attributs
-            fieldHtmlObject.fieldInput.inputOtherAttr +
+            commonFieldsHtml.fieldInput.otherAttr +
           '>' +
         '</div>';
         break;
     case 'date':
     case 'number':
-      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
-      fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"';
+      // Ouvrir l'attribut class (suppression de '"')
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
+      // Classe 'and-help'
+      commonFieldsHtml.fieldInput.classAttr += 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 =
         '<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>' +
           '<input' +
             // Type
-            fieldHtmlObject.fieldInput.inputTypeAttr +
+            commonFieldsHtml.fieldInput.typeAttr +
             // Name
-            fieldHtmlObject.fieldInput.inputNameAttr +
+            commonFieldsHtml.fieldInput.nameAttr +
             // DataId
-            fieldHtmlObject.fieldInput.inputDataIdAttr +
+            commonFieldsHtml.dataIdAttr +
             // Class
-            fieldHtmlObject.fieldInput.inputClassAttr +
+            commonFieldsHtml.fieldInput.classAttr +
             // Info-bulle
-            fieldHtmlObject.fieldTitleAttr +
+            commonFieldsHtml.titleAttr +
             // Info-bulle
-            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+            commonFieldsHtml.fieldInput.placeholderAttr +
+            // Required
+            commonFieldsHtml.fieldInput.mandatoryAttr +
             // Autres attributs
-            fieldHtmlObject.fieldInput.inputOtherAttr +
+            commonFieldsHtml.fieldInput.otherAttr +
           '>' +
-          fieldHtmlObject.fieldHelpButton +
+          // Bouton 'help'
+          commonFieldsHtml.helpButton +
         '</div>';
         break;
     case 'text' :
     case 'email':
     default:
-      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
-      fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"';
+      // Ouvrir l'attribut class (suppression de '"')
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
+      // Classe 'and-help'
+      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
       fieldHtml =
         '<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>' +
         '<input' +
           // Type
-          fieldHtmlObject.fieldInput.inputTypeAttr +
+          commonFieldsHtml.fieldInput.typeAttr +
           // Name
-          fieldHtmlObject.fieldInput.inputNameAttr +
+          commonFieldsHtml.fieldInput.nameAttr +
           // DataId
-          fieldHtmlObject.fieldInput.inputDataIdAttr +
+          commonFieldsHtml.dataIdAttr +
           // Class
-          fieldHtmlObject.fieldInput.inputClassAttr +
+          commonFieldsHtml.fieldInput.classAttr +
           // Info-bulle
-          fieldHtmlObject.fieldTitleAttr +
+          commonFieldsHtml.titleAttr +
           // Info-bulle
-          fieldHtmlObject.fieldInput.inputPlaceholderAttr +
+          commonFieldsHtml.fieldInput.placeholderAttr +
+          // Required
+          commonFieldsHtml.fieldInput.mandatoryAttr +
           // Autres attributs
-          fieldHtmlObject.fieldInput.inputOtherAttr +
+          commonFieldsHtml.fieldInput.otherAttr +
         '>' +
-        fieldHtmlObject.fieldHelpButton;
+        // Bouton 'help'
+        commonFieldsHtml.helpButton;
       break;
   }
   return fieldHtml;
 }
 ,7 → 1295,6
       options = [];
   $details.find( '.new-value' ).each( function() {
     options.push({
       // Valeur transmise (value)
       optionValue : $( this ).find('.list-value').val().toLowerCase(),
 ,7 → 1305,6
       // Indice de l'option
       optionIndex : $( this ).attr('data-list-value-id')
     });
   });
   return options;
 }
 ,63 → 1311,62
 // Faire apparaitre un champ text "Autre"
 function onOtherOption( thisFieldset , index ) {
-  //L'élément choisi
-  var element = $('.field-element' , thisFieldset ).val(),
+  // Ce champ (dans la prévisualisation)
+  var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'),
+      //L'élément choisi
+      element             = $('.field-element' , thisFieldset ).val(),
       // Où insérer le champ "Autre"
-      $element = $( '.' + element , thisFieldset ),
+      $element            = $( '.' + element , thisPreviewFieldset ),
       // html du champ "Autre"
-      collectOther =
+      collectOther        =
         '<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 ) {
-    $( 'label[for="collect-other"]' , thisFieldset ).remove();
-    $( 'input.collect-other' , thisFieldset ).remove();
+  function optionRemove( thisPreviewFieldset ) {
+    $( 'label[for="collect-other"]' , thisPreviewFieldset ).remove();
+    $( 'input.collect-other' , thisPreviewFieldset ).remove();
   }
   switch( element ) {
     case 'radio' :
       // Lorsqu'un nouveau bouton est coché
-      $( 'input' , thisFieldset ).on( 'change' , function () {
+      $( 'input' , thisPreviewFieldset ).on( 'change' , function () {
+  console.log($( this ));
         if( 'other' === $( this ).val() ) {
           // Insertion du champ "Autre" après les boutons
           $element.after( collectOther );
         } else {
           // Suppression du champ autre
-          optionRemove( thisFieldset );
+          optionRemove( thisPreviewFieldset );
         }
       });
       break;
     case 'select' :
       // Lorsque l'option "Autre" est selectionnée
-      $( 'select' , thisFieldset ).on( 'change' , function () {
+      $( 'select' , thisPreviewFieldset ).on( 'change' , function () {
         if( 'other' === $( this).val() ) {
           // Insertion du champ "Autre" après les boutons
           $element.after( collectOther );
           // Suppression du champ autre
         } else {
-          optionRemove( thisFieldset );
+          optionRemove( thisPreviewFieldset );
         }
       });
       break;
     case 'checkbox' :
     case 'list-checkbox' :
       // Lorsque "Autre" est coché
-      $( 'input#other' , thisFieldset ).on( 'click' , function () {
+      $( 'input#other' , thisPreviewFieldset ).on( 'click' , function () {
         // Insertion du champ "Autre" après les boutons
         if( $( this ).is( ':checked' ) ) {
           $element.after( collectOther );
         } else {
           // Suppression du champ autre
-          optionRemove( thisFieldset );
+          optionRemove( thisPreviewFieldset );
         }
       });
       break;
     default :
 ,7 → 1401,6
           onClickPreviewField( thisFieldset , index ) +
         '</div>'
       );
       // Ajout/suppression d'un champ texte "Autre"
       if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) ) {
         onOtherOption( thisFieldset , index);
 ,29 → 1411,35
   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 ),
-        helpModalHtml = '';
+        tmppath = URL.createObjectURL( file );
+    // 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 } );
+    // Affichage
     $( '#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();
 ,19 → 1448,15
 }
 /***************************
  *  Lancement des scripts  *
  ***************************/
 // Tableau d'envoi des données
- var datasToSubmit = new Array();
- var firstClick = true;
+var datasToSubmit = new Array();
+var firstClick = true;
 jQuery( document ).ready( function() {
-  // console.log($(location).attr('search'));
-  // console.log($(location).attr('search').search('='));
-  // console.log($(location).attr('search').charAt(6));
   // Identifiant de champ
   var fieldIndex = 0;
   // Ajout de nouveaux champs
 ,16 → 1463,12
   onClickAddNewFields( fieldIndex );
   // Activation/Desactivation des boutons valider et prévisualiser
   activatePreviewAndValidateButtons();
   // Prévisualisation des champs classiques
-  DisplayClassicFields()
+  DisplayClassicFields();
   // Affichage des images ou nom des documents importés
   inputFile();
   // Affichage des List-checkbox
   inputListCheckbox();
+  // Modale "aide"
   previewFieldHelpModal();
 });

Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3175 → Rev 3176