Subversion Repositories eFlore/Applications.cel

Rev

Rev 3183 | Rev 3185 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 3183 Rev 3184
1
"use strict";
1
"use strict";
2
 
2
 
3
/*************************************
3
/*************************************
4
 *  Fonctions de Style et Affichage  *
4
 *  Fonctions de Style et Affichage  *
5
 *      des éléments "spéciaux"      *
5
 *      des éléments "spéciaux"      *
6
 *************************************/
6
 *************************************/
7
 
7
 
8
// Logique d'affichage pour le input type=file
8
// Logique d'affichage pour le input type=file
9
function inputFile() {
9
function inputFile() {
10
  // Initialisation des variables
10
  // Initialisation des variables
11
  var $fileInput  = $( '.input-file' ),
11
  var $fileInput  = $( '.input-file' ),
12
      $button     = $( '.label-file' ),
12
      $button     = $( '.label-file' ),
13
      thisId = '';
13
      thisId = '';
14
  // Action lorsque la "barre d'espace" ou "Entrée" est pressée
14
  // Action lorsque la "barre d'espace" ou "Entrée" est pressée
15
  $( '.label-file' ).keydown( function( event ) {
15
  $( '.label-file' ).keydown( function( event ) {
16
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
16
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
17
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
17
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
18
    }
18
    }
19
  });
19
  });
20
  // Action lorsque le label est cliqué
20
  // Action lorsque le label est cliqué
21
  $( '.label-file' ).click( function(event) {
21
  $( '.label-file' ).click( function(event) {
22
    $( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
22
    $( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus();
23
    return false;
23
    return false;
24
  });
24
  });
25
  // Affiche un retour visuel dès que input:file change
25
  // Affiche un retour visuel dès que input:file change
26
  $fileInput.change( function( event ) {
26
  $fileInput.change( function( event ) {
27
    // Il est possible de supprimer un fichier
27
    // Il est possible de supprimer un fichier
28
    // donc on vérifie que le 'change' est un ajout ou modification
28
    // donc on vérifie que le 'change' est un ajout ou modification
29
    if( !$.isEmptyObject( event.target.files[0] ) ) {
29
    if( !$.isEmptyObject( event.target.files[0] ) ) {
30
      var file = event.target.files[0],
30
      var file = event.target.files[0],
31
        $theReturn = $( '.' + $( this ).attr( 'id' ) );
31
        $theReturn = $( '.' + $( this ).attr( 'id' ) );
32
      // Affichage du nom du fichier
32
      // Affichage du nom du fichier
33
      $theReturn.text( file.name );
33
      $theReturn.text( file.name );
34
      // Si le fichier est une image on l'affiche
34
      // Si le fichier est une image on l'affiche
35
      if( file.type.match( 'image' ) ) {
35
      if( file.type.match( 'image' ) ) {
36
        // Chemin temporaire de l'image et affichage
36
        // Chemin temporaire de l'image et affichage
37
        var tmppath = URL.createObjectURL( file );
37
        var tmppath = URL.createObjectURL( file );
38
        $theReturn.removeClass( 'hidden' ).append( '<img src="' + tmppath + '" width="50%">' );
38
        $theReturn.removeClass( 'hidden' ).append( '<img src="' + tmppath + '" width="50%">' );
39
      }
39
      }
40
    }
40
    }
41
  });
41
  });
42
  // Annuler le téléchargement
42
  // Annuler le téléchargement
43
  $( '.remove-file' ).click( function() {
43
  $( '.remove-file' ).click( function() {
44
    var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' );
44
    var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' );
45
    $thisFileInput.wrap( '<form>' ).closest( 'form' ).get(0).reset();
45
    $thisFileInput.wrap( '<form>' ).closest( 'form' ).get(0).reset();
46
    $thisFileInput.triggerHandler( 'change' );
46
    $thisFileInput.triggerHandler( 'change' );
47
    $thisFileInput.unwrap();
47
    $thisFileInput.unwrap();
48
    $( this ).next( '.file-return' ).addClass( 'hidden' ).empty();
48
    $( this ).next( '.file-return' ).addClass( 'hidden' ).empty();
49
  });
49
  });
50
}
50
}
51
 
51
 
52
// Style et affichage des list-checkboxes
52
// Style et affichage des list-checkboxes
53
function inputListCheckbox() {
53
function inputListCheckbox() {
54
  // On écoute le click sur une list-checkbox ('.selectBox')
54
  // On écoute le click sur une list-checkbox ('.selectBox')
55
  // à tout moment de son insertion dans le dom
55
  // à tout moment de son insertion dans le dom
56
  $('#zone-appli').on( 'click' , '.selectBox' , function() {
56
  $('#zone-appli').on( 'click' , '.selectBox' , function() {
57
    $( '.checkboxes[data-id="' + $(this).attr( 'data-id' ) + '"]' ).toggleClass( 'hidden' );
57
    $( '.checkboxes[data-id="' + $(this).attr( 'data-id' ) + '"]' ).toggleClass( 'hidden' );
58
  });
58
  });
59
}
59
}
60
 
60
 
61
// Mettre la première lettre en majuscule, les autres en minuscule
61
// Mettre la première lettre en majuscule, les autres en minuscule
62
function capitalize( string ) {
62
function capitalize( string ) {
63
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
63
  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
64
}
64
}
65
 
65
 
66
/***********************************************************
66
/***********************************************************
67
 *  Fonctions pour la création des champs supplémentaires  *
67
 *  Fonctions pour la création des champs supplémentaires  *
68
 ***********************************************************/
68
 ***********************************************************/
69
 
69
 
70
// Logique globale pour l'ajout de nouveaux champs
70
// Logique globale pour l'ajout de nouveaux champs
71
function onClickAddNewFields( fieldIndex ) {
71
function onClickAddNewFields( fieldIndex ) {
72
  // Bouton ajouter un champ
72
  // Bouton ajouter un champ
73
  $( '#add-fields' ).click( function() {
73
  $( '#add-fields' ).click( function() {
74
    // Affichage du formulaire pour un champ
74
    // Affichage du formulaire pour un champ
75
    displayNewField( fieldIndex );
75
    displayNewField( fieldIndex );
76
    // Affichage du nom du champ
76
    // Affichage du nom du champ
77
    onChangeDisplayFieldLabel( fieldIndex );
77
    onChangeDisplayFieldLabel( fieldIndex );
78
    // Empêcher de créer plus d'une fois la même clé
78
    // Empêcher de créer plus d'une fois la même clé
79
    onChangeCheckKeyUnique();
79
    onChangeCheckKeyUnique();
80
    // Affichage des images/nom des documents importés dans les champs ajoutés
80
    // Affichage des images/nom des documents importés dans les champs ajoutés
81
    inputFile();
81
    inputFile();
82
    // Recueil des informations correspondantes au nouveau champ
82
    // Recueil des informations correspondantes au nouveau champ
83
    onChangeFieldTypeCollectDetails( fieldIndex );
83
    onChangeFieldTypeCollectDetails( fieldIndex );
84
    // Suppression d'un champ
84
    // Suppression d'un champ
85
    onClickRemoveField();
85
    onClickRemoveField();
86
 
86
 
87
    fieldIndex++;
87
    fieldIndex++;
88
  });
88
  });
89
}
89
}
90
 
90
 
91
// Création/affichage du formulaire d'un nouveau champ
91
// Création/affichage du formulaire d'un nouveau champ
92
function displayNewField( fieldIndex ) {
92
function displayNewField( fieldIndex ) {
93
  // Html du formulaire du nouveaux champs inséré dans le dom
93
  // Html du formulaire du nouveaux champs inséré dans le dom
94
  $( '#new-fields' ).append(
94
  $( '#new-fields' ).append(
95
    '<fieldset data-id="' + fieldIndex + '" class="new-field">'+
95
    '<fieldset data-id="' + fieldIndex + '" class="new-field">'+
96
      '<h3>Nouveau champ :<br><strong class="field-title" data-id="' + fieldIndex + '"></strong></h3>'+
96
      '<h3>Nouveau champ :<br><strong class="field-title" data-id="' + fieldIndex + '"></strong></h3>'+
97
      // Nom du champ
97
      // Nom du champ
98
      '<label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>'+
98
      '<label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>'+
99
      '<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name" placeholder="Titre de votre champ" title="Donnez un titre à votre champ" required>'+
99
      '<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name" placeholder="Titre de votre champ" title="Donnez un titre à votre champ" required>'+
100
      // Clé du champ
100
      // Clé du champ
101
      '<label for="field-key" title="Nom du champ dans la base de données">'+
101
      '<label for="field-key" title="Nom du champ dans la base de données">'+
102
        'Clé du champ *'+
102
        'Clé du champ *'+
103
      '</label>'+
103
      '</label>'+
104
      '<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>'+
104
      '<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>'+
105
      '<p class="message">' +
105
      '<p class="message">' +
106
        '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
106
        '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
107
        'Une clé doit être unique<br>' +
107
        'Une clé doit être unique<br>' +
108
        'En camelCase (ecriture chameau)<br>'+
108
        'En camelCase (ecriture chameau)<br>'+
109
        'Pas d\'accents ou de cédille, pas de caractères spéciaux.' +
109
        'Pas d\'accents ou de cédille, pas de caractères spéciaux.' +
110
      '</p>' +
110
      '</p>' +
111
      // Type de champ
111
      // Type de champ
112
      '<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
112
      '<label for="field-element" title="Quel type de champ">Type de champ *</label>'+
113
      '<div class="select-wrapper add-field-select" data-id="' + fieldIndex + '">'+
113
      '<div class="select-wrapper add-field-select" data-id="' + fieldIndex + '">'+
114
        '<select name="field-element" data-id="' + fieldIndex + '" class="field-element">'+
114
        '<select name="field-element" data-id="' + fieldIndex + '" class="field-element">'+
115
          '<option value="text">Champ texte</option>'+
115
          '<option value="text">Champ texte</option>'+
116
          '<option value="email">Champ email</option>'+
116
          '<option value="email">Champ email</option>'+
117
          '<option value="textarea">Champ rédaction</option>'+
117
          '<option value="textarea">Champ rédaction</option>'+
118
          '<option value="select">Menu déroulant</option>'+
118
          '<option value="select">Menu déroulant</option>'+
119
          '<option value="checkbox">Cases à cocher</option>'+
119
          '<option value="checkbox">Cases à cocher</option>'+
120
          '<option value="list-checkbox">Liste de cases à cocher</option>'+
120
          '<option value="list-checkbox">Liste de cases à cocher</option>'+
121
          '<option value="radio">Boutons radio</option>'+
121
          '<option value="radio">Boutons radio</option>'+
122
          '<option value="date">Calendrier</option>'+
122
          '<option value="date">Calendrier</option>'+
123
          '<option value="file">Téléchargement</option>'+
123
          '<option value="file">Téléchargement</option>'+
124
          '<option value="range">Curseur (entre 2 bornes)</option>'+
124
          '<option value="range">Curseur (entre 2 bornes)</option>'+
125
          '<option value="number">Nombre</option>'+
125
          '<option value="number">Nombre</option>'+
126
        '</select>'+
126
        '</select>'+
127
      '</div>'+
127
      '</div>'+
128
      // Checkbox "champ requis"
128
      // Checkbox "champ requis"
129
      '<label for="field-is_mandatory" title="Ce champ est obligatoire">Champ requis ?</label>'+
129
      '<label for="field-is_mandatory" title="Ce champ est obligatoire">Champ requis ?</label>'+
130
      '<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory">'+
130
      '<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory">'+
131
      // Unité des valeurs
131
      // Unité des valeurs
132
      '<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+
132
      '<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+
133
      '<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit" placeholder="symbole de vos unités">'+
133
      '<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit" placeholder="symbole de vos unités">'+
134
      // Tooltip
134
      // Tooltip
135
      '<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+
135
      '<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+
136
      '<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description" placeholder="Quelques mots">'+
136
      '<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description" placeholder="Quelques mots">'+
137
      // Import d'une image ou d'un pdf d'aide à afficher en popup
137
      // Import d'une image ou d'un pdf d'aide à afficher en popup
138
      '<div class="input-file-container">'+
138
      '<div class="input-file-container">'+
139
        '<input type="file" class="input-file field-help" name="field-help" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="application/pdf, image/*, video/*">'+
139
        '<input type="file" class="input-file field-help" name="field-help" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="application/pdf, image/*, video/*">'+
140
        '<label for="field-help" class="label-file"><i class="fas fa-download"></i> Popup aide image/pdf</label>'+
140
        '<label for="field-help" class="label-file"><i class="fas fa-download"></i> Popup aide image/pdf</label>'+
141
      '</div>'+
141
      '</div>'+
142
      '<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>'+
142
      '<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>'+
143
      '<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+
143
      '<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+
144
      // Boutons supprimer
144
      // Boutons supprimer
145
      '<label for="remove-field">Supprimer</label>'+
145
      '<label for="remove-field">Supprimer</label>'+
146
      '<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>'+
146
      '<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>'+
147
    '</fieldset>'
147
    '</fieldset>'
148
  );
148
  );
149
  // Animation de l'affichage
149
  // Animation de l'affichage
150
  $( 'fieldset.new-field[data-id="' + fieldIndex + '"]').hide().show( 200 );
150
  $( 'fieldset.new-field[data-id="' + fieldIndex + '"]').hide().show( 200 );
151
}
151
}
152
 
152
 
153
// Affichage du nom du champ dès qu'il est renseigné
153
// Affichage du nom du champ dès qu'il est renseigné
154
function onChangeDisplayFieldLabel( fieldIndex ) {
154
function onChangeDisplayFieldLabel( fieldIndex ) {
155
  $('.field-name[data-id="' + fieldIndex + '"]').change( function() {
155
  $('.field-name[data-id="' + fieldIndex + '"]').change( function() {
156
    $( '.field-title[data-id="' + fieldIndex + '"]' ).text( $( this ).val() );
156
    $( '.field-title[data-id="' + fieldIndex + '"]' ).text( $( this ).val() );
157
  });
157
  });
158
}
158
}
159
 
159
 
160
// Supprimer un nouveau champ
160
// Supprimer un nouveau champ
161
function onClickRemoveField ( keyFlag , nameFlag ) {
161
function onClickRemoveField ( keyFlag , nameFlag ) {
162
  $( '.remove-field' ).click( function() {
162
  $( '.remove-field' ).click( function() {
163
    $(this).closest('fieldset').hide( 200 , function () {
163
    $(this).closest('fieldset').hide( 200 , function () {
164
      $(this).remove();
164
      $(this).remove();
165
    });
165
    });
166
  });
166
  });
167
}
167
}
168
 
168
 
169
 
169
 
170
/**** Recueil des informations et détails qui dépendent du type de champ choisi ****/
170
/**** Recueil des informations et détails qui dépendent du type de champ choisi ****/
171
 
171
 
172
// Logique de recueil d'informations en fonction du type de champ choisi
172
// Logique de recueil d'informations en fonction du type de champ choisi
173
function onChangeFieldTypeCollectDetails( fieldIndex ) {
173
function onChangeFieldTypeCollectDetails( fieldIndex ) {
174
  // On insère les champs par défaut de recueil d'informations
174
  // On insère les champs par défaut de recueil d'informations
175
  displayFieldDetailsCollect(
175
  displayFieldDetailsCollect(
176
    fieldIndex,
176
    fieldIndex,
177
    // Placeholder (champ type text par défaut)
177
    // Placeholder (champ type text par défaut)
178
    '<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>'+
178
    '<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>'+
179
    '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'
179
    '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'
180
  );
180
  );
181
  // Sinon :
181
  // Sinon :
182
  $( '.field-element[data-id="' + fieldIndex + '"]' ).change( function() {
182
  $( '.field-element[data-id="' + fieldIndex + '"]' ).change( function() {
183
    // On intialise l'index pour les listes la variable qui contiendra un id pour chaque option
183
    // On intialise l'index pour les listes la variable qui contiendra un id pour chaque option
184
    var valueIndex = 0;
184
    var valueIndex = 0;
185
    // Si on hésite on qu'on se trompe dans la liste :
185
    // Si on hésite on qu'on se trompe dans la liste :
186
    // les champs de détails de l'option précédente doivent être supprimés
186
    // les champs de détails de l'option précédente doivent être supprimés
187
    $( '.field-details[data-id="' + fieldIndex + '"]' ).hide( 200 , function () {
187
    $( '.field-details[data-id="' + fieldIndex + '"]' ).hide( 200 , function () {
188
      $(this).remove();
188
      $(this).remove();
189
    });
189
    });
190
 
190
 
191
    // Html de recueil de données en fonction de l'élément choisi
191
    // Html de recueil de données en fonction de l'élément choisi
192
    switch( $( this ).val() ) {
192
    switch( $( this ).val() ) {
193
      case 'file':
193
      case 'file':
194
        break;
194
        break;
195
 
195
 
196
      case 'number':
196
      case 'number':
197
      case 'range':
197
      case 'range':
198
        displayFieldDetailsCollect(
198
        displayFieldDetailsCollect(
199
          fieldIndex,
199
          fieldIndex,
200
          '<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>' +
200
          '<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>' +
201
          // Placeholder
201
          // Placeholder
202
          '<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>'+
202
          '<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>'+
203
          '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'+
203
          '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'+
204
          // Valeur par défaut
204
          // Valeur par défaut
205
          '<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+
205
          '<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+
206
          '<input type="number" name="default" data-id="' + fieldIndex + '" class="default" step="0.01">'+
206
          '<input type="number" name="default" data-id="' + fieldIndex + '" class="default" step="0.01">'+
207
          // Incrémentation ( attribut step="" )
207
          // Incrémentation ( attribut step="" )
208
          '<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step) :<br>defaut = +1</label>'+
208
          '<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step) :<br>defaut = +1</label>'+
209
          '<input type="number" name="step" data-id="' + fieldIndex + '" class="step" step="0.01" value="1">'+
209
          '<input type="number" name="step" data-id="' + fieldIndex + '" class="step" step="0.01" value="1">'+
210
          // Min
210
          // Min
211
          '<label for="min" title="valeur min">Valeur minimale</label>'+
211
          '<label for="min" title="valeur min">Valeur minimale</label>'+
212
          '<input type="number" name="min" data-id="' + fieldIndex + '" class="min" step="0.01" value="0">'+
212
          '<input type="number" name="min" data-id="' + fieldIndex + '" class="min" step="0.01" value="0">'+
213
          // Max
213
          // Max
214
          '<label for="max" title="valeur max">Valeur maximale</label>'+
214
          '<label for="max" title="valeur max">Valeur maximale</label>'+
215
          '<input type="number" name="max" data-id="' + fieldIndex + '" class="max" step="0.01" value="1">'
215
          '<input type="number" name="max" data-id="' + fieldIndex + '" class="max" step="0.01" value="1">'
216
        );
216
        );
217
        break;
217
        break;
218
 
218
 
219
      case 'date':
219
      case 'date':
220
        displayFieldDetailsCollect(
220
        displayFieldDetailsCollect(
221
          fieldIndex,
221
          fieldIndex,
222
          // Date min
222
          // Date min
223
          '<label for="min" title="date min">Date minimale</label>'+
223
          '<label for="min" title="date min">Date minimale</label>'+
224
          '<input type="date" name="min" data-id="' + fieldIndex + '" class="min">'+
224
          '<input type="date" name="min" data-id="' + fieldIndex + '" class="min">'+
225
          // Date max
225
          // Date max
226
          '<label for="max" title="date max">Date maximale</label>'+
226
          '<label for="max" title="date max">Date maximale</label>'+
227
          '<input type="date" name="max" data-id="' + fieldIndex + '" class="max">'
227
          '<input type="date" name="max" data-id="' + fieldIndex + '" class="max">'
228
        );
228
        );
229
        break;
229
        break;
230
 
230
 
231
      case 'select':
231
      case 'select':
232
      case 'checkbox':
232
      case 'checkbox':
233
      case 'list-checkbox':
233
      case 'list-checkbox':
234
      case 'radio':
234
      case 'radio':
235
        displayFieldDetailsCollect(
235
        displayFieldDetailsCollect(
236
          fieldIndex,
236
          fieldIndex,
237
          '<p class="message">Ajoutez les valeurs de \"' + $( this ).children( 'option:selected' ).text() + '\"</p>'+
237
          '<p class="message">Ajoutez les valeurs de \"' + $( this ).children( 'option:selected' ).text() + '\"</p>'+
238
          // Bouton ajout d'une valeur à la liste
238
          // Bouton ajout d'une valeur à la liste
239
          '<label for="add-value" class="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+
239
          '<label for="add-value" class="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+
240
          '<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>'+
240
          '<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>'+
241
          // checkbox ajouter une valeur "Autre:"
241
          // checkbox ajouter une valeur "Autre:"
242
          '<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+
242
          '<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+
243
          '<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'
243
          '<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'
244
        );
244
        );
245
        break;
245
        break;
246
 
246
 
247
      case 'email':
247
      case 'email':
248
      case 'text':
248
      case 'text':
249
      case 'textarea':
249
      case 'textarea':
250
      default:
250
      default:
251
        displayFieldDetailsCollect(
251
        displayFieldDetailsCollect(
252
          fieldIndex,
252
          fieldIndex,
253
        // Placeholder
253
        // Placeholder
254
        '<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>'+
254
        '<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>'+
255
        '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'
255
        '<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie" placeholder="Ce que doit contenir le champ">'
256
      );
256
      );
257
        break;
257
        break;
258
    }
258
    }
259
    // Ajout des valeurs possibles
259
    // Ajout des valeurs possibles
260
    // lorsque le champ est une liste ou case à cocher
260
    // lorsque le champ est une liste ou case à cocher
261
    onClickAddNewValueToList( fieldIndex , valueIndex );
261
    onClickAddNewValueToList( fieldIndex , valueIndex );
262
  });
262
  });
263
}
263
}
264
 
264
 
265
// Insertion dans le dom des champs de recueil d'informations
265
// Insertion dans le dom des champs de recueil d'informations
266
function displayFieldDetailsCollect( fieldIndex , fieldDetails ) {
266
function displayFieldDetailsCollect( fieldIndex , fieldDetails ) {
267
  $( '.add-field-select[data-id="' + fieldIndex + '"]' ).after(
267
  $( '.add-field-select[data-id="' + fieldIndex + '"]' ).after(
268
    '<div class="field-details" data-id="' + fieldIndex + '">' +
268
    '<div class="field-details" data-id="' + fieldIndex + '">' +
269
      fieldDetails +
269
      fieldDetails +
270
    '</div>'
270
    '</div>'
271
  ).hide().show( 200);
271
  ).hide().show( 200);
272
}
272
}
273
 
273
 
274
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
274
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
275
 
275
 
276
// Ajout des options des listes (deroulantes, cases à cocher etc.)
276
// Ajout des options des listes (deroulantes, cases à cocher etc.)
277
function onClickAddNewValueToList( fieldIndex , valueIndex ) {
277
function onClickAddNewValueToList( fieldIndex , valueIndex ) {
278
  $( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() {
278
  $( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() {
279
    $( '.add-value[data-id="' + fieldIndex + '"]' ).before(
279
    $( '.add-value[data-id="' + fieldIndex + '"]' ).before(
280
      '<div class="new-value" data-list-value-id="' + valueIndex +'">'+
280
      '<div class="new-value" data-list-value-id="' + valueIndex +'">'+
281
        // Recueil d'une valeur de la liste
281
        // Recueil d'une valeur de la liste
282
        '<label for="list-value">Valeur  *:</label>'+
282
        '<label for="list-value">Valeur  *:</label>'+
283
        '<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>'+
283
        '<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>'+
284
        // Checkbox valeur par défaut+bouton supprimer
284
        // Checkbox valeur par défaut+bouton supprimer
285
        '<div class="row">'+
285
        '<div class="row">'+
286
          '<div class="col-md-5">'+
286
          '<div class="col-md-5">'+
287
            // Valeur par défaut
287
            // Valeur par défaut
288
            '<label for="is-defaut-value" title="Ceci est la valeur par défaut">Valeur par défaut</label>'+
288
            '<label for="is-defaut-value" title="Ceci est la valeur par défaut">Valeur par défaut</label>'+
289
            '<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 >'+
289
            '<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 >'+
290
          '</div>'+
290
          '</div>'+
291
          '<div class="col-md-5">'+
291
          '<div class="col-md-5">'+
292
            // Bouton supprimer une option
292
            // Bouton supprimer une option
293
            '<label for="remove-value">supprimer valeur</label>'+
293
            '<label for="remove-value">supprimer valeur</label>'+
294
            '<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>'+
294
            '<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>'+
295
          '</div>'+
295
          '</div>'+
296
        '</div>'+
296
        '</div>'+
297
      '</div>'
297
      '</div>'
298
    ).hide().show( 200);
298
    ).hide().show( 200);
299
    // Activer la checkbox de valeur par default uniquement si une valeur est entrée
299
    // Activer la checkbox de valeur par default uniquement si une valeur est entrée
300
    onInputListValueLabelEnableDefaultCheckbox( valueIndex );
300
    onInputListValueLabelEnableDefaultCheckbox( valueIndex );
301
    // Une seule valeur par défaut pour select et radio
301
    // Une seule valeur par défaut pour select et radio
302
    onClickDefaultValueRemoveOthers( fieldIndex );
302
    onClickDefaultValueRemoveOthers( fieldIndex );
303
    // Supprimer une valeur
303
    // Supprimer une valeur
304
    onClickRemoveListValue( fieldIndex );
304
    onClickRemoveListValue( fieldIndex );
305
 
305
 
306
    valueIndex++;
306
    valueIndex++;
307
  });
307
  });
308
}
308
}
309
 
309
 
310
// Activer la checkbox de valeur par default uniquement si une valeur est entrée
310
// Activer la checkbox de valeur par default uniquement si une valeur est entrée
311
function onInputListValueLabelEnableDefaultCheckbox( valueIndex ) {
311
function onInputListValueLabelEnableDefaultCheckbox( valueIndex ) {
312
  $( '.new-value[data-list-value-id="' + valueIndex + '"] .list-value' ).on( 'input' , function() {
312
  $( '.new-value[data-list-value-id="' + valueIndex + '"] .list-value' ).on( 'input' , function() {
313
    if( $(this).val() !== '' ) {
313
    if( $(this).val() !== '' ) {
314
      $( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).removeAttr( 'disabled');
314
      $( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).removeAttr( 'disabled');
315
    } else {
315
    } else {
316
      $( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).attr( 'disabled', true ).removeAttr( 'checked' );
316
      $( '.is-defaut-value[data-list-value-id="' + valueIndex + '"]' ).attr( 'disabled', true ).removeAttr( 'checked' );
317
    }
317
    }
318
  });
318
  });
319
}
319
}
320
 
320
 
321
// Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée
321
// Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée
322
function onClickDefaultValueRemoveOthers( fieldIndex ) {
322
function onClickDefaultValueRemoveOthers( fieldIndex ) {
323
  var selectedFieldElement = $( '.field-element[data-id="' + fieldIndex + '"]' ).val();
323
  var selectedFieldElement = $( '.field-element[data-id="' + fieldIndex + '"]' ).val();
324
 
324
 
325
  if( selectedFieldElement === 'select' || selectedFieldElement === 'radio' ) {
325
  if( selectedFieldElement === 'select' || selectedFieldElement === 'radio' ) {
326
    $( '.is-defaut-value[data-id="' + fieldIndex + '"]' ).click( function() {
326
    $( '.is-defaut-value[data-id="' + fieldIndex + '"]' ).click( function() {
327
     if( $( this ).attr( 'checked' ) ) {
327
     if( $( this ).attr( 'checked' ) ) {
328
        // Décocher tous les autres
328
        // Décocher tous les autres
329
        $( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).removeAttr( 'checked' );
329
        $( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).removeAttr( 'checked' );
330
      }
330
      }
331
    });
331
    });
332
  }
332
  }
333
}
333
}
334
 
334
 
335
// Bouton supprimer une valeur
335
// Bouton supprimer une valeur
336
function onClickRemoveListValue( fieldIndex ) {
336
function onClickRemoveListValue( fieldIndex ) {
337
  $( '.remove-value.button[data-id="' + fieldIndex + '"]' ).click( function() {
337
  $( '.remove-value.button[data-id="' + fieldIndex + '"]' ).click( function() {
338
    $( '.new-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' ).hide( 200 , function () {
338
    $( '.new-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' ).hide( 200 , function () {
339
      $(this).remove();
339
      $(this).remove();
340
    });
340
    });
341
  });
341
  });
342
}
342
}
343
 
343
 
344
/*********************************************
344
/*********************************************
345
 *  Validation et envoi des nouveaux champs  *
345
 *  Validation et envoi des nouveaux champs  *
346
 *********************************************/
346
 *********************************************/
347
 
347
 
348
// Empêcher de créer plus d'une fois la même clé
348
// Empêcher de créer plus d'une fois la même clé
349
function onChangeCheckKeyUnique() {
349
function onChangeCheckKeyUnique() {
350
 if( 1 < $( '.field-key' ).length ) {
350
 if( 1 < $( '.field-key' ).length ) {
351
    // Marqueur de valeur dupliquée
351
    // Marqueur de valeur dupliquée
352
    var notUnique = false;
352
    var notUnique = false;
353
 
353
 
354
    $( '.field-key' ).change( function () {
354
    $( '.field-key' ).change( function () {
355
      let count = $( '.field-key' ).length;
355
      let count = $( '.field-key' ).length;
356
 
356
 
357
      for(var index = 0 ; index < count ; index++) {
357
      for(var index = 0 ; index < count ; index++) {
358
        let thisFieldKey = $( '.field-key[data-id="' + index + '"]' );
358
        let thisFieldKey = $( '.field-key[data-id="' + index + '"]' );
359
        // Le champ avec cet index paourrait avoir été supprimé
359
        // Le champ avec cet index paourrait avoir été supprimé
360
        if( 0 < thisFieldKey.length ) {
360
        if( 0 < thisFieldKey.length ) {
361
          for( var otherIndex = 0 ; otherIndex < count ; otherIndex++ ) {
361
          for( var otherIndex = 0 ; otherIndex < count ; otherIndex++ ) {
362
            let otherFieldKey = $( '.field-key[data-id="' + otherIndex + '"]' );
362
            let otherFieldKey = $( '.field-key[data-id="' + otherIndex + '"]' );
363
            // Le champ avec cet index pourrait avoir été supprimé
363
            // Le champ avec cet index pourrait avoir été supprimé
364
            // On vérifie qu'on ne compare pas un champ avec lui-même
364
            // On vérifie qu'on ne compare pas un champ avec lui-même
365
            // Que les champs ne sont pas vides
365
            // Que les champs ne sont pas vides
366
            // Les champs dupliqués déclanchent le marqueur et les alertes
366
            // Les champs dupliqués déclanchent le marqueur et les alertes
367
            if(
367
            if(
368
              0 < otherFieldKey.length &&
368
              0 < otherFieldKey.length &&
369
              index !== otherIndex &&
369
              index !== otherIndex &&
370
              '' !== otherFieldKey.val() &&
370
              '' !== otherFieldKey.val() &&
371
              '' !== thisFieldKey.val() &&
371
              '' !== thisFieldKey.val() &&
372
              thisFieldKey.val() === otherFieldKey.val()
372
              thisFieldKey.val() === otherFieldKey.val()
373
            ) {
373
            ) {
374
              // Le marqueur de valeur dupliquée passe à true
374
              // Le marqueur de valeur dupliquée passe à true
375
              notUnique = true;
375
              notUnique = true;
376
              if( 0 === $( '.invalid-field-key[data-id="' + index + '"]' ).length ) {
376
              if( 0 === $( '.invalid-field-key[data-id="' + index + '"]' ).length ) {
377
                // Le champ est signalé en rouge
377
                // Le champ est signalé en rouge
378
                // Un message d'alerte apparait sous le champ
378
                // Un message d'alerte apparait sous le champ
379
                thisFieldKey.addClass( 'invalid' );
379
                thisFieldKey.addClass( 'invalid' );
380
                thisFieldKey.after(
380
                thisFieldKey.after(
381
                  '<p class="message invalid-field-key" data-id="' + index + '">' +
381
                  '<p class="message invalid-field-key" data-id="' + index + '">' +
382
                    '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
382
                    '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
383
                    ' Vérifiez qu\'aucune clé n\'ait été utilisée plus d\'une fois'  +
383
                    ' Vérifiez qu\'aucune clé n\'ait été utilisée plus d\'une fois'  +
384
                  '</p>'
384
                  '</p>'
385
                );
385
                );
386
              }
386
              }
387
            }
387
            }
388
          }
388
          }
389
        }
389
        }
390
      }
390
      }
391
      if( notUnique ) {
391
      if( notUnique ) {
392
        // Un message d'alerte apparait au dessus des boutons prévisualiser/valider
392
        // Un message d'alerte apparait au dessus des boutons prévisualiser/valider
393
        if( 0 === $( '.invalid-field-key-bottom' ).length ) {
393
        if( 0 === $( '.invalid-field-key-bottom' ).length ) {
394
          $( '#new-fields' ).after(
394
          $( '#new-fields' ).after(
395
            '<p class="message invalid-field-key-bottom">' +
395
            '<p class="message invalid-field-key-bottom">' +
396
              '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
396
              '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
397
              ' Une clé a été utilisée plusieurs fois' +
397
              ' Une clé a été utilisée plusieurs fois' +
398
            '</p>'
398
            '</p>'
399
          );
399
          );
400
        }
400
        }
401
        // Les boutons prévisualiser/valider sont désactivés et signalés en rouge
401
        // Les boutons prévisualiser/valider sont désactivés et signalés en rouge
402
        $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' ).css( 'pointer-events', 'none' );
402
        $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' ).css( 'pointer-events', 'none' );
403
      } else {// Si on est ok on retire toutes les alertes
403
      } else {// Si on est ok on retire toutes les alertes
404
        // signalements rouges
404
        // signalements rouges
405
        $( '.field-key' ).each( function() {
405
        $( '.field-key' ).each( function() {
406
          $( this ).removeClass( 'invalid' );
406
          $( this ).removeClass( 'invalid' );
407
        });
407
        });
408
        $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
408
        $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
409
        // messages d'alerte
409
        // messages d'alerte
410
        $( '.invalid-field-key' ).each( function() {
410
        $( '.invalid-field-key' ).each( function() {
411
          $( this ).hide( 200 , function () {
411
          $( this ).hide( 200 , function () {
412
            $( this ).remove();
412
            $( this ).remove();
413
          });
413
          });
414
        });
414
        });
415
        $( '.invalid-field-key-bottom' ).hide( 200 , function () {
415
        $( '.invalid-field-key-bottom' ).hide( 200 , function () {
416
          $( this ).remove();
416
          $( this ).remove();
417
        });
417
        });
418
        //réactivation des boutons prévisualiser/valider
418
        //réactivation des boutons prévisualiser/valider
419
        $( '#preview-field' )[0].style.removeProperty( 'pointer-events' );
419
        $( '#preview-field' )[0].style.removeProperty( 'pointer-events' );
420
        $( '#validate-new-fields' )[0].style.removeProperty( 'pointer-events' )
420
        $( '#validate-new-fields' )[0].style.removeProperty( 'pointer-events' )
421
      }
421
      }
422
      // Réinitialisation
422
      // Réinitialisation
423
      notUnique = false;
423
      notUnique = false;
424
    });
424
    });
425
  }
425
  }
426
}
426
}
427
 
427
 
428
//Activation/Désactivation des boutons valider/prévisualiser
428
//Activation/Désactivation des boutons valider/prévisualiser
429
function activatePreviewAndValidateButtons() {
429
function activatePreviewAndValidateButtons() {
430
  var invalidElementInfos = false, // true si aucune option n'a été entrée pour un élément de liste (select, radio, etc.)
430
  var invalidElementInfos = false, // true si aucune option n'a été entrée pour un élément de liste (select, radio, etc.)
431
      invalidTextInfos    = false; // true si au moins un input required n'est pas renseigné
431
      invalidTextInfos    = false; // true si au moins un input required n'est pas renseigné
432
  // Clique sur le bouton prévisualiser ou valider
432
  // Clique sur le bouton prévisualiser ou valider
433
  $('#preview-field , #validate-new-fields').on( 'click' , function() {
433
  $('#preview-field , #validate-new-fields').on( 'click' , function() {
434
    // S'il n'y a pas (plus) de bloc nouveau champ
434
    // S'il n'y a pas (plus) de bloc nouveau champ
435
    if( 0 === $( 'fieldset' ).length ) {
435
    if( 0 === $( 'fieldset' ).length ) {
436
      return;
436
      return;
437
    }
437
    }
438
    var count = $( 'fieldset' ).last().attr('data-id');
438
    var count = $( 'fieldset' ).last().attr('data-id');
439
    // si on a déjà des avertissements on les supprime
439
    // si on a déjà des avertissements on les supprime
440
    if( 0 < $( '.validation-warning' ).length ) {
440
    if( 0 < $( '.validation-warning' ).length ) {
441
      // Supprimer les messages
441
      // Supprimer les messages
442
      $( '.validation-warning' ).each( function() {
442
      $( '.validation-warning' ).each( function() {
443
        $( this ).hide( 200 , function () {
443
        $( this ).hide( 200 , function () {
444
          $( this ).remove();
444
          $( this ).remove();
445
        });
445
        });
446
      });
446
      });
447
      // Supprimer les bordures en rouge vif
447
      // Supprimer les bordures en rouge vif
448
      $('.add-value-button , input[required]' ).each( function() {
448
      $('.add-value-button , input[required]' ).each( function() {
449
        $( this ).removeClass( 'invalid' );
449
        $( this ).removeClass( 'invalid' );
450
      });
450
      });
451
    }
451
    }
452
    // Parcourir tous les blocs d'infos de champs supplémentaires
452
    // Parcourir tous les blocs d'infos de champs supplémentaires
453
    for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
453
    for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
454
      var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
454
      var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
455
      // Certains indices peuvent correspondre à un champ supprimé
455
      // Certains indices peuvent correspondre à un champ supprimé
456
      if( 0 < $( thisFieldset ).length ) {
456
      if( 0 < $( thisFieldset ).length ) {
457
        var $fieldElement    = $( '.field-element' , thisFieldset ),
457
        var $fieldElement    = $( '.field-element' , thisFieldset ),
458
            fieldElementVal  = $fieldElement.val(),
458
            fieldElementVal  = $fieldElement.val(),
459
            isList           = ( // true si c'est un élément "liste"
459
            isList           = ( // true si c'est un élément "liste"
460
              fieldElementVal === 'list-checkbox' ||
460
              fieldElementVal === 'list-checkbox' ||
461
              fieldElementVal === 'checkbox'      ||
461
              fieldElementVal === 'checkbox'      ||
462
              fieldElementVal === 'radio'         ||
462
              fieldElementVal === 'radio'         ||
463
              fieldElementVal === 'select'
463
              fieldElementVal === 'select'
464
            );
464
            );
465
        // Si aucune option n'a été créée pour un élément "liste"
465
        // Si aucune option n'a été créée pour un élément "liste"
466
        if( isList && 0 === $( '.list-value' , thisFieldset ).length ) {
466
        if( isList && 0 === $( '.list-value' , thisFieldset ).length ) {
467
          invalidElementInfos = true;
467
          invalidElementInfos = true;
468
          // Le bouton "Ajouter une valeur" est signalé en rouge
468
          // Le bouton "Ajouter une valeur" est signalé en rouge
469
          $( '.add-value-button' , thisFieldset ).addClass( 'invalid' );
469
          $( '.add-value-button' , thisFieldset ).addClass( 'invalid' );
470
        }
470
        }
471
      }
471
      }
472
    }
472
    }
473
    // Si au moins un champ "required" n'est pas rempli
473
    // Si au moins un champ "required" n'est pas rempli
474
    $( 'input[required]' , thisFieldset ).each( function() {
474
    $( 'input[required]' , thisFieldset ).each( function() {
475
      if( 0 === $( this ).val().length ) {
475
      if( 0 === $( this ).val().length ) {
476
        invalidTextInfos = true;
476
        invalidTextInfos = true;
477
        // Le champ est signalé en rouge
477
        // Le champ est signalé en rouge
478
        $( this ).addClass( 'invalid' );
478
        $( this ).addClass( 'invalid' );
479
      }
479
      }
480
    });
480
    });
481
    // Si la saisie est invalide
481
    // Si la saisie est invalide
482
    if( invalidElementInfos ||  invalidTextInfos ) {
482
    if( invalidElementInfos ||  invalidTextInfos ) {
483
      // Désactivation des boutons valider et prévisualiser
483
      // Désactivation des boutons valider et prévisualiser
484
      $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' );
484
      $( '#preview-field , #validate-new-fields' ).addClass( 'invalid' );
485
      // Message pour les options des "listes"
485
      // Message pour les options des "listes"
486
      if( invalidElementInfos ) {
486
      if( invalidElementInfos ) {
487
        $( '#new-fields' ).after(
487
        $( '#new-fields' ).after(
488
          '<p class="validation-warning message">' +
488
          '<p class="validation-warning message">' +
489
            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
489
            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
490
             '&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:' +
490
             '&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:' +
491
             ' il faut au moins une valeur pour les éléments "menu déroulant", "boutons radio", "cases à cocher" ou "liste de cases à cocher", ' +
491
             ' il faut au moins une valeur pour les éléments "menu déroulant", "boutons radio", "cases à cocher" ou "liste de cases à cocher", ' +
492
          '</p>'
492
          '</p>'
493
        );
493
        );
494
      }
494
      }
495
      // Message pour les champs
495
      // Message pour les champs
496
      if( invalidTextInfos ) {
496
      if( invalidTextInfos ) {
497
        $( '#new-fields' ).after(
497
        $( '#new-fields' ).after(
498
          '<p class="validation-warning message">' +
498
          '<p class="validation-warning message">' +
499
            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
499
            '<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' +
500
             '&nbsp;Des informations sont manquantes pour certains champs,' +
500
             '&nbsp;Des informations sont manquantes pour certains champs,' +
501
             ' vérifiez ceux signalés en rouge' +
501
             ' vérifiez ceux signalés en rouge' +
502
          '</p>'
502
          '</p>'
503
        );
503
        );
504
      }
504
      }
505
    } else {
505
    } else {
506
      $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
506
      $( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' );
507
      if( $( this ).is( '#validate-new-fields') ) {
507
      if( $( this ).is( '#validate-new-fields') ) {
508
        // Lancement de l'enregistrement des valeurs à transmettre
508
        // Lancement de l'enregistrement des valeurs à transmettre
509
        onClickStoreNewFields();
509
        onClickStoreNewFields();
510
      } else if( $( this ).is( '#preview-field') ) {
510
      } else if( $( this ).is( '#preview-field') ) {
511
        // Lancement de la prévisualisation
511
        // Lancement de la prévisualisation
512
        newFieldsPreview();
512
        newFieldsPreview();
513
      }
513
      }
514
    }
514
    }
515
    // Réinitialisation des drapeaux de saisie invalide
515
    // Réinitialisation des drapeaux de saisie invalide
516
    invalidElementInfos = false;
516
    invalidElementInfos = false;
517
    invalidTextInfos    = false;
517
    invalidTextInfos    = false;
518
  });
518
  });
519
}
519
}
520
 
520
 
521
// Enregistrement des valeurs à transmettre
521
// Enregistrement des valeurs à transmettre
522
function onClickStoreNewFields() {
522
function onClickStoreNewFields() {
523
  // Lorsqu'on valide
523
  // Lorsqu'on valide
524
  var resultArrayIndex = 0;
524
  var resultArrayIndex = 0;
525
  var count = $( 'fieldset' ).last().attr('data-id');
525
  var count = $( 'fieldset' ).last().attr('data-id');
526
  var helpFileExists = false;
526
  var helpFileExists = false;
527
 
527
 
528
  // Savoir si au moins un fichier "aide" est enregistré
528
  // Savoir si au moins un fichier "aide" est enregistré
529
  $( '.field-help' ).each( function () {
529
  $( '.field-help' ).each( function () {
530
    if( '' !== $( this ).val() ){
530
    if( '' !== $( this ).val() ){
531
      helpFileExists = true;
531
      helpFileExists = true;
532
    }
532
    }
533
  })
533
  })
534
  // dans ce cas intégrer dans le formulaire à soumettre un bloc
534
  // dans ce cas intégrer dans le formulaire à soumettre un bloc
535
  // qui contiendra une copie de chacun de ces input[type="file"]
535
  // qui contiendra une copie de chacun de ces input[type="file"]
536
  if( helpFileExists ){
536
  if( helpFileExists ){
537
    $('#submit-button').before( '<div id="help-doc-submit" class="hidden"></div>' );
537
    $('#submit-button').before( '<div id="help-doc-submit" class="hidden"></div>' );
538
  }
538
  }
539
 
539
 
540
  // On déroule les blocs de champs supplémentaires
540
  // On déroule les blocs de champs supplémentaires
541
  for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
541
  for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
542
    var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
542
    var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
543
    // Certains indices peuvent correspondre à un champ supprimé
543
    // Certains indices peuvent correspondre à un champ supprimé
544
    if( 0 < $( thisFieldset ).length ) {
544
    if( 0 < $( thisFieldset ).length ) {
545
      // initialisation du tableau de résultats
545
      // initialisation du tableau de résultats
546
      datasToSubmit[ resultArrayIndex ] = { fieldValues:{} };
546
      datasToSubmit[ resultArrayIndex ] = { fieldValues:{} };
547
      // Ajout de la clé au tableau de resultats
547
      // Ajout de la clé au tableau de resultats
548
      datasToSubmit[ resultArrayIndex ].key = $( '.field-key' , thisFieldset ).val();
548
      datasToSubmit[ resultArrayIndex ].key = $( '.field-key' , thisFieldset ).val();
549
      // Ajout de le nom au tableau de resultats
549
      // Ajout de le nom au tableau de resultats
550
      datasToSubmit[ resultArrayIndex ].name = $( '.field-name' , thisFieldset ).val();
550
      datasToSubmit[ resultArrayIndex ].name = $( '.field-name' , thisFieldset ).val();
551
      // Recueil de l'élément choisi pour le tableau de resultats
551
      // Recueil de l'élément choisi pour le tableau de resultats
552
      datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val();
552
      datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val();
553
      // Ajout de la valeur 'requis' ou non au tableau de resultats
553
      // Ajout de la valeur 'requis' ou non au tableau de resultats
554
      datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
554
      datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
555
      // Ajout de l'unité au tableau de resultats
555
      // Ajout de l'unité au tableau de resultats
556
      datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null;
556
      datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null;
557
      // Ajout du tooltip au tableau de resultats
557
      // Ajout du tooltip au tableau de resultats
558
      datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null;
558
      datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null;
559
      // Ajout du nom du document d'aide au tableau de resultats
559
      // Ajout du nom du document d'aide au tableau de resultats
560
      datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text() || null;
560
      datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text() || null;
561
      // Collecte les des données dépendantes de l'élément choisi
561
      // Collecte les des données dépendantes de l'élément choisi
562
      // sous forme d'un tableau de resultats
562
      // sous forme d'un tableau de resultats
563
      onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset );
563
      onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset );
564
      if( $.isEmptyObject(datasToSubmit[ resultArrayIndex ].fieldValues) ){
564
      if( $.isEmptyObject(datasToSubmit[ resultArrayIndex ].fieldValues) ){
565
        delete datasToSubmit[ resultArrayIndex ].fieldValues;
565
        delete datasToSubmit[ resultArrayIndex ].fieldValues;
566
      }
566
      }
567
 
-
 
568
      // Copie d'un champ de fichier d'aide dans le bloc d'envoi
567
      // Copie d'un champ de fichier d'aide dans le bloc d'envoi
569
      if( '' !== $( '.field-help' , thisFieldset ).val() ) {
568
      if( '' !== $( '.field-help' , thisFieldset ).val() ) {
570
        $( '.field-help' , thisFieldset ).clone()
569
        $( '.field-help' , thisFieldset ).clone()
571
          .attr( 'id' , datasToSubmit[ resultArrayIndex ].key )// l'id prend la valeur de la clé
570
          .attr( 'id' , datasToSubmit[ resultArrayIndex ].key )// l'id prend la valeur de la clé
572
          .css( 'position' , 'static' )// Retrouver facilement le bloc dans la page
571
          .css( 'position' , 'static' )// Retrouver facilement le bloc dans la page
573
          .appendTo( '#help-doc-submit' );
572
          .appendTo( '#help-doc-submit' );
574
      }
573
      }
575
 
-
 
576
      resultArrayIndex++;
574
      resultArrayIndex++;
577
    }
575
    }
578
  }
576
  }
579
  var resultsArrayJson = JSON.stringify( datasToSubmit );
577
  var resultsArrayJson = JSON.stringify( datasToSubmit );
580
 
-
 
581
  console.log(resultsArrayJson);
-
 
582
  // console.log(datasToSubmit);
-
 
583
  // Désactivation de tous les champs et boutons (nouveaux champs)
578
  // Désactivation de tous les champs et boutons (nouveaux champs)
584
  $( '#new-fields, #new-fields .button , #add-fields , #preview-field' ).addClass( 'disabled' );
579
  $( '#new-fields, #new-fields .button , #add-fields , #preview-field' ).addClass( 'disabled' );
585
  $( '#validate-new-fields' ).addClass( 'validated' );
580
  $( '#validate-new-fields' ).addClass( 'validated' );
586
  $( '.validate-new-fields' ).text( 'Champs validés' );
581
  $( '.validate-new-fields' ).text( 'Champs validés' );
587
  // Mise à disposition des données pour le bouron submit
582
  // Mise à disposition des données pour le bouron submit
588
  $('#submit-button').before(
583
  $('#submit-button').before(
589
    '<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>'
584
    '<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>'
590
  );
585
  );
591
}
586
}
592
 
587
 
593
// Renseigne le tableau de resultat
588
// Renseigne le tableau de resultat
594
// pour les données dépendant de l'élément choisi
589
// pour les données dépendant de l'élément choisi
595
function onSelectCollectDataValuesToSubmit( datasToSubmitObject , thisFieldset ) {
590
function onSelectCollectDataValuesToSubmit( datasToSubmitObject , thisFieldset ) {
596
    switch( datasToSubmitObject.element ) {
591
    switch( datasToSubmitObject.element ) {
597
      // case 'file' :
592
      // case 'file' :
598
      // Rien à faire, pas de détails à transmettre
593
      // Rien à faire, pas de détails à transmettre
599
      case 'select':
594
      case 'select':
600
      case 'checkbox':
595
      case 'checkbox':
601
      case 'list-checkbox':
596
      case 'list-checkbox':
602
      case 'radio':
597
      case 'radio':
603
        datasToSubmitObject.fieldValues.listValue = [];
598
        datasToSubmitObject.fieldValues.listValue = [];
604
        // Ajout des valeurs de liste
599
        // Ajout des valeurs de liste
605
        onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset );
600
        onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset );
606
        // S'il y a une valeur 'autre' on l'indique à la fin de la liste
601
        // S'il y a une valeur 'autre' on l'indique à la fin de la liste
607
        if( $('.option-other-value' , thisFieldset ).attr( 'checked' ) && datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) === -1 ) {
602
        if( $('.option-other-value' , thisFieldset ).attr( 'checked' ) && datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) === -1 ) {
608
          datasToSubmitObject.fieldValues.listValue.push( 'other' );
603
          datasToSubmitObject.fieldValues.listValue.push( 'other' );
609
        }
604
        }
610
        break;
605
        break;
611
 
606
 
612
      case 'number':
607
      case 'number':
613
      case 'range':
608
      case 'range':
614
        // Placeholder
609
        // Placeholder
615
        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
610
        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
616
        // Valeur par défaut
611
        // Valeur par défaut
617
        datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null;
612
        datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null;
618
        // Incrémentation ( attribut step="" )
613
        // Incrémentation ( attribut step="" )
619
         datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null;
614
         datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null;
620
        // Min
615
        // Min
621
        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
616
        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
622
        // Max
617
        // Max
623
        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
618
        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
624
        break;
619
        break;
625
 
620
 
626
      case 'date':
621
      case 'date':
627
        // Min
622
        // Min
628
        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
623
        datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null;
629
        // Max
624
        // Max
630
        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
625
        datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null;
631
        break;
626
        break;
632
 
627
 
633
      case 'email':
628
      case 'email':
634
      case 'text':
629
      case 'text':
635
      case 'textarea':
630
      case 'textarea':
636
      default:
631
      default:
637
        // Placeholder
632
        // Placeholder
638
        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
633
        datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null;
639
        break;
634
        break;
640
    }
635
    }
641
    return datasToSubmitObject;
636
    return datasToSubmitObject;
642
}
637
}
643
 
638
 
644
// Ajout d'une valeur d'un élément liste (select, checkbox etc.)
639
// Ajout d'une valeur d'un élément liste (select, checkbox etc.)
645
// dans le tableau de resultats
640
// dans le tableau de resultats
646
function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {
641
function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) {
647
  $( '.list-value' , thisFieldset ).each( function() {
642
  $( '.list-value' , thisFieldset ).each( function() {
648
    var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
643
    var selectedFieldElement = $( '.field-element' , thisFieldset ).val();
649
 
644
 
650
     if( $( this ).val() ){
645
     if( $( this ).val() ){
651
      // Is-default-value non cochée
646
      // Is-default-value non cochée
652
      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' , thisFieldset ).attr( 'checked' ) ) {
647
      if( !$( '.is-defaut-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' , thisFieldset ).attr( 'checked' ) ) {
653
        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
648
        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() );
654
      // Is-default-value cochée pour select/radio
649
      // Is-default-value cochée pour select/radio
655
      } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {
650
      } else if( 'select' ===  selectedFieldElement || 'radio' === selectedFieldElement ) {
656
        // Une seule valeur par defaut, devient la première valeur du tableau + '#'
651
        // Une seule valeur par defaut, devient la première valeur du tableau + '#'
657
        datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );
652
        datasToSubmitObject.fieldValues.listValue.unshift( $( this ).val() + '#' );
658
      // Is-default-value cochée pour checkbox/list-checkbox
653
      // Is-default-value cochée pour checkbox/list-checkbox
659
      } else {
654
      } else {
660
        // On ajoute simplement la valeur au tableau + '#'
655
        // On ajoute simplement la valeur au tableau + '#'
661
        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' );
656
        datasToSubmitObject.fieldValues.listValue.push( $( this ).val() + '#' );
662
      }
657
      }
663
    }
658
    }
664
  });
659
  });
665
}
660
}
666
 
661
 
667
/************************************************
662
/************************************************
668
 *  Fonction d'affichage des champs classiques  *
663
 *  Fonction d'affichage des champs classiques  *
669
 ************************************************/
664
 ************************************************/
670
 
665
 
671
// Prévisualisation
666
// Prévisualisation
672
function DisplayClassicFields() {
667
function DisplayClassicFields() {
673
  // Affichage du titre du widget
668
  // Affichage du titre du widget
674
  renderFields( $('#titre') , $( '.widget-renderer h1' ) );
669
  renderFields( $('#titre') , $( '.widget-renderer h1' ) );
675
  // Affichage du nom du projet
670
  // Affichage du nom du projet
676
  renderFields( $('#projet') , $( '.projet-description' ));
671
  renderFields( $('#projet') , $( '.projet-description' ));
677
  // Affichage de la description
672
  // Affichage de la description
678
  renderFields( $('#description') , $( '.preview-description' ) );
673
  renderFields( $('#description') , $( '.preview-description' ) );
679
  // Affichage du logo s'il existe déjà
674
  // Affichage du logo s'il existe déjà
680
  if( $('#logo').val() || $('#logo')[0].defaultValue ) {
675
  if( $('#logo').val() || $('#logo')[0].defaultValue ) {
681
    $( '#preview-logo img' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') );
676
    $( '#preview-logo img' ).prop( 'src' , $( '#group-settings-form .logo img' ).prop('src') );
682
  }
677
  }
683
  // Affichage du logo chargé
678
  // Affichage du logo chargé
684
  $( '#logo.input-file' ).change( function( event ) {
679
  $( '#logo.input-file' ).change( function( event ) {
685
    // Si le 'change' était pas une suppression
680
    // Si le 'change' était pas une suppression
686
    if( $.isEmptyObject( event.target.files[0] ) ) {
681
    if( $.isEmptyObject( event.target.files[0] ) ) {
687
      $( '#preview-logo img' ).prop( 'src' , '' );
682
      $( '#preview-logo img' ).prop( 'src' , '' );
688
    // Si on a chargé un logo ou changé le fichier
683
    // Si on a chargé un logo ou changé le fichier
689
    } else {
684
    } else {
690
      $( '#preview-logo img' ).prop( 'src' , URL.createObjectURL( event.target.files[0] ) );
685
      $( '#preview-logo img' ).prop( 'src' , URL.createObjectURL( event.target.files[0] ) );
691
    }
686
    }
692
  });
687
  });
693
  // Affichage de l'image de fond
688
  // Affichage de l'image de fond
694
  $('#fond.input-file').change( function ( event ) {
689
  $('#fond.input-file').change( function ( event ) {
695
    if( !$.isEmptyObject( event.target.files[0] ) ) {
690
    if( !$.isEmptyObject( event.target.files[0] ) ) {
696
      $( '.widget-renderer' ).css('background' ,'url(' + URL.createObjectURL( event.target.files[0] ) + ') no-repeat center');
691
      $( '.widget-renderer' ).css('background' ,'url(' + URL.createObjectURL( event.target.files[0] ) + ') no-repeat center');
697
    } else {
692
    } else {
698
      $( '.widget-renderer' )[0].style.removeProperty( 'background' );
693
      $( '.widget-renderer' )[0].style.removeProperty( 'background' );
699
    }
694
    }
700
  });
695
  });
701
}
696
}
702
 
697
 
703
// Affichage des infos dès que disponibles
698
// Affichage des infos dès que disponibles
704
// pour les champs classiques
699
// pour les champs classiques
705
function renderFields( $source , $taget ) {
700
function renderFields( $source , $taget ) {
706
  if($source.val()) {
701
  if($source.val()) {
707
    $taget.text( $source.val() );
702
    $taget.text( $source.val() );
708
  }
703
  }
709
  $source.change( function () {
704
  $source.change( function () {
710
    $taget.text( $( this ).val() );
705
    $taget.text( $( this ).val() );
711
  });
706
  });
712
}
707
}
713
 
708
 
714
 
709
 
715
/*****************************************************
710
/*****************************************************
716
 *  Fonction d'affichage des champs supplémentaires  *
711
 *  Fonction d'affichage des champs supplémentaires  *
717
 *****************************************************/
712
 *****************************************************/
718
 
713
 
719
// Construction des éléments à visualiser
714
// Construction des éléments à visualiser
720
function onClickPreviewField( thisFieldset , index ) {
715
function onClickPreviewField( thisFieldset , index ) {
721
  // Récupération des données
716
  // Récupération des données
722
      // Tous les champs
717
      // Tous les champs
723
  var fieldLabel       = $( '.field-name'            , thisFieldset ).val(),//nom
718
  var fieldLabel       = $( '.field-name'            , thisFieldset ).val(),//nom
724
      fieldKey         = $( '.field-key'             , thisFieldset ).val(),//clé
719
      fieldKey         = $( '.field-key'             , thisFieldset ).val(),//clé
725
      fieldElement     = $( '.field-element'         , thisFieldset ).val(),//élément
720
      fieldElement     = $( '.field-element'         , thisFieldset ).val(),//élément
726
      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),//champ requis
721
      fieldIsMandatory = $( '.field-is_mandatory'    , thisFieldset ).is( ':checked' ),//champ requis
727
      fieldUnit        = $( '.field-unit'            , thisFieldset ).val(),//unités
722
      fieldUnit        = $( '.field-unit'            , thisFieldset ).val(),//unités
728
      fieldTooltip     = $( '.field-description'     , thisFieldset ).val(),//info-bulle
723
      fieldTooltip     = $( '.field-description'     , thisFieldset ).val(),//info-bulle
729
      fieldHelp        = $( '.file-return.help-doc-' + index ).text(),//nom du fichier d'aide
724
      fieldHelp        = $( '.file-return.help-doc-' + index ).text(),//nom du fichier d'aide
730
      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',//placeholder
725
      fieldPlaceholder = $( '.aide-saisie'           , thisFieldset ).val() || '',//placeholder
731
      // Champs à valeur numérique ou date
726
      // Champs à valeur numérique ou date
732
      fieldStep        = $( '.step'                  , thisFieldset ).val(),
727
      fieldStep        = $( '.step'                  , thisFieldset ).val(),
733
      fieldMin         = $( '.min'                   , thisFieldset ).val(),
728
      fieldMin         = $( '.min'                   , thisFieldset ).val(),
734
      fieldMax         = $( '.max'                   , thisFieldset ).val(),
729
      fieldMax         = $( '.max'                   , thisFieldset ).val(),
735
      // Champs "listes"
730
      // Champs "listes"
736
      fieldDefaultNum  = $( '.default'               , thisFieldset ).val(),//option pas default
731
      fieldDefaultNum  = $( '.default'               , thisFieldset ).val(),//option pas default
737
      fieldOtherValue  = $( '.option-other-value'    , thisFieldset ).is( ':checked' ),//option autre
732
      fieldOtherValue  = $( '.option-other-value'    , thisFieldset ).is( ':checked' ),//option autre
738
      fieldOptions     = collectListOptions( thisFieldset );//Array: toutes les options
733
      fieldOptions     = collectListOptions( thisFieldset );//Array: toutes les options
739
  // Variables d'affichage
734
  // Variables d'affichage
740
  var fieldHtml               = '',//variable contenant tout le html à afficher
735
  var fieldHtml               = '',//variable contenant tout le html à afficher
741
      commonFieldsHtml        = {},//Éléments simples ou chaînes communes aux "listes"
736
      commonFieldsHtml        = {},//Éléments simples ou chaînes communes aux "listes"
742
      listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques
737
      listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques
743
      listFieldsHtml          = {},//chaînes & html spécifiques aux listes
738
      listFieldsHtml          = {},//chaînes & html spécifiques aux listes
744
      count                   = fieldOptions.length;//nombre d'options, pour les boucles for
739
      count                   = fieldOptions.length;//nombre d'options, pour les boucles for
745
  //valeurs initiales des chaînes de caractères
740
  //valeurs initiales des chaînes de caractères
746
  //Éléments simples ou chaînes communes aux "listes"
741
  //Éléments simples ou chaînes communes aux "listes"
747
  commonFieldsHtml = {
742
  commonFieldsHtml = {
748
    dataIdAttr : ' data-id="' + index + '"',
743
    dataIdAttr : ' data-id="' + index + '"',
749
    helpButton : '',//bouton aide
744
    helpButton : '',//bouton aide
750
    helpClass  : '',//classe de l'élément associé au bouton aide
745
    helpClass  : '',//classe de l'élément associé au bouton aide
751
    titleAttr  : '',//info-bulle
746
    titleAttr  : '',//info-bulle
752
    fieldInput : {//attributs de l'élément
747
    fieldInput : {//attributs de l'élément
753
      typeAttr        : ' type="' + fieldElement + '"',
748
      typeAttr        : ' type="' + fieldElement + '"',
754
      nameAttr        : ' name="' + fieldKey + '"',
749
      nameAttr        : ' name="' + fieldKey + '"',
755
      classAttr       : ' class="' +  fieldKey + '"',
750
      classAttr       : ' class="' +  fieldKey + '"',
756
      placeholderAttr : '',
751
      placeholderAttr : '',
757
      mandatoryAttr   : '',//required
752
      mandatoryAttr   : '',//required
758
      otherAttr       : ''
753
      otherAttr       : ''
759
    },
754
    },
760
    fieldLabel : {//attributs et contenu du label
755
    fieldLabel : {//attributs et contenu du label
761
      labelContent    : fieldLabel,//label
756
      labelContent    : fieldLabel,//label
762
      forAttr         : ' for="' + fieldKey + '"',//attribut for
757
      forAttr         : ' for="' + fieldKey + '"',//attribut for
763
      classAttr       : '',//classe du label
758
      classAttr       : '',//classe du label
764
      otherAttr       : ''//tous autres attributs
759
      otherAttr       : ''//tous autres attributs
765
    }
760
    }
766
  }
761
  }
767
  // Pour les éléments de listes (select, checkbox, etc.)
762
  // Pour les éléments de listes (select, checkbox, etc.)
768
  listFieldsHtml = {
763
  listFieldsHtml = {
769
    containerContent : fieldLabel,//les options peuvent avoir chacune un label
764
    containerContent : fieldLabel,//les options peuvent avoir chacune un label
770
    containerClass   : '',//une classe pour le conteneur
765
    containerClass   : '',//une classe pour le conteneur
771
    forAttr          : '',//correspond à l'id d'une checkbox/radio/list-checkbox
766
    forAttr          : '',//correspond à l'id d'une checkbox/radio/list-checkbox
772
    optionIdAttr     : '',//value-id
767
    optionIdAttr     : '',//value-id
773
    defaultAttr      : ''//default
768
    defaultAttr      : ''//default
774
  };
769
  };
775
  // Changement d'un élément existant:
770
  // Changement d'un élément existant:
776
  // supprimer le précédent pour ajouter le nouveau
771
  // supprimer le précédent pour ajouter le nouveau
777
  if( 0 < $( '.preview-fields' , thisFieldset ).length ) {
772
  if( 0 < $( '.preview-fields' , thisFieldset ).length ) {
778
    $( '.preview-fields' , thisFieldset ).remove();
773
    $( '.preview-fields' , thisFieldset ).remove();
779
  }
774
  }
780
  // Élément requis
775
  // Élément requis
781
  if( fieldIsMandatory ) {
776
  if( fieldIsMandatory ) {
782
    // Attribut required pour le listes
777
    // Attribut required pour le listes
783
    commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
778
    commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
784
    // Nom du champ (éléments listes)
779
    // Nom du champ (éléments listes)
785
    listFieldsHtml.containerContent         += ' *';
780
    listFieldsHtml.containerContent         += ' *';
786
    // Nom du champ (éléments simples)
781
    // Nom du champ (éléments simples)
787
    commonFieldsHtml.fieldLabel.labelContent += ' *';
782
    commonFieldsHtml.fieldLabel.labelContent += ' *';
788
  }
783
  }
789
  // Infobulle
784
  // Infobulle
790
  if( '' !== fieldTooltip ) {
785
  if( '' !== fieldTooltip ) {
791
    commonFieldsHtml.titleAttr = ' title="' +  fieldTooltip + '"';
786
    commonFieldsHtml.titleAttr = ' title="' +  fieldTooltip + '"';
792
  }
787
  }
793
  // Placeholder
788
  // Placeholder
794
  if( '' !== fieldPlaceholder ) {
789
  if( '' !== fieldPlaceholder ) {
795
    commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
790
    commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' +  fieldPlaceholder + '"';
796
  }
791
  }
797
  // Fichier d'aide
792
  // Fichier d'aide
798
  if( '' !== fieldHelp ) {
793
  if( '' !== fieldHelp ) {
799
    // Bouton 'aide'
794
    // Bouton 'aide'
800
    commonFieldsHtml.helpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
795
    commonFieldsHtml.helpButton = '<div class="button help-button"><i class="fas fa-info-circle"></i></div>';
801
    // classe 'aide'
796
    // classe 'aide'
802
    commonFieldsHtml.helpClass = ' and-help';
797
    commonFieldsHtml.helpClass = ' and-help';
803
  }
798
  }
804
  // html à ajouter en fonction de l'élément choisi
799
  // html à ajouter en fonction de l'élément choisi
805
  switch( fieldElement ) {
800
  switch( fieldElement ) {
806
    case 'checkbox' :
801
    case 'checkbox' :
807
    case 'radio' :
802
    case 'radio' :
808
      listFieldsHtml.containerClass = ' class="' + fieldElement +'"';
803
      listFieldsHtml.containerClass = ' class="' + fieldElement +'"';
809
      fieldHtml =
804
      fieldHtml =
810
        // Conteneur
805
        // Conteneur
811
        '<div' +
806
        '<div' +
812
          // Class="L'élément choisi"
807
          // Class="L'élément choisi"
813
          listFieldsHtml.containerClass +
808
          listFieldsHtml.containerClass +
814
          // DataId
809
          // DataId
815
          commonFieldsHtml.dataIdAttr +
810
          commonFieldsHtml.dataIdAttr +
816
          // Required
811
          // Required
817
          commonFieldsHtml.fieldInput.mandatoryAttr +
812
          commonFieldsHtml.fieldInput.mandatoryAttr +
818
          // Info bulle
813
          // Info bulle
819
          commonFieldsHtml.titleAttr +
814
          commonFieldsHtml.titleAttr +
820
        ' >'+
815
        ' >'+
821
          // Nom du champ
816
          // Nom du champ
822
          // Classe 'and-help'
817
          // Classe 'and-help'
823
          '<div class="list-label' + commonFieldsHtml.helpClass + '">' +
818
          '<div class="list-label' + commonFieldsHtml.helpClass + '">' +
824
            // Label
819
            // Label
825
            listFieldsHtml.containerContent +
820
            listFieldsHtml.containerContent +
826
          '</div>' +
821
          '</div>' +
827
          // Bouton 'help'
822
          // Bouton 'help'
828
          commonFieldsHtml.helpButton;
823
          commonFieldsHtml.helpButton;
829
      // On déroule les différentes valeurs
824
      // On déroule les différentes valeurs
830
      for( let i = 0; i < count; i++ ) {
825
      for( let i = 0; i < count; i++ ) {
831
        let fieldOption = fieldOptions[i];
826
        let fieldOption = fieldOptions[i];
832
        // L'id de input
827
        // L'id de input
833
        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
828
        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue + '"';
834
        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue + '"';
829
        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue + '"';
835
        // Default
830
        // Default
836
        listFieldsHtml.defaultAttr = '';//réinitialisation
831
        listFieldsHtml.defaultAttr = '';//réinitialisation
837
        if( fieldOption.isDefault ) {//affectation
832
        if( fieldOption.isDefault ) {//affectation
838
          listFieldsHtml.defaultAttr = ' checked';
833
          listFieldsHtml.defaultAttr = ' checked';
839
        }
834
        }
840
        // L'indice de chaque option
835
        // L'indice de chaque option
841
        // L'option "autre" n'en a pas
836
        // L'option "autre" n'en a pas
842
        if( '' !== fieldOption.optionIndex ) {
837
        if( '' !== fieldOption.optionIndex ) {
843
          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
838
          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
844
        }
839
        }
845
 
840
 
846
        fieldHtml +=
841
        fieldHtml +=
847
          '<label' +
842
          '<label' +
848
            // For
843
            // For
849
            listFieldsHtml.forAttr +
844
            listFieldsHtml.forAttr +
850
            // value-id
845
            // value-id
851
            listFieldsHtml.optionIdAttr +
846
            listFieldsHtml.optionIdAttr +
852
            // Class="nom du champ"
847
            // Class="nom du champ"
853
            commonFieldsHtml.fieldInput.classAttr +
848
            commonFieldsHtml.fieldInput.classAttr +
854
          '>' +
849
          '>' +
855
            '<input' +
850
            '<input' +
856
              // Type
851
              // Type
857
              commonFieldsHtml.fieldInput.typeAttr +
852
              commonFieldsHtml.fieldInput.typeAttr +
858
              // Id
853
              // Id
859
              listFieldsHtml.inputIdAttr +
854
              listFieldsHtml.inputIdAttr +
860
              // DataId
855
              // DataId
861
              commonFieldsHtml.dataIdAttr +
856
              commonFieldsHtml.dataIdAttr +
862
              // value-id
857
              // value-id
863
              listFieldsHtml.optionIdAttr +
858
              listFieldsHtml.optionIdAttr +
864
              // Name
859
              // Name
865
              commonFieldsHtml.fieldInput.nameAttr +
860
              commonFieldsHtml.fieldInput.nameAttr +
866
              // Value
861
              // Value
867
              ' value="' + fieldOption.optionValue + '"' +
862
              ' value="' + fieldOption.optionValue + '"' +
868
              // Checked
863
              // Checked
869
              listFieldsHtml.defaultAttr +
864
              listFieldsHtml.defaultAttr +
870
              // Class="nom du champ"
865
              // Class="nom du champ"
871
              commonFieldsHtml.fieldInput.classAttr +
866
              commonFieldsHtml.fieldInput.classAttr +
872
            '>' +
867
            '>' +
873
            // Label de l'option
868
            // Label de l'option
874
            fieldOption.optionText +
869
            fieldOption.optionText +
875
          '</label>';
870
          '</label>';
876
        // Si valeur "autre" est cochée
871
        // Si valeur "autre" est cochée
877
        if( fieldOtherValue ) {
872
        if( fieldOtherValue ) {
878
          fieldHtml +=
873
          fieldHtml +=
879
            '<label for="other"' +
874
            '<label for="other"' +
880
              commonFieldsHtml.dataIdAttr +
875
              commonFieldsHtml.dataIdAttr +
881
            '>' +
876
            '>' +
882
              '<input' +
877
              '<input' +
883
                commonFieldsHtml.fieldInput.typeAttr +
878
                commonFieldsHtml.fieldInput.typeAttr +
884
                ' id="other"' +
879
                ' id="other"' +
885
                commonFieldsHtml.fieldInput.nameAttr +
880
                commonFieldsHtml.fieldInput.nameAttr +
886
                ' value="other"' +
881
                ' value="other"' +
887
                commonFieldsHtml.fieldInput.classAttr +
882
                commonFieldsHtml.fieldInput.classAttr +
888
                commonFieldsHtml.dataIdAttr +
883
                commonFieldsHtml.dataIdAttr +
889
              '>' +
884
              '>' +
890
            'Autre</label>';
885
            'Autre</label>';
891
        }
886
        }
892
      }
887
      }
893
      // Fin du conteneur
888
      // Fin du conteneur
894
      fieldHtml += '</div>';
889
      fieldHtml += '</div>';
895
      break;
890
      break;
896
 
891
 
897
    case 'list-checkbox':
892
    case 'list-checkbox':
898
      fieldHtml =
893
      fieldHtml =
899
        // Classe 'and-help'
894
        // Classe 'and-help'
900
        '<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' +
895
        '<div class="multiselect ' + fieldElement + commonFieldsHtml.helpClass + '"' +
901
          // DataId
896
          // DataId
902
          commonFieldsHtml.dataIdAttr +
897
          commonFieldsHtml.dataIdAttr +
903
        '>' +
898
        '>' +
904
          '<label>' +
899
          '<label>' +
905
            // Nom du champ
900
            // Nom du champ
906
            listFieldsHtml.containerContent +
901
            listFieldsHtml.containerContent +
907
          '</label>' +
902
          '</label>' +
908
          '<div class="selectBox"' +
903
          '<div class="selectBox"' +
909
            // DataId
904
            // DataId
910
            commonFieldsHtml.dataIdAttr +
905
            commonFieldsHtml.dataIdAttr +
911
          '>' +
906
          '>' +
912
            '<select' +
907
            '<select' +
913
              // DataId
908
              // DataId
914
              commonFieldsHtml.dataIdAttr +
909
              commonFieldsHtml.dataIdAttr +
915
              // Required
910
              // Required
916
              commonFieldsHtml.fieldInput.mandatoryAttr +
911
              commonFieldsHtml.fieldInput.mandatoryAttr +
917
              // Info bulle
912
              // Info bulle
918
              commonFieldsHtml.titleAttr +
913
              commonFieldsHtml.titleAttr +
919
            '>' +
914
            '>' +
920
              // Apparait dans la barre de sélection
915
              // Apparait dans la barre de sélection
921
              '<option>Plusieurs choix possibles</option>' +
916
              '<option>Plusieurs choix possibles</option>' +
922
            '</select>' +
917
            '</select>' +
923
            '<div class="overSelect"></div>' +
918
            '<div class="overSelect"></div>' +
924
          '</div>' +
919
          '</div>' +
925
          '<div class="checkboxes hidden"' +
920
          '<div class="checkboxes hidden"' +
926
            // DataId
921
            // DataId
927
            commonFieldsHtml.dataIdAttr +
922
            commonFieldsHtml.dataIdAttr +
928
          '>';
923
          '>';
929
      // On déroule les différentes valeurs
924
      // On déroule les différentes valeurs
930
      for( let i = 0; i < count; i++ ) {
925
      for( let i = 0; i < count; i++ ) {
931
        let fieldOption = fieldOptions[i];
926
        let fieldOption = fieldOptions[i];
932
        // Type="checkbox"
927
        // Type="checkbox"
933
        commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"';
928
        commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"';
934
        // Id
929
        // Id
935
        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
930
        listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.toLowerCase() + '"';
936
        // For
931
        // For
937
        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
932
        listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.toLowerCase() + '"';
938
        // Default
933
        // Default
939
        listFieldsHtml.defaultAttr = '';//réinitialisation
934
        listFieldsHtml.defaultAttr = '';//réinitialisation
940
        if( fieldOption.isDefault ) {
935
        if( fieldOption.isDefault ) {
941
          listFieldsHtml.defaultAttr = ' checked';//affectation
936
          listFieldsHtml.defaultAttr = ' checked';//affectation
942
        }
937
        }
943
        // value-id
938
        // value-id
944
        if( '' !== fieldOption.optionIndex ) {
939
        if( '' !== fieldOption.optionIndex ) {
945
          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
940
          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
946
        }
941
        }
947
 
942
 
948
        fieldHtml +=
943
        fieldHtml +=
949
          '<label' +
944
          '<label' +
950
            // For
945
            // For
951
            listFieldsHtml.forAttr +
946
            listFieldsHtml.forAttr +
952
            // value-id
947
            // value-id
953
            listFieldsHtml.optionIdAttr +
948
            listFieldsHtml.optionIdAttr +
954
          '>' +
949
          '>' +
955
            '<input type="checkbox"' +
950
            '<input type="checkbox"' +
956
              // Id
951
              // Id
957
              listFieldsHtml.inputIdAttr +
952
              listFieldsHtml.inputIdAttr +
958
              // value-id
953
              // value-id
959
              listFieldsHtml.optionIdAttr +
954
              listFieldsHtml.optionIdAttr +
960
              // Name
955
              // Name
961
              commonFieldsHtml.fieldInput.nameAttr +
956
              commonFieldsHtml.fieldInput.nameAttr +
962
              // Value
957
              // Value
963
              ' value="' + fieldOption.optionValue + '"' +
958
              ' value="' + fieldOption.optionValue + '"' +
964
              // Checked
959
              // Checked
965
              listFieldsHtml.defaultAttr +
960
              listFieldsHtml.defaultAttr +
966
              // Class="nom du champ"
961
              // Class="nom du champ"
967
              commonFieldsHtml.fieldInput.classAttr +
962
              commonFieldsHtml.fieldInput.classAttr +
968
              // DataId
963
              // DataId
969
              commonFieldsHtml.dataIdAttr +
964
              commonFieldsHtml.dataIdAttr +
970
            '>' +
965
            '>' +
971
            // Label de l'option
966
            // Label de l'option
972
            fieldOption.optionText +
967
            fieldOption.optionText +
973
          '</label>';
968
          '</label>';
974
      }
969
      }
975
      // Si valeur "autre" est cochée
970
      // Si valeur "autre" est cochée
976
      if( fieldOtherValue ) {
971
      if( fieldOtherValue ) {
977
        fieldHtml +=
972
        fieldHtml +=
978
          '<label for="other"' +
973
          '<label for="other"' +
979
            // DataId
974
            // DataId
980
            commonFieldsHtml.dataIdAttr +
975
            commonFieldsHtml.dataIdAttr +
981
          '>' +
976
          '>' +
982
            '<input type="checkbox"' +
977
            '<input type="checkbox"' +
983
              ' id="other"' +
978
              ' id="other"' +
984
              commonFieldsHtml.fieldInput.nameAttr +
979
              commonFieldsHtml.fieldInput.nameAttr +
985
              ' value="other"' +
980
              ' value="other"' +
986
              commonFieldsHtml.fieldInput.classAttr +
981
              commonFieldsHtml.fieldInput.classAttr +
987
              // DataId
982
              // DataId
988
              commonFieldsHtml.dataIdAttr +
983
              commonFieldsHtml.dataIdAttr +
989
            '>' +
984
            '>' +
990
          'Autre</label>';
985
          'Autre</label>';
991
      }
986
      }
992
      // Fermeture des conteneurs .multiselect .checkboxes
987
      // Fermeture des conteneurs .multiselect .checkboxes
993
      fieldHtml +=
988
      fieldHtml +=
994
        '</div>'+
989
        '</div>'+
995
      '</div>' +
990
      '</div>' +
996
      // Bouton 'help'
991
      // Bouton 'help'
997
      commonFieldsHtml.helpButton;
992
      commonFieldsHtml.helpButton;
998
      break;
993
      break;
999
 
994
 
1000
    case 'select':
995
    case 'select':
1001
      fieldHtml =
996
      fieldHtml =
1002
        '<label' +
997
        '<label' +
1003
          commonFieldsHtml.fieldLabel.forAttr +
998
          commonFieldsHtml.fieldLabel.forAttr +
1004
          // Info bulle
999
          // Info bulle
1005
          commonFieldsHtml.titleAttr +
1000
          commonFieldsHtml.titleAttr +
1006
        '>' +
1001
        '>' +
1007
          // Nom du champ
1002
          // Nom du champ
1008
          listFieldsHtml.containerContent +
1003
          listFieldsHtml.containerContent +
1009
        '</label>' +
1004
        '</label>' +
1010
        // Conteneur/Wrapper
1005
        // Conteneur/Wrapper
1011
        // +Classe 'and-help'
1006
        // +Classe 'and-help'
1012
        '<div class="select-wrapper add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
1007
        '<div class="select-wrapper add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' +
1013
          // DataID
1008
          // DataID
1014
          commonFieldsHtml.dataIdAttr +
1009
          commonFieldsHtml.dataIdAttr +
1015
        '>' +
1010
        '>' +
1016
          '<select' +
1011
          '<select' +
1017
            commonFieldsHtml.fieldInput.nameAttr +
1012
            commonFieldsHtml.fieldInput.nameAttr +
1018
            ' id="' + fieldKey + '"' +
1013
            ' id="' + fieldKey + '"' +
1019
            // Class
1014
            // Class
1020
            commonFieldsHtml.fieldInput.classAttr +
1015
            commonFieldsHtml.fieldInput.classAttr +
1021
            // Required
1016
            // Required
1022
            commonFieldsHtml.fieldInput.mandatoryAttr +
1017
            commonFieldsHtml.fieldInput.mandatoryAttr +
1023
            // DataId
1018
            // DataId
1024
            commonFieldsHtml.dataIdAttr +
1019
            commonFieldsHtml.dataIdAttr +
1025
          '>';
1020
          '>';
1026
 
1021
 
1027
      // On déroule les différentes valeurs
1022
      // On déroule les différentes valeurs
1028
      for( let i = 0; i < count; i++ ) {
1023
      for( let i = 0; i < count; i++ ) {
1029
        let fieldOption = fieldOptions[i];
1024
        let fieldOption = fieldOptions[i];
1030
        // Default
1025
        // Default
1031
        listFieldsHtml.defaultAttr = '';//réinitialisation
1026
        listFieldsHtml.defaultAttr = '';//réinitialisation
1032
        if( fieldOption.isDefault ) {//affectation
1027
        if( fieldOption.isDefault ) {//affectation
1033
          listFieldsHtml.defaultAttr = ' selected="selected"';
1028
          listFieldsHtml.defaultAttr = ' selected="selected"';
1034
        }
1029
        }
1035
        // value-id
1030
        // value-id
1036
        if( '' !== fieldOption.optionIndex ) {
1031
        if( '' !== fieldOption.optionIndex ) {
1037
          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
1032
          listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"';
1038
        }
1033
        }
1039
 
1034
 
1040
        fieldHtml +=
1035
        fieldHtml +=
1041
          '<option' +
1036
          '<option' +
1042
            // Value
1037
            // Value
1043
            ' value="' + fieldOption.optionValue + '"' +
1038
            ' value="' + fieldOption.optionValue + '"' +
1044
            // Value-id
1039
            // Value-id
1045
            listFieldsHtml.optionIdAttr +
1040
            listFieldsHtml.optionIdAttr +
1046
            // Selected
1041
            // Selected
1047
            listFieldsHtml.defaultAttr +
1042
            listFieldsHtml.defaultAttr +
1048
          '>' +
1043
          '>' +
1049
            // Option
1044
            // Option
1050
            fieldOption.optionText +
1045
            fieldOption.optionText +
1051
          '</option>';
1046
          '</option>';
1052
      }
1047
      }
1053
      // Si valeur "autre" est cochée
1048
      // Si valeur "autre" est cochée
1054
      if( fieldOtherValue ) {
1049
      if( fieldOtherValue ) {
1055
        fieldHtml +=
1050
        fieldHtml +=
1056
          '<option class="other" value="other"' + commonFieldsHtml.dataIdAttr + '>' +
1051
          '<option class="other" value="other"' + commonFieldsHtml.dataIdAttr + '>' +
1057
            'Autre' +
1052
            'Autre' +
1058
          '</option>';
1053
          '</option>';
1059
      }
1054
      }
1060
      // Fermeture des conteneurs
1055
      // Fermeture des conteneurs
1061
      fieldHtml +=
1056
      fieldHtml +=
1062
          '</select>' +
1057
          '</select>' +
1063
        // Fin du conteneur/wrapper
1058
        // Fin du conteneur/wrapper
1064
        '</div>' +
1059
        '</div>' +
1065
        // Bouton 'help'
1060
        // Bouton 'help'
1066
        commonFieldsHtml.helpButton;
1061
        commonFieldsHtml.helpButton;
1067
      break;
1062
      break;
1068
 
1063
 
1069
    case 'file' :
1064
    case 'file' :
1070
      // Ouvrir l'attribut class (suppression de '"')
1065
      // Ouvrir l'attribut class (suppression de '"')
1071
      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
1066
      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
1072
      commonFieldsHtml.fieldInput.classAttr += ' input-file"';
1067
      commonFieldsHtml.fieldInput.classAttr += ' input-file"';
1073
      // Class du label
1068
      // Class du label
1074
      commonFieldsHtml.fieldLabel.classAttr = ' class="label-file"';
1069
      commonFieldsHtml.fieldLabel.classAttr = ' class="label-file"';
1075
      // Type de fichiers acceptés
1070
      // Type de fichiers acceptés
1076
      commonFieldsHtml.fieldInput.otherAttr += ' accept="application/pdf, image/*, video/*"';
1071
      commonFieldsHtml.fieldInput.otherAttr += ' accept="application/pdf, image/*, video/*"';
1077
 
1072
 
1078
      fieldHtml =
1073
      fieldHtml =
1079
        // Classe 'and-help'
1074
        // Classe 'and-help'
1080
        '<div class="input-file-container' + commonFieldsHtml.helpClass + '">' +
1075
        '<div class="input-file-container' + commonFieldsHtml.helpClass + '">' +
1081
          '<input' +
1076
          '<input' +
1082
            // Type
1077
            // Type
1083
            commonFieldsHtml.fieldInput.typeAttr +
1078
            commonFieldsHtml.fieldInput.typeAttr +
1084
            // Name
1079
            // Name
1085
            commonFieldsHtml.fieldInput.nameAttr +
1080
            commonFieldsHtml.fieldInput.nameAttr +
1086
            // DataId
1081
            // DataId
1087
            commonFieldsHtml.dataIdAttr +
1082
            commonFieldsHtml.dataIdAttr +
1088
            // Class
1083
            // Class
1089
            commonFieldsHtml.fieldInput.classAttr +
1084
            commonFieldsHtml.fieldInput.classAttr +
1090
            // Info-bulle
1085
            // Info-bulle
1091
            commonFieldsHtml.titleAttr +
1086
            commonFieldsHtml.titleAttr +
1092
            // Placeholder
1087
            // Placeholder
1093
            commonFieldsHtml.fieldInput.placeholderAttr +
1088
            commonFieldsHtml.fieldInput.placeholderAttr +
1094
            // Required
1089
            // Required
1095
            commonFieldsHtml.fieldInput.mandatoryAttr +
1090
            commonFieldsHtml.fieldInput.mandatoryAttr +
1096
            // Autres attributs
1091
            // Autres attributs
1097
            commonFieldsHtml.fieldInput.otherAttr +
1092
            commonFieldsHtml.fieldInput.otherAttr +
1098
          '>' +
1093
          '>' +
1099
          '<label' +
1094
          '<label' +
1100
            // For
1095
            // For
1101
            commonFieldsHtml.fieldLabel.forAttr +
1096
            commonFieldsHtml.fieldLabel.forAttr +
1102
            // Class
1097
            // Class
1103
            commonFieldsHtml.fieldLabel.classAttr +
1098
            commonFieldsHtml.fieldLabel.classAttr +
1104
            // Info-bulle
1099
            // Info-bulle
1105
            commonFieldsHtml.titleAttr +
1100
            commonFieldsHtml.titleAttr +
1106
          '><i class="fas fa-download"></i> ' +
1101
          '><i class="fas fa-download"></i> ' +
1107
            // Nom du champ
1102
            // Nom du champ
1108
            commonFieldsHtml.fieldLabel.labelContent +
1103
            commonFieldsHtml.fieldLabel.labelContent +
1109
          '</label>' +
1104
          '</label>' +
1110
        '</div>' +
1105
        '</div>' +
1111
        // Bouton supprimer le fichier
1106
        // Bouton supprimer le fichier
1112
        '<div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>' +
1107
        '<div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>' +
1113
        // Bouton 'help'
1108
        // Bouton 'help'
1114
        commonFieldsHtml.helpButton;
1109
        commonFieldsHtml.helpButton;
1115
      break;
1110
      break;
1116
 
1111
 
1117
    case 'textarea':
1112
    case 'textarea':
1118
      // Classe 'and-help'
1113
      // Classe 'and-help'
1119
      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
1114
      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
1120
      // Autres attributs
1115
      // Autres attributs
1121
      commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';
1116
      commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"';
1122
 
1117
 
1123
      fieldHtml =
1118
      fieldHtml =
1124
        '<label' +
1119
        '<label' +
1125
          // For
1120
          // For
1126
          commonFieldsHtml.fieldLabel.forAttr +
1121
          commonFieldsHtml.fieldLabel.forAttr +
1127
          // Class
1122
          // Class
1128
          commonFieldsHtml.fieldLabel.classAttr +
1123
          commonFieldsHtml.fieldLabel.classAttr +
1129
          // Info-bulle
1124
          // Info-bulle
1130
          commonFieldsHtml.titleAttr +
1125
          commonFieldsHtml.titleAttr +
1131
          // Autres attributs
1126
          // Autres attributs
1132
          commonFieldsHtml.fieldLabel.otherAttr +
1127
          commonFieldsHtml.fieldLabel.otherAttr +
1133
        '>' +
1128
        '>' +
1134
          // Nom du champ
1129
          // Nom du champ
1135
          commonFieldsHtml.fieldLabel.labelContent +
1130
          commonFieldsHtml.fieldLabel.labelContent +
1136
        '</label>' +
1131
        '</label>' +
1137
        // Bouton 'help'
1132
        // Bouton 'help'
1138
        commonFieldsHtml.helpButton +
1133
        commonFieldsHtml.helpButton +
1139
        '<textarea' +
1134
        '<textarea' +
1140
          // Name
1135
          // Name
1141
          commonFieldsHtml.fieldInput.nameAttr +
1136
          commonFieldsHtml.fieldInput.nameAttr +
1142
          // DataId
1137
          // DataId
1143
          commonFieldsHtml.dataIdAttr +
1138
          commonFieldsHtml.dataIdAttr +
1144
          // Class
1139
          // Class
1145
          commonFieldsHtml.fieldInput.classAttr +
1140
          commonFieldsHtml.fieldInput.classAttr +
1146
          // Info-bulle
1141
          // Info-bulle
1147
          commonFieldsHtml.titleAttr +
1142
          commonFieldsHtml.titleAttr +
1148
          // Info-bulle
1143
          // Info-bulle
1149
          commonFieldsHtml.fieldInput.placeholderAttr +
1144
          commonFieldsHtml.fieldInput.placeholderAttr +
1150
          // Required
1145
          // Required
1151
          commonFieldsHtml.fieldInput.mandatoryAttr +
1146
          commonFieldsHtml.fieldInput.mandatoryAttr +
1152
          // Autres attributs
1147
          // Autres attributs
1153
          commonFieldsHtml.fieldInput.otherAttr +
1148
          commonFieldsHtml.fieldInput.otherAttr +
1154
        '></textarea>';
1149
        '></textarea>';
1155
        break;
1150
        break;
1156
 
1151
 
1157
    case 'range':
1152
    case 'range':
1158
      // Classe 'and-help'
1153
      // Classe 'and-help'
1159
      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
1154
      commonFieldsHtml.fieldLabel.classAttr = ' class="' + commonFieldsHtml.helpClass + '"';
1160
      // Step
1155
      // Step
1161
      if( '' !== fieldStep ) {
1156
      if( '' !== fieldStep ) {
1162
        commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
1157
        commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
1163
      }
1158
      }
1164
      // Min
1159
      // Min
1165
      if( '' !== fieldMin ) {
1160
      if( '' !== fieldMin ) {
1166
        commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
1161
        commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
1167
      }
1162
      }
1168
      //Max
1163
      //Max
1169
      if( '' !== fieldMax ) {
1164
      if( '' !== fieldMax ) {
1170
        commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
1165
        commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
1171
      }
1166
      }
1172
 
1167
 
1173
      fieldHtml =
1168
      fieldHtml =
1174
        '<div class="number">' +
1169
        '<div class="number">' +
1175
          '<label' +
1170
          '<label' +
1176
            // For
1171
            // For
1177
            commonFieldsHtml.fieldLabel.forAttr +
1172
            commonFieldsHtml.fieldLabel.forAttr +
1178
            // Class
1173
            // Class
1179
            commonFieldsHtml.fieldLabel.classAttr +
1174
            commonFieldsHtml.fieldLabel.classAttr +
1180
            // Info-bulle
1175
            // Info-bulle
1181
            commonFieldsHtml.titleAttr +
1176
            commonFieldsHtml.titleAttr +
1182
            // Autres attributs
1177
            // Autres attributs
1183
            commonFieldsHtml.fieldLabel.otherAttr +
1178
            commonFieldsHtml.fieldLabel.otherAttr +
1184
          '>' +
1179
          '>' +
1185
            // Nom du champ
1180
            // Nom du champ
1186
            commonFieldsHtml.fieldLabel.labelContent +
1181
            commonFieldsHtml.fieldLabel.labelContent +
1187
          '</label>' +
1182
          '</label>' +
1188
          // Bouton 'help'
1183
          // Bouton 'help'
1189
          commonFieldsHtml.helpButton +
1184
          commonFieldsHtml.helpButton +
1190
 
1185
 
1191
          '<input' +
1186
          '<input' +
1192
            // Type
1187
            // Type
1193
            commonFieldsHtml.fieldInput.typeAttr +
1188
            commonFieldsHtml.fieldInput.typeAttr +
1194
            // Name
1189
            // Name
1195
            commonFieldsHtml.fieldInput.nameAttr +
1190
            commonFieldsHtml.fieldInput.nameAttr +
1196
            // DataId
1191
            // DataId
1197
            commonFieldsHtml.dataIdAttr +
1192
            commonFieldsHtml.dataIdAttr +
1198
            // Class
1193
            // Class
1199
            commonFieldsHtml.fieldInput.classAttr +
1194
            commonFieldsHtml.fieldInput.classAttr +
1200
            // Info-bulle
1195
            // Info-bulle
1201
            commonFieldsHtml.titleAttr +
1196
            commonFieldsHtml.titleAttr +
1202
            // Info-bulle
1197
            // Info-bulle
1203
            commonFieldsHtml.fieldInput.placeholderAttr +
1198
            commonFieldsHtml.fieldInput.placeholderAttr +
1204
            // Required
1199
            // Required
1205
            commonFieldsHtml.fieldInput.mandatoryAttr +
1200
            commonFieldsHtml.fieldInput.mandatoryAttr +
1206
            // Autres attributs
1201
            // Autres attributs
1207
            commonFieldsHtml.fieldInput.otherAttr +
1202
            commonFieldsHtml.fieldInput.otherAttr +
1208
          '>' +
1203
          '>' +
1209
        '</div>';
1204
        '</div>';
1210
        break;
1205
        break;
1211
 
1206
 
1212
    case 'date':
1207
    case 'date':
1213
    case 'number':
1208
    case 'number':
1214
      // Ouvrir l'attribut class (suppression de '"')
1209
      // Ouvrir l'attribut class (suppression de '"')
1215
      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
1210
      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
1216
      // Classe 'and-help'
1211
      // Classe 'and-help'
1217
      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
1212
      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
1218
      // Step
1213
      // Step
1219
      if( '' !== fieldStep ) {
1214
      if( '' !== fieldStep ) {
1220
        commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
1215
        commonFieldsHtml.fieldInput.otherAttr += ' step="' +  fieldStep + '"';
1221
      }
1216
      }
1222
      // Min
1217
      // Min
1223
      if( '' !== fieldMin ) {
1218
      if( '' !== fieldMin ) {
1224
        commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
1219
        commonFieldsHtml.fieldInput.otherAttr += ' min="' +  fieldMin + '"';
1225
      }
1220
      }
1226
      // Max
1221
      // Max
1227
      if( '' !== fieldMax ) {
1222
      if( '' !== fieldMax ) {
1228
        commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
1223
        commonFieldsHtml.fieldInput.otherAttr += ' max="' +  fieldMax + '"';
1229
      }
1224
      }
1230
      fieldHtml =
1225
      fieldHtml =
1231
        '<div class="number">' +
1226
        '<div class="number">' +
1232
          '<label' +
1227
          '<label' +
1233
            // For
1228
            // For
1234
            commonFieldsHtml.fieldLabel.forAttr +
1229
            commonFieldsHtml.fieldLabel.forAttr +
1235
            // Class
1230
            // Class
1236
            commonFieldsHtml.fieldLabel.classAttr +
1231
            commonFieldsHtml.fieldLabel.classAttr +
1237
            // Info-bulle
1232
            // Info-bulle
1238
            commonFieldsHtml.titleAttr +
1233
            commonFieldsHtml.titleAttr +
1239
            // Autres attributs
1234
            // Autres attributs
1240
            commonFieldsHtml.fieldLabel.otherAttr +
1235
            commonFieldsHtml.fieldLabel.otherAttr +
1241
          '>' +
1236
          '>' +
1242
            // Nom du champ
1237
            // Nom du champ
1243
            commonFieldsHtml.fieldLabel.labelContent +
1238
            commonFieldsHtml.fieldLabel.labelContent +
1244
          '</label>' +
1239
          '</label>' +
1245
          '<input' +
1240
          '<input' +
1246
            // Type
1241
            // Type
1247
            commonFieldsHtml.fieldInput.typeAttr +
1242
            commonFieldsHtml.fieldInput.typeAttr +
1248
            // Name
1243
            // Name
1249
            commonFieldsHtml.fieldInput.nameAttr +
1244
            commonFieldsHtml.fieldInput.nameAttr +
1250
            // DataId
1245
            // DataId
1251
            commonFieldsHtml.dataIdAttr +
1246
            commonFieldsHtml.dataIdAttr +
1252
            // Class
1247
            // Class
1253
            commonFieldsHtml.fieldInput.classAttr +
1248
            commonFieldsHtml.fieldInput.classAttr +
1254
            // Info-bulle
1249
            // Info-bulle
1255
            commonFieldsHtml.titleAttr +
1250
            commonFieldsHtml.titleAttr +
1256
            // Info-bulle
1251
            // Info-bulle
1257
            commonFieldsHtml.fieldInput.placeholderAttr +
1252
            commonFieldsHtml.fieldInput.placeholderAttr +
1258
            // Required
1253
            // Required
1259
            commonFieldsHtml.fieldInput.mandatoryAttr +
1254
            commonFieldsHtml.fieldInput.mandatoryAttr +
1260
            // Autres attributs
1255
            // Autres attributs
1261
            commonFieldsHtml.fieldInput.otherAttr +
1256
            commonFieldsHtml.fieldInput.otherAttr +
1262
          '>' +
1257
          '>' +
1263
          // Bouton 'help'
1258
          // Bouton 'help'
1264
          commonFieldsHtml.helpButton +
1259
          commonFieldsHtml.helpButton +
1265
        '</div>';
1260
        '</div>';
1266
        break;
1261
        break;
1267
 
1262
 
1268
    case 'text' :
1263
    case 'text' :
1269
    case 'email':
1264
    case 'email':
1270
    default:
1265
    default:
1271
      // Ouvrir l'attribut class (suppression de '"')
1266
      // Ouvrir l'attribut class (suppression de '"')
1272
      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
1267
      commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
1273
      // Classe 'and-help'
1268
      // Classe 'and-help'
1274
      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
1269
      commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
1275
 
1270
 
1276
      fieldHtml =
1271
      fieldHtml =
1277
        '<label' +
1272
        '<label' +
1278
          // For
1273
          // For
1279
          commonFieldsHtml.fieldLabel.forAttr +
1274
          commonFieldsHtml.fieldLabel.forAttr +
1280
          // Class
1275
          // Class
1281
          commonFieldsHtml.fieldLabel.classAttr +
1276
          commonFieldsHtml.fieldLabel.classAttr +
1282
          // Info-bulle
1277
          // Info-bulle
1283
          commonFieldsHtml.titleAttr +
1278
          commonFieldsHtml.titleAttr +
1284
          // Autres attributs
1279
          // Autres attributs
1285
          commonFieldsHtml.fieldLabel.otherAttr +
1280
          commonFieldsHtml.fieldLabel.otherAttr +
1286
        '>' +
1281
        '>' +
1287
          // Nom du champ
1282
          // Nom du champ
1288
          commonFieldsHtml.fieldLabel.labelContent +
1283
          commonFieldsHtml.fieldLabel.labelContent +
1289
        '</label>' +
1284
        '</label>' +
1290
        '<input' +
1285
        '<input' +
1291
          // Type
1286
          // Type
1292
          commonFieldsHtml.fieldInput.typeAttr +
1287
          commonFieldsHtml.fieldInput.typeAttr +
1293
          // Name
1288
          // Name
1294
          commonFieldsHtml.fieldInput.nameAttr +
1289
          commonFieldsHtml.fieldInput.nameAttr +
1295
          // DataId
1290
          // DataId
1296
          commonFieldsHtml.dataIdAttr +
1291
          commonFieldsHtml.dataIdAttr +
1297
          // Class
1292
          // Class
1298
          commonFieldsHtml.fieldInput.classAttr +
1293
          commonFieldsHtml.fieldInput.classAttr +
1299
          // Info-bulle
1294
          // Info-bulle
1300
          commonFieldsHtml.titleAttr +
1295
          commonFieldsHtml.titleAttr +
1301
          // Info-bulle
1296
          // Info-bulle
1302
          commonFieldsHtml.fieldInput.placeholderAttr +
1297
          commonFieldsHtml.fieldInput.placeholderAttr +
1303
          // Required
1298
          // Required
1304
          commonFieldsHtml.fieldInput.mandatoryAttr +
1299
          commonFieldsHtml.fieldInput.mandatoryAttr +
1305
          // Autres attributs
1300
          // Autres attributs
1306
          commonFieldsHtml.fieldInput.otherAttr +
1301
          commonFieldsHtml.fieldInput.otherAttr +
1307
        '>' +
1302
        '>' +
1308
        // Bouton 'help'
1303
        // Bouton 'help'
1309
        commonFieldsHtml.helpButton;
1304
        commonFieldsHtml.helpButton;
1310
      break;
1305
      break;
1311
  }
1306
  }
1312
  return fieldHtml;
1307
  return fieldHtml;
1313
}
1308
}
1314
 
1309
 
1315
// Construire un tableau des options pour chaque élément de listes
1310
// Construire un tableau des options pour chaque élément de listes
1316
function collectListOptions( thisFieldset ) {
1311
function collectListOptions( thisFieldset ) {
1317
  var $details = $( '.field-details' , thisFieldset ),
1312
  var $details = $( '.field-details' , thisFieldset ),
1318
      options = [];
1313
      options = [];
1319
 
1314
 
1320
  $details.find( '.new-value' ).each( function() {
1315
  $details.find( '.new-value' ).each( function() {
1321
    options.push({
1316
    options.push({
1322
      // Valeur transmise (value)
1317
      // Valeur transmise (value)
1323
      optionValue : $( this ).find('.list-value').val().toLowerCase(),
1318
      optionValue : $( this ).find('.list-value').val().toLowerCase(),
1324
      // Valeur Visible
1319
      // Valeur Visible
1325
      optionText  : capitalize( $( this ).find('.list-value').val() ),
1320
      optionText  : capitalize( $( this ).find('.list-value').val() ),
1326
      // Booléen "default"
1321
      // Booléen "default"
1327
      isDefault   : $( this ).find( '.is-defaut-value').is( ':checked' ),
1322
      isDefault   : $( this ).find( '.is-defaut-value').is( ':checked' ),
1328
      // Indice de l'option
1323
      // Indice de l'option
1329
      optionIndex : $( this ).attr('data-list-value-id')
1324
      optionIndex : $( this ).attr('data-list-value-id')
1330
    });
1325
    });
1331
  });
1326
  });
1332
  return options;
1327
  return options;
1333
}
1328
}
1334
 
1329
 
1335
// Faire apparaitre un champ text "Autre"
1330
// Faire apparaitre un champ text "Autre"
1336
function onOtherOption( thisFieldset , index ) {
1331
function onOtherOption( thisFieldset , index ) {
1337
  // Ce champ (dans la prévisualisation)
1332
  // Ce champ (dans la prévisualisation)
1338
  var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'),
1333
  var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'),
1339
      //L'élément choisi
1334
      //L'élément choisi
1340
      element             = $('.field-element' , thisFieldset ).val(),
1335
      element             = $('.field-element' , thisFieldset ).val(),
1341
      // Où insérer le champ "Autre"
1336
      // Où insérer le champ "Autre"
1342
      $element            = $( '.' + element , thisPreviewFieldset ),
1337
      $element            = $( '.' + element , thisPreviewFieldset ),
1343
      // html du champ "Autre"
1338
      // html du champ "Autre"
1344
      collectOther        =
1339
      collectOther        =
1345
        '<label data-id="' + index + '" for="collect-other">Autre option :</label>' +
1340
        '<label data-id="' + index + '" for="collect-other">Autre option :</label>' +
1346
        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >';
1341
        '<input type="text" name="collect-other" data-id="' + index + '" class="collect-other" >';
1347
  // Pouvoir supprimer le champ "Autre"
1342
  // Pouvoir supprimer le champ "Autre"
1348
  function optionRemove( thisPreviewFieldset ) {
1343
  function optionRemove( thisPreviewFieldset ) {
1349
    $( 'label[for="collect-other"]' , thisPreviewFieldset ).remove();
1344
    $( 'label[for="collect-other"]' , thisPreviewFieldset ).remove();
1350
    $( 'input.collect-other' , thisPreviewFieldset ).remove();
1345
    $( 'input.collect-other' , thisPreviewFieldset ).remove();
1351
  }
1346
  }
1352
 
1347
 
1353
  switch( element ) {
1348
  switch( element ) {
1354
    case 'radio' :
1349
    case 'radio' :
1355
      // Lorsqu'un nouveau bouton est coché
1350
      // Lorsqu'un nouveau bouton est coché
1356
      $( 'input' , thisPreviewFieldset ).on( 'change' , function () {
1351
      $( 'input' , thisPreviewFieldset ).on( 'change' , function () {
1357
  console.log($( this ));
-
 
1358
        if( 'other' === $( this ).val() ) {
1352
        if( 'other' === $( this ).val() ) {
1359
          // Insertion du champ "Autre" après les boutons
1353
          // Insertion du champ "Autre" après les boutons
1360
          $element.after( collectOther );
1354
          $element.after( collectOther );
1361
        } else {
1355
        } else {
1362
          // Suppression du champ autre
1356
          // Suppression du champ autre
1363
          optionRemove( thisPreviewFieldset );
1357
          optionRemove( thisPreviewFieldset );
1364
        }
1358
        }
1365
      });
1359
      });
1366
      break;
1360
      break;
1367
 
1361
 
1368
    case 'select' :
1362
    case 'select' :
1369
      // Lorsque l'option "Autre" est selectionnée
1363
      // Lorsque l'option "Autre" est selectionnée
1370
      $( 'select' , thisPreviewFieldset ).on( 'change' , function () {
1364
      $( 'select' , thisPreviewFieldset ).on( 'change' , function () {
1371
        if( 'other' === $( this).val() ) {
1365
        if( 'other' === $( this).val() ) {
1372
          // Insertion du champ "Autre" après les boutons
1366
          // Insertion du champ "Autre" après les boutons
1373
          $element.after( collectOther );
1367
          $element.after( collectOther );
1374
          // Suppression du champ autre
1368
          // Suppression du champ autre
1375
        } else {
1369
        } else {
1376
          optionRemove( thisPreviewFieldset );
1370
          optionRemove( thisPreviewFieldset );
1377
        }
1371
        }
1378
      });
1372
      });
1379
      break;
1373
      break;
1380
 
1374
 
1381
    case 'checkbox' :
1375
    case 'checkbox' :
1382
    case 'list-checkbox' :
1376
    case 'list-checkbox' :
1383
      // Lorsque "Autre" est coché
1377
      // Lorsque "Autre" est coché
1384
      $( 'input#other' , thisPreviewFieldset ).on( 'click' , function () {
1378
      $( 'input#other' , thisPreviewFieldset ).on( 'click' , function () {
1385
        // Insertion du champ "Autre" après les boutons
1379
        // Insertion du champ "Autre" après les boutons
1386
        if( $( this ).is( ':checked' ) ) {
1380
        if( $( this ).is( ':checked' ) ) {
1387
          $element.after( collectOther );
1381
          $element.after( collectOther );
1388
        } else {
1382
        } else {
1389
          // Suppression du champ autre
1383
          // Suppression du champ autre
1390
          optionRemove( thisPreviewFieldset );
1384
          optionRemove( thisPreviewFieldset );
1391
        }
1385
        }
1392
      });
1386
      });
1393
      break;
1387
      break;
1394
 
1388
 
1395
    default :
1389
    default :
1396
      break;
1390
      break;
1397
  }
1391
  }
1398
}
1392
}
1399
 
1393
 
1400
// Prévisualisation des nouveaux champs
1394
// Prévisualisation des nouveaux champs
1401
function newFieldsPreview() {
1395
function newFieldsPreview() {
1402
  var count = $( 'fieldset' ).last().attr('data-id');
1396
  var count = $( 'fieldset' ).last().attr('data-id');
1403
  // Si on a déjà prévisualisé on efface tout pour recommencer
1397
  // Si on a déjà prévisualisé on efface tout pour recommencer
1404
  if( 0 < $( '.preview-fields' ).length ) {
1398
  if( 0 < $( '.preview-fields' ).length ) {
1405
    $( '.preview-fields' ).each( function () {
1399
    $( '.preview-fields' ).each( function () {
1406
      $( this ).remove();
1400
      $( this ).remove();
1407
    });
1401
    });
1408
  }
1402
  }
1409
  // Au premier ajout d'un champ dans la prévisualisation on ajoute un titre et un message
1403
  // Au premier ajout d'un champ dans la prévisualisation on ajoute un titre et un message
1410
  if( true === firstClick ) {
1404
  if( true === firstClick ) {
1411
    $( '#zone-supp' ).prepend(
1405
    $( '#zone-supp' ).prepend(
1412
      '<h2>Informations propres au projet</h2>' +
1406
      '<h2>Informations propres au projet</h2>' +
1413
      '<div class="message">L\'objectif principal de cet aperçu est de vérifier les contenus et repérer d\'éventuelles erreurs</div>'
1407
      '<div class="message">L\'objectif principal de cet aperçu est de vérifier les contenus et repérer d\'éventuelles erreurs</div>'
1414
    );
1408
    );
1415
  }
1409
  }
1416
  // Parcourir tous les blocs d'infos de champs supplémentaires
1410
  // Parcourir tous les blocs d'infos de champs supplémentaires
1417
  for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
1411
  for( var index = $( 'fieldset' ).first().attr('data-id') ; index <= count ; index++ ) {
1418
    var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
1412
    var thisFieldset = $( 'fieldset[data-id="' + index + '"]');
1419
    // Certains indices peuvent correspondre à un champ supprimé
1413
    // Certains indices peuvent correspondre à un champ supprimé
1420
    if( 0 < $( thisFieldset ).length ) {
1414
    if( 0 < $( thisFieldset ).length ) {
1421
      // Prévisualisation d'un champ
1415
      // Prévisualisation d'un champ
1422
      $( '#zone-supp .preview-container' ).append(
1416
      $( '#zone-supp .preview-container' ).append(
1423
        '<div class="preview-fields" data-id="' + index + '">'+
1417
        '<div class="preview-fields" data-id="' + index + '">'+
1424
          onClickPreviewField( thisFieldset , index ) +
1418
          onClickPreviewField( thisFieldset , index ) +
1425
        '</div>'
1419
        '</div>'
1426
      );
1420
      );
1427
      // Ajout/suppression d'un champ texte "Autre"
1421
      // Ajout/suppression d'un champ texte "Autre"
1428
      if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) ) {
1422
      if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) ) {
1429
        onOtherOption( thisFieldset , index);
1423
        onOtherOption( thisFieldset , index);
1430
      }
1424
      }
1431
    }
1425
    }
1432
  }
1426
  }
1433
  // Le titre + message de la section prévisualisation ne sont ajoutés qu'une fois
1427
  // Le titre + message de la section prévisualisation ne sont ajoutés qu'une fois
1434
  firstClick = false;
1428
  firstClick = false;
1435
}
1429
}
1436
 
1430
 
1437
// Activation/Desactivation et contenu de la modale Bootstrap
1431
// Activation/Desactivation et contenu de la modale Bootstrap
1438
// https://getbootstrap.com/docs/3.3/javascript/#modals
1432
// https://getbootstrap.com/docs/3.3/javascript/#modals
1439
function previewFieldHelpModal() {
1433
function previewFieldHelpModal() {
1440
  $( '#zone-supp' ).on( 'click' , '.help-button' , function ( event ) {
1434
  $( '#zone-supp' ).on( 'click' , '.help-button' , function ( event ) {
1441
    var index = $( this ).closest( '.preview-fields' ).attr( 'data-id' ),
1435
    var index = $( this ).closest( '.preview-fields' ).attr( 'data-id' ),
1442
        thisFieldset = $( '.new-field[data-id="' + index + '"]' ),
1436
        thisFieldset = $( '.new-field[data-id="' + index + '"]' ),
1443
        file = $( '.field-help' , thisFieldset )[0].files[0],
1437
        file = $( '.field-help' , thisFieldset )[0].files[0],
1444
        tmppath = URL.createObjectURL( file );
1438
        tmppath = URL.createObjectURL( file );
1445
    // Titre
1439
    // Titre
1446
    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( '.field-name' , thisFieldset ).val() );
1440
    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( '.field-name' , thisFieldset ).val() );
1447
    // Contenu
1441
    // Contenu
1448
    if( file.type.match( 'image' ) ) {
1442
    if( file.type.match( 'image' ) ) {
1449
        $( '#print_content' ).append( '<img src="' + tmppath + '" style="max-width:100%">' );
1443
        $( '#print_content' ).append( '<img src="' + tmppath + '" style="max-width:100%">' );
1450
    } else if( file.type.match( 'pdf' ) ) {
1444
    } else if( file.type.match( 'pdf' ) ) {
1451
        $( '#print_content' ).append( '<iframe src="' + tmppath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );
1445
        $( '#print_content' ).append( '<iframe src="' + tmppath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );
1452
    }
1446
    }
1453
    // Sortie avec la touche escape
1447
    // Sortie avec la touche escape
1454
    $( '#help-modal' ).modal( { keyboard : true } );
1448
    $( '#help-modal' ).modal( { keyboard : true } );
1455
    // Affichage
1449
    // Affichage
1456
    $( '#help-modal' ).modal( 'show' );
1450
    $( '#help-modal' ).modal( 'show' );
1457
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
1451
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
1458
    // Message dans la doc de bootstrap :
1452
    // Message dans la doc de bootstrap :
1459
    // Due to how HTML5 defines its semantics,
1453
    // Due to how HTML5 defines its semantics,
1460
    // the autofocus HTML attribute has no effect in Bootstrap modals.
1454
    // the autofocus HTML attribute has no effect in Bootstrap modals.
1461
    // To achieve the same effect, use some custom JavaScript
1455
    // To achieve the same effect, use some custom JavaScript
1462
    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
1456
    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
1463
      $( '#myInput' ).trigger( 'focus' );
1457
      $( '#myInput' ).trigger( 'focus' );
1464
    })
1458
    })
1465
    // Réinitialisation
1459
    // Réinitialisation
1466
    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
1460
    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
1467
      $( '#help-modal-label' ).text();
1461
      $( '#help-modal-label' ).text();
1468
      $( '#print_content' ).empty();
1462
      $( '#print_content' ).empty();
1469
    })
1463
    })
1470
  });
1464
  });
1471
}
1465
}
1472
 
1466
 
1473
/***************************
1467
/***************************
1474
 *  Lancement des scripts  *
1468
 *  Lancement des scripts  *
1475
 ***************************/
1469
 ***************************/
1476
 
1470
 
1477
// Tableau d'envoi des données
1471
// Tableau d'envoi des données
1478
var datasToSubmit = new Array();
1472
var datasToSubmit = new Array();
1479
// Variable permettant un seul affichage du titre
1473
// Variable permettant un seul affichage du titre
1480
// de la prévisualisation pour les nouveaux champs
1474
// de la prévisualisation pour les nouveaux champs
1481
var firstClick = true;
1475
var firstClick = true;
1482
 
1476
 
1483
jQuery( document ).ready( function() {
1477
jQuery( document ).ready( function() {
1484
  // Identifiant de champ
1478
  // Identifiant de champ
1485
  var fieldIndex = 0;
1479
  var fieldIndex = 0;
1486
  // Ajout de nouveaux champs
1480
  // Ajout de nouveaux champs
1487
  onClickAddNewFields( fieldIndex );
1481
  onClickAddNewFields( fieldIndex );
1488
  // Activation/Desactivation des boutons valider et prévisualiser
1482
  // Activation/Desactivation des boutons valider et prévisualiser
1489
  activatePreviewAndValidateButtons();
1483
  activatePreviewAndValidateButtons();
1490
  // Prévisualisation des champs classiques
1484
  // Prévisualisation des champs classiques
1491
  DisplayClassicFields();
1485
  DisplayClassicFields();
1492
  // Affichage des images ou nom des documents importés
1486
  // Affichage des images ou nom des documents importés
1493
  inputFile();
1487
  inputFile();
1494
  // Affichage des List-checkbox
1488
  // Affichage des List-checkbox
1495
  inputListCheckbox();
1489
  inputListCheckbox();
1496
  // Modale "aide"
1490
  // Modale "aide"
1497
  previewFieldHelpModal();
1491
  previewFieldHelpModal();
1498
});
1492
});