Subversion Repositories eFlore/Applications.cel

Rev

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

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