Subversion Repositories eFlore/Applications.cel

Rev

Rev 3217 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 3217 Rev 3239
Line 3... Line 3...
3 
/*************************************
 3 
/*************************************
4 
 *  Fonctions de Style et Affichage  *
 4 
 *  Fonctions de Style et Affichage  *
5 
 *      des éléments "spéciaux"      *
 5 
 *      des éléments "spéciaux"      *
6 
 *************************************/
 6 
 *************************************/
Line -... Line 7...
- 
 
 7 
 
- 
 
 8 
// Volet de profil/déconnexion
- 
 
 9 
function connexionDprodownMenu() {
- 
 
 10 
  $( '#utilisateur-connecte .volet-toggle, #profil-utilisateur a, #deconnexion a' ).click( function( event ) {
- 
 
 11 
    event.preventDefault();
- 
 
 12 
    $( '#utilisateur-connecte .volet-menu' ).toggleClass( 'hidden' );
- 
 
 13 
  });
- 
 
 14 
}
7 
 
 15 
 
8 
// Logique d'affichage pour le input type=file
 16 
// Logique d'affichage pour le input type=file
9 
function inputFile() {
 17 
function inputFile() {
10 
  // Initialisation des variables
 18 
  // Initialisation des variables
11 
  var $fileInput  = $( '.input-file' ),
 19 
  var $fileInput  = $( '.input-file' ),
Line 14... Line 22...
14 
  $( '.label-file' ).keydown( function( event ) {
 22 
  $( '.label-file' ).keydown( function( event ) {
15 
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
 23 
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
16 
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click();
 24 
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click();
17 
    }
 25 
    }
18 
  });
 26 
  });
19 
  // // Affiche un retour visuel dès que input:file change
 - 
 
20 
  // $('#form-supp').on( 'change', '.input-file', function( event ) {
 - 
 
21 
  //   // Il est possible de supprimer un fichier
 - 
 
22 
  //   // donc on vérifie que le 'change' est un ajout ou modification
 - 
 
23 
  //   if( !$.isEmptyObject( event.target.files[0] ) ) {
 - 
 
24 
  //     var file = event.target.files[0],
 - 
 
25 
  //         fileId = $( this ).attr( 'id' ),
 - 
 
26 
  //         $thisFile = $( this ).parent('.label-file.' + fileId ),
 - 
 
27 
  //         $imageContainer = $( '#miniatures' ),
 - 
 
28 
  //         $theReturn = $( '.' + fileId  + 'Img') || false,
 - 
 
29 
  //         fileImgHtml = '';
 - 
 
30 
 
 - 
 
31 
 
 - 
 
32 
  //     if( file.type.match( 'image' ) ) {
 - 
 
33 
  //       fileImgHtml =
 - 
 
34 
  //         '<div class="' + fileId + 'Img mb-1">'+
 - 
 
35 
  //           '<p> ' + file.name + '</p>'+
 - 
 
36 
  //           '<img src="' + URL.createObjectURL( file ) + '">'+
 - 
 
37 
  //         '</div>';
 - 
 
38 
  //     }
 - 
 
39 
  //     // Permettre d'enregistrer une nouvelle image
 - 
 
40 
  //     if( 0 < $theReturn.length ) {
 - 
 
41 
  //       // Changement du fichier
 - 
 
42 
  //       $theReturn.html( fileImgHtml );
 - 
 
43 
  //     } else {
 - 
 
44 
  //       $imageContainer.append( fileImgHtml );
 - 
 
45 
  //       $imageContainer.append( $thisFile  );
 - 
 
46 
 
 - 
 
47 
  //       $( '#photos-conteneur' ).html(
 - 
 
48 
  //           '<label for="fichier' + countFiles + '" class="label-file btn btn-default fichier' + countFiles + '">'+
 - 
 
49 
  //             '<i class="fas fa-download"></i> Ajouter une image'+
 - 
 
50 
  //             '<input type="file" id="fichier' + countFiles + '" name="fichier' + countFiles + '" class="input-file" accept="image/jpeg">'+
 - 
 
51 
  //             '<input type="hidden" name="MAX_FILE_SIZE" value="5242880">'+
 - 
 
52 
  //           '</label>'+
 - 
 
53 
  //           '<hr>'
 - 
 
54 
  //       );
 - 
 
55 
  //       countFiles++;
 - 
 
56 
  //     }
 - 
 
57 
  //     // Changer le text
 - 
 
58 
  //     $thisFile.find( '.label-text').html( '<i class="fas fa-exchange-alt"></i> Changer cette image');
 - 
 
59 
  //     $thisFile.css( 'background-color', '#ea9973' );
 - 
 
60 
  //     $thisFile.hover( function() {
 - 
 
61 
  //       $( this ).css( 'background-color', 'rgba(234, 153, 115, 0.7)' );
 - 
 
62 
  //     });
 - 
 
63 
  //     $( '.' + fileId  + 'Img img').attr( 'width', $thisFile.outerWidth() );
 - 
 
64 
 
 - 
 
65 
  //   }
 - 
 
66 
  // });
 - 
 
67 
  // // Annuler le téléchargement
 - 
 
68 
  // $( '.remove-file' ).click( function() {
 - 
 
69 
  //   var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' );
 - 
 
70 
  //   $thisFileInput.wrap( '<form>' ).closest( 'form' ).get(0).reset();
 - 
 
71 
  //   $thisFileInput.triggerHandler( 'change' );
 - 
 
72 
  //   $thisFileInput.unwrap();
 - 
 
73 
  //   $( this ).next( '.file-return' ).addClass( 'hidden' ).empty();
 - 
 
74 
  // });
 - 
 
75 
}
 27 
}
Line 76... Line 28...
76 
 
 28 
 
77 
// Style et affichage des list-checkboxes
 29 
// Style et affichage des list-checkboxes
78 
function inputListCheckbox() {
 30 
function inputListCheckbox() {
Line 102... Line 54...
102 
  });
 54 
  });
103 
}
 55 
}
Line 104... Line 56...
104 
 
 56 
 
105 
// Style et affichage des input type="range"
 57 
// Style et affichage des input type="range"
106 
function inputRangeDisplayNumber() {
 58 
function inputRangeDisplayNumber() {
- 
 
 59 
  $( 'input[type="range"]' ).each( function() {
107 
  $( '#zone-appli' ).on( 'input' , '.range input[type="range"]' , function () {
 60 
 
108 
    $( this ).next( 'input[type="number"]' ).val ( $( this ).val() );
 61 
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
109 
  });
 62 
  });
- 
 
 63 
  $( '#zone-supp' ).on( 'input' , 'input[type="range"]' , function () {
110 
  $( '#zone-appli' ).on( 'input' , '.range input[type="number"]' , function () {
 64 
    console.log( 'nello' );
111 
    $( this ).prev( 'input[type="range"]' ).val ( $( this ).val() );
 65 
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
112 
  });
 66 
  });
Line 113... Line 67...
113 
}
 67 
}
114 
 
 68 
 
115 
// Activation/Desactivation et contenu de la modale Bootstrap
 69 
// Activation/Desactivation et contenu de la modale Bootstrap
116 
// https://getbootstrap.com/docs/3.3/javascript/#modals
 70 
// https://getbootstrap.com/docs/3.3/javascript/#modals
117 
function previewFieldHelpModal() {
 71 
function newFieldsHelpModal() {
118 
  $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {
 - 
 
119 
    var thisFieldKey = $( this ).data( 'key' ),
 - 
 
120 
        // filePath ci dessous est un test, obtenir une vraie url une fois les fichiers d'aide accessibles
 72 
  $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {
Line 121... Line 73...
121 
        filePath = 'https://beta.tela-botanica.org/tmp/eflore_v5_cache/pdf/Fabaceae-3497041375.pdf',
 73 
    var thisFieldKey = $( this ).data( 'key' ),
122 
        fileMimeType = $( this ).data( 'mime-type' );
 74 
        fileMimeType = $( this ).data( 'mime-type' );
Line 123... Line 75...
123 
 
 75 
 
124 
    // Titre
 76 
    // Titre
125 
    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( this ).data( 'name' ) );
 77 
    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( this ).data( 'name' ) );
126 
 
 78 
 
127 
    if( fileMimeType.match( 'image' ) ) {
 79 
    if( fileMimeType.match( 'image' ) ) {
Line 128... Line 80...
128 
      $( '#print_content' ).append( '<img src="' + filePath + '" style="max-width:100%">' );
 80 
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
129 
    } else if( fileMimeType.match( 'pdf' ) ) {
 81 
      // var extention = 'jpg';
130 
      $( '#print_content' ).append( '<iframe src="' + filePath + '" width="100%" height="650" align="middle" scrolling="no" frameborder="0"></iframe>' );
 82 
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + thisFieldKey + '.' + extention + '" style="max-width:100%" alt="' + thisFieldKey + '" />' );
Line 148... Line 100...
148 
      $( '#print_content' ).empty();
 100 
      $( '#print_content' ).empty();
149 
    })
 101 
    })
150 
  });
 102 
  });
151 
}
 103 
}
Line -... Line 104...
- 
 
 104 
 
- 
 
 105 
// Activation/Desactivation et contenu de la modale Bootstrap
- 
 
 106 
// https://getbootstrap.com/docs/3.3/javascript/#modals
- 
 
 107 
function projetHelpModale() {
- 
 
 108 
  $( '#info-button' ).click( function ( event ) {
- 
 
 109 
    var fileMimeType = $( this ).data( 'mime-info' );
- 
 
 110 
 
- 
 
 111 
    // Titre
- 
 
 112 
    $( '#help-modal-label' ).text( 'Aide du projet : ' +  $( '#titre-projet' ).text() );
- 
 
 113 
 
- 
 
 114 
    if( fileMimeType.match( 'image' ) ) {
- 
 
 115 
 
- 
 
 116 
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
- 
 
 117 
 
- 
 
 118 
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + 'info.' + extention + '" style="max-width:100%" alt="info projet" />' );
- 
 
 119 
    }
- 
 
 120 
 
- 
 
 121 
    // Sortie avec la touche escape
- 
 
 122 
    $( '#help-modal' ).modal( { keyboard : true } );
- 
 
 123 
    // Affichage
- 
 
 124 
    $( '#help-modal' ).modal({ show: true });
- 
 
 125 
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
- 
 
 126 
    // Message dans la doc de bootstrap :
- 
 
 127 
    // Due to how HTML5 defines its semantics,
- 
 
 128 
    // the autofocus HTML attribute has no effect in Bootstrap modals.
- 
 
 129 
    // To achieve the same effect, use some custom JavaScript
- 
 
 130 
    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
- 
 
 131 
      $( '#myInput' ).trigger( 'focus' );
- 
 
 132 
    })
- 
 
 133 
    // Réinitialisation
- 
 
 134 
    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
- 
 
 135 
      $( '#help-modal-label' ).text();
- 
 
 136 
      $( '#print_content' ).empty();
- 
 
 137 
    });
- 
 
 138 
 
- 
 
 139 
  });
- 
 
 140 
}
- 
 
 141 
 
152 
 
 142 
 
153 
// Faire apparaitre un champ text "Autre"
 143 
// Faire apparaitre un champ text "Autre"
Line 154... Line 144...
154 
function onOtherOption() {
 144 
function onOtherOption() {
Line 251... Line 241...
251 
}
 241 
}
Line 252... Line 242...
252 
 
 242 
 
253 
/***************************
 243 
/***************************
254 
 *  Lancement des scripts  *
 244 
 *  Lancement des scripts  *
- 
 
 245 
 ***************************/
- 
 
 246 
const CHEMIN_FICHIERS = $( '#zone-appli' ).data('url-fichiers');
255 
 ***************************/
 247 
 
- 
 
 248 
jQuery( document ).ready( function() {
- 
 
 249 
 
- 
 
 250 
  // Volet de profil/déconnexion
- 
 
 251 
  connexionDprodownMenu();
- 
 
 252 
 
- 
 
 253 
  // Modale "aide" du projet
256 
jQuery( document ).ready( function() {
 254 
  projetHelpModale();
257 
  // Affichage des images ou nom des documents importés
 255 
  // Affichage input file
258 
  inputFile();
 256 
  inputFile();
259 
  // Affichage des List-checkbox
 257 
  // Affichage des List-checkbox
Line 260... Line 258...
260 
  inputListCheckbox();
 258 
  inputListCheckbox();
261 
 
 259 
 
Line 262... Line 260...
262 
  // // Affichage des Range
 260 
  // Affichage des Range
263 
  // inputRangeDisplayNumber()
 261 
  inputRangeDisplayNumber()
- 
 
 262 
 
264 
 
 263 
  // Modale "aide"
265 
  // Modale "aide"
 264 
  newFieldsHelpModal();
- 
 
 265 
 
266 
  previewFieldHelpModal();
 266 
  // Ajout/suppression d'un champ texte "Autre"
267 
  // Ajout/suppression d'un champ texte "Autre"
 267 
  onOtherOption();