Subversion Repositories eFlore/Applications.cel

Rev

Rev 3899 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3844 idir 1
export function Utils() {
3638 delphine 2
  this.cheminFichiers = $( '#zone-appli' ).data( 'url-fichiers' );
3
  // système de traduction minimaliste
3844 idir 4
  this.msgs = {
3638 delphine 5
    fr: {
6
      'arbre'                             : 'Arbre',
7
      'dupliquer'                         : 'Dupliquer',
8
      'saisir-plantes'                    : 'Saisir les plantes',
9
      'saisir-lichens'                    : 'Saisir les lichens',
10
      'upload-non-suppote'                : 'Votre navigateur ne permet pas le téléchargement de fichiers.',
11
      'format-non-supporte'               : 'Le format de fichier n\'est pas supporté, les formats acceptés sont',
12
      'image-deja-chargee'                : 'Cette image a déjà été utilisée',
13
      'date-incomplete'                   : 'Format : jj/mm/aaaa.',
14
      'observations-transmises'           : 'observations transmises',
15
      'supprimer-observation-liste'       : 'Supprimer cette observation de la liste à transmettre',
16
      'confirmation-suppression'          : 'Êtes-vous sûr de vouloir supprimer cette observation',
17
      'milieu'                            : 'Milieu',
18
      'commentaires'                      : 'Commentaires',
19
      'non-lie-au-ref'                    : 'non lié au référentiel',
20
      'obs-le'                            : 'le',
3903 idir 21
      'non-connexion'                     : 'Vous n\'avez pas saisi votre courriel et votre mot de passe',
3638 delphine 22
      'obs-numero'                        : 'Observation n°',
23
      'erreur'                            : 'Erreur',
24
      'erreur-inconnue'                   : 'Erreur inconnue',
25
      'erreur-image'                      : 'Erreur lors du chargement des images',
26
      'erreur-ajax'                       : 'Erreur Ajax',
27
      'erreur-chargement'                 : 'Erreur lors du chargement de l\'observation',
28
      'erreur-chargement-obs-utilisateur' : 'Erreur lors du chargement des observations de cet utilisateur',
29
      'erreur-formulaire'                 : 'Erreur: impossible de charger le formulaire',
30
      'lieu-obs'                          : 'observé à',
31
      'lieu-dit'                          : 'Lieu-dit',
3852 idir 32
      'taxon-ou-image'                    : 'Veuillez transmettre au moins, soit une image, soit une espèce',
3638 delphine 33
      'station'                           : 'Station',
34
      'date-rue'                          : 'Un releve existe dejà à cette date pour cette rue.',
35
      'rechargement-page'                 : 'Êtes vous sûr de vouloir quiter la page?\nLes observations saisies mais non transmises seront perdues.',
36
      'courriel-connu'                    : 'Un compte existe pour ce courriel, connectez-vous pour saisir votre observation'
37
    },
38
    en: {
39
      'arbre'                             : 'Tree',
40
      'dupliquer'                         : 'Duplicate',
41
      'saisir-plantes'                    : 'Enter the plants',
42
      'saisir-lichens'                    : 'Enter the lichens',
43
      'upload-non-suppote'                : 'Your browser does not support file upload.',
44
      'format-non-supporte'               : 'The file format is not supported, the accepted formats are',
45
      'image-deja-chargee'                : 'This image has already been used',
46
      'date-incomplete'                   : 'Format: dd/mm/yyyy.',
47
      'observations-transmises'           : 'observations transmitted',
48
      'supprimer-observation-liste'       : 'Delete this observation from the list to be transmitted',
49
      'confirmation-suppression'          : 'Are you sure you want to delete this observation',
50
      'milieu'                            : 'Environment',
51
      'commentaires'                      : 'Comments',
52
      'non-lie-au-ref'                    : 'unrelated to the referencial ',
53
      'obs-le'                            : 'the',
3903 idir 54
      'non-connexion'                     : 'You did not enter your login and password',
3638 delphine 55
      'obs-numero'                        : 'Observation number ',
56
      'erreur'                            : 'Error',
57
      'erreur-inconnue'                   : 'Unknown error',
58
      'erreur-image'                      : 'Error loading the images',
59
      'erreur-ajax'                       : 'Ajax Error',
60
      'erreur-chargement'                 : 'Error loading the observation',
61
      'erreur-chargement-obs-utilisateur' : 'Error loading this user\'s observations',
62
      'erreur-formulaire'                 : 'Error: couldn\'t load form',
63
      'lieu-obs'                          : 'observed at',
64
      'lieu-dit'                          : 'Locality',
65
      'taxon-ou-image'                    : 'Please transmit at least one image or one species',
66
      'station'                           : 'Place',
67
      'date-rue'                          : 'A record already exists on this date for this street',
68
      'rechargement-page'                 : 'Are you sure you want to leave the page?\nAll untransmitted observations will be lost.',
69
      'courriel-connu'                    : 'An account exists for this email, log in to enter your observation'
70
    }
71
  };
72
};
73
 
74
Utils.prototype.init = function() {
75
  // Modale "aide" du projet
76
  this.projetHelpModale();
77
  // Affichage input file
78
  this.inputFile();
79
  // Affichage des List-checkbox
80
  this.inputListCheckbox();
81
  // Affichage des Range
82
  this.inputRangeDisplayNumber()
83
  // Modale "aide"
84
  this.newFieldsHelpModal();
85
  // Ajout/suppression d'un champ texte "Autre"
86
  this.onOtherOption();
87
  // Récupérer les données entrées dans "Autre"
88
  this.collectOtherOption();
89
};
90
 
3844 idir 91
// aide dans le titre du projet
92
Utils.prototype.projetHelpModale = function() {
93
  const lthis = this;
3638 delphine 94
 
3844 idir 95
  $( '#top' ).on ( 'click', '#info-button', function ( event ) {
96
    const fileMimeType = $( this ).data( 'mime-info' ),
97
        label          = 'Aide du projet : ' +  $( '#titre-projet' ).text();
3638 delphine 98
 
3844 idir 99
    if( fileMimeType.match( 'image' ) ) {
100
      const extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ),
101
          content     = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + 'info.' + extention + '" style="" alt="info projet" />';
102
    }
103
    lthis.activerModale( label, content );
104
  });
3638 delphine 105
};
106
 
107
// Logique d'affichage pour le input type=file
108
Utils.prototype.inputFile = function() {
109
  // Action lorsque la "barre d'espace" ou "Entrée" est pressée
110
  $( '#formulaire' ).on( 'keydown', '.label-file', function( event ) {
111
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
112
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click();
113
    }
114
  });
115
};
116
 
117
// Style et affichage des list-checkboxes
118
Utils.prototype.inputListCheckbox = function() {
119
  // On écoute le click sur une list-checkbox ('.selectBox')
120
  // à tout moment de son insertion dans le dom
121
  // _ S'assurer de bien viser la bonne list-checkbox
122
  // _ Au click sur un autre champ remballer la list-checkbox
123
  $( document ).click( function( event ) {
3844 idir 124
    const target = event.target;
3638 delphine 125
 
126
    if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) {
127
      $( '.checkboxes' ).each( function () {
128
        $( this ).addClass( 'hidden' );
129
      });
130
      $( '.selectBox select.focus', '#zone-appli' ).each( function() {
131
        $( this ).removeClass( 'focus' );
132
      });
133
    }
134
  });
135
  $( '#zone-appli' ).on( 'click' , '.selectBox' , function() {
136
    // afficher/cacher le volet des checkboxes et focus
137
    $( this ).next().toggleClass( 'hidden' );
138
    $( this ).find( 'select' ).toggleClass( 'focus' );
139
 
140
    // Cacher le volet des autres checkboxes et retirer leur focus
3844 idir 141
    const $checkboxes = $( this ).next(),
142
        count         = $( '.checkboxes' ).length;
3638 delphine 143
 
3844 idir 144
    for ( let i = 0; i < count; i++ ) {
3638 delphine 145
      if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) {
3844 idir 146
        const $otherListCheckboxes = $( '.checkboxes' )[i];
147
 
3638 delphine 148
        if ( !$otherListCheckboxes.classList.contains( 'hidden' ) ) {
149
          $otherListCheckboxes.classList.add( 'hidden' );
150
        }
151
        if( $otherListCheckboxes.previousElementSibling.firstElementChild.classList.contains( 'focus' ) ) {
152
          $otherListCheckboxes.previousElementSibling.firstElementChild.classList.remove( 'focus' );
153
        }
154
      }
155
    }
156
  });
157
};
158
 
159
// Style et affichage des input type="range"
160
Utils.prototype.inputRangeDisplayNumber = function() {
161
  $( 'input[type="range"]' ).each( function() {
162
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
163
  });
164
  $( '#top' ).on( 'input' , 'input[type="range"]' , function () {
165
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
166
  });
167
  $( '#top' ).on( 'click', '#ajouter-obs', function() {
168
    $( '.range-live-value' ).each( function() {
3844 idir 169
      $( this ).text( '' );
3638 delphine 170
    });
171
  });
172
};
173
 
174
// Activation/Desactivation et contenu de la modale Bootstrap
175
// https://getbootstrap.com/docs/3.3/javascript/#modals
176
Utils.prototype.newFieldsHelpModal = function() {
177
  const lthis = this;
178
 
179
  $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {
3844 idir 180
    const thisFieldKey = $( this ).data( 'key' ),
181
        fileMimeType   = $( this ).data( 'mime-type' ),
182
        label          = 'Aide pour : ' +  $( this ).data( 'name' );
3859 idir 183
    let content = '';
3638 delphine 184
 
185
    if( fileMimeType.match( 'image' ) ) {
3859 idir 186
      const extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
187
 
188
      content = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + thisFieldKey + '.' + extention + '" style="" alt="' + thisFieldKey + '" />';
3638 delphine 189
    }
190
    lthis.activerModale( label, content );
191
  });
192
};
193
 
194
// Activation/Desactivation et contenu de la modale Bootstrap
195
// https://getbootstrap.com/docs/3.3/javascript/#modals
196
Utils.prototype.activerModale = function( label, content = '', buttons = [] ) {
3844 idir 197
  const lthis = this,
198
    buttonsHtmlBase = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>';
199
  let dismiss     = '',
200
      buttonsHtml = buttonsHtmlBase;
3638 delphine 201
 
202
  // Titre
203
  $( '#fenetre-modal-label' ).text( label );
204
  if ( '' !== content ) {
205
    $( '#print_content' ).append( content );
206
  }
207
  // Sortie avec la touche escape
208
  $( '#fenetre-modal' ).modal( { keyboard : true } );
209
  // Affichage
210
  $( '#fenetre-modal' ).modal({ show: true });
211
  // Remplacer l'autofocus qui ne fonctionne plus en HTML5
212
  // Message dans la doc de bootstrap :
213
  // Due to how HTML5 defines its semantics,
214
  // the autofocus HTML attribute has no effect in Bootstrap modals.
215
  // To achieve the same effect, use some custom JavaScript
216
  $( '#fenetre-modal' ).off( 'shown.bs.modal' ).on( 'shown.bs.modal' , function () {
217
    $( '#myInput' ).trigger( 'focus' );
3852 idir 218
    if( valOk( $( '#modale-aide-img' ) ) ) {
3638 delphine 219
      lthis.redimentionnerImgAide();
220
      $( window ).on( 'resize', lthis.redimentionnerImgAide.bind( lthis ) );
221
    }
222
  });
3852 idir 223
  if ( valOk( buttons ) ) {
3638 delphine 224
    buttonsHtml = '';
225
    $.each( buttons, function( i, button ) {
226
      dismiss = button.dismiss ? 'data-dismiss="modal"' : '';
227
      buttonsHtml += '<button type="button" class="btn ' + button.class + '" ' + dismiss + '>' + button.label + '</button>';
228
    });
229
  }
230
  $( '.modal-footer' ).html( buttonsHtml );
231
  // Réinitialisation
232
  $( '#fenetre-modal' ).on( 'hidden.bs.modal' , function () {
233
    $( '#confirm-modal-label' ).text();
234
    $( '#print_content' ).empty();
235
    $( '.modal-footer' ).html( buttonsHtmlBase );
236
  });
237
};
238
 
239
Utils.prototype.redimentionnerImgAide = function() {
3844 idir 240
  const espHorizDisp = $( '.modal-dialog' ).innerWidth() <= 1200 ? $( '.modal-dialog' ).innerWidth() - 30 : 1200,
3852 idir 241
      cssImg         = {
242
        'width': espHorizDisp,
243
        'height' : 'auto'
244
      };
3638 delphine 245
 
246
  $( '#modale-aide-img' ).css(cssImg).show(50);
247
};
248
 
249
// Faire apparaitre un champ text "Autre"
250
Utils.prototype.onOtherOption = function() {
3844 idir 251
  const lthis = this,
252
    PREFIX = 'collect-other-';
3638 delphine 253
  // Ajouter un champ texte pour "Autre"
3844 idir 254
  const optionAdd = (
255
      otherId,
256
      $target,
257
      element,
258
      dataName,
259
      dataLabel
260
    ) => {
261
      $target.after(
262
        '<div class="control-group">'+
263
          '<label'+
264
            ' for="' + otherId + '"'+
265
            ' class="' + otherId + '"'+
266
          '>'+
267
            'Autre option "' + dataLabel.toLowerCase() + '" :'+
268
          '</label>'+
269
          '<input'+
270
            ' type="text"'+
271
            ' id="' + otherId + '"'+
272
            ' name="' + otherId + '"'+
273
            ' class="collect-other form-control"'+
274
            ' data-name="' + dataName + '"'+
275
            ' data-element="' + element + '"'+
276
          '>'+
277
        '</div>'
278
      );
279
      $( '#' + otherId ).focus();
280
    };
3638 delphine 281
  // Supprimer un champ texte pour "Autre"
3844 idir 282
  const optionRemove = otherId => $( '#' + otherId ).closest('.control-group').remove();
3638 delphine 283
 
3844 idir 284
  let dataName  = '',
285
      otherId   = '',
286
      dataLabel = '',
287
      element   = '';
288
 
3638 delphine 289
  $( '.other', '#formulaire' ).each( function() {
290
    if( $( this ).hasClass( 'is-select' ) ) {
3844 idir 291
      dataName  = $( this ).data( 'name' );
292
      otherId   = PREFIX + dataName;
293
      dataLabel = $( '.select' ).data( 'label' );
3638 delphine 294
      // Insertion du champ "Autre" après les boutons
3852 idir 295
      if ( !valOk( $( '#'+otherId ) ) ) {
3638 delphine 296
        optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName, dataLabel );
297
      }
298
    } else if ( $( this ).is( ':checked' ) ) {
3844 idir 299
      dataName  = $( this ).data( 'name' );
300
      otherId   = PREFIX + dataName;
301
      dataLabel = $( this ).data( 'label' );
302
      element = $( this ).data( 'element' );
3638 delphine 303
      // Insertion du champ "Autre" après les boutons
3852 idir 304
      if ( !valOk( $( '#'+ otherId ) ) ) {
3638 delphine 305
        optionAdd( otherId, $( this ).parent( 'label' ), element, dataName, dataLabel );
306
      }
307
    }
308
  });
309
 
310
  $( '#formulaire' ).on( 'change', '.select', function () {
3844 idir 311
    dataName  = $( this ).data( 'name' );
312
    otherId   = PREFIX + dataName;
313
    dataLabel = $( this ).data( 'label' );
3638 delphine 314
    if( 'other' === $( this ).val() ) {
315
        // Insertion du champ "Autre" après les boutons
3852 idir 316
        if ( !valOk( $( '#'+otherId ) ) ) {
3638 delphine 317
          optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName, dataLabel );
318
        }
319
      } else {
320
        // Suppression du champ autre
321
        optionRemove( otherId );
322
        $( this ).find( '.other' ).val( 'other' );
323
      }
324
  });
325
 
326
  $( '#formulaire' ).on( 'change', 'input[type=radio]', function () {
3844 idir 327
    dataName = $( this ).data( 'name' );
328
    otherId  = PREFIX + dataName;
329
    dataLabel = $( this ).data( 'label' );
3638 delphine 330
    if( 'other' === $( this ).val() ) {
331
      // Insertion du champ "Autre" après les boutons
3852 idir 332
      if ( !valOk( $( '#'+otherId ) ) ) {
3638 delphine 333
        optionAdd( otherId, $( this ).parent( 'label' ), 'radio', dataName, dataLabel );
334
      }
335
    } else {
336
      // Suppression du champ autre
337
      optionRemove( otherId );
338
      $( this ).closest( '.radio' ).find( '.other' ).val( 'other' );
339
    }
340
  });
341
 
342
  $( '#formulaire' ).on( 'click', '.list-checkbox .other,.checkbox .other', function () {
3844 idir 343
    dataName = $( this ).data( 'name' );
344
    otherId  = PREFIX + dataName;
345
    dataLabel = $( this ).data( 'label' );
346
    element = $( this ).data( 'element' );
3638 delphine 347
    if( $( this ).is( ':checked' ) ) {
348
        // Insertion du champ "Autre" après les boutons
3852 idir 349
        if ( !valOk( $( '#'+otherId ) ) ) {
3638 delphine 350
          optionAdd( otherId, $( this ).parent( 'label' ), element, dataName, dataLabel );
351
        }
352
      } else {
353
        // Suppression du champ autre
354
        optionRemove( otherId );
355
        $( this ).val( 'other' );
356
      }
357
  });
358
};
359
 
360
Utils.prototype.collectOtherOption = function() {
361
  $( '#formulaire' ).on( 'change', '.collect-other', function () {
3844 idir 362
    const otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' ),
363
      element           = $( this ).data( 'element' );
3638 delphine 364
 
365
    if ( '' === $( this ).val() ){
366
      if ( 'select' === element ) {
367
        $( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', false ).val( 'other' );
368
      } else {
369
        $( '#other-' + otherIdSuffix ).prop( 'checked', false ).val( 'other' );
370
      }
371
      $( 'label.collect-other-' + otherIdSuffix ).remove();
372
      $( this ).remove();
373
    } else {
374
      if ( 'select' === element ) {
375
        $( '#' +  otherIdSuffix ).find( '.other' ).val( $( this ).val() );
376
        $( '#' +  otherIdSuffix ).val( $( this ).val() );
377
        $( '#' +  otherIdSuffix + ' option').not( '.other' ).prop( 'selected', false );
378
        $( '#' +  otherIdSuffix ).find( '.other' ).prop( 'selected', true );
379
      } else {
380
        if ( 'radio' === element ) {
381
          $( 'input[name=' + otherIdSuffix + ']' ).not( '#other-' + otherIdSuffix ).prop( 'checked', false );
382
        }
383
        $( '#other-' + otherIdSuffix ).val( $( this ).val() );
384
        $( '#other-' + otherIdSuffix ).prop( 'checked', true );
385
      }
386
    }
387
  });
388
};
389
 
3899 idir 390
export const tryParseJson = str => {
391
  if ( 'string' !== typeof str ){
392
      return false;
393
  }
394
  try{
395
    const json = JSON.parse( str );
396
 
397
    if ( !!json && 'object' === typeof json ) {
398
      return json;
399
    } else {
400
      return false;
401
    }
402
  }
403
  catch ( e ){
404
      return false;
405
  }
406
};
407
 
3844 idir 408
/**
409
* Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide
410
* et de comparer à une autre valeur :
411
* Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN
412
* Si comparer est défini on le compare à valeur en fonction de sensComparaison
413
* Un booléen est une variable valide : on retourne true
414
* @param { string || number || object || undefined } valeur
415
* @param { boolean } sensComparaison : true = rechercher, false = refuser
416
* @param { string || number || object || undefined || boolean } comparer :valeur à comparer
417
* @returns {boolean}
418
*/
419
export const valOk = (
420
  valeur,
421
  sensComparaison = true,
422
  comparer = undefined
423
) => {
424
  let retour = true;
425
 
426
  if ( 'boolean' !== typeof valeur ) {
427
    switch( typeof valeur ) {
428
      case 'string' :
429
        retour = ( '' !== valeur );
430
       break;
431
      case 'number' :
432
          retour = ( NaN !== valeur );
433
        break;
434
      case 'object' :
435
          retour = ( null !== valeur && undefined !== valeur && !$.isEmptyObject( valeur ) );
436
          if (  null !== valeur && undefined !== valeur.length ) {
437
            retour = ( retour  && 0 < valeur.length );
438
          }
439
        break;
440
      case 'undefined' :
441
      default :
442
        retour = false;
443
    }
444
    if ( retour && comparer !== undefined ) {
445
      const resultComparaison = ( comparer === valeur );
446
 
447
      retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ;
448
    }
449
 
450
    return retour;
451
 
452
  } else {
453
    // Un booléen est une valeur valable
454
    return true;
455
  }
456
};