Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
3892 idir 1
import {findFieldset} from './utils.js';
2
 
3
/*************************************
4
 *  Fonctions de Style et Affichage  *
5
 *      des éléments "spéciaux"      *
6
 *************************************/
7
export const displayFields = () => {
8
  inputFile();
9
  inputListCheckbox();
10
  inputRangeDisplayNumber();
11
  previewFieldHelpModal();
12
};
13
 
14
// Logique d'affichage pour le input type=file
15
export const inputFile = () => {
16
   const fileInputSelector = '.input-file',
17
    $button = $('.label-file'),
18
    focusOnIntputFile = selector => $('#'+selector+fileInputSelector).focus();
19
 
20
  // focus lorsque la "barre d'espace" ou "Entrée" est pressée
21
  $button.on('keydown', function(event) {
22
    if (event.keyCode == 13 || event.keyCode == 32) {
23
      focusOnIntputFile($(this).attr('for'));
24
    }
25
  });
26
  // focus lorsque le label est cliqué
27
  $button.on('click', function () {
28
    focusOnIntputFile($(this).attr('for'));
29
    return false;
30
  });
31
 
32
  // Affiche un retour visuel dès que input:file change
33
  $(fileInputSelector).on('change', function(event) {
34
    // Il est possible de supprimer un fichier
35
    // donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value
36
    if (!$.isEmptyObject(event.target.files[0])) {
37
      const file = event.target.files[0],
38
          fileSelector = $(this).attr('id'),
39
          $theReturn = $('.'+fileSelector);
40
 
41
      // Affichage du nom du fichier
42
      $theReturn.text(file.name).removeClass('hidden');
43
 
44
      if (5242880 < file.size) {
45
        $theReturn.append(
46
          `<p class="message">
47
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
48
            La taille du fichier ne doit pas dépasser 5Mo
49
          </p>`
50
        )
51
        .addClass('invalid');
52
        // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
53
        $(this).clearInputs();
54
        console.log(file);
55
 
56
      } else if (file.type.match('image/*') && 'especes' !== fileSelector) {
57
      // Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche
58
        // Chemin temporaire de l'image et affichage
59
        const tmppath = URL.createObjectURL(file);
60
 
61
        $theReturn.append(`<img src="${tmppath}" width="50%">`).removeClass('invalid');
62
 
63
      } else if (!('especes' === fileSelector && file.type.match('text/(:?csv|tab-separated-values)'))) {
64
        // on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv
65
        console.log(file.type);
66
 
67
        if ('especes' === fileSelector) {// cas où on demandait un csv
68
          $theReturn.append(
69
            `<p class="message">
70
              <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
71
              Le fichier doit être au format csv ou tsv
72
            </p>`
73
          )
74
          .addClass('invalid');
75
        } else { // cas où on demandait un format image
76
          $theReturn.append(
77
            `<p class="message">'+
78
              <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
79
              Le fichier doit être au format image (jpg, png, etc.)
80
            </p>`
81
          )
82
          .addClass('invalid');
83
        }
84
        // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
85
        $(this).clearInputs();
86
        console.log(file);
87
      } else {// file "especes" csv ok
88
        $theReturn.append(' <i class="fa fa-check-circle" aria-hidden="true" style="color:#B3C954;font-size:1.3rem"></i>').removeClass('invalid');
89
      }
90
    }
91
  });
92
  // Annuler le téléchargement
93
  $('.remove-file').click(function () {
94
    const $thisFileInput = $(this).prev('.input-file-container').find('.input-file');
95
 
96
    // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
97
    $thisFileInput.clearInputs();
98
    $thisFileInput.triggerHandler('change');
99
    // $thisFileInput.unwrap();
100
    $(this).next('.file-return').addClass('hidden').empty();
101
  });
102
};
103
 
104
// Style et affichage des list-checkboxes
105
export const inputListCheckbox = () => {
106
  // On écoute le click sur une list-checkbox ('.selectBox')
107
  // à tout moment de son insertion dans le dom
108
  $('#zone-appli').on('click', '.selectBox', function () {
109
    $(`.checkboxes[data-id="${$(this).data('id')}"]`).toggleClass('hidden');
110
  });
111
};
112
 
113
// Style et affichage des input type="range"
114
export const inputRangeDisplayNumber = () => {
115
  $('#zone-appli').on('input', 'input[type="range"]', function () {
116
    $(this).siblings('.range-live-value').text($(this).val());
117
  });
118
};
119
 
120
 
121
// Activation/Desactivation et contenu de la modale Bootstrap
122
// https://getbootstrap.com/docs/3.3/javascript/#modals
123
export const previewFieldHelpModal = () => {
124
  $('#zone-supp').on('click', '.help-button', function () {
125
    const index       = $(this).closest('.preview-fields').data('id'),
126
      $thisFieldset   = findFieldset(index),
127
      file            = $('.field-help', $thisFieldset)[0].files[0],
128
      tmppath         = URL.createObjectURL(file),
129
      $helpModal      = $('#help-modal'),
130
      $helpModalLabel = $('#help-modal-label'),
131
      $printContent   = $('#print_content');
132
 
133
    // Titre
134
    $helpModalLabel.text('Aide pour : '+$('.field-name', $thisFieldset).val());
135
    // Contenu
136
    if (file.type.match('image/*')) {
137
        $printContent.append(`<img src="${tmppath}" style="max-width:100%">`);
138
    } else {
139
      $printContent.append('<p>Erreur : le fichier n’est pas une image</p>');
140
    }
141
    // Sortie avec la touche escape
142
    $helpModal.modal({keyboard: true});
143
    // Affichage
144
    $helpModal.modal({show: true});
145
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
146
    // Message dans la doc de bootstrap :
147
    // Due to how HTML5 defines its semantics,
148
    // the autofocus HTML attribute has no effect in Bootstrap modals.
149
    // To achieve the same effect, use some custom JavaScript
150
    $helpModal.on('shown.bs.modal', function () {
151
      $('#myInput').trigger('focus');
152
    })
153
    // Réinitialisation
154
    $helpModal.on('hidden.bs.modal', function () {
155
      $helpModalLabel.text();
156
      $printContent.empty();
157
    })
158
  });
159
};