Subversion Repositories eFlore/Applications.cel

"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 modification
    if( !$.isEmptyObject( event.target.files[0] ) ) {
      var file = event.target.files[0],
        $theReturn = $( '.' + $( this ).attr( 'id' ) );
      // Affichage du nom du fichier
      $theReturn.text( file.name );
      // Si le fichier est une image on l'affiche
      if( file.type.match( 'image' ) ) {
        // Chemin temporaire de l'image et affichage
        var tmppath = URL.createObjectURL( file );
        $theReturn.removeClass( 'hidden' ).append( '<img src="' + tmppath + '" width="50%">' );
      }
    }
  });
  // Annuler le téléchargement
  $( '.remove-file' ).click( function() {
    var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' );
    $thisFileInput.wrap( '<form>' ).closest( 'form' ).get(0).reset();
    $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).attr( 'data-id' ) + '"]' ).toggleClass( 'hidden' );
  });
}

// Mettre la première lettre en majuscule, les autres en minuscule
function capitalize( string ) {
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

/***********************************************************
 *  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 );
    // 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
      '<label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>'+
      '<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name" placeholder="Titre de votre champ" title="Donnez un titre à votre champ" required>'+
      // Clé du champ
      '<label for="field-key" title="Nom du champ dans la base de données">'+
        'Clé du champ en camelCase (ecritureChameau)<br>'+
        '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
        'Pas d\'accents ou de cédille, pas de caractères spéciaux. *'+
      '</label>'+
      '<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key" placeholder="Clé du champ" title="Nom du champ dans la base de données" required>'+
      // Type de champ
      '<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
      '<div class="select-wrapper add-field-select" data-id="' + fieldIndex + '">'+
        '<select name="field-element" data-id="' + fieldIndex + '" class="field-element">'+
          '<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="file">Téléchargement</option>'+
          '<option value="range">Curseur (entre 2 bornes)</option>'+
          '<option value="number">Nombre</option>'+
        '</select>'+
      '</div>'+
      // Checkbox "champ requis"
      '<label for="field-is_mandatory" title="Ce champ est obligatoire">Champ requis ?</label>'+
      '<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory">'+
      // Unité des valeurs
      '<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">'+
      // Tooltip
      '<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">'+
      // Import d'une image ou d'un pdf d'aide à afficher en popup
      '<div class="input-file-container">'+
        '<input type="file" class="input-file field-help" name="field-help" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="application/pdf, image/*, video/*">'+
        '<label for="field-help" class="label-file"><i class="fas fa-download"></i> Popup aide image/pdf</label>'+
      '</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 ( keyFlag , nameFlag ) {
  $( '.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)
    '<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">'
  );
  // 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 'file':
        break;

      case 'number':
      case 'range':
        displayFieldDetailsCollect(
          fieldIndex,
          '<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>' +
          // Placeholder
          '<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">'+
          // Valeur par défaut
          '<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">'+
          // Incrémentation ( attribut step="" )
          '<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step) :<br>defaut = +1</label>'+
          '<input type="number" name="step" data-id="' + fieldIndex + '" class="step" step="0.01" value="1">'+
          // Min
          '<label for="min" title="valeur min">Valeur minimale</label>'+
          '<input type="number" name="min" data-id="' + fieldIndex + '" class="min" step="0.01" value="0">'+
          // Max
          '<label for="max" title="valeur max">Valeur maximale</label>'+
          '<input type="number" name="max" data-id="' + fieldIndex + '" class="max" step="0.01" value="1">'
        );
        break;

      case 'date':
        displayFieldDetailsCollect(
          fieldIndex,
          // Date min
          '<label for="min" title="date min">Date minimale</label>'+
          '<input type="date" name="min" data-id="' + fieldIndex + '" class="min">'+
          // Date max
          '<label for="max" title="date max">Date maximale</label>'+
          '<input type="date" name="max" data-id="' + fieldIndex + '" class="max">'
        );
        break;

      case 'select':
      case 'checkbox':
      case 'list-checkbox':
      case 'radio':
        displayFieldDetailsCollect(
          fieldIndex,
          '<p class="message">Ajoutez les valeurs de \"' + $( this ).children( 'option:selected' ).text() + '\"</p>'+
          // Bouton ajout d'une valeur à la liste
          '<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>'+
          // checkbox ajouter une valeur "Autre:"
          '<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+
          '<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'
        );
        break;

      case 'email':
      case 'text':
      case 'textarea':
      default:
        displayFieldDetailsCollect(
          fieldIndex,
        // Placeholder
        '<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">'
      );
        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 + '">' +
      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() {
    $( '.add-value[data-id="' + fieldIndex + '"]' ).before(
      '<div class="new-value" data-list-value-id="' + valueIndex +'">'+
        // Recueil d'une valeur de la liste
        '<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>'+
        // Checkbox valeur par défaut+bouton supprimer
        '<div class="row">'+
          '<div class="col-md-5">'+
            // Valeur par défaut
            '<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">'+
            // 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>'+
        '</div>'+
      '</div>'
    ).hide().show( 200);
    // Activer la checkbox de valeur par default uniquement si une valeur est entrée
    onInputListValueLabelEnableDefaultCheckbox( valueIndex );
    // Une seule valeur par défaut pour select et radio
    onClickDefaultValueRemoveOthers( fieldIndex );
    // Supprimer une valeur
    onClickRemoveListValue( fieldIndex );

    valueIndex++;
  });
}

// Activer la checkbox de valeur par default uniquement si une valeur est entrée
function onInputListValueLabelEnableDefaultCheckbox( valueIndex ) {
  $( '.new-value[data-list-value-id="' + valueIndex + '"] .list-value' ).on( 'input' , function() {
    if( $(this).val() !== '' ) {
      $( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).removeAttr( 'disabled');
    } else {
      $( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).attr( 'disabled', true ).removeAttr( 'checked' );
    }
  });
}

// Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée
function onClickDefaultValueRemoveOthers( fieldIndex ) {
  var selectedFieldElement = $( '.field-element[data-id="' + fieldIndex + '"]' ).val();

  if( selectedFieldElement === 'select' || selectedFieldElement === 'radio' ) {
    $( '.is-defaut-value[data-id="' + fieldIndex + '"]' ).click( function() {
     if( $( this ).attr( 'checked' ) ) {
        // Décocher tous les autres
        $( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).removeAttr( 'checked' );
      }
    });
  }
}

// Bouton supprimer une valeur
function onClickRemoveListValue( fieldIndex ) {
  $( '.remove-value.button[data-id="' + fieldIndex + '"]' ).click( function() {
    $( '.new-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' ).hide( 200 , function () {
      $(this).remove();
    });
  });
}

/*********************************************
 *  Validation et envoi des nouveaux champs  *
 *********************************************/

//Activation/Désactivation des boutons valider/prévisualiser
function activatePreviewAndValidateButtons() {
  var invalidElementInfos = false, // true si aucune option n'a été entrée pour un élément de liste (select, radio, etc.)
      invalidTextInfos    = false; // true si au moins un input required n'est pas renseigné
  // Clique sur le bouton prévisualiser ou valider
  $('#preview-field , #validate-new-fields').on( 'click' , function() {
    // S'il n'y a pas (plus) de bloc nouveau champ
    if( 0 === $( 'fieldset' ).length ) {
      return;
    }
    var count = $( 'fieldset' ).last().attr('data-id');
    // si on a déjà des avertissements on les supprime
    if( 0 < $( '.validation-warning' ).length ) {
      // Supprimer les messages
      $( '.validation-warning' ).each( function() {
        $( this ).hide( 200 , function () {
          $( this ).remove();
        });
      });
      // Supprimer les bordures en rouge vif
      $('.add-value-button , input[required]' ).each( function() {
        $( this ).removeClass( 'invalid' );
      });
    }
    // Parcourir tous les blocs d'infos de champs supplémentaires
    for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
      var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
      // Certains indices peuvent correspondre à un champ supprimé
      if( 0 < $( thisFieldset ).length ) {
        var $fieldElement    = $( '.field-element' , thisFieldset ),
            fieldElementVal  = $fieldElement.val(),
            isList           = ( // true si c'est un élément "liste"
              fieldElementVal === 'list-checkbox' ||
              fieldElementVal === 'checkbox'      ||
              fieldElementVal === 'radio'         ||
              fieldElementVal === 'select'
            );
        // Si aucune option n'a été créée pour un élément "liste"
        if( isList && 0 === $( '.list-value' , thisFieldset ).length ) {
          invalidElementInfos = true;
          // Le bouton "Ajouter une valeur" est signalé en rouge
          $( '.add-value-button' , thisFieldset ).addClass( 'invalid' );
        }
      }
    }
    // Si au moins un champ "required" n'est pas rempli
    $( 'input[required]' , thisFieldset ).each( function() {
      if( 0 === $( this ).val().length ) {
        invalidTextInfos = true;
        // Le champ est signalé en rouge
        $( this ).addClass( 'invalid' );
      }
    });
    // Si la saisie est invalide
    if( invalidElementInfos ||  invalidTextInfos ) {
      // Désactivation des boutons valider et prévisualiser
      $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' );
      // Message pour les options des "listes"
      if( invalidElementInfos ) {
        $( '#new-fields' ).append(
          '<p class="validation-warning message">' +
            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
             '&nbsp;Vérifiez les boutons<br>"<i class="fa fa-puzzle-piece" aria-hidden="true" style="color:#4bbacb"></i>&nbsp;Ajouter une valeur" signalés en rouge:' +
             ' il faut au moins une valeur pour les éléments "menu déroulant", "boutons radio", "cases à cocher" ou "liste de cases à cocher", ' +
          '</p>'
        );
      }
      // Message pour les champs
      if( invalidTextInfos ) {
        $( '#new-fields' ).append(
          '<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 {
      $( '#preview-field , #validate-new-fields' ).removeClass( '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();
      }
    }
    // Réinitialisation des drapeaux de saisie invalide
    invalidElementInfos = false;
    invalidTextInfos    = false;
  });
}

// Enregistrement des valeurs à transmettre
function onClickStoreNewFields() {
  // Lorsqu'on valide
  var resultArrayIndex = 0;
  var count = $( 'fieldset' ).last().attr('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" class="hidden"></div>' );
  }

  // On déroule les blocs de champs supplémentaires
  for( var index = $( 'fieldset' ).first().attr('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 = false;
      // Ajout de "champ requis"
      if( $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ) ) {
        datasToSubmit[ resultArrayIndex ].mandatory = true;
      }
      // Ajout de l'unité au tableau de resultats
      if ( $( '.field-unit' , thisFieldset ).val() ) {
        datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val();
      }
      // Ajout du tooltip au tableau de resultats
      if ( $( '.field-description' , thisFieldset ).val() ) {
        datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val();
      }
      // Ajout du nom du document d'aide au tableau de resultats
      if ( $('.file-return.help-doc-' + index ).text() ) {
        datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text();
      }
      // 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( '' !== $( '.field-help' , thisFieldset ).val() ) {
        $( '.field-help' , thisFieldset ).clone()
          .attr( 'id' , datasToSubmit[ resultArrayIndex ].key )// l'id prend la valeur de la clé
          .css( 'position' , 'static' )// Retrouver facilement le bloc dans la page
          .appendTo( '#help-doc-submit' );
      }

      resultArrayIndex++;
    }
  }
  var resultsArrayJson = JSON.stringify( datasToSubmit );

  console.log(resultsArrayJson);
  // console.log(datasToSubmit);
  // 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(
    '<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 'file' :
      // Rien à faire, pas de détails à transmettre
      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 ).attr( 'checked' ) && datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) === -1 ) {
          datasToSubmitObject.fieldValues.listValue.push( 'other' );
        }
        break;

      case 'number':
      case 'range':
        // Placeholder
        if( $( '.aide-saisie' , thisFieldset ).val() ) {
         datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val();
        }
        // Valeur par défaut
        if( $( '.default' , thisFieldset ).val() ) {
          datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val();
        }
        // Incrémentation ( attribut step="" )
        if( $( '.step' , thisFieldset ).val() ) {
          datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val();
        }
        // Min
        if( $( '.min' , thisFieldset ).val() ) {
          datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val();
        }
        // Max
        if( $( '.max' , thisFieldset ).val() ) {
          datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val();
        }
        break;

      case 'date':
        // Min
        if( $( '.min' , thisFieldset ).val() ) {
          datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val();
        }
        // Max
        if( $( '.max' , thisFieldset ).val() ) {
         datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val();
        }
        break;

      case 'email':
      case 'text':
      case 'textarea':
      default:
        // Placeholder
        if( $( '.aide-saisie' , thisFieldset ).val() ) {
          datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val();
        }
        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() ){
      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr('data-list-value-id') + '"]' , thisFieldset ).attr( 'checked' ) ) {
        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
      } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {
        datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );
      } else {
        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' );
      }
    }
  });
}

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

// Affichage des infos dès que disponibles
// pour les champs classiques
function renderFields( $source , $taget ) {

  if($source.val()) {
    $taget.text( $source.val() );
  }
  $source.change( function () {
    $taget.text( $( this ).val() );
  });
}

function DisplayClassicFields() {
  // Affichage du titre du widget
  renderFields( $('#titre') , $( '.widget-renderer h1' ) );
  // Affichage du nom du projet
  renderFields( $('#projet') , $( '.projet-description' ));
  // Affichage de la description
  renderFields( $('#description') , $( '.preview-description' ) );
  // Affichage du logo s'il existe déjà
  if( $('#logo').val() ) {
    $( '#preview-logo' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') );
  }
  // Affichage du logo chargé
  $( '#logo.input-file' ).change( function( event ) {

    if( !$.isEmptyObject( event.target.files[0] ) ) {
      $( '#preview-logo img' ).prop( 'src' , URL.createObjectURL( event.target.files[0] ) );
    } else {
      $( '#preview-logo img' ).prop( 'src' , '' );
    }
  });
  // Affichage de l'image de fond
  $('#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');
    } else {
      $( '.widget-renderer' )[0].style.removeProperty( 'background' );
    }
  });
}


// /*****************************************************
//  *  Fonction d'affichage des champs supplémentaires  *
//  *****************************************************/

// Construction des éléments à visualiser
function onClickPreviewField( thisFieldset , index ) {

  var fieldLabel       = $( '.field-name'            , thisFieldset ).val(),
      fieldKey         = $( '.field-key'             , thisFieldset ).val(),
      fieldElement     = $( '.field-element'         , thisFieldset ).val(),
      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),
      fieldUnit        = $( '.field-unit'            , thisFieldset ).val(),
      fieldTooltip     = $( '.field-description'     , thisFieldset ).val(),
      fieldHelp        = $( '.file-return.help-doc-' + index ).text(),
      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',
      fieldDefaultNum  = $( '.default'               , thisFieldset ).val(),
      fieldStep        = $( '.step'                  , thisFieldset ).val(),
      fieldMin         = $( '.min'                   , thisFieldset ).val(),
      fieldMax         = $( '.max'                   , thisFieldset ).val(),
      fieldOtherValue  = $( '.option-other-value'    , thisFieldset ).is( ':checked' ),
      fieldOptions     = collectListOptions( thisFieldset );



  var fieldHtmlObject  = {},
      fieldHtml        = '',
      constHtml        = {},
      listHtml         = {},
      count            = fieldOptions.length,
      fieldHelpClass   = '';

  // Pour les éléments simples
  fieldHtmlObject = {
    fieldHelpButton : '',
    fieldTitleAttr : '',
    fieldLabel     : {
      labelForAttr         :' for="' + fieldKey + '"',
      labelClassAttr       :'',
      labelOtherAttr       : '',
      labelContent         : fieldLabel
    },
    fieldInput     : {
      inputTypeAttr        : ' type="' + fieldElement + '"',
      inputNameAttr        : ' name="' + fieldKey + '"',
      inputDataIdAttr      : ' data-id="' + index + '"',
      inputClassAttr       : ' class="' +  fieldKey + '"',
      inputPlaceholderAttr : '',
      inputOtherAttr       : ''
    }
  }

  // Pour les éléments de listes (select, checkbox, etc.)
  constHtml = {
    fieldContainerContent : fieldLabel,
    fieldDataIdAttr       : ' data-id="' + index + '"',
    fieldTitleAttr        : '',
    fieldMandatoryAttr    : '',
    fieldContainerClass   : ''
  };

  listHtml = {
    optionLabel : {},
    optionInput  : {
      inputTypeAttr    : ' type="'  + fieldElement + '"',
      inputNameAttr    : ' name="'  + fieldKey + '"',
      inputClassAttr   : ' class="' +  fieldKey + '"',
      inputOptionIdAttr : ''
    }
  };

  // Changement d'un élément existant:
  // supprimer le précédent pour ajouter le nouveau
  if( 0 < $( '.preview-fields' , thisFieldset ).length ) {
    $( '.preview-fields' , thisFieldset ).remove();
  }

  // Si l'élément est requis
  if( fieldIsMandatory ) {
    // Attribut required
    fieldHtmlObject.fieldInput.inputOtherAttr += ' required="required"';
    // Nom du champ (éléments listes)
    constHtml.fieldContainerContent         += ' *';
    // Nom du champ (éléments simples)
    fieldHtmlObject.fieldLabel.labelContent += ' *';
  }

  // Si on a une infobulle
  if( '' !== fieldTooltip ) {
    fieldHtmlObject.fieldTitleAttr = ' title="' +  fieldTooltip + '"';
  }

  // Si on a un placeholder
  if( '' !== fieldPlaceholder ) {
    fieldHtmlObject.fieldInput.inputPlaceholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
    console.log(fieldPlaceholder);
  }

  if( '' !== fieldHelp ) {
    fieldHtmlObject.fieldHelpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
    fieldHelpClass = ' and-help';
  }

  // html à ajouter en fonction de l'élément choisi
  switch( fieldElement ) {
    case 'checkbox' :
    case 'radio' :
      constHtml.fieldContainerClass = ' class="' + fieldElement +'"';
      fieldHtml =
        // Conteneur
        '<div' +
          // Class="L'élément choisi"
          constHtml.fieldContainerClass +
          // DataId
          constHtml.fieldDataIdAttr +
          // Required
          constHtml.fieldMandatoryAttr +
          // Info bulle
          constHtml.fieldTitleAttr +
        ' >'+
          // Nom du champ
          '<div class="list-label' + fieldHelpClass + '">' +
            constHtml.fieldContainerContent +
          '</div>' +
          fieldHtmlObject.fieldHelpButton;
      // On déroule les différentes valeurs
      for ( let i = 0; i < count; i++ ) {
        let fieldOption = fieldOptions[i];

        listHtml.optionInput.inputDefaultAttr = '';
        listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
        listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue + '"';

        // Si c'est une/l'option par défaut
        if( fieldOption.isDefault ) {
          listHtml.optionInput.inputDefaultAttr = ' checked';
        }

        // L'indice de chaque option
        // L'option "autre" n'en a pas
        if( '' !== fieldOption.optionIndex ) {
          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
        }

        fieldHtml +=
          '<label' +
            // For
            listHtml.optionLabel.labelForAttr +
            // value-id
            listHtml.optionInput.inputOptionIdAttr +
            // Class="nom du champ"
            listHtml.optionInput.inputClassAttr +
          '>' +
            '<input' +
              // Type
              listHtml.optionInput.inputTypeAttr +
              // DataId
              constHtml.fieldDataIdAttr +
              // value-id
              listHtml.optionInput.inputOptionIdAttr +
              // Name
              listHtml.optionInput.inputNameAttr +
              // Value
              ' value="' + fieldOption.optionValue + '"' +
              // Checked
              listHtml.optionInput.inputDefaultAttr +
              // Class="nom du champ"
              listHtml.optionInput.inputClassAttr +
            '>' +
            // Label de l'option
            fieldOption.optionText +
          '</label>';

        // Si valeur "autre" est cochée
        if( fieldOtherValue ) {
          fieldHtml +=
            '<label for="other"' +
              constHtml.fieldDataIdAttr +
            '>' +
              '<input' +
                listHtml.optionInput.inputTypeAttr +
                ' id="other"' +
                listHtml.optionInput.inputNameAttr +
                ' value="other"' +
                listHtml.optionInput.inputClassAttr +
                constHtml.fieldDataIdAttr +
              '>' +
            'Autre</label>';
        }
      }
      // Fin du conteneur
      fieldHtml += '</div>';

      break;

    case 'list-checkbox':
      fieldHtml =
        '<div class="multiselect ' + fieldElement + fieldHelpClass + '"' +
          // DataId
          constHtml.fieldDataIdAttr +
        '>' +
          '<label>' +
            // Nom du champ
            constHtml.fieldContainerContent +
          '</label>' +
          '<div class="selectBox"' +
            // DataId
            constHtml.fieldDataIdAttr +
          '>' +

            '<select' +
              // DataId
              constHtml.fieldDataIdAttr +
              // Required
              constHtml.fieldMandatoryAttr +
              // Info bulle
              constHtml.fieldTitleAttr +
            '>' +
              // Apparait dans la barre de sélection
              '<option>Plusieurs choix possibles</option>' +
            '</select>' +
            '<div class="overSelect"></div>' +
          '</div>' +
          '<div class="checkboxes hidden"' +
            // DataId
            constHtml.fieldDataIdAttr +
          '>';
      // On déroule les différentes valeurs
      for ( let i = 0; i < count; i++ ) {
        let fieldOption = fieldOptions[i];

        listHtml.optionInput.inputTypeAttr = ' type="checkbox"';
        listHtml.optionInput.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
        listHtml.optionLabel.labelForAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
        listHtml.optionInput.inputDefaultAttr = '';

        if( fieldOption.isDefault ) {
          listHtml.optionInput.inputDefaultAttr = ' checked';
        }

        if( '' !== fieldOption.optionIndex ) {
          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
        }

        fieldHtml +=

          '<label' +
            listHtml.optionLabel.labelForAttr +
            // value-id
            listHtml.optionInput.inputOptionIdAttr +
          '>' +

            '<input type="checkbox"' +
              // value-id
              listHtml.optionInput.inputOptionIdAttr +
              // Name
              listHtml.optionInput.inputNameAttr +
              // Value
              ' value="' + fieldOption.optionValue + '"' +
              // Checked
              listHtml.optionInput.inputDefaultAttr +
              // Class="nom du champ"
              listHtml.optionInput.inputClassAttr +
              // DataId
              constHtml.fieldDataIdAttr +
            '>' +
            // Label de l'option
            fieldOption.optionText +
          '</label>';
      }

      // Si valeur "autre" est cochée
      if( fieldOtherValue ) {
        fieldHtml +=
          '<label for="other"' +
            // DataId
            constHtml.fieldDataIdAttr +
          '>' +
            '<input type="checkbox"' +
              ' id="other"' +
              listHtml.optionInput.inputNameAttr +
              ' value="other"' +
              listHtml.optionInput.inputClassAttr +
              // DataId
              constHtml.fieldDataIdAttr +
            '>' +
          'Autre</label>';
      }

      // Fermeture des conteneurs .multiselect .checkboxes
      fieldHtml +=
        '</div>'+
      '</div>' +
      fieldHtmlObject.fieldHelpButton;

      break;

    case 'select':
      fieldHtml =
        '<label' +
          ' for="' + fieldKey + '"' +
          // Info bulle
          constHtml.fieldTitleAttr +
        '>' +
          // Nom du champ
          constHtml.fieldContainerContent +
        '</label>' +
        // Conteneur/Wrapper
        '<div class="select-wrapper add-field-select ' + fieldElement + fieldHelpClass + '"' +
          constHtml.fieldDataIdAttr +
        '>' +
          '<select' +
            ' name="' + fieldKey + '"' +
            ' id="' + fieldKey + '"' +
            //Class
            listHtml.optionInput.inputClassAttr +
            // Required
            constHtml.fieldMandatoryAttr +
            // DataId
            constHtml.fieldDataIdAttr +
          '>';

      // On déroule les différentes valeurs
      for ( let i = 0; i < count; i++ ) {
        let fieldOption = fieldOptions[i];

        listHtml.optionInput.inputDefaultAttr = '';
        listHtml.optionInput.inputdisabledAttr = '';

        if( fieldOption.isDefault ) {
          listHtml.optionInput.inputDefaultAttr = ' selected="selected"';
        }

        if( '' !== fieldOption.optionIndex ) {
          listHtml.optionInput.inputOptionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
        }

        fieldHtml +=
          '<option' +
            // Value
            ' value="' + fieldOption.optionValue + '"' +
            // Value-id
            listHtml.optionInput.inputOptionIdAttr +
            // Selected
            listHtml.optionInput.inputDefaultAttr +
          '>' +
            // Option
            fieldOption.optionText +
          '</option>';
      }

      // Si valeur "autre" est cochée
      if( fieldOtherValue ) {
        fieldHtml +=
          '<option class="other" value="other"' + constHtml.fieldDataIdAttr + '>' +
            'Autre' +
          '</option>';
      }

      fieldHtml +=
          '</select>' +
        // Fin du conteneur/wrapper
        '</div>' +

        fieldHtmlObject.fieldHelpButton;

      break;

    case 'file' :
      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
      fieldHtmlObject.fieldInput.inputClassAttr += ' input-file"';

      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="label-file"';

      fieldHtmlObject.fieldInput.inputOtherAttr += ' accept="application/pdf, image/*, video/*"';

      fieldHtml =
        '<div class="input-file-container' + fieldHelpClass + '">' +
          '<input' +
            // Type
            fieldHtmlObject.fieldInput.inputTypeAttr +
            // Name
            fieldHtmlObject.fieldInput.inputNameAttr +
            // DataId
            fieldHtmlObject.fieldInput.inputDataIdAttr +
            // Class
            fieldHtmlObject.fieldInput.inputClassAttr +
            // Info-bulle
            fieldHtmlObject.fieldTitleAttr +
            // Placeholder
            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
            // Autres attributs
            fieldHtmlObject.fieldInput.inputOtherAttr +
          '>' +

          '<label' +
            // For
            fieldHtmlObject.fieldLabel.labelForAttr +
            // Class
            fieldHtmlObject.fieldLabel.labelClassAttr +
            // Info-bulle
            fieldHtmlObject.fieldTitleAttr +
          '><i class="fas fa-download"></i> ' +
            // Nom du champ
            fieldHtmlObject.fieldLabel.labelContent +
          '</label>' +

        '</div>' +

        '<div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>' +

        fieldHtmlObject.fieldHelpButton;

      break;

    case 'textarea':
      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"';
      // Autres attributs
      fieldHtmlObject.fieldInput.inputOtherAttr += ' id="' + fieldKey + '"';

      fieldHtml =
        '<label' +
          // For
          fieldHtmlObject.fieldLabel.labelForAttr +
          // Class
          fieldHtmlObject.fieldLabel.labelClassAttr +
          // Info-bulle
          fieldHtmlObject.fieldTitleAttr +
          // Autres attributs
          fieldHtmlObject.fieldLabel.labelOtherAttr +
        '>' +
          // Nom du champ
          fieldHtmlObject.fieldLabel.labelContent +
        '</label>' +

        fieldHtmlObject.fieldHelpButton +

        '<textarea' +
          // Name
          fieldHtmlObject.fieldInput.inputNameAttr +
          // DataId
          fieldHtmlObject.fieldInput.inputDataIdAttr +
          // Class
          fieldHtmlObject.fieldInput.inputClassAttr +
          // Info-bulle
          fieldHtmlObject.fieldTitleAttr +
          // Info-bulle
          fieldHtmlObject.fieldInput.inputPlaceholderAttr +
          // Autres attributs
          fieldHtmlObject.fieldInput.inputOtherAttr +
        '></textarea>';

        break;

    case 'range':
      fieldHtmlObject.fieldLabel.labelClassAttr = ' class="' + fieldHelpClass + '"';

      if( '' !== fieldStep ) {
        fieldHtmlObject.fieldInput.inputOtherAttr += ' step="' +  fieldStep + '"';
      }

      if( '' !== fieldMin ) {
        fieldHtmlObject.fieldInput.inputOtherAttr += ' min="' +  fieldMin + '"';
      }

      if( '' !== fieldMax ) {
        fieldHtmlObject.fieldInput.inputOtherAttr += ' max="' +  fieldMax + '"';
      }

      fieldHtml =
        '<div class="number">' +
          '<label' +
            // For
            fieldHtmlObject.fieldLabel.labelForAttr +
            // Class
            fieldHtmlObject.fieldLabel.labelClassAttr +
            // Info-bulle
            fieldHtmlObject.fieldTitleAttr +
            // Autres attributs
            fieldHtmlObject.fieldLabel.labelOtherAttr +
          '>' +
            // Nom du champ
            fieldHtmlObject.fieldLabel.labelContent +
          '</label>' +

          fieldHtmlObject.fieldHelpButton +

          '<input' +
            // Type
            fieldHtmlObject.fieldInput.inputTypeAttr +
            // Name
            fieldHtmlObject.fieldInput.inputNameAttr +
            // DataId
            fieldHtmlObject.fieldInput.inputDataIdAttr +
            // Class
            fieldHtmlObject.fieldInput.inputClassAttr +
            // Info-bulle
            fieldHtmlObject.fieldTitleAttr +
            // Info-bulle
            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
            // Autres attributs
            fieldHtmlObject.fieldInput.inputOtherAttr +
          '>' +

        '</div>';

        break;

    case 'date':
    case 'number':
      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
      fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"';

      if( '' !== fieldStep ) {
        fieldHtmlObject.fieldInput.inputOtherAttr += ' step="' +  fieldStep + '"';
      }

      if( '' !== fieldMin ) {
        fieldHtmlObject.fieldInput.inputOtherAttr += ' min="' +  fieldMin + '"';
      }

      if( '' !== fieldMax ) {
        fieldHtmlObject.fieldInput.inputOtherAttr += ' max="' +  fieldMax + '"';
      }

      fieldHtml =
        '<div class="number">' +
          '<label' +
            // For
            fieldHtmlObject.fieldLabel.labelForAttr +
            // Class
            fieldHtmlObject.fieldLabel.labelClassAttr +
            // Info-bulle
            fieldHtmlObject.fieldTitleAttr +
            // Autres attributs
            fieldHtmlObject.fieldLabel.labelOtherAttr +
          '>' +
            // Nom du champ
            fieldHtmlObject.fieldLabel.labelContent +
          '</label>' +

          '<input' +
            // Type
            fieldHtmlObject.fieldInput.inputTypeAttr +
            // Name
            fieldHtmlObject.fieldInput.inputNameAttr +
            // DataId
            fieldHtmlObject.fieldInput.inputDataIdAttr +
            // Class
            fieldHtmlObject.fieldInput.inputClassAttr +
            // Info-bulle
            fieldHtmlObject.fieldTitleAttr +
            // Info-bulle
            fieldHtmlObject.fieldInput.inputPlaceholderAttr +
            // Autres attributs
            fieldHtmlObject.fieldInput.inputOtherAttr +
          '>' +

          fieldHtmlObject.fieldHelpButton +

        '</div>';

        break;

    case 'text' :
    case 'email':
    default:
      fieldHtmlObject.fieldInput.inputClassAttr = fieldHtmlObject.fieldInput.inputClassAttr.slice(0, -1);
      fieldHtmlObject.fieldInput.inputClassAttr += fieldHelpClass + '"';

      fieldHtml =
        '<label' +
          // For
          fieldHtmlObject.fieldLabel.labelForAttr +
          // Class
          fieldHtmlObject.fieldLabel.labelClassAttr +
          // Info-bulle
          fieldHtmlObject.fieldTitleAttr +
          // Autres attributs
          fieldHtmlObject.fieldLabel.labelOtherAttr +
        '>' +
          // Nom du champ
          fieldHtmlObject.fieldLabel.labelContent +
        '</label>' +

        '<input' +
          // Type
          fieldHtmlObject.fieldInput.inputTypeAttr +
          // Name
          fieldHtmlObject.fieldInput.inputNameAttr +
          // DataId
          fieldHtmlObject.fieldInput.inputDataIdAttr +
          // Class
          fieldHtmlObject.fieldInput.inputClassAttr +
          // Info-bulle
          fieldHtmlObject.fieldTitleAttr +
          // Info-bulle
          fieldHtmlObject.fieldInput.inputPlaceholderAttr +
          // Autres attributs
          fieldHtmlObject.fieldInput.inputOtherAttr +
        '>' +

        fieldHtmlObject.fieldHelpButton;

      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  : capitalize( $( this ).find('.list-value').val() ),
      // Booléen "default"
      isDefault   : $( this ).find( '.is-defaut-value').is( ':checked' ),
      // Indice de l'option
      optionIndex : $( this ).attr('data-list-value-id')
    });

  });
  return options;
}

// Faire apparaitre un champ text "Autre"
function onOtherOption( thisFieldset , index ) {
  //L'élément choisi
  var element = $('.field-element' , thisFieldset ).val(),
      // Où insérer le champ "Autre"
      $element = $( '.' + element , thisFieldset ),
      // html du champ "Autre"
      collectOther =
        '<label data-id="' + index + '" for="collect-other">Autre option :</label>' +
        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >';

  // Pouvoir supprimer le champ "Autre"
  function optionRemove( thisFieldset ) {
    $( 'label[for="collect-other"]' , thisFieldset ).remove();
    $( 'input.collect-other' , thisFieldset ).remove();
  }

  switch( element ) {
    case 'radio' :
      // Lorsqu'un nouveau bouton est coché
      $( 'input' , thisFieldset ).on( 'change' , function () {
        if( 'other' === $( this ).val() ) {
          // Insertion du champ "Autre" après les boutons
          $element.after( collectOther );
        } else {
          // Suppression du champ autre
          optionRemove( thisFieldset );
        }
      });

      break;

    case 'select' :
      // Lorsque l'option "Autre" est selectionnée
      $( 'select' , thisFieldset ).on( 'change' , function () {
        if( 'other' === $( this).val() ) {
          // Insertion du champ "Autre" après les boutons
          $element.after( collectOther );
          // Suppression du champ autre
        } else {
          optionRemove( thisFieldset );
        }
      });

      break;

    case 'checkbox' :
    case 'list-checkbox' :
      // Lorsque "Autre" est coché
      $( 'input#other' , thisFieldset ).on( 'click' , function () {
        // Insertion du champ "Autre" après les boutons
        if( $( this ).is( ':checked' ) ) {
          $element.after( collectOther );
        } else {
          // Suppression du champ autre
          optionRemove( thisFieldset );
        }
      });

      break;

    default :
      break;
  }
}

// Prévisualisation des nouveaux champs
function newFieldsPreview() {
  var count = $( 'fieldset' ).last().attr('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 spécifiques au projet</h2>' +
      '<div class="message">Ceci n\'est qu\'un aperçu.<br>Il vous permet simplement de visualiser les contenus pour vérifier d\'évenutelles erreurs</div>'
    );
  }
  // Parcourir tous les blocs d'infos de champs supplémentaires
  for( var index = $( 'fieldset' ).first().attr('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 + '">'+
          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;
}

function previewFieldHelpModal() {
  $( '#zone-supp' ).on( 'click' , '.help-button' , function ( event ) {
    var index = $( this ).closest( '.preview-fields' ).attr( 'data-id' ),
        thisFieldset = $( '.new-field[data-id="' + index + '"]' ),
        file = $( '.field-help' , thisFieldset )[0].files[0],
        tmppath = URL.createObjectURL( file ),
        helpModalHtml = '';

    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( '.field-name' , thisFieldset ).val() );

    if( file.type.match( 'image' ) ) {
        $( '#print_content' ).append( '<img src="' + tmppath + '" style="max-width:100%">' );
    } else if( file.type.match( 'pdf' ) ) {
        $( '#print_content' ).append( '<iframe src="' + tmppath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );
    }

    $( '#help-modal' ).modal( { keyboard : true } );
    $( '#help-modal' ).modal( 'show' );

    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
      $( '#myInput' ).trigger( 'focus' );
    })

    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
      $( '#help-modal-label' ).text();
      $( '#print_content' ).empty();
    })
  });
}



/***************************
 *  Lancement des scripts  *
 ***************************/

// Tableau d'envoi des données
 var datasToSubmit = new Array();
 var firstClick = true;

jQuery( document ).ready( function() {
  // console.log($(location).attr('search'));
  // console.log($(location).attr('search').search('='));
  // console.log($(location).attr('search').charAt(6));
  // Identifiant de champ
  var fieldIndex = 0;
  // Ajout de nouveaux champs
  onClickAddNewFields( fieldIndex );
  // Activation/Desactivation des boutons valider et prévisualiser
  activatePreviewAndValidateButtons();

  // Prévisualisation des champs classiques
  DisplayClassicFields()


  // Affichage des images ou nom des documents importés
  inputFile();
  // Affichage des List-checkbox
  inputListCheckbox();

  previewFieldHelpModal();

});