Subversion Repositories eFlore/Applications.cel

Rev

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

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