WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/saisie2/squelettes/js/champs-supp.js

 "use strict";
 /*************************************
  *  Fonctions de Style et Affichage  *
  *      des éléments "spéciaux"      *
  *************************************/
+// Volet de profil/déconnexion
+function connexionDprodownMenu() {
+  $( '#utilisateur-connecte .volet-toggle, #profil-utilisateur a, #deconnexion a' ).click( function( event ) {
+    event.preventDefault();
+    $( '#utilisateur-connecte .volet-menu' ).toggleClass( 'hidden' );
+  });
+}
 // 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 () {
+  $( 'input[type="range"]' ).each( function() {
-    $( this ).next( 'input[type="number"]' ).val ( $( this ).val() );
+    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
   });
-  $( '#zone-appli' ).on( 'input' , '.range input[type="number"]' , function () {
+  $( '#zone-supp' ).on( 'input' , 'input[type="range"]' , function () {
+    console.log( 'nello' );
-    $( this ).prev( 'input[type="range"]' ).val ( $( this ).val() );
+    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
   });
+}
 // Activation/Desactivation et contenu de la modale Bootstrap
 // https://getbootstrap.com/docs/3.3/javascript/#modals
-function previewFieldHelpModal() {
+function newFieldsHelpModal() {
   $( '#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%">' );
+      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
-    } else if( fileMimeType.match( 'pdf' ) ) {
+      // var extention = 'jpg';
-      $( '#print_content' ).append( '<iframe src="' + filePath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );
+      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + thisFieldKey + '.' + extention + '" style="max-width:100%" alt="' + thisFieldKey + '" />' );
+    }
     // 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();
     })
   });
+}
+// Activation/Desactivation et contenu de la modale Bootstrap
+// https://getbootstrap.com/docs/3.3/javascript/#modals
+function projetHelpModale() {
+  $( '#info-button' ).click( function ( event ) {
+    var fileMimeType = $( this ).data( 'mime-info' );
+    // Titre
+    $( '#help-modal-label' ).text( 'Aide du projet : ' +  $( '#titre-projet' ).text() );
+    if( fileMimeType.match( 'image' ) ) {
+      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
+      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + 'info.' + extention + '" style="max-width:100%" alt="info projet" />' );
+    }
+    // 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  *
  ***************************/
+const CHEMIN_FICHIERS = $( '#zone-appli' ).data('url-fichiers');
 jQuery( document ).ready( function() {
+  // Volet de profil/déconnexion
+  connexionDprodownMenu();
+  // Modale "aide" du projet
+  projetHelpModale();
-  // Affichage des images ou nom des documents importés
+  // Affichage input file
   inputFile();
   // Affichage des List-checkbox
   inputListCheckbox();
-  // // Affichage des Range
+  // Affichage des Range
-  // inputRangeDisplayNumber()
+  inputRangeDisplayNumber()
+  // Modale "aide"
-  // Modale "aide"
+  newFieldsHelpModal();
   previewFieldHelpModal();
+  // Ajout/suppression d'un champ texte "Autre"
-  // Ajout/suppression d'un champ texte "Autre"
+  onOtherOption();
-  onOtherOption();
+  // Récupérer les données entrées dans "Autre"
   collectOtherOption();
 });

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/saisie2/squelettes/js/champs-supp.js – Rev 3217 → 3239