Subversion Repositories eFlore/Applications.cel

Rev

Rev 3376 | Rev 3452 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

"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|tab-separated-values)' ) ) ) {
        // on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv
        console.log(file.type);

        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 ou tsv'+
            '</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-appli' ).on( 'input' , 'input[type="range"]' , function () {
    $( 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>'+
          '<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name form-control" placeholder="Titre de votre champ" title="Le titre du champ" required>'+
        '</div>'+
        // Clé du champ
        '<div class="col-sm-12  mt-3">'+
          '<label for="field-key" title="Nom du champ dans la base de données">'+
            'Clé du champ *'+
          '</label>'+
          '<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key form-control" placeholder="Clé du champ" pattern="^(?:[a-z]+(?:(?:[A-Z]+[a-z]+)+)?|[a-z]+(?:(?:-[a-z]+)+)?)$" title="Clé Unique en Camelcase ou minuscule séparés par tirets, pas d\'accents pas de caractères spéciaux." required>'+
        '</div>'+
        '<p class="message ml-2 mr-2">' +
          '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
          'Une clé doit être unique<br>' +
          'En "camelCase" (ecriture chameau)<br>'+
          'Ou en minuscule avec tirets ("-") si nécessaire<br>'+
          'Pas d\'espaces, aucuns caractères spéciaux (accents, cédilles, etc.).' +
        '</p>' +
        // Type de champ
        '<div class="col-sm-12 mt-3 add-field-select" data-id="' + fieldIndex + '">'+
          '<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
          '<select name="field-element" data-id="' + fieldIndex + '" class="field-element form-control custom-select">'+
            '<option value="text">Champ texte</option>'+
            '<option value="email">Champ email</option>'+
            '<option value="textarea">Champ rédaction</option>'+
            '<option value="select">Menu déroulant</option>'+
            '<option value="checkbox">Cases à cocher</option>'+
            '<option value="list-checkbox">Liste de cases à cocher</option>'+
            '<option value="radio">Boutons radio</option>'+
            '<option value="date">Calendrier</option>'+
            '<option value="range">Curseur (entre 2 bornes)</option>'+
            '<option value="number">Nombre</option>'+
          '</select>'+
        '</div>'+
        // Checkbox "champ requis"
        '<div class="col-sm-12 radio mt-3">'+
          '<label class="radio-label" for="field-is_mandatory" title="Ce champ est obligatoire">'+
            '<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory form-control">'+
            'Champ requis ?'+
          '</label>'+
        '</div>'+
        // Unité des valeurs
        '<div class="col-sm-12  mt-3">'+
          '<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+
          '<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit form-control" placeholder="symbole de vos unités">'+
        '</div>'+
        // Tooltip
        '<div class="col-sm-12  mt-3">'+
          '<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+
          '<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description form-control" placeholder="Quelques mots">'+
        '</div>'+
        // Import d'une image d'aide à afficher en popup
        '<div class="input-file-row row">'+
          '<div 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/*">'+
            '<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>'+
    '</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>'+
      '<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 'range':
      case 'number':
        displayFieldDetailsCollect(
          fieldIndex,
          '<p class="message">'+
            '<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>'+
            '<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>'+
            '<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)</label>'+
            '<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>'+
            '<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>'+
            '<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>'+
            '<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>'+
            '<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() +
            '<br>Si aucun label à afficher n\'est indiqué, la valeur entrée sera utilisée (première lettre en majuscule).'+
          '</p>'+
          // Première option
          '<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>'+
              '<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>' +
            // Recueil du label à afficher
            '<div class="col-sm-12 mt-3">'+
              '<label for="displayed-label">Label</label>'+
              '<input type="text" name="displayed-label" data-id="' + fieldIndex + '" class="displayed-label form-control" data-list-value-id="' + valueIndex +'" placeholder="Label à afficher">'+
            '</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" 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 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>'+
            '<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" class="radio-label">'+
              '<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>'+
          '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" 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 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-container[data-id="' + fieldIndex + '"]' ).before(
      '<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>'+
          '<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>' +
        // Recueil du label à afficher
        '<div class="col-sm-12 mt-3">'+
          '<label for="displayed-label">Label</label>'+
          '<input type="text" name="displayed-label" data-id="' + fieldIndex + '" class="displayed-label form-control" data-list-value-id="' + valueIndex +'" placeholder="Label à afficher">'+
        '</div>' +
        // Checkbox valeur par défaut+bouton supprimer
        '<div class="col-sm-12 mt-3 row">'+
          // Bouton supprimer une option
          '<div class="col-sm-5">'+
            '<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 $thisDefautValue = $( '.is-defaut-value[data-id="' + $( this ).data( 'id' ) + '"][data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' );
    if( '' !== $( this ).val() ) {
      $thisDefautValue.removeAttr( 'disabled' );
    } else {
      $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 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(
              0 < 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 ) {
        // 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 valueId = $( this ).data( 'list-value-id' );
    var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
    var displayedLabel = '';

    if ( valeurOk( $( '.displayed-label[data-list-value-id="' + valueId + '"]' ).val() ) ) {
      displayedLabel = $( '.displayed-label[data-list-value-id="' + valueId + '"]' ).val();
    }
    if( $( this ).val() ){
      // Is-default-value non cochée
      if( !$( '.is-defaut-value[data-list-value-id="' + valueId + '"]' , thisFieldset ).is( ':checked' ) ) {
        datasToSubmitObject.fieldValues.listValue.push( [ $( this ).val(), displayedLabel ] );
      // 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() + '#', displayedLabel ] );
      // Is-default-value cochée pour checkbox/list-checkbox
      } else {
        // On ajoute simplement la valeur au tableau + '#'
        datasToSubmitObject.fieldValues.listValue.push( [ $( this ).val() + '#', displayedLabel ] );
      }
    }
  });
}

/************************************************
 *  Fonction d'affichage des champs classiques  *
 ************************************************/

// Prévisualisation
function DisplayClassicFields() {
  // Affichage du titre du widget
  renderFields( $( '#titre' ) , $( '.widget-renderer h1' ) );
  // 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 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 ) {
  var text = new DOMParser().parseFromString($source.val(), 'text/html');

  text = text.body.textContent || '';
  if( $source.val() ) {
    $taget.text( text );
  }
  $source.change( function () {
    $taget.text( text );
  });
}


/*****************************************************
 *  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;' ).replace( /(")/gm, '&quot;' );
  fieldTooltip = fieldTooltip.replace( /(')/gm, '&apos;' ).replace( /(")/gm, '&quot;' );
  fieldPlaceholder = fieldPlaceholder.replace( /(')/gm, '&apos;' ).replace( /(")/gm, '&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;
    // Nom du champ (éléments simples)
    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="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 style="width:100%"' +
          // 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="mt-3 list-label' + commonFieldsHtml.helpClass + '">' +
            // Label
            listFieldsHtml.containerContent +
            // Bouton 'help'
            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 du label
            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;' ).replace( /(")/gm, '&quot;' ) + '"' +
              // Checked
              listFieldsHtml.defaultAttr +
              // Class="nom du champ"
              commonFieldsHtml.fieldInput.classAttr +
            '>' +
            // Label de l'option
            fieldOption.optionText.replace( /(')/gm, '&apos;' ).replace( /(")/gm, '&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-' + 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  add-field-select' + commonFieldsHtml.helpClass + '"' +
          // DataId
          commonFieldsHtml.dataIdAttr +
        '>' +
          '<label style="width:100%">' +
            // Nom du champ
            listFieldsHtml.containerContent +
            // Bouton 'help'
            commonFieldsHtml.helpButton +
          '</label>' +
          '<div class="mt-3">'+
            '<div class="selectBox"' +
              // DataId
              commonFieldsHtml.dataIdAttr +
            '>' +
              '<select' +
                // DataId
                commonFieldsHtml.dataIdAttr +
                // Required
                commonFieldsHtml.fieldInput.mandatoryAttr +
                // Info bulle
                commonFieldsHtml.titleAttr +
                // Class
                ' class="form-control custom-select ' + fieldElement + '"' +
              '>' +
                // Apparait dans la barre de sélection
                '<option>Plusieurs choix possibles</option>' +
              '</select>' +
              '<div class="overSelect"></div>' +
            '</div>' +
            '<div class="checkboxes hidden"' +
              // DataId
              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;' ).replace( /(")/gm, '&quot;' ).toLowerCase() + '"';
        // For
        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.replace( /(')/gm, '&apos;' ).replace( /(")/gm, '&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;' ).replace( /(")/gm, '&quot;' ) + '"' +
              // Checked
              listFieldsHtml.defaultAttr +
              // Class="nom du champ"
              commonFieldsHtml.fieldInput.classAttr +
              // DataId
              commonFieldsHtml.dataIdAttr +
            '>' +
            // Label de l'option
            fieldOption.optionText.replace( /(')/gm, '&apos;' ).replace( /(")/gm, '&quot;' ) +
          '</label>';
      }
      // Si valeur "autre" est cochée
      if( fieldOtherValue ) {
        fieldHtml +=
          '<label for="other"' +
            // DataId
            commonFieldsHtml.dataIdAttr +
          '>' +
            '<input type="checkbox"' +
              ' 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>';
      break;

    case 'select':
      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
      commonFieldsHtml.fieldInput.classAttr += ' form-control custom-select"';
      fieldHtml =
        // Conteneur/Wrapper
        // +Classe 'and-help'
        '<div class="add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
          // DataID
          commonFieldsHtml.dataIdAttr +
        '>' +
          '<label class="mt-3" style="width:100%"' +
            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;' ).replace( /(")/gm, '&quot;' ) + '"' +
            // Value-id
            listFieldsHtml.optionIdAttr +
            // Selected
            listFieldsHtml.defaultAttr +
          '>' +
            // Option
            fieldOption.optionText.replace( /(')/gm, '&apos;' ).replace( /(")/gm, '&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>';
      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="mt-3 ' + commonFieldsHtml.helpClass + '"';
      // Autres attributs
      commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';

      fieldHtml =
        '<label  style="width:100%"' +
          // 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>' +
        '<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="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 style="width:100%"' +
            // 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%">' +
          // Visualiser min max et la valeur de range
            '<p class="col-sm-2 range-values text-center font-weight-bold">'+
              'Min ' + fieldMin +
            '</p>'+
            '<div class="range-live-value range-values text-center font-weight-bold col-sm-7">'+
              fieldDefaultNum +
            '</div>'+
            '<p class="col-sm-2 range-values text-center font-weight-bold">'+
              'Max ' + fieldMax +
            '</p>' +

            '<input' +
              // Type
              commonFieldsHtml.fieldInput.typeAttr +
              // Name
              commonFieldsHtml.fieldInput.nameAttr +
              // DataId
              commonFieldsHtml.dataIdAttr +
              // Class
              commonFieldsHtml.fieldInput.classAttr +
              // Info-bulle
              commonFieldsHtml.titleAttr +
              // Required
              commonFieldsHtml.fieldInput.mandatoryAttr +
              // Default
              ' value="' + fieldDefaultNum + '"' +
              // Autres attributs
              commonFieldsHtml.fieldInput.otherAttr +
            '>' +
          '</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 + ' 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 style="width:100%"' +
            // 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 +
          '>' +
        '</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 + ' form-control"';
      // Class du label
      commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"';

      fieldHtml =
        '<label style="width:100%"' +
          // 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 +
        '>';
      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( '.displayed-label' ).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
      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" style="font-weight:300">Autre option :</label>' +
        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other form-control" >'+
      '</div>';
  // Pouvoir supprimer le champ "Autre"
  function optionRemove( thisPreviewFieldset ) {
    $( '.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 '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-' + 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 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: 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();
    })
  });
}

function potDeMiel() {
  if( !valeurOk( $( '#basic-widget-form #email' ).val() ) ) {
    $( '#signup_submit' ).prop( 'disabled', false );
  }
  $( '#signup_submit' ).on( 'click dblclick mousedown submit focus keydown keypress keyup touchstart touchend', function() {
    if( valeurOk( $( '#basic-widget-form #email' ).val() ) ) {
      return false;
    }
  });
  $( '#basic-widget-form #email' ).css({ position : 'absolute', left : '-2000px' }).on( 'input blur change', function( event ) {
    event.preventDefault();
    if( valeurOk( $( this ).val() ) ) {
      $( 'form' ).each( function() {
        $( this )[0].reset();
      });
      $( '#signup_submit' ).prop( 'disabled', true );
    }
  });
}

/**
* Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide
* et de comparer à une autre valeur :
* Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN
* Si comparer est défini on le compare à valeur en fonction de sensComparaison
* Un booléen est une variable valide : on retourne true
* @param { string || number || object || undefined } valeur
* @param { boolean } sensComparaison : true = rechercher, false = refuser
* @param { string || number || object || undefined || boolean } comparer :valeur à comparer
* @returns {boolean}
*/
function valeurOk( valeur, sensComparaison = true, comparer = undefined ) {
  var retour;
  if ( 'boolean' !== typeof valeur ) {
    switch( typeof valeur ) {
      case 'string' :
        retour = ( '' !== valeur );
        break;
      case 'number' :
        retour = ( NaN !== valeur );
        break;
      case 'object' :
        retour = ( null !== valeur && undefined !== valeur && !$.isEmptyObject( valeur ) );
        if ( undefined !== valeur.length ) {
          retour = ( retour  && 0 < valeur.length );
        }
        break;
      case 'undefined' :
      default :
        retour = false;
    }
    if ( retour && comparer !== undefined ) {
      var resultComparaison = ( comparer === valeur );
      retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ;
    }
    return retour;
  } else {
    // Un booléen est une valeur valable
    return true;
  }
}

/***************************
 *  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;

jQuery( document ).ready( function() {
  // reset de tous les formulaires
  $( 'form' ).each( function() {
    $( this )[0].reset();
  });
  // Gestion du champ pot de miel
  potDeMiel();
  // 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();
});