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

 "use strict";
 /*************************************
  *  Fonctions de Style et Affichage  *
  *      des éléments "spéciaux"      *
  *************************************/
 // Logique d'affichage pour le input type=file
 function inputFile() {
   // Initialisation des variables
   var $fileInput  = $( '.input-file' ),
       $button     = $( '.label-file' ),
       thisId = '';
   // Action lorsque la "barre d'espace" ou "Entrée" est pressée
   $( '.label-file' ).keydown( function( event ) {
     if ( event.keyCode == 13 || event.keyCode == 32 ) {
       $( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
+    }
   });
   // Action lorsque le label est cliqué
   $( '.label-file' ).click( function(event) {
     $( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
     return false;
   });
   // Affiche un retour visuel dès que input:file change
   $fileInput.change( function( event ) {
     // Il est possible de supprimer un fichier
     // donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value
     if( !$.isEmptyObject( event.target.files[0] ) ) {
       var file = event.target.files[0],
           fileInputId = $( this ).attr( 'id' ),
           $theReturn = $( '.' + fileInputId );
       // Affichage du nom du fichier
       $theReturn.text( file.name ).removeClass( 'hidden') ;
       if( 5242880 < file.size ) {
         $theReturn.append(
           '<p class="message">'+
             '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
             'La taille du fichier ne doit pas dépasser 5Mo'+
           '</p>'
+        )
         .addClass( 'invalid' );
         // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
         $( this ).clearInputs();
         console.log(file);
       } else if( file.type.match( 'image/*' ) && 'especes' !== fileInputId ) {
       // Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche
         // Chemin temporaire de l'image et affichage
         var tmppath = URL.createObjectURL( file );
         $theReturn.append( '<img src="' + tmppath + '" width="50%">' ).removeClass( 'invalid' );;
       } else if ( !( 'especes' === fileInputId && file.type.match( 'text/csv' ) ) ) {
         // on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv
         if( 'especes' === fileInputId ) {// cas où on demandait un csv
           $theReturn.append(
             '<p class="message">'+
               '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
               'Le fichier doit être au format csv'+
             '</p>'
+          )
           .addClass( 'invalid' );
         } else { // cas où on demandait un format image
           $theReturn.append(
             '<p class="message">'+
               '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
               'Le fichier doit être au format image (jpg, png, etc.)'+
             '</p>'
+          )
           .addClass( 'invalid' );
+        }
         // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
         $( this ).clearInputs();
         console.log(file);
       } else {// file "especes" csv ok
         $theReturn.append( ' <i class="fa fa-check-circle" aria-hidden="true" style="color:#B3C954;font-size:1.3rem"></i>' ).removeClass( 'invalid' );
+      }
+    }
   });
   // Annuler le téléchargement
   $( '.remove-file' ).click( function() {
     var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' );
     // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
     $thisFileInput.clearInputs();
     $thisFileInput.triggerHandler( 'change' );
     // $thisFileInput.unwrap();
     $( this ).next( '.file-return' ).addClass( 'hidden' ).empty();
   });
+}
 // Style et affichage des list-checkboxes
 function inputListCheckbox() {
   // On écoute le click sur une list-checkbox ('.selectBox')
   // à tout moment de son insertion dans le dom
   $( '#zone-appli' ).on( 'click' , '.selectBox' , function() {
     $( '.checkboxes[data-id="' + $(this).data( 'id' ) + '"]' ).toggleClass( 'hidden' );
   });
+}
 // Style et affichage des input type="range"
 function inputRangeDisplayNumber() {
-  $( '#zone-supp' ).on( 'input' , '.range input[type="range"]' , function () {
+  $( '#zone-appli' ).on( 'input' , 'input[type="range"]' , function () {
-    $( this ).next( 'input[type="number"]' ).val ( $( this ).val() );
-  });
-  $( '#zone-supp' ).on( 'input' , '.range input[type="number"]' , function () {
-    $( this ).prev( 'input[type="range"]' ).val ( $( this ).val() );
+    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
   });
+}
 /***********************************************************
  *  Fonctions pour la création des champs supplémentaires  *
  ***********************************************************/
 // Logique globale pour l'ajout de nouveaux champs
 function onClickAddNewFields( fieldIndex ) {
   // Bouton ajouter un champ
   $( '#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
     onClickRemoveField();
     fieldIndex++;
   });
+}
 // Création/affichage du formulaire d'un nouveau champ
 function displayNewField( fieldIndex ) {
   // Html du formulaire du nouveaux champs inséré dans le dom
   $( '#new-fields' ).append(
     '<fieldset data-id="' + fieldIndex + '" class="new-field">'+
       '<h3>Nouveau champ :<br><strong class="field-title" data-id="' + fieldIndex + '"></strong></h3>'+
       // Nom du champ
+      '<div class="row">'+
+        '<div class="col-sm-12  mt-3">'+
-      '<label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>'+
+          '<label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>'+
-      '<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name" placeholder="Titre de votre champ" title="Le titre du champ" required>'+
+          '<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name form-control" placeholder="Titre de votre champ" title="Le titre du champ" required>'+
+        '</div>'+
-      // Clé du champ
+        // Clé du champ
+        '<div class="col-sm-12  mt-3">'+
-      '<label for="field-key" title="Nom du champ dans la base de données">'+
+          '<label for="field-key" title="Nom du champ dans la base de données">'+
-        'Clé du champ *'+
+            'Clé du champ *'+
-      '</label>'+
+          '</label>'+
-      '<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key" placeholder="Clé du champ" pattern="^(?:[a-z]+(?:(?:[A-Z]+[a-z]+)+)?|[a-z]+(?:(?:-[a-z]+)+)?)$" title="Clé Unique en Camelcase ou minuscule séparés par tirets, pas d\'accents pas de caractères spéciaux." required>'+
+          '<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key form-control" placeholder="Clé du champ" pattern="^(?:[a-z]+(?:(?:[A-Z]+[a-z]+)+)?|[a-z]+(?:(?:-[a-z]+)+)?)$" title="Clé Unique en Camelcase ou minuscule séparés par tirets, pas d\'accents pas de caractères spéciaux." required>'+
+        '</div>'+
-      '<p class="message">' +
+        '<p class="message ml-2 mr-2">' +
-        '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
+          '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
-        'Une clé doit être unique<br>' +
+          'Une clé doit être unique<br>' +
-        'En "camelCase" (ecriture chameau)<br>'+
+          'En "camelCase" (ecriture chameau)<br>'+
-        'Ou en minuscule avec tirets ("-") si nécessaire<br>'+
+          'Ou en minuscule avec tirets ("-") si nécessaire<br>'+
-        'Pas d\'espaces, aucuns caractères spéciaux (accents, cédilles, etc.).' +
+          'Pas d\'espaces, aucuns caractères spéciaux (accents, cédilles, etc.).' +
-      '</p>' +
+        '</p>' +
-      // Type de champ
+        // Type de champ
-      '<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
+        '<div class="col-sm-12 mt-3 add-field-select" data-id="' + fieldIndex + '">'+
-      '<div class="select-wrapper add-field-select" data-id="' + fieldIndex + '">'+
+          '<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
-        '<select name="field-element" data-id="' + fieldIndex + '" class="field-element">'+
+          '<select name="field-element" data-id="' + fieldIndex + '" class="field-element  form-control">'+
-          '<option value="text">Champ texte</option>'+
+            '<option value="text">Champ texte</option>'+
-          '<option value="email">Champ email</option>'+
+            '<option value="email">Champ email</option>'+
-          '<option value="textarea">Champ rédaction</option>'+
+            '<option value="textarea">Champ rédaction</option>'+
-          '<option value="select">Menu déroulant</option>'+
+            '<option value="select">Menu déroulant</option>'+
-          '<option value="checkbox">Cases à cocher</option>'+
+            '<option value="checkbox">Cases à cocher</option>'+
-          '<option value="list-checkbox">Liste de cases à cocher</option>'+
+            '<option value="list-checkbox">Liste de cases à cocher</option>'+
-          '<option value="radio">Boutons radio</option>'+
+            '<option value="radio">Boutons radio</option>'+
-          '<option value="date">Calendrier</option>'+
+            '<option value="date">Calendrier</option>'+
-          '<option value="range">Curseur (entre 2 bornes)</option>'+
+            '<option value="range">Curseur (entre 2 bornes)</option>'+
-          '<option value="number">Nombre</option>'+
+            '<option value="number">Nombre</option>'+
-        '</select>'+
+          '</select>'+
-      '</div>'+
+        '</div>'+
-      // Checkbox "champ requis"
+        // Checkbox "champ requis"
+        '<div class="col-sm-12 radio mt-3">'+
-      '<label for="field-is_mandatory" title="Ce champ est obligatoire">Champ requis ?</label>'+
+          '<label class="radio-label" for="field-is_mandatory" title="Ce champ est obligatoire">'+
-      '<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory">'+
+            '<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory form-control">'+
+            'Champ requis ?'+
+          '</label>'+
+        '</div>'+
-      // Unité des valeurs
+        // Unité des valeurs
+        '<div class="col-sm-12  mt-3">'+
-      '<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+
+          '<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+
-      '<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit" placeholder="symbole de vos unités">'+
+          '<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit form-control" placeholder="symbole de vos unités">'+
+        '</div>'+
-      // Tooltip
+        // Tooltip
+        '<div class="col-sm-12  mt-3">'+
-      '<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+
+          '<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+
-      '<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description" placeholder="Quelques mots">'+
+          '<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description form-control" placeholder="Quelques mots">'+
+        '</div>'+
-      // Import d'une image d'aide à afficher en popup
+        // Import d'une image d'aide à afficher en popup
-      '<div class="input-file-container">'+
+        '<div class="input-file-row row">'+
+          '<div class="input-file-container col-sm-10">'+
-        '<input type="file" class="input-file field-help" name="field-help' + fieldIndex + '" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="image/*">'+
+            '<input type="file" class="input-file field-help" name="field-help' + fieldIndex + '" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="image/*">'+
-        '<label for="field-help' + fieldIndex + '" class="label-file"><i class="fas fa-download"></i> Popup aide image (.jpg)</label>'+
+            '<label for="field-help' + fieldIndex + '" class="label-file"><i class="fas fa-download"></i> Popup aide image (.jpg)</label>'+
+          '</div>'+
+          '<div class="btn btn-danger btn-sm remove-file" name="remove-file" data-id="' + fieldIndex + '" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>'+
+          '<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+
+        '</div>'+
+        // Boutons supprimer
+        '<div class="col-sm-12  mt-3">'+
+          '<label for="remove-field">Supprimer</label>'+
+          '<div class="remove-field button" name="remove-field" data-id="' + fieldIndex + '" title="Supprimer un champ"><i class="fa fa-skull" aria-hidden="true"></i></div>'+
+        '</div>'+
       '</div>'+
-      '<div class="remove-file button" name="remove-file" data-id="' + fieldIndex + '" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>'+
-      '<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+
-      // Boutons supprimer
-      '<label for="remove-field">Supprimer</label>'+
-      '<div class="remove-field button" name="remove-field" data-id="' + fieldIndex + '" title="Supprimer un champ"><i class="fa fa-skull" aria-hidden="true"></i></div>'+
     '</fieldset>'
   );
   // Animation de l'affichage
   $( 'fieldset.new-field[data-id="' + fieldIndex + '"]').hide().show( 200 );
+}
 // Affichage du nom du champ dès qu'il est renseigné
 function onChangeDisplayFieldLabel( fieldIndex ) {
   $('.field-name[data-id="' + fieldIndex + '"]').change( function() {
     $( '.field-title[data-id="' + fieldIndex + '"]' ).text( $( this ).val() );
   });
+}
 // Supprimer un nouveau champ
 function onClickRemoveField () {
   $( '.remove-field' ).click( function() {
     $( this ).closest('fieldset').hide( 200 , function () {
       $( this ).remove();
     });
   });
+}
 /**** Recueil des informations et détails qui dépendent du type de champ choisi ****/
 // Logique de recueil d'informations en fonction du type de champ choisi
 function onChangeFieldTypeCollectDetails( fieldIndex ) {
   // On insère les champs par défaut de recueil d'informations
   displayFieldDetailsCollect(
     fieldIndex,
     // Placeholder (champ type text par défaut)
+    '<div class="col-sm-12  mt-3">'+
-    '<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
+      '<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
-    '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'
+      '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+
+    '</div>'
   );
   // Sinon :
   $( '.field-element[data-id="' + fieldIndex + '"]' ).change( function() {
     // On intialise l'index pour les listes la variable qui contiendra un id pour chaque option
     var valueIndex = 0;
     // Si on hésite on qu'on se trompe dans la liste :
     // les champs de détails de l'option précédente doivent être supprimés
     $( '.field-details[data-id="' + fieldIndex + '"]' ).hide( 200 , function () {
       $( this ).remove();
     });
     // Html de recueil de données en fonction de l'élément choisi
     switch( $( this ).val() ) {
-      case 'number':
       case 'range':
+      case 'number':
         displayFieldDetailsCollect(
           fieldIndex,
+          '<p class="message">'+
-          '<p class="message"><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> Ne pas oublier de changer, si nécessaire, les valeurs step, min et max</p>' +
+            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
+            'Ne pas oublier de prévisualiser !!<br>'+
+            'Vérifier le bon fonctionnement et changer, si nécessaire, les valeurs de défaut, incrémentation (step), min et max.<br>'+
+            'Si le navigateur considère que certaines valeurs sont incohérentes il pourrait les modifier automatiquement'+
+          '</p>' +
           // Placeholder
+          '<div class="col-sm-12  mt-3">'+
-          '<label for="aide-saisie" title="Deux ou 3 mots ou chiffres pour comprendre ce que doit contenir le champ (ex: min 20, 10 par 10, etc.)">Texte d\'aide à la saisie</label>'+
+            '<label for="aide-saisie" title="Deux ou 3 mots ou chiffres pour comprendre ce que doit contenir le champ (ex: min 20, 10 par 10, etc.)">Texte d\'aide à la saisie</label>'+
-          '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'+
+            '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir le champ">'+
+          '</div>'+
           // Valeur par défaut
+          '<div class="col-sm-12  mt-3">'+
-          '<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+
+            '<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+
-          '<input type="number" name="default" data-id="' + fieldIndex + '" class="default" step="0.01" lang="en">'+
+            '<input type="number" name="default" data-id="' + fieldIndex + '" class="default form-control" step="0.01" lang="en">'+
+          '</div>'+
           // Incrémentation ( attribut step="" )
+          '<div class="col-sm-12  mt-3">'+
-          '<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step) :<br>defaut = +1</label>'+
+            '<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step)</label>'+
-          '<input type="number" name="step" data-id="' + fieldIndex + '" class="step" step="0.01" value="1" lang="en">'+
+            '<input type="number" name="step" data-id="' + fieldIndex + '" class="step form-control" step="0.01" value="1" lang="en">'+
+          '</div>'+
           // Min
+          '<div class="col-sm-12  mt-3">'+
-          '<label for="min" title="valeur min">Valeur minimale</label>'+
+            '<label for="min" title="valeur min">Valeur minimale</label>'+
-          '<input type="number" name="min" data-id="' + fieldIndex + '" class="min" step="0.01" value="0" lang="en">'+
+            '<input type="number" name="min" data-id="' + fieldIndex + '" class="min form-control" step="0.01" value="0" lang="en">'+
+          '</div>'+
           // Max
+          '<div class="col-sm-12  mt-3">'+
-          '<label for="max" title="valeur max">Valeur maximale</label>'+
+            '<label for="max" title="valeur max">Valeur maximale</label>'+
-          '<input type="number" name="max" data-id="' + fieldIndex + '" class="max" step="0.01" value="1" lang="en">'
+            '<input type="number" name="max" data-id="' + fieldIndex + '" class="max form-control" step="0.01" value="1" lang="en">'+
+          '</div>'
         );
         break;
       case 'date':
         displayFieldDetailsCollect(
           fieldIndex,
           // Date min
+          '<div class="col-sm-12 mt-3">'+
-          '<label for="min" title="date min">Date minimale</label>'+
+            '<label for="min" title="date min">Date minimale</label>'+
-          '<input type="date" name="min" data-id="' + fieldIndex + '" class="min" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'+
+            '<input type="date" name="min" data-id="' + fieldIndex + '" class="min form-control" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'+
+          '</div>'+
           // Date max
+          '<div class="col-sm-12 mt-3">'+
-          '<label for="max" title="date max">Date maximale</label>'+
+            '<label for="max" title="date max">Date maximale</label>'+
-          '<input type="date" name="max" data-id="' + fieldIndex + '" class="max"  pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'
+            '<input type="date" name="max" data-id="' + fieldIndex + '" class="max form-control"  pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'+
+          '</div>'
         );
         break;
       case 'select':
       case 'checkbox':
       case 'list-checkbox':
       case 'radio':
         displayFieldDetailsCollect(
           fieldIndex,
           '<p class="message element-message">' +
             '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> ' +
             'Entrez au moins une valeur de ' + $( this ).children( 'option:selected' ).text() +
           '</p>'+
           // Première option
-          '<div class="new-value" data-list-value-id="' + valueIndex +'">'+
+          '<div class="new-value center-block row" data-list-value-id="' + valueIndex +'">'+
             // Recueil d'une valeur de la liste
+            '<div class="col-sm-12 mt-3">'+
-            '<label for="list-value">Valeur *:</label>'+
+              '<label for="list-value">Valeur *:</label>'+
-            '<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
+              '<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value form-control" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
+            '</div>' +
             // Checkbox valeur par défaut
+            '<div class="col-sm-12 radio mt-3">'+
-            '<label for="is-defaut-value" title="Ceci est la valeur par défaut">Valeur par défaut</label>'+
+              '<label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">'+
-            '<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
+                '<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
+                'Valeur par défaut'+
+              '</label>'+
+            '</div>' +
           '</div>' +
           // Bouton ajout d'une valeur à la liste
+          '<div class="col-sm-12 mt-3 add-value-container" data-id="' + fieldIndex + '">'+
-          '<label for="add-value" class="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+
+            '<label for="add-value" class="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+
-          '<div class="button add-value-button" name="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste"><i class="fa fa-puzzle-piece" aria-hidden="true"></i></div>'+
+            '<div class="button add-value-button" name="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste"><i class="fa fa-puzzle-piece" aria-hidden="true"></i></div>'+
+          '</div>' +
           // checkbox ajouter une valeur "Autre:"
+          '<div class="col-sm-12 radio mt-3">'+
-          '<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+
+            '<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin" class="radio-label">'+
-          '<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'
+              '<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'+
+              'Valeur "Autre"'+
+            '</label>'+
+          '</div>'
         );
         break;
       case 'email':
       case 'text':
       case 'textarea':
       default:
         displayFieldDetailsCollect(
           fieldIndex,
         // Placeholder
+        '<div class="col-sm-12 mt-3">'+
-        '<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
+          '<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
-        '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'
+          '<input type="text" name="aide-saisie form-control" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'+
+        '</div>'
       );
         break;
+    }
     // Ajout des valeurs possibles
     // lorsque le champ est une liste ou case à cocher
     onClickAddNewValueToList( fieldIndex , valueIndex );
   });
+}
 // Insertion dans le dom des champs de recueil d'informations
 function displayFieldDetailsCollect( fieldIndex , fieldDetails ) {
   $( '.add-field-select[data-id="' + fieldIndex + '"]' ).after(
-    '<div class="field-details" data-id="' + fieldIndex + '">' +
+    '<div class="field-details col-sm-11 mt-3 row" data-id="' + fieldIndex + '">' +
       fieldDetails +
     '</div>'
   ).hide().show( 200);
+}
 /**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
 // Ajout des options des listes (deroulantes, cases à cocher etc.)
 function onClickAddNewValueToList( fieldIndex , valueIndex ) {
   $( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() {
     valueIndex++;
-    $( '.add-value[data-id="' + fieldIndex + '"]' ).before(
+    $( '.add-value-container[data-id="' + fieldIndex + '"]' ).before(
-      '<div class="new-value" data-list-value-id="' + valueIndex +'">'+
+      '<div class="new-value center-block row" data-list-value-id="' + valueIndex +'">'+
         // Recueil d'une valeur de la liste
+        '<div class="col-sm-12 mt-3">'+
-        '<label for="list-value">Valeur  *:</label>'+
+          '<label for="list-value">Valeur *:</label>'+
-        '<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
+          '<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value form-control" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+
+        '</div>' +
         // Checkbox valeur par défaut+bouton supprimer
-        '<div class="row">'+
-          '<div class="col-md-5">'+
+        '<div class="col-sm-12 mt-3 row">'+
-            // Valeur par défaut
+          // Bouton supprimer une option
-            '<label for="is-defaut-value" title="Ceci est la valeur par défaut">Valeur par défaut</label>'+
-            '<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
-          '</div>'+
-          '<div class="col-md-5">'+
+          '<div class="col-sm-5">'+
-            // Bouton supprimer une option
-            '<label for="remove-value">supprimer valeur</label>'+
             '<div class="remove-value button" name="remove-value" data-id="' + fieldIndex + '" data-list-value-id="' + valueIndex + '" title="Supprimer une valeur"><i class="fa fa-trash" aria-hidden="true"></i></div>'+
           '</div>'+
+          // Valeur par défaut
+          '<div class="col-sm-7 radio">'+
+            '<label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">'+
+              '<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+
+              'Valeur défaut'+
+            '</label>'+
+          '</div>'+
         '</div>'+
       '</div>'
     ).hide().show( 200);
     // Une seule valeur par défaut pour select et radio
     onClickDefaultValueRemoveOthers( fieldIndex );
     // Supprimer une valeur
     onClickRemoveListValue( fieldIndex );
   });
+}
 // Activer la checkbox de valeur par default uniquement si une valeur est entrée
 function onInputListValueLabelEnableDefaultCheckbox() {
   $( '#new-fields' ).on( 'input' , '.list-value' , function() {
-    var thisValue = $( this ).parent( '.new-value' );
+    var $thisDefautValue = $( '.is-defaut-value[data-id="' + $( this ).data( 'id' ) + '"][data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' );
     if( '' !== $( this ).val() ) {
-      $( '.is-defaut-value', thisValue ).removeAttr( 'disabled' );
+      $thisDefautValue.removeAttr( 'disabled' );
     } else {
-      $( '.is-defaut-value', thisValue ).attr( 'disabled', true ).attr( 'checked' , false );
+      $thisDefautValue.attr( 'disabled', true ).attr( 'checked' , false );
+    }
   });
+}
 // Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée
 function onClickDefaultValueRemoveOthers( fieldIndex ) {
   var selectedFieldElement = $( '.field-element[data-id="' + fieldIndex + '"]' ).val();
   if( selectedFieldElement === 'select' || selectedFieldElement === 'radio' ) {
     $( '.is-defaut-value[data-id="' + fieldIndex + '"]' ).click( function() {
      if( $( this ).is( ':checked' ) ) {
         // Décocher tous les autres
         $( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).attr( 'checked' , false );
+      }
     });
+  }
+}
 // Bouton supprimer une valeur
 function onClickRemoveListValue( fieldIndex ) {
   $( '.remove-value.button[data-id="' + fieldIndex + '"]' ).click( function() {
     $( '.new-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' ).hide( 200 , function () {
       $( this ).remove();
     });
   });
+}
 /*********************************************
  *  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 ) {
     // Marqueur de valeur dupliquée
     var notUnique = false;
     $( '.field-key' ).change( function () {
       let count = $( '.field-key' ).length;
       for(var index = 0 ; index < count ; index++) {
         let thisFieldKey = $( '.field-key[data-id="' + index + '"]' );
-        // Le champ avec cet index paourrait avoir été supprimé
+        // Le champ avec cet index pourrait avoir été supprimé
         if( 0 < thisFieldKey.length ) {
           for( var otherIndex = 0 ; otherIndex < count ; otherIndex++ ) {
             let otherFieldKey = $( '.field-key[data-id="' + otherIndex + '"]' );
             // Le champ avec cet index pourrait avoir été supprimé
             // On vérifie qu'on ne compare pas un champ avec lui-même
             // Que les champs ne sont pas vides
             // Les champs dupliqués déclanchent le marqueur et les alertes
             if(
 < otherFieldKey.length &&
               index !== otherIndex &&
               '' !== otherFieldKey.val() &&
               '' !== thisFieldKey.val() &&
               thisFieldKey.val() === otherFieldKey.val()
             ) {
               // Le marqueur de valeur dupliquée passe à true
               notUnique = true;
               if( 0 === $( '.invalid-field-key[data-id="' + index + '"]' ).length ) {
                 // Le champ est signalé en rouge
                 // Un message d'alerte apparait sous le champ
                 thisFieldKey.addClass( 'invalid-key' );
                 thisFieldKey.after(
                   '<p class="message invalid-field-key" data-id="' + index + '">' +
                     '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
                     ' Vérifiez qu\'aucune clé n\'ait été utilisée plus d\'une fois'  +
                   '</p>'
                 );
+              }
+            }
+          }
+        }
+      }
       if( notUnique ) {
         // Un message d'alerte apparait au dessus des boutons prévisualiser/valider
         if( 0 === $( '.invalid-field-key-bottom' ).length ) {
           $( '#new-fields' ).after(
             '<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-key' ).css( 'pointer-events', 'none' );
       } else {// Si on est ok on retire toutes les alertes
         // signalements rouges
         $( '.field-key' ).each( function() {
           $( this ).removeClass( 'invalid-key' );
         });
         $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid-key' );
         // messages d'alerte
         $( '.invalid-field-key' ).each( function() {
           $( this ).hide( 200 , function () {
             $( this ).remove();
           });
         });
         $( '.invalid-field-key-bottom' ).hide( 200 , function () {
           $( this ).remove();
         });
         //réactivation des boutons prévisualiser/valider
         $( '#preview-field' )[0].style.removeProperty( 'pointer-events' );
         $( '#validate-new-fields' )[0].style.removeProperty( 'pointer-events' )
+      }
       // Réinitialisation
       notUnique = false;
     });
+  }
+}
 // Activation/desactivation des champs valider/previsualiser
 function onClickButtonsTagMissingValues() {
   $( '#preview-field , #validate-new-fields' ).on( 'click' , function() {
     var $button = $( this );
     //S'il n'y a pas (plus) de bloc nouveau champ
     if( 0 === $( 'fieldset' ).length ) {
       return;
+    }
     // Classe "invalid"
     missingValuesClass();
     if( !$( this ).hasClass( 'invalid' ) ) {
       if( $( this ).is( '#validate-new-fields') ) {
         // Lancement de l'enregistrement des valeurs à transmettre
         onClickStoreNewFields();
       } else if( $( this ).is( '#preview-field') ) {
         // Lancement de la prévisualisation
         newFieldsPreview();
+      }
+    }
   });
   // Si un champ manquant est renseigné
   // ou on choisit nouvel élément liste (au moins une option)
   // Cette action doit être prise en compte dans la validation
   $( '#new-fields' ).on( 'change' , '.invalid[type="text"] , .field-element' , function() {
     // S'il on a pas encore cliqué sur prévisualiser/valider
     // changer l'élément ne doit pas déclancher le signalement en rouge
     if( $( this ).is( '.field-element' ) && !$( '#preview-field , #validate-new-fields' ).hasClass( 'invalid' ) ) {
       return;
     } else {
       // Classe "invalid"
       missingValuesClass();
+    }
   });
+}
 // Classe "invalid"
 function missingValuesClass() {
   // Si au moins un champ "required" n'est pas rempli
   $( '#new-fields input[required]' ).each( function() {
     if( 0 === $( this ).val().length ) {
       // Le champ est signalé en rouge
       $( this ).addClass( 'invalid' );
       // Un message d'alerte apparait après le champ
       if( 0 === $( this ).next( '.validation-warning' ).length ) {
         $( this ).after(
           '<p class="validation-warning message">' +
             '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
              '&nbsp;Ce champ est requis' +
           '</p>'
         );
+      }
     } else {
       // Le champ est signalé en rouge
       $( this ).removeClass( 'invalid' );
       // Le message d'alerte du champ est supprimé
       if( 0 < $( this ).next( '.validation-warning' ).length ) {
         $( this ).next( '.validation-warning' ).hide( 200 , function () {
           $( this ).remove();
         });
+      }
+    }
   });
   // Si on a des champs à compléter
   if( 0 < $( '.invalid[type="text"]' ).length ) {
     // Les boutons sont signalés en rouge
     $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' );
     // Un message d'alerte apparait avant les boutons
     if( 0 === $( '#new-fields' ).next( '.validation-warning' ).length ) {
       $( '#new-fields' ).after(
         '<p class="validation-warning message">' +
           '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
            '&nbsp;Des informations sont manquantes pour certains champs,' +
            ' vérifiez ceux signalés en rouge' +
         '</p>'
       );
+    }
   } else {
     // Les signalements et messages sont supprimés
     $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
     $( '#new-fields' ).next( '.validation-warning' ).hide( 200 , function () {
         $( this ).remove();
     });
+  }
+}
 /**** Envoi des nouveaux champs ****/
 // Enregistrement des valeurs à transmettre
 function onClickStoreNewFields() {
   // Lorsqu'on valide
   var resultArrayIndex = 0;
   var count = $( 'fieldset' ).last().data( 'id' );
   var helpFileExists = false;
   // Savoir si au moins un fichier "aide" est enregistré
   $( '.field-help' ).each( function () {
     if( '' !== $( this ).val() ){
       helpFileExists = true;
+    }
   })
   // dans ce cas intégrer dans le formulaire à soumettre un bloc
   // qui contiendra une copie de chacun de ces input[type="file"]
   if( helpFileExists ){
     $( '#submit-button' ).before( '<div id="help-doc-submit" style="position:fixed;visibility:hidden;"></div>' );
+  }
   // On déroule les blocs de champs supplémentaires
   for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) {
     var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
     // Certains indices peuvent correspondre à un champ supprimé
     if( 0 < $( thisFieldset ).length ) {
       // initialisation du tableau de résultats
       datasToSubmit[ resultArrayIndex ]             = { fieldValues:{} };
       // Ajout de la clé au tableau de resultats
       datasToSubmit[ resultArrayIndex ].key         = $( '.field-key' , thisFieldset ).val();
       // 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   = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
       // Ajout de l'unité au tableau de resultats
       datasToSubmit[ resultArrayIndex ].unit        = $( '.field-unit' , thisFieldset ).val() || null;
       // Ajout du tooltip au tableau de resultats
       datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null;
       // Collecte les des données dépendantes de l'élément choisi
       // sous forme d'un tableau de resultats
       onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset );
       if( $.isEmptyObject( datasToSubmit[ resultArrayIndex ].fieldValues ) ){
         delete datasToSubmit[ resultArrayIndex ].fieldValues;
+      }
       // Copie d'un champ de fichier d'aide dans le bloc d'envoi
       if( 0 < $( '.field-help' , thisFieldset ).get(0).files.length ) {
-        console.log( $( '.field-help' , thisFieldset ).get(0).files[0].type );
         // Présence d'un document d'aide
         datasToSubmit[ resultArrayIndex ].help = $( '.field-help' , thisFieldset ).get(0).files[0].type;
         $( '.field-help' , thisFieldset ).clone()
           .attr( 'name' , 'help-' + datasToSubmit[ resultArrayIndex ].key )// l'attribut name prend la valeur de la clé
           .appendTo( '#help-doc-submit' );
       } else {
         datasToSubmit[ resultArrayIndex ].help = null;
+      }
       resultArrayIndex++;
+    }
+  }
   var resultsArrayJson = JSON.stringify( datasToSubmit , replacer );
   // JSON.strigify : Gestion des apostrophes dans les valeurs :
   function replacer( key , value ) {
     if ( 'fieldValues' === key && 'object' === typeof value ) {
       for ( var i in value ) {
         if ( typeof value[i] === 'string' ) {
           // value[i] = value[i].replace( /\u0027/g, "&apos;&apos;" );
           // La solution ci-dessus convient pour stockage dans la base mais pas pour la lecture dans saisie
           // du coup astuce moisie:
           value[i] = value[i].replace( /\u0027/g, "@apos@" ).replace( /\u0022/g, '@quot@' )
+        }
+      }
     } else if ( typeof value === 'string' ) {
       // value = value.replace( /\u0027/g, "&apos;&apos;" );
       // La solution ci-dessus convient pour stockage dans la base mais pas pour la lecture dans saisie
       // du coup astuce moisie:
       value = value.replace( /\u0027/g, "@apos@" ).replace( /\u0022/g, '@quot@' )
+    }
     return value;
+  }
   console.log( resultsArrayJson );
   // Désactivation de tous les champs et boutons (nouveaux champs)
   $( '#new-fields, #new-fields .button , #add-fields , #preview-field' ).addClass( 'disabled' );
   $( '#validate-new-fields' ).addClass( 'validated' );
   $( '.validate-new-fields' ).text( 'Champs validés' );
   // Mise à disposition des données pour le bouron submit
   $( '#submit-button' ).before(
     //la value est passée avec des apostrophes pour que les guillemets de la string json passent bien en string de l'attribut
     '<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>'
   );
+}
 // Renseigne le tableau de resultat
 // pour les données dépendant de l'élément choisi
 function onSelectCollectDataValuesToSubmit( datasToSubmitObject , thisFieldset ) {
     switch( datasToSubmitObject.element ) {
       case 'select':
       case 'checkbox':
       case 'list-checkbox':
       case 'radio':
         datasToSubmitObject.fieldValues.listValue = [];
         // Ajout des valeurs de liste
         onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset );
         // S'il y a une valeur 'autre' on l'indique à la fin de la liste
         if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) && -1 === datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) ) {
           datasToSubmitObject.fieldValues.listValue.push( 'other' );
+        }
         break;
       case 'number':
       case 'range':
         // Placeholder
         datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
         // Valeur par défaut
         datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null;
         // Incrémentation ( attribut step="" )
          datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null;
         // Min
         datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
         // Max
         datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
         break;
       case 'date':
         // Min
         datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
         // Max
         datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
         break;
       case 'email':
       case 'text':
       case 'textarea':
       default:
         // 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
 function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {
   $( '.list-value' , thisFieldset ).each( function() {
     var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
      if( $( this ).val() ){
       // Is-default-value non cochée
       if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' , thisFieldset ).is( ':checked' ) ) {
         datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
       // Is-default-value cochée pour select/radio
       } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {
         // Une seule valeur par defaut, devient la première valeur du tableau + '#'
         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() + '#' );
+      }
+    }
   });
+}
 /************************************************
  *  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 referentiel
+  $( '#label-taxon span' ).text( ' (' + $( '#referentiel' ).val() + ')' );
+  $( '#referentiel' ).change( function() {
+    $( '#label-taxon span' ).text( ' (' + $( this ).val() + ')' );
+  });
   // Affichage du logo s'il existe déjà
   if( 0 !== $( '#logo' ).val().length || $( '#logo' )[0].defaultValue ) {
     $( '#preview-logo' ).append(
       '<img src="' +
         $( '#group-settings-form .logo img' ).prop( 'src' ) +
         '" width="75%"' +
       '>'
     );
+  }
   // Affichage du logo chargé
   $( '#logo.input-file' ).change( function( event ) {
     // Si le 'change' n'était pas une suppression
     if( $.isEmptyObject( event.target.files[0] ) ) {
       $( '#preview-logo img' ).remove();
     // Si on a chargé un logo ou changé le fichier
     } else {
       $( '#preview-logo' ).append(
         '<img src="' +
           URL.createObjectURL( event.target.files[0] ) +
           '" width="75%"' +
         '>'
       );
+    }
   });
   // Affichage de l'image de fond
   $('#image_fond.input-file').change( function ( event ) {
     if( !$.isEmptyObject( event.target.files[0] ) ) {
-      $( '.widget-renderer' ).css('background' ,'url(' + URL.createObjectURL( event.target.files[0] ) + ') no-repeat center');
+      $( '.widget-renderer' ).css('background' ,'url(' + URL.createObjectURL( event.target.files[0] ) + ') no-repeat fixed center center');
     } 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  *
  *****************************************************/
 // Construction des éléments à visualiser
 function onClickPreviewField( thisFieldset , index ) {
   // 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() || '',
       // Champs "listes"
       fieldDefaultNum  = $( '.default'               , thisFieldset ).val() || '',// value range/number par 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
   fieldLabel = fieldLabel.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' );
   fieldTooltip = fieldTooltip.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' );
   fieldPlaceholder = fieldPlaceholder.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' );
   //valeurs initiales des chaînes de caractères
   //Éléments simples ou chaînes communes aux "listes"
   commonFieldsHtml = {
     dataIdAttr : ' data-id="' + index + '"',
     helpButton : '',//bouton aide
     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       : ''
     },
     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.)
   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
   };
   // 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();
+  }
   // Élément requis
   if( fieldIsMandatory ) {
     // Attribut required pour le listes
     commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
     // Nom du champ (éléments listes)
-    listFieldsHtml.containerContent += ' *';
+    listFieldsHtml.containerContent = '* ' + listFieldsHtml.containerContent;
     // Nom du champ (éléments simples)
-    commonFieldsHtml.fieldLabel.labelContent += ' *';
+    commonFieldsHtml.fieldLabel.labelContent = '* ' + commonFieldsHtml.fieldLabel.labelContent;
+  }
   // Infobulle
   if( '' !== fieldTooltip ) {
     commonFieldsHtml.titleAttr = ' title="' +  fieldTooltip + '"';
+  }
   // Placeholder
   if( '' !== fieldPlaceholder ) {
     commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
+  }
   // Fichier d'aide
   if( '' !== fieldHelp ) {
     // Bouton 'aide'
-    commonFieldsHtml.helpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
+    commonFieldsHtml.helpButton = '<div class="help-button btn btn-outline-info btn-sm border-0"><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' :
       listFieldsHtml.containerClass = ' class="' + fieldElement +'"';
+      commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"';
       fieldHtml =
         // Conteneur
         '<div' +
           // Class="L'élément choisi"
           listFieldsHtml.containerClass +
           // DataId
           commonFieldsHtml.dataIdAttr +
           // Required
           commonFieldsHtml.fieldInput.mandatoryAttr +
           // Info bulle
           commonFieldsHtml.titleAttr +
         ' >'+
           // Nom du champ
           // Classe 'and-help'
-          '<div class="list-label' + commonFieldsHtml.helpClass + '">' +
+          '<div class="mt-3 list-label' + commonFieldsHtml.helpClass + '">' +
             // Label
             listFieldsHtml.containerContent +
-          '</div>' +
-          // Bouton 'help'
+            // Bouton 'help'
-          commonFieldsHtml.helpButton;
+            commonFieldsHtml.helpButton +
+          '</div>';
       // On déroule les différentes valeurs
       for( let i = 0; i < count; i++ ) {
         let fieldOption = fieldOptions[i];
         // 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 ) {
           listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+        }
         fieldHtml +=
           '<label' +
             // For
             listFieldsHtml.forAttr +
             // value-id
             listFieldsHtml.optionIdAttr +
-            // Class="nom du champ"
+            // Class du label
-            commonFieldsHtml.fieldInput.classAttr +
+            commonFieldsHtml.fieldLabel.classAttr +
           '>' +
             '<input' +
               // Type
               commonFieldsHtml.fieldInput.typeAttr +
               // Id
               listFieldsHtml.inputIdAttr +
               // DataId
               commonFieldsHtml.dataIdAttr +
               // value-id
               listFieldsHtml.optionIdAttr +
               // Name
               commonFieldsHtml.fieldInput.nameAttr +
               // Value
               ' value="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) + '"' +
               // Checked
               listFieldsHtml.defaultAttr +
               // Class="nom du champ"
               commonFieldsHtml.fieldInput.classAttr +
             '>' +
             // Label de l'option
             fieldOption.optionText.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) +
           '</label>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
         fieldHtml +=
           '<label for="other"' +
             commonFieldsHtml.dataIdAttr +
+            commonFieldsHtml.fieldLabel.classAttr +
           '>' +
             '<input' +
               commonFieldsHtml.fieldInput.typeAttr +
-              ' id="other"' +
+              ' id="other-' + fieldElement + '-' + index + '"' +
               commonFieldsHtml.fieldInput.nameAttr +
               ' value="other"' +
               commonFieldsHtml.fieldInput.classAttr +
               commonFieldsHtml.dataIdAttr +
             '>' +
           'Autre</label>';
+        }
       // Fin du conteneur
       fieldHtml += '</div>';
       break;
     case 'list-checkbox':
+      commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"';
       fieldHtml =
         // Classe 'and-help'
-        '<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' +
+        '<div class="multiselect  add-field-select' + commonFieldsHtml.helpClass + '"' +
           // DataId
           commonFieldsHtml.dataIdAttr +
         '>' +
           '<label>' +
             // Nom du champ
             listFieldsHtml.containerContent +
+            // Bouton 'help'
+            commonFieldsHtml.helpButton +
           '</label>' +
-          '<div class="selectBox"' +
+          '<div class="mt-3">'+
-            // DataId
-            commonFieldsHtml.dataIdAttr +
-          '>' +
-            '<select' +
+            '<div class="selectBox"' +
               // DataId
               commonFieldsHtml.dataIdAttr +
-              // Required
-              commonFieldsHtml.fieldInput.mandatoryAttr +
-              // Info bulle
-              commonFieldsHtml.titleAttr +
             '>' +
+              '<select' +
+                // DataId
+                commonFieldsHtml.dataIdAttr +
+                // Required
+                commonFieldsHtml.fieldInput.mandatoryAttr +
+                // Info bulle
+                commonFieldsHtml.titleAttr +
+                // Class
+                ' class="form-control ' + fieldElement + '"' +
+              '>' +
-              // Apparait dans la barre de sélection
+                // Apparait dans la barre de sélection
-              '<option>Plusieurs choix possibles</option>' +
+                '<option>Plusieurs choix possibles</option>' +
-            '</select>' +
+              '</select>' +
-            '<div class="overSelect"></div>' +
+              '<div class="overSelect"></div>' +
-          '</div>' +
+            '</div>' +
-          '<div class="checkboxes hidden"' +
+            '<div class="checkboxes hidden"' +
-            // DataId
+              // DataId
-            commonFieldsHtml.dataIdAttr +
+              commonFieldsHtml.dataIdAttr +
-          '>';
+            '>';
       // On déroule les différentes valeurs
       for( let i = 0; i < count; i++ ) {
         let fieldOption = fieldOptions[i];
         // Type="checkbox"
         commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"';
         // Id
         listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ).toLowerCase() + '"';
         // For
         listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ).toLowerCase() + '"';
         // Default
         listFieldsHtml.defaultAttr = '';//réinitialisation
         if( fieldOption.isDefault ) {
           listFieldsHtml.defaultAttr = ' checked';//affectation
+        }
         // value-id
         if( '' !== fieldOption.optionIndex ) {
           listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+        }
         fieldHtml +=
           '<label' +
             // For
             listFieldsHtml.forAttr +
             // value-id
             listFieldsHtml.optionIdAttr +
+            // Class du label
+            commonFieldsHtml.fieldLabel.classAttr+
           '>' +
             '<input type="checkbox"' +
               // Id
               listFieldsHtml.inputIdAttr +
               // value-id
               listFieldsHtml.optionIdAttr +
               // Name
               commonFieldsHtml.fieldInput.nameAttr +
               // Value
               ' value="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) + '"' +
               // Checked
               listFieldsHtml.defaultAttr +
               // Class="nom du champ"
               commonFieldsHtml.fieldInput.classAttr +
               // DataId
               commonFieldsHtml.dataIdAttr +
             '>' +
             // Label de l'option
             fieldOption.optionText.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) +
           '</label>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
         fieldHtml +=
           '<label for="other"' +
             // DataId
             commonFieldsHtml.dataIdAttr +
           '>' +
             '<input type="checkbox"' +
-              ' id="other"' +
+              ' id="other-' + fieldElement + '-' + index + '"' +
               commonFieldsHtml.fieldInput.nameAttr +
               ' value="other"' +
               commonFieldsHtml.fieldInput.classAttr +
               // DataId
               commonFieldsHtml.dataIdAttr +
             '>' +
           'Autre</label>';
+      }
       // Fermeture des conteneurs .multiselect .checkboxes
       fieldHtml +=
-        '</div>'+
+            '</div>'+
-      '</div>' +
+          '</div>'+
-      // Bouton 'help'
+        '</div>';
-      commonFieldsHtml.helpButton;
       break;
     case 'select':
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
+      commonFieldsHtml.fieldInput.classAttr += ' form-control"';
       fieldHtml =
-        '<label' +
-          commonFieldsHtml.fieldLabel.forAttr +
-          // Info bulle
-          commonFieldsHtml.titleAttr +
-        '>' +
-          // Nom du champ
-          listFieldsHtml.containerContent +
-        '</label>' +
         // Conteneur/Wrapper
         // +Classe 'and-help'
-        '<div class="select-wrapper add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
+        '<div class="add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
           // DataID
           commonFieldsHtml.dataIdAttr +
         '>' +
+          '<label class="mt-3"' +
+            commonFieldsHtml.fieldLabel.forAttr +
+            // Info bulle
+            commonFieldsHtml.titleAttr +
+          '>' +
+            // Nom du champ
+            listFieldsHtml.containerContent +
+            // Bouton 'help'
+            commonFieldsHtml.helpButton +
+          '</label>' +
           '<select' +
             commonFieldsHtml.fieldInput.nameAttr +
             ' id="' + fieldKey + '"' +
             // Class
             commonFieldsHtml.fieldInput.classAttr +
             // Required
             commonFieldsHtml.fieldInput.mandatoryAttr +
             // DataId
             commonFieldsHtml.dataIdAttr +
           '>';
       // On déroule les différentes valeurs
       for( let i = 0; i < count; i++ ) {
         let fieldOption = fieldOptions[i];
         // Default
         listFieldsHtml.defaultAttr = '';//réinitialisation
         if( fieldOption.isDefault ) {//affectation
           listFieldsHtml.defaultAttr = ' selected="selected"';
+        }
         // value-id
         if( '' !== fieldOption.optionIndex ) {
           listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
+        }
         fieldHtml +=
           '<option' +
             // Value
             ' value="' + fieldOption.optionValue.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) + '"' +
             // Value-id
             listFieldsHtml.optionIdAttr +
             // Selected
             listFieldsHtml.defaultAttr +
           '>' +
             // Option
             fieldOption.optionText.replace( /(')/gm, '&apos;&apos;' ).replace( /(")/gm, '&quot;&quot;' ) +
           '</option>';
+      }
       // Si valeur "autre" est cochée
       if( fieldOtherValue ) {
         fieldHtml +=
           '<option class="other" value="other"' + commonFieldsHtml.dataIdAttr + '>' +
             'Autre' +
           '</option>';
+      }
       // Fermeture des conteneurs
       fieldHtml +=
           '</select>' +
         // Fin du conteneur/wrapper
-        '</div>' +
+        '</div>';
-        // Bouton 'help'
-        commonFieldsHtml.helpButton;
       break;
     case 'textarea':
+    // Ouvrir l'attribut class (suppression de '"')
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
+      // Classe 'custom-range'
+      commonFieldsHtml.fieldInput.classAttr += ' form-control"';
       // Classe 'and-help'
-      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
+      commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"';
       // Autres attributs
       commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';
       fieldHtml =
         '<label' +
           // For
           commonFieldsHtml.fieldLabel.forAttr +
           // Class
           commonFieldsHtml.fieldLabel.classAttr +
           // Info-bulle
           commonFieldsHtml.titleAttr +
           // Autres attributs
           commonFieldsHtml.fieldLabel.otherAttr +
         '>' +
           // Nom du champ
           commonFieldsHtml.fieldLabel.labelContent +
+          // Bouton 'help'
+          commonFieldsHtml.helpButton +
         '</label>' +
-        // Bouton 'help'
-        commonFieldsHtml.helpButton +
         '<textarea' +
           // Name
           commonFieldsHtml.fieldInput.nameAttr +
           // DataId
           commonFieldsHtml.dataIdAttr +
           // Class
           commonFieldsHtml.fieldInput.classAttr +
           // Info-bulle
           commonFieldsHtml.titleAttr +
           // Info-bulle
           commonFieldsHtml.fieldInput.placeholderAttr +
           // Required
           commonFieldsHtml.fieldInput.mandatoryAttr +
           // Autres attributs
           commonFieldsHtml.fieldInput.otherAttr +
         '></textarea>';
         break;
     case 'range':
+      // Ouvrir l'attribut class (suppression de '"')
+      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
+      // Classe 'custom-range'
+      commonFieldsHtml.fieldInput.classAttr += ' custom-range form-control pl-3"';
       // Classe 'and-help'
-      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
+      commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"';
       // Step
       if( '' !== fieldStep ) {
         commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
+      }
       // Min
       if( '' !== fieldMin ) {
         commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
+      }
       //Max
       if( '' !== fieldMax ) {
         commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
+      }
       fieldHtml =
         '<div' +
           ' class="range"' +
           ' id="' + fieldKey + '"' +
         '>' +
           '<label' +
             // For
             commonFieldsHtml.fieldLabel.forAttr +
             // Class
             commonFieldsHtml.fieldLabel.classAttr +
             // Info-bulle
             commonFieldsHtml.titleAttr +
             // Autres attributs
             commonFieldsHtml.fieldLabel.otherAttr +
           '>' +
             // Nom du champ
             commonFieldsHtml.fieldLabel.labelContent +
+            // Bouton 'help'
+            commonFieldsHtml.helpButton +
           '</label>' +
+          '<div class="col-sm-12 row" style="max-width=100%">' +
-          // Bouton 'help'
+          // Visualiser min max et la valeur de range
-          commonFieldsHtml.helpButton +
+            '<p class="col-sm-2 range-values text-center font-weight-bold">'+
-          '<input' +
+              'Min ' + fieldMin +
-            // Type
+            '</p>'+
+            '<div class="range-live-value range-values text-center font-weight-bold col-sm-7">'+
-            commonFieldsHtml.fieldInput.typeAttr +
+              fieldDefaultNum +
-            // Name
+            '</div>'+
-            commonFieldsHtml.fieldInput.nameAttr +
+            '<p class="col-sm-2 range-values text-center font-weight-bold">'+
-            // DataId
-            commonFieldsHtml.dataIdAttr +
+              'Max ' + fieldMax +
-            // Class
+            '</p>' +
-            commonFieldsHtml.fieldInput.classAttr +
+            '<input' +
-            // Info-bulle
+              // Type
-            commonFieldsHtml.titleAttr +
+              commonFieldsHtml.fieldInput.typeAttr +
-            // Required
+              // Name
-            commonFieldsHtml.fieldInput.mandatoryAttr +
+              commonFieldsHtml.fieldInput.nameAttr +
-            // Default
+              // DataId
-            ' value="' + fieldDefaultNum + '"' +
+              commonFieldsHtml.dataIdAttr +
-            // Autres attributs
+              // Class
-            commonFieldsHtml.fieldInput.otherAttr +
+              commonFieldsHtml.fieldInput.classAttr +
-          '>' +
-          '<input' +
-            ' type="number"' +
+              // Info-bulle
-            ' name="' + fieldKey + 'Output"' +
+              commonFieldsHtml.titleAttr +
-            // Info-bulle
+              // Required
-            commonFieldsHtml.titleAttr +
+              commonFieldsHtml.fieldInput.mandatoryAttr +
-            // Placeholder
+              // Default
-            commonFieldsHtml.fieldInput.placeholderAttr +
-            ' value="' + fieldDefaultNum + '"' +
+              ' value="' + fieldDefaultNum + '"' +
-            // Autres attributs
+              // Autres attributs
-            commonFieldsHtml.fieldInput.otherAttr +
+              commonFieldsHtml.fieldInput.otherAttr +
-            // DataId
+            '>' +
-            commonFieldsHtml.dataIdAttr +
-          '>' +
+          '</div>'
         '</div>';
         break;
     case 'number':
       // Step
       if( '' !== fieldStep ) {
         commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
+      }
     case 'date':
       // Ouvrir l'attribut class (suppression de '"')
       commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
       // Classe 'and-help'
-      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
+      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"';
       // Min
       if( '' !== fieldMin ) {
         commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
+      }
       // Max
       if( '' !== fieldMax ) {
         commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
+      }
+      // Class du label
+      commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"';
       fieldHtml =
         '<div class="number">' +
           '<label' +
             // For
             commonFieldsHtml.fieldLabel.forAttr +
             // Class
             commonFieldsHtml.fieldLabel.classAttr +
             // Info-bulle
             commonFieldsHtml.titleAttr +
             // Autres attributs
             commonFieldsHtml.fieldLabel.otherAttr +
           '>' +
             // Nom du champ
             commonFieldsHtml.fieldLabel.labelContent +
+            // Bouton 'help'
+            commonFieldsHtml.helpButton +
           '</label>' +
           '<input' +
             // Type
             commonFieldsHtml.fieldInput.typeAttr +
             // Name
             commonFieldsHtml.fieldInput.nameAttr +
             // DataId
             commonFieldsHtml.dataIdAttr +
             // Class
             commonFieldsHtml.fieldInput.classAttr +
             // Info-bulle
             commonFieldsHtml.titleAttr +
             // Placeholder
             commonFieldsHtml.fieldInput.placeholderAttr +
             // Required
             commonFieldsHtml.fieldInput.mandatoryAttr +
             // Default
             ' value="' + fieldDefaultNum + '"' +
             // Autres attributs
             commonFieldsHtml.fieldInput.otherAttr +
           '>' +
-          // Bouton 'help'
-          commonFieldsHtml.helpButton +
         '</div>';
         break;
     case 'text' :
     case 'email':
     default:
       // Ouvrir l'attribut class (suppression de '"')
       commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
       // Classe 'and-help'
-      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
+      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"';
+      // Class du label
+      commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"';
       fieldHtml =
         '<label' +
           // For
           commonFieldsHtml.fieldLabel.forAttr +
           // Class
           commonFieldsHtml.fieldLabel.classAttr +
           // Info-bulle
           commonFieldsHtml.titleAttr +
           // Autres attributs
           commonFieldsHtml.fieldLabel.otherAttr +
         '>' +
           // Nom du champ
           commonFieldsHtml.fieldLabel.labelContent +
+          // Bouton 'help'
+          commonFieldsHtml.helpButton +
         '</label>' +
         '<input' +
           // Type
           commonFieldsHtml.fieldInput.typeAttr +
           // Name
           commonFieldsHtml.fieldInput.nameAttr +
           // DataId
           commonFieldsHtml.dataIdAttr +
           // Class
           commonFieldsHtml.fieldInput.classAttr +
           // Info-bulle
           commonFieldsHtml.titleAttr +
           // Placeholder
           commonFieldsHtml.fieldInput.placeholderAttr +
           // Required
           commonFieldsHtml.fieldInput.mandatoryAttr +
           // Autres attributs
           commonFieldsHtml.fieldInput.otherAttr +
-        '>' +
+        '>';
-        // Bouton 'help'
-        commonFieldsHtml.helpButton;
       break;
+  }
   return fieldHtml;
+}
 // 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({
       // Valeur transmise (value)
       optionValue : $( this ).find('.list-value').val().toLowerCase(),
       // Valeur Visible
       optionText  : $( this ).find('.list-value').val(),
       // Booléen "default"
       isDefault   : $( this ).find( '.is-defaut-value').is( ':checked' ),
       // Indice de l'option
       optionIndex : $( this ).data( 'list-value-id')
     });
   });
   return options;
+}
 // Faire apparaitre un champ text "Autre"
 function onOtherOption( thisFieldset , index ) {
   // Ce champ (dans la prévisualisation)
   var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'),
-      //L'élément choisi
+      // L'élément choisi
       element             = $('.field-element' , thisFieldset ).val(),
       // Où insérer le champ "Autre"
       $element            = $( '.' + element , thisPreviewFieldset ),
       // html du champ "Autre"
       collectOther        =
+      '<div class="col-sm-12 mt-1 collect-other-block">'+
-        '<label data-id="' + index + '" for="collect-other">Autre option :</label>' +
+        '<label data-id="' + index + '" for="collect-other" style="font-weight:300">Autre option :</label>' +
-        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >';
+        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other form-control" >'+
+      '</div>';
   // Pouvoir supprimer le champ "Autre"
   function optionRemove( thisPreviewFieldset ) {
-    $( 'label[for="collect-other"]' , thisPreviewFieldset ).remove();
-    $( 'input.collect-other' , thisPreviewFieldset ).remove();
+    $( '.collect-other-block' , thisPreviewFieldset ).remove();
+  }
   switch( element ) {
     case 'radio' :
       // Lorsqu'un nouveau bouton est coché
       $( 'input' , thisPreviewFieldset ).on( 'change' , function () {
         if( 'other' === $( this ).val() ) {
           // Insertion du champ "Autre" après les boutons
           $element.after( collectOther );
         } else {
           // Suppression du champ autre
           optionRemove( thisPreviewFieldset );
+        }
       });
       break;
     case 'select' :
       // Lorsque l'option "Autre" est selectionnée
       $( '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( thisPreviewFieldset );
+        }
       });
       break;
     case 'checkbox' :
     case 'list-checkbox' :
       // Lorsque "Autre" est coché
+      $( 'input#other-' + element + '-' + index, thisPreviewFieldset ).on( 'click' , function () {
+        // Insertion du champ "Autre" après les boutons
+        if( $( this ).is( ':checked' ) ) {
+          $( '.checkboxes', thisPreviewFieldset ).append( collectOther );
+        } else {
+          // Suppression du champ autre
+          optionRemove( thisPreviewFieldset );
+        }
+      });
+      break;
+    case 'checkbox' :
+      // Lorsque "Autre" est coché
-      $( 'input#other' , thisPreviewFieldset ).on( 'click' , function () {
+      $( 'input#other-' + element + '-' + index, 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( thisPreviewFieldset );
+        }
       });
       break;
     default :
       break;
+  }
+}
 // Prévisualisation des nouveaux champs
 function newFieldsPreview() {
   var count = $( 'fieldset' ).last().data( 'id' );
   // Si on a déjà prévisualisé on efface tout pour recommencer
   if( 0 < $( '.preview-fields' ).length ) {
     $( '.preview-fields' ).each( function () {
       $( this ).remove();
     });
+  }
   // Au premier ajout d'un champ dans la prévisualisation on ajoute un titre et un message
   if( true === firstClick ) {
     $( '#zone-supp' ).prepend(
       '<h2>Informations propres au projet</h2>' +
       '<div class="message">L\'objectif principal de cet aperçu est de vérifier les contenus et repérer d\'éventuelles erreurs</div>'
     );
+  }
   // Parcourir tous les blocs d'infos de champs supplémentaires
   for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) {
     var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
     // Certains indices peuvent correspondre à un champ supprimé
     if( 0 < $( thisFieldset ).length ) {
       // Prévisualisation d'un champ
       $( '#zone-supp .preview-container' ).append(
-        '<div class="preview-fields" data-id="' + index + '">'+
+        '<div class="preview-fields col-sm-12 row" 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' ).data( 'id' ),
         thisFieldset = $( '.new-field[data-id="' + index + '"]' ),
         file = $( '.field-help' , thisFieldset )[0].files[0],
         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 {
       $( '#print_content' ).append( '<p>Erreur : le fichier n\'est pas une image</p>' );
+    }
     // Sortie avec la touche escape
     $( '#help-modal' ).modal( { keyboard : true } );
     // Affichage
-    $( '#help-modal' ).modal( 'show' );
+    $( '#help-modal' ).modal({ show: true });
     // 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();
 // Variable permettant un seul affichage du titre
 // de la prévisualisation pour les nouveaux champs
 var firstClick = true;
+// Positionnement de la prévisualisation
+$( window ).ready( function() {
+});
+jQuery( document ).ready( function() {
+  // reset de tous les formulaires
+  $( 'form' ).each( function() {
+    $( this )[0].reset();
-jQuery( document ).ready( function() {
+  });
   // Identifiant de champ
   var fieldIndex = 0;
   // Ajout de nouveaux champs
   onClickAddNewFields( fieldIndex );
   // Activation/Desactivation des boutons valider et prévisualiser
   onClickButtonsTagMissingValues();
   // Prévisualisation des champs classiques
   DisplayClassicFields();
   // Affichage des images ou nom des documents importés
   inputFile();
   // Affichage des List-checkbox
   inputListCheckbox();
   // Activer la checkbox de valeur par default uniquement si une valeur est entrée
   onInputListValueLabelEnableDefaultCheckbox();
   // Affichage des Range
   inputRangeDisplayNumber();
   // Modale "aide"
   previewFieldHelpModal();
 });

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/manager/squelettes/js/manager.js – Rev 3235 → 3241