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' );

  });

}

// Style et affichage des input type="range"

function inputRangeDisplayNumber() {

  $( '#zone-supp' ).on( 'input' , '.range input[type="range"]' , function () {

    $( this ).next( 'input[type="number"]' ).val ( $( this ).val() );

  });

  $( '#zone-supp' ).on( 'input' , '.range input[type="number"]' , function () {

    $( this ).prev( 'input[type="range"]' ).val ( $( this ).val() );

  });

}

/***********************************************************

 *  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

      '<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 *'+

      '</label>'+

      '<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key" placeholder="Clé du champ" Pattern="[A-Z][A-Za-z]+" title="Clé Unique en Camelcase, pas d\'accents pas de caractères spéciaux." required>'+

      '<p class="message">' +

        '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+

        'Une clé doit être unique<br>' +

        'En camelCase (ecriture chameau)<br>'+

        'Pas d\'accents ou de cédille, pas de caractères spéciaux.' +

      '</p>' +

      // 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" lang="en">'+

          // 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" lang="en">'+

          // 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" lang="en">'+

          // 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" lang="en">'

        );

        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" 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">'+

          // Date max

          '<label for="max" title="date max">Date maximale</label>'+

          '<input type="date" name="max" data-id="' + fieldIndex + '" class="max"  pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'

        );

        break;

      case 'select':

      case 'checkbox':

      case 'list-checkbox':

      case 'radio':

        displayFieldDetailsCollect(

          fieldIndex,

          '<p class="message element-message">' +

            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> ' +

            'Entrez au moins une valeur de ' + $( this ).children( 'option:selected' ).text() +

          '</p>'+

          // Première option

          '<div class="new-value" data-list-value-id="' + valueIndex +'">'+

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

            '<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>' +

          // 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() {

    valueIndex++;

    $( '.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 );

  });

}

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

 *********************************************/

// Empêcher de créer plus d'une fois la même clé

function onChangeCheckKeyUnique() {

 if( 1 < $( '.field-key' ).length ) {

    // Marqueur de valeur dupliquée

    var notUnique = false;

    $( '.field-key' ).change( function () {

      let count = $( '.field-key' ).length;

      for(var index = 0 ; index < count ; index++) {

        let thisFieldKey = $( '.field-key[data-id="' + index + '"]' );

        // Le champ avec cet index paourrait avoir été supprimé

        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(

              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>' +

             ' 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>' +

           ' 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().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   = $( '.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;

      // Ajout du nom du document d'aide au tableau de resultats

      datasToSubmit[ resultArrayIndex ].help        = $( '.file-return.help-doc-' + index ).text() || null;

      // Collecte les des données dépendantes de l'élément choisi

      // sous forme d'un tableau de resultats

      onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset );

      if( $.isEmptyObject(datasToSubmit[ resultArrayIndex ].fieldValues) ){

        delete datasToSubmit[ resultArrayIndex ].fieldValues;

      }

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

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

        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;

        // Valeur par défaut

        datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null;

        // Incrémentation ( attribut step="" )

         datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null;

        // Min

        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;

        // Max

        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;

        break;

      case 'date':

        // Min

        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;

        // Max

        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;

        break;

      case 'email':

      case 'text':

      case 'textarea':

      default:

        // Placeholder

        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;

        break;

    }

    return datasToSubmitObject;

}

// Ajout d'une valeur d'un élément liste (select, checkbox etc.)

// dans le tableau de resultats

function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {

  $( '.list-value' , thisFieldset ).each( function() {

    var selectedFieldElement = $( '.field-element' , thisFieldset ).val();

     if( $( this ).val() ){

      // Is-default-value non cochée

      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' , thisFieldset ).attr( 'checked' ) ) {

        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );

      // Is-default-value cochée pour select/radio

      } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {

        // Une seule valeur par defaut, devient la première valeur du tableau + '#'

        datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );

      // Is-default-value cochée pour checkbox/list-checkbox

      } else {

        // On ajoute simplement la valeur au tableau + '#'

        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' );

      }

    }

  });

}

/************************************************

 *  Fonction d'affichage des champs classiques  *

 ************************************************/

// Prévisualisation

function DisplayClassicFields() {

  // Affichage du titre du widget

  renderFields( $('#titre') , $( '.widget-renderer h1' ) );

  // Affichage du nom du projet

  renderFields( $('#projet') , $( '.projet-description' ));

  // Affichage de la description

  renderFields( $('#description') , $( '.preview-description' ) );

  // Affichage du logo s'il existe déjà

  if( 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

  $('#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' );

    }

  });

}

// Affichage des infos dès que disponibles

// pour les champs classiques

function renderFields( $source , $taget ) {

  if($source.val()) {

    $taget.text( $source.val() );

  }

  $source.change( function () {

    $taget.text( $( this ).val() );

  });

}

/*****************************************************

 *  Fonction d'affichage des champs supplémentaires  *

 *****************************************************/

// Construction des éléments à visualiser

function onClickPreviewField( thisFieldset , index ) {

  // Récupération des données

      // Tous les champs

  var fieldLabel       = $( '.field-name'            , thisFieldset ).val() || '',//nom

      fieldKey         = $( '.field-key'             , thisFieldset ).val() || '',//clé

      fieldElement     = $( '.field-element'         , thisFieldset ).val() || '',//élément

      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),//champ requis

      fieldUnit        = $( '.field-unit'            , thisFieldset ).val() || '',//unités

      fieldTooltip     = $( '.field-description'     , thisFieldset ).val() || '',//info-bulle

      fieldHelp        = $( '.file-return.help-doc-' + index ).text()       || '',//nom du fichier d'aide

      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',//placeholder

      // Champs à valeur numérique ou date

      fieldStep        = $( '.step'                  , thisFieldset ).val() || '',

      fieldMin         = $( '.min'                   , thisFieldset ).val() || '',

      fieldMax         = $( '.max'                   , thisFieldset ).val() || '',

      // Champs "listes"

      fieldDefaultNum  = $( '.default'               , thisFieldset ).val() || '',// value range/number par default

      fieldOtherValue  = $( '.option-other-value'    , thisFieldset ).is( ':checked' ),//option autre

      fieldOptions     = collectListOptions( thisFieldset );//Array: toutes les options

  // Variables d'affichage

  var fieldHtml               = '',//variable contenant tout le html à afficher

      commonFieldsHtml        = {},//Éléments simples ou chaînes communes aux "listes"

      listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques

      listFieldsHtml          = {},//chaînes & html spécifiques aux listes

      count                   = fieldOptions.length;//nombre d'options, pour les boucles for

  //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 += ' *';

    // Nom du champ (éléments simples)

    commonFieldsHtml.fieldLabel.labelContent += ' *';

  }

  // Infobulle

  if( '' !== fieldTooltip ) {

    commonFieldsHtml.titleAttr = ' title="' +  fieldTooltip + '"';

  }

  // Placeholder

  if( '' !== fieldPlaceholder ) {

    commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' +  fieldPlaceholder + '"';

  }

  // Fichier d'aide

  if( '' !== fieldHelp ) {

    // Bouton 'aide'

    commonFieldsHtml.helpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';

    // 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 +'"';

      fieldHtml =

        // Conteneur

        '<div' +

          // Class="L'élément choisi"

          listFieldsHtml.containerClass +

          // DataId

          commonFieldsHtml.dataIdAttr +

          // Required

          commonFieldsHtml.fieldInput.mandatoryAttr +

          // Info bulle

          commonFieldsHtml.titleAttr +

        ' >'+

          // Nom du champ

          // Classe 'and-help'

          '<div class="list-label' + commonFieldsHtml.helpClass + '">' +

            // Label

            listFieldsHtml.containerContent +

          '</div>' +

          // Bouton 'help'

          commonFieldsHtml.helpButton;

      // On déroule les différentes valeurs

      for( let i = 0; i < count; i++ ) {

        let fieldOption = fieldOptions[i];

        // L'id de input

        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue + '"';

        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue + '"';

        // Default

        listFieldsHtml.defaultAttr = '';//réinitialisation

        if( fieldOption.isDefault ) {//affectation

          listFieldsHtml.defaultAttr = ' checked';

        }

        // L'indice de chaque option

        // L'option "autre" n'en a pas

        if( '' !== fieldOption.optionIndex ) {

          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';

        }

        fieldHtml +=

          '<label' +

            // For

            listFieldsHtml.forAttr +

            // value-id

            listFieldsHtml.optionIdAttr +

            // Class="nom du champ"

            commonFieldsHtml.fieldInput.classAttr +

          '>' +

            '<input' +

              // Type

              commonFieldsHtml.fieldInput.typeAttr +

              // Id

              listFieldsHtml.inputIdAttr +

              // DataId

              commonFieldsHtml.dataIdAttr +

              // value-id

              listFieldsHtml.optionIdAttr +

              // Name

              commonFieldsHtml.fieldInput.nameAttr +

              // Value

              ' value="' + fieldOption.optionValue + '"' +

              // Checked

              listFieldsHtml.defaultAttr +

              // Class="nom du champ"

              commonFieldsHtml.fieldInput.classAttr +

            '>' +

            // Label de l'option

            fieldOption.optionText +

          '</label>';

      }

      // Si valeur "autre" est cochée

      if( fieldOtherValue ) {

        fieldHtml +=

          '<label for="other"' +

            commonFieldsHtml.dataIdAttr +

          '>' +

            '<input' +

              commonFieldsHtml.fieldInput.typeAttr +

              ' id="other"' +

              commonFieldsHtml.fieldInput.nameAttr +

              ' value="other"' +

              commonFieldsHtml.fieldInput.classAttr +

              commonFieldsHtml.dataIdAttr +

            '>' +

          'Autre</label>';

        }

      // Fin du conteneur

      fieldHtml += '</div>';

      break;

    case 'list-checkbox':

      fieldHtml =

        // Classe 'and-help'

        '<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' +

          // DataId

          commonFieldsHtml.dataIdAttr +

        '>' +

          '<label>' +

            // Nom du champ

            listFieldsHtml.containerContent +

          '</label>' +

          '<div class="selectBox"' +

            // DataId

            commonFieldsHtml.dataIdAttr +

          '>' +

            '<select' +

              // DataId

              commonFieldsHtml.dataIdAttr +

              // Required

              commonFieldsHtml.fieldInput.mandatoryAttr +

              // Info bulle

              commonFieldsHtml.titleAttr +

            '>' +

              // Apparait dans la barre de sélection

              '<option>Plusieurs choix possibles</option>' +

            '</select>' +

            '<div class="overSelect"></div>' +

          '</div>' +

          '<div class="checkboxes hidden"' +

            // DataId

            commonFieldsHtml.dataIdAttr +

          '>';