Subversion Repositories eFlore/Applications.cel

Rev

Rev 3341 | Rev 3376 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

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