Subversion Repositories eFlore/Applications.cel

"use strict";

/*************************************

 *  Fonctions de Style et Affichage  *

 *      des éléments "spéciaux"      *

 *************************************/

// Logique d'affichage pour le input type=file

function inputFile() {

  // Initialisation des variables

  var $fileInput  = $( '.input-file' ),

      $button     = $( '.label-file' );

  // Action lorsque la "barre d'espace" ou "Entrée" est pressée

  $( '.label-file' ).keydown( function( event ) {

    if ( event.keyCode == 13 || event.keyCode == 32 ) {

      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click();

    }

  });

  // // Affiche un retour visuel dès que input:file change

  // $('#form-supp').on( 'change', '.input-file', function( event ) {

  //   // Il est possible de supprimer un fichier

  //   // donc on vérifie que le 'change' est un ajout ou modification

  //   if( !$.isEmptyObject( event.target.files[0] ) ) {

  //     var file = event.target.files[0],

  //         fileId = $( this ).attr( 'id' ),

  //         $thisFile = $( this ).parent('.label-file.' + fileId ),

  //         $imageContainer = $( '#miniatures' ),

  //         $theReturn = $( '.' + fileId  + 'Img') || false,

  //         fileImgHtml = '';

  //     if( file.type.match( 'image' ) ) {

  //       fileImgHtml =

  //         '<div class="' + fileId + 'Img mb-1">'+

  //           '<p> ' + file.name + '</p>'+

  //           '<img src="' + URL.createObjectURL( file ) + '">'+

  //         '</div>';

  //     }

  //     // Permettre d'enregistrer une nouvelle image

  //     if( 0 < $theReturn.length ) {

  //       // Changement du fichier

  //       $theReturn.html( fileImgHtml );

  //     } else {

  //       $imageContainer.append( fileImgHtml );

  //       $imageContainer.append( $thisFile  );

  //       $( '#photos-conteneur' ).html(

  //           '<label for="fichier' + countFiles + '" class="label-file btn btn-default fichier' + countFiles + '">'+

  //             '<i class="fas fa-download"></i> Ajouter une image'+

  //             '<input type="file" id="fichier' + countFiles + '" name="fichier' + countFiles + '" class="input-file" accept="image/jpeg">'+

  //             '<input type="hidden" name="MAX_FILE_SIZE" value="5242880">'+

  //           '</label>'+

  //           '<hr>'

  //       );

  //       countFiles++;

  //     }

  //     // Changer le text

  //     $thisFile.find( '.label-text').html( '<i class="fas fa-exchange-alt"></i> Changer cette image');

  //     $thisFile.css( 'background-color', '#ea9973' );

  //     $thisFile.hover( function() {

  //       $( this ).css( 'background-color', 'rgba(234, 153, 115, 0.7)' );

  //     });

  //     $( '.' + fileId  + 'Img img').attr( 'width', $thisFile.outerWidth() );

  //   }

  // });

  // // Annuler le téléchargement

  // $( '.remove-file' ).click( function() {

  //   var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' );

  //   $thisFileInput.wrap( '<form>' ).closest( 'form' ).get(0).reset();

  //   $thisFileInput.triggerHandler( 'change' );

  //   $thisFileInput.unwrap();

  //   $( this ).next( '.file-return' ).addClass( 'hidden' ).empty();

  // });

}

// Style et affichage des list-checkboxes

function inputListCheckbox() {

  // On écoute le click sur une list-checkbox ('.selectBox')

  // à tout moment de son insertion dans le dom

  // Todo :

  // _ S'assurer de bien viser la bonne list-checkbox

  // _ Au click sur un autre champ remballer la list-checkbox

  $( document ).click( function( event ) {

    var target = event.target;

    if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) {

      $( '.checkboxes' ).each( function () {

        $( this ).addClass( 'hidden' );

      });

      $( '.selectBox select.focus' ).each( function() {

        $( this ).removeClass( 'focus' );

      });

    }

  });

  $( '#zone-appli' ).on( 'click' , '.selectBox' , function() {

    // $( '.checkboxes[data-id="' + $(this).attr( 'data-id' ) + '"]' ).toggleClass( 'hidden' );

    $( this ).next().toggleClass( 'hidden' );

    $( this ).find( 'select' ).toggleClass( 'focus' );

  });

}

// Style et affichage des input type="range"

function inputRangeDisplayNumber() {

  $( '#zone-appli' ).on( 'input' , '.range input[type="range"]' , function () {

    $( this ).next( 'input[type="number"]' ).val ( $( this ).val() );

  });

  $( '#zone-appli' ).on( 'input' , '.range input[type="number"]' , function () {

    $( this ).prev( 'input[type="range"]' ).val ( $( this ).val() );

  });

}

// Activation/Desactivation et contenu de la modale Bootstrap

// https://getbootstrap.com/docs/3.3/javascript/#modals

function previewFieldHelpModal() {

  $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {

    var thisFieldKey = $( this ).data( 'key' ),

        // filePath ci dessous est un test, obtenir une vraie url une fois les fichiers d'aide accessibles

        filePath = 'https://beta.tela-botanica.org/tmp/eflore_v5_cache/pdf/Fabaceae-3497041375.pdf',

        fileMimeType = $( this ).data( 'mime-type' );

    // Titre

    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( this ).data( 'name' ) );

    if( fileMimeType.match( 'image' ) ) {

      $( '#print_content' ).append( '<img src="' + filePath + '" style="max-width:100%">' );

    } else if( fileMimeType.match( 'pdf' ) ) {

      $( '#print_content' ).append( '<iframe src="' + filePath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );

    }

    // Sortie avec la touche escape

    $( '#help-modal' ).modal( { keyboard : true } );

    // Affichage

    $( '#help-modal' ).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

    $( '#help-modal' ).on( 'shown.bs.modal' , function () {

      $( '#myInput' ).trigger( 'focus' );

    })

    // Réinitialisation

    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {

      $( '#help-modal-label' ).text();

      $( '#print_content' ).empty();

    })

  });

}

// Faire apparaitre un champ text "Autre"

function onOtherOption() {

  const PREFIX = 'collect-other-';

  // Ajouter un champ texte pour "Autre"

  function optionAdd( otherId, $target, element ) {

    $target.after(

      '<label for="' + otherId + '" class="' + otherId + '">Autre option :</label>' +

      '<input type="text" id="' + otherId + '" name="' + otherId + '" class="collect-other" data-element="' + element + '">'

    );

  }

  // Supprimer un champ texte pour "Autre"

  function optionRemove( otherId, $this ) {

    $( '.' + otherId + ', #' + otherId ).remove();

  }

  $( '#form-supp .other' ).each( function() {

    if( $( this ).hasClass( 'is-select' ) ) {

      var otherId = PREFIX + $( this ).parent( 'select' ).attr( 'name' );

      // Insertion du champ "Autre" après les boutons

      optionAdd( otherId, $( this ).parent( '.select' ) , 'select' );

    } else if ( $( this ).is( ':checked' ) ) {

      var otherId = PREFIX + $( this ).attr( 'name' ),

          element = $( this ).attr( 'data-element' );

      // Insertion du champ "Autre" après les boutons

      optionAdd( otherId, $( this ).parent( 'label' ) , element );

    }

  });

  $( '#form-supp select' ).change( function () {

    var otherId = PREFIX + $( this ).attr( 'name' );

    if( 'other' === $( this ).val() ) {

        // Insertion du champ "Autre" après les boutons

        optionAdd( otherId, $( this ).parent( '.select' ), 'select' );

      } else {

        // Suppression du champ autre

        optionRemove( otherId, $( this ) );

        $( this ).find( '.other' ).val( 'other' );

      }

  });

  $( '#form-supp input[type=radio]' ).change( function () {

    var otherId = PREFIX + $( this ).attr( 'name' );

    if( 'other' === $( this ).val() ) {

        // Insertion du champ "Autre" après les boutons

        optionAdd( otherId, $( this ).parent( 'label' ), 'radio' );

    } else {

      // Suppression du champ autre

      optionRemove( otherId, $( this ) );

      $( this ).closest( 'div.control-group.radio' ).find( '.other' ).val( 'other' );

    }

  });

  $( '#form-supp .list-checkbox .other, #form-supp .checkbox .other' ).click( function () {

    var otherId = PREFIX + $( this ).attr( 'name' ),

        element = $( this ).attr( 'data-element' );

    // console.log(element);

    if( $( this ).is( ':checked' ) ) {

        // Insertion du champ "Autre" après les boutons

        optionAdd( otherId, $( this ).parent( 'label' ), element );

      } else {

        // Suppression du champ autre

        optionRemove( otherId, $( this ) );

        $( this ).val( 'other' );

      }

  });

}

function collectOtherOption() {

  $( '#form-supp' ).on( 'change', '.collect-other', function () {

    var otherIdSuffix = $( this ).attr( 'name' ).replace( 'collect-other-', '' ),

        element = $( this ).attr( 'data-element' );

    if ( '' === $( this ).val() ){

      if ( 'select' === element ) {

        $( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', false );

      } else {

        $( '#other-' + otherIdSuffix ).prop( 'checked', false );

      }

    } else {

      if ( 'select' === element ) {

        $( '#' +  otherIdSuffix ).find( '.other' ).val( $( this ).val() );

        $( '#' +  otherIdSuffix + ' option').not( '.other' ).prop( 'selected', false );

        $( '#' +  otherIdSuffix ).find( '.other' ).prop( 'selected', true );

      } else {

        if ( 'radio' === element ) {

          $( 'input[name=' + otherIdSuffix + ']' ).not( '#other-' + otherIdSuffix ).prop( 'checked', false );

        }

        // console.log( otherIdSuffix );

        $( '#other-' + otherIdSuffix ).val( $( this ).val() );

        $( '#other-' + otherIdSuffix ).prop( 'checked', true );

      }

    }

  });

}

/***************************

 *  Lancement des scripts  *

 ***************************/

jQuery( document ).ready( function() {

  // Affichage des images ou nom des documents importés

  inputFile();

  // Affichage des List-checkbox

  inputListCheckbox();

  // // Affichage des Range

  // inputRangeDisplayNumber()

  // Modale "aide"

  previewFieldHelpModal();

  // Ajout/suppression d'un champ texte "Autre"

  onOtherOption();

  collectOtherOption();

});