Subversion Repositories eFlore/Applications.cel

import {findFieldset} from './utils.js';

/*************************************
 *  Fonctions de Style et Affichage  *
 *      des éléments "spéciaux"      *
 *************************************/
export const displayFields = () => {
  inputFile();
  inputListCheckbox();
  inputRangeDisplayNumber();
  previewFieldHelpModal();
};

// Logique d'affichage pour le input type=file
export const inputFile = () => {
   const fileInputSelector = '.input-file',
    $button = $('.label-file'),
    focusOnIntputFile = selector => $('#'+selector+fileInputSelector).focus();

  // focus lorsque la "barre d'espace" ou "Entrée" est pressée
  $button.on('keydown', function(event) {
    if (event.keyCode == 13 || event.keyCode == 32) {
      focusOnIntputFile($(this).attr('for'));
    }
  });
  // focus lorsque le label est cliqué
  $button.on('click', function () {
    focusOnIntputFile($(this).attr('for'));
    return false;
  });

  // Affiche un retour visuel dès que input:file change
  $(fileInputSelector).on('change', function(event) {
    // Il est possible de supprimer un fichier
    // donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value
    if (!$.isEmptyObject(event.target.files[0])) {
      const file = event.target.files[0],
          fileSelector = $(this).attr('id'),
          $theReturn = $('.'+fileSelector);

      // Affichage du nom du fichier
      $theReturn.text(file.name).removeClass('hidden');

      if (5242880 < file.size) {
        $theReturn.append(
          `<p class="message">
            <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> 
            La taille du fichier ne doit pas dépasser 5Mo
          </p>`
        )
        .addClass('invalid');
        // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
        $(this).clearInputs();
        console.log(file);

      } else if (file.type.match('image/*') && 'especes' !== fileSelector) {
      // Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche
        // Chemin temporaire de l'image et affichage
        const tmppath = URL.createObjectURL(file);

        $theReturn.append(`<img src="${tmppath}" width="50%">`).removeClass('invalid');

      } else if (!('especes' === fileSelector && file.type.match('text/(:?csv|tab-separated-values)'))) {
        // on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv
        console.log(file.type);

        if ('especes' === fileSelector) {// cas où on demandait un csv
          $theReturn.append(
            `<p class="message">
              <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> 
              Le fichier doit être au format csv ou tsv
            </p>`
          )
          .addClass('invalid');
        } else { // cas où on demandait un format image
          $theReturn.append(
            `<p class="message">'+
              <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> 
              Le fichier doit être au format image (jpg, png, etc.)
            </p>`
          )
          .addClass('invalid');
        }
        // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
        $(this).clearInputs();
        console.log(file);
      } else {// file "especes" csv ok
        $theReturn.append(' <i class="fa fa-check-circle" aria-hidden="true" style="color:#B3C954;font-size:1.3rem"></i>').removeClass('invalid');
      }
    }
  });
  // Annuler le téléchargement
  $('.remove-file').click(function () {
    const $thisFileInput = $(this).prev('.input-file-container').find('.input-file');

    // lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js
    $thisFileInput.clearInputs();
    $thisFileInput.triggerHandler('change');
    // $thisFileInput.unwrap();
    $(this).next('.file-return').addClass('hidden').empty();
  });
};

// Style et affichage des list-checkboxes
export const inputListCheckbox = () => {
  // On écoute le click sur une list-checkbox ('.selectBox')
  // à tout moment de son insertion dans le dom
  $('#zone-appli').on('click', '.selectBox', function () {
    $(`.checkboxes[data-id="${$(this).data('id')}"]`).toggleClass('hidden');
  });
};

// Style et affichage des input type="range"
export const inputRangeDisplayNumber = () => {
  $('#zone-appli').on('input', 'input[type="range"]', function () {
    $(this).siblings('.range-live-value').text($(this).val());
  });
};


// Activation/Desactivation et contenu de la modale Bootstrap
// https://getbootstrap.com/docs/3.3/javascript/#modals
export const previewFieldHelpModal = () => {
  $('#zone-supp').on('click', '.help-button', function () {
    const index       = $(this).closest('.preview-fields').data('id'),
      $thisFieldset   = findFieldset(index),
      file            = $('.field-help', $thisFieldset)[0].files[0],
      tmppath         = URL.createObjectURL(file),
      $helpModal      = $('#help-modal'),
      $helpModalLabel = $('#help-modal-label'),
      $printContent   = $('#print_content');

    // Titre
    $helpModalLabel.text('Aide pour : '+$('.field-name', $thisFieldset).val());
    // Contenu
    if (file.type.match('image/*')) {
        $printContent.append(`<img src="${tmppath}" style="max-width:100%">`);
    } else {
      $printContent.append('<p>Erreur : le fichier n’est pas une image</p>');
    }
    // Sortie avec la touche escape
    $helpModal.modal({keyboard: true});
    // Affichage
    $helpModal.modal({show: true});
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
    // Message dans la doc de bootstrap :
    // Due to how HTML5 defines its semantics,
    // the autofocus HTML attribute has no effect in Bootstrap modals.
    // To achieve the same effect, use some custom JavaScript
    $helpModal.on('shown.bs.modal', function () {
      $('#myInput').trigger('focus');
    })
    // Réinitialisation
    $helpModal.on('hidden.bs.modal', function () {
      $helpModalLabel.text();
      $printContent.empty();
    })
  });
};