| 1,13 → 1,17 |
|---|
| function WidgetPhotoPopup( proprietes ) { |
| if( this.valOk( proprietes ) ) { |
| this.urlWidget = proprietes.urlWidget; |
| this.urls = proprietes.urls; |
| this.infos_images = proprietes.infos_images; |
| this.indexImage = proprietes.indexImage; |
| this.urlImage = proprietes.urlImage; |
| this.tailleMax = proprietes.tailleMax; |
| this.popup_url = proprietes.popup_url; |
| this.urlWidget = proprietes.urlWidget; |
| this.urls = proprietes.urls; |
| this.infos_images = proprietes.infos_images; |
| this.indexImage = proprietes.indexImage; |
| this.urlImage = proprietes.urlImage; |
| this.tailleMax = proprietes.tailleMax; |
| this.popupUrl = proprietes.popupUrl; |
| this.urlBaseTelechargement = proprietes.urlBaseTelechargement; |
| this.urlServiceRegenererMiniature = proprietes.urlServiceRegenererMiniature; |
| } |
| |
| this.mettreAJourInfosImage(); |
| } |
| |
| WidgetPhotoPopup.prototype = new WidgetPhotoCommun(); |
| 15,11 → 19,15 |
|---|
| WidgetPhotoPopup.prototype.initTpl = function() { |
| this.redimensionnerGalerie(); |
| if( this.valOk( this.urlImage, false, 'null' ) ) { |
| |
| this.indexImage = this.urls.indexOf( this.urlImage ); |
| |
| $( '#info-img-galerie' ).find( '.active' ).removeClass( 'active' ); |
| $( '#img-cadre-' + this.indexImage + ',#indicateur-img-' + this.indexImage ).addClass( 'active' ); |
| this.afficherTitreImage(); |
| |
| this.mettreAJourPopup(); |
| } |
| |
| this.redimentionnerModaleCarousel(); |
| }; |
| |
| 29,11 → 37,33 |
|---|
| this.initEvtsDefilerImage(); |
| this.initEvtsContact(); |
| $( window ).on( 'resize', lthis.redimentionnerModaleCarousel.bind( lthis ) ); |
| this.initEvtsFonstionsPhoto(); |
| this.initEvtsFonctionsPhoto(); |
| this.initEvtsRetourGalerieResponsive(); |
| this.initEvtsTagsPF(); |
| }; |
| |
| WidgetPhotoPopup.prototype.mettreAJourPopup = function() { |
| this.mettreAJourInfosImage(); |
| this.afficherTitreImage(); |
| this.traiterMetas(); |
| this.regenererMiniature(); |
| this.fournirLienIdentiplante(); |
| }; |
| |
| WidgetPhotoPopup.prototype.mettreAJourInfosImage = function() { |
| this.item = this.infos_images[this.urls[this.indexImage]]; |
| this.titreImage = this.item['titre']; |
| this.lienEflore = this.item['lien']; |
| this.idImage = this.item['id_photo']; |
| this.urlThisImage = this.item['url_photo']+'.jpg'; |
| this.obs = this.item['obs']; |
| this.nn = '[nn' + this.obs['nom_sel_nn']+']'; |
| this.urlIP = 'https://'+this.obs['url_ip']; |
| this.auteur = this.item['utilisateur']['nom_utilisateur']; |
| this.urlProfil = '/profil-par-id/'+this.item['utilisateur']['id_utilisateur']; |
| this.date = this.item['date']; |
| }; |
| |
| WidgetPhotoPopup.prototype.initEvtsDefilerImage = function() { |
| const lthis = this; |
| |
| 40,22 → 70,26 |
|---|
| $( '#precedent, #suivant' ).on( 'click', function() { |
| lthis.defilerImage( this.id ); |
| }); |
| |
| $( '#print_content:not(saisir-tag)' ).on( 'keydown', function( event ) { |
| var sens = ''; |
| |
| event = event || window.event; |
| // event.keyCode déprécié, on tente d'abord event.key |
| if ( 'key' in event ) { |
| if( event.key === 'ArrowLeft') { // gauche |
| sens = 'suivant'; |
| } else if ( event.key === 'ArrowRight' ) { // droite |
| sens = 'precedent'; |
| const determinerSens = function( enventKey, left, right ) { |
| switch ( enventKey ) { |
| case left: |
| return 'suivant'; |
| case right: |
| return 'precedent' |
| default: |
| break; |
| } |
| } else if( event.keyCode == 37 ) { // gauche |
| sens = 'suivant'; |
| } else if( event.keyCode == 39 ) { // droite |
| sens = 'precedent'; |
| |
| return; |
| } |
| |
| event = (event || window.event); |
| // event.keyCode déprécié, on tente d'abord event.key |
| let sens = ( 'key' in event ) ? determinerSens( event.key, 'ArrowLeft', 'ArrowRight' ) : determinerSens( event.keyCode, 37, 39 );; |
| |
| if ( lthis.valOk( sens ) ) { |
| lthis.defilerImage( sens ); |
| } |
| 71,7 → 105,7 |
|---|
| }); |
| }; |
| |
| WidgetPhotoPopup.prototype.initEvtsFonstionsPhoto = function() { |
| WidgetPhotoPopup.prototype.initEvtsFonctionsPhoto = function() { |
| const lthis = this; |
| |
| $( '#boutons-footer #bloc-fct a, #retour-metas' ).on( 'click', function( event ){ |
| 130,9 → 164,9 |
|---|
| }); |
| |
| $( '#bloc-tags' ).on( 'keyup', '.custom-tag.actif', function( event ) { |
| var supprimerTag = false; |
| let supprimerTag = false; |
| |
| event = event || window.event; |
| event = ( event || window.event ); |
| // event.keyCode déprécié, on tente d'abord event.key |
| if ( 'key' in event ) { |
| supprimerTag = ( 'Delete' === event.key || 'Backspace' === event.key ); |
| 140,20 → 174,20 |
|---|
| supprimerTag = ( 46 === event.keyCode || 8 === event.keyCode ); |
| } |
| if ( supprimerTag ) { |
| // Supprimer un custom-tag |
| // _OPTIONS |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368 |
| // _paramètres |
| // L'id du tag à la fin de l'url |
| // _DELETE |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368 |
| // _réponse: |
| // "" |
| // Mettre à jour les mots cles |
| // _OPTIONS |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938 |
| // _GET |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938 |
| // Supprimer un custom-tag |
| // _OPTIONS |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368 |
| // _paramètres |
| // L'id du tag à la fin de l'url |
| // _DELETE |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368 |
| // _réponse: |
| // "" |
| // Mettre à jour les mots cles |
| // _OPTIONS |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938 |
| // _GET |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938 |
| $( this ).parent( '.custom-tag' ).remove(); |
| } |
| }); |
| 160,67 → 194,47 |
|---|
| }; |
| |
| WidgetPhotoPopup.prototype.defilerImage = function( sens ) { |
| if ( this.valOk( sens, true, 'suivant' ) ) { |
| if ( 'suivant' === sens ) { |
| this.indexImage++ ; |
| if( this.indexImage >= this.urls.length ) { |
| this.indexImage = 0; |
| } |
| } else if ( this.valOk( sens, true, 'precedent' ) ) { |
| } else if ( 'precedent' === sens ) { |
| this.indexImage--; |
| if( this.indexImage <= 0 ) { |
| this.indexImage = this.urls.length -1; |
| } |
| } |
| this.afficherTitreImage(); |
| // @TODO: Modifier l'attr content de 'meta[property=og:image]' et y mettre l'url de l'image |
| this.mettreAJourPopup(); |
| }; |
| |
| WidgetPhotoPopup.prototype.afficherTitreImage = function() { |
| var item = this.infos_images[this.urls[this.indexImage]], |
| titre = item['titre'], |
| infos = this.decouperTitre( titre ), |
| urlThisImage = $( '#illustration-' + this.indexImage ).attr( 'src' ); |
| lienContact = |
| this.urlWidget +'?mode=contact&nn=' + infos.nn + |
| '&nom_sci=' + infos.nom_sci + |
| '&date=' + infos.date + |
| '&id_image=' + item['guid'] + |
| '&auteur=' + infos.auteur; |
| let lienContact = |
| this.urlWidget +'?mode=contact&nn=' + this.nn + |
| '&nom_sci=' + this.obs['nom_sel'] + |
| '&date=' + this.date + |
| '&localisation=' + this.obs['localisation'] + |
| '&id_image=' + this.idImage + |
| '&auteur=' + this.auteur; |
| |
| if ( this.valOk( this.popup_url ) ) { |
| if (! this.popup_url.match( new RegExp( '/img:000' + item['guid'] ) ) ) { |
| this.popup_url = this.actualiserPopupUrl( this.popup_url, urlThisImage ); |
| if ( this.valOk( this.popupUrl ) ) { |
| if (! this.popupUrl.match( new RegExp( 'img:' + this.idImage ) ) ) { |
| this.popupUrl = this.actualiserPopupUrl( this.popupUrl, this.urlThisImage ); |
| } |
| lienContact += '&popup_url=' + encodeURIComponent( this.popup_url ); |
| lienContact += '&popup_url=' + encodeURIComponent( this.popupUrl ); |
| } |
| |
| titre = |
| '<a href="' + item['lien'] + '">' + infos.nom_sci + '</a> '+ |
| ' par <a class="lien_contact" href="' + lienContact + '">' + infos.auteur + '</a> '+ |
| ' le ' + infos.date + ' '; |
| $( '#bloc-infos-img' ).html( titre ); |
| $( '#bloc-infos-img' ).html( |
| '<a href="' + this.lienEflore + '">' + this.obs['nom_sel'] + '</a> '+ |
| ' par '+ |
| '<a class="lien_contact" href="' + lienContact + '">' + this.auteur + '</a> '+ |
| ' le ' + this.date + ' - ' + this.obs['localisation'] |
| ); |
| }; |
| |
| WidgetPhotoPopup.prototype.decouperTitre = function( titre ) { |
| var tab_titre = titre.split( '[nn' ), |
| nom_sci = tab_titre[0], |
| tab_titre_suite = tab_titre[1].split( ' par ' ), |
| nn = '[nn' + tab_titre_suite[0], |
| tab_titre_fin = tab_titre_suite[1].split( ' le ' ), |
| utilisateur = tab_titre_fin[0], |
| date = tab_titre_fin[1], |
| titre_decoupe = { |
| 'nom_sci' : nom_sci, |
| 'nn' : nn, |
| 'date' : date, |
| 'auteur' : utilisateur |
| }; |
| |
| return titre_decoupe; |
| }; |
| |
| WidgetPhotoPopup.prototype.actualiserPopupUrl = function( queryString, remplacement ) { |
| const lthis = this; |
| var queryStringParsee = queryString.substring(1).split('&'); |
| let queryStringParsee = queryString.substring(1).split('&'); |
| |
| $.each( queryStringParsee, function( i, param ) { |
| if( /url_image/.test( param ) ) { |
| 253,7 → 267,6 |
|---|
| }; |
| |
| WidgetPhotoPopup.prototype.redimensionnerGalerie = function() { |
| const lthis = this; |
| var maxSize = ( $( window ).width() / $( window ).height() ) < 1 ? $( window ).width() : $( window ).height(); |
| |
| maxSize -= 30; |
| 278,11 → 291,7 |
|---|
| $( '#bloc-' + voletAFermer ).addClass( 'hidden' ); |
| $( '#bloc-' + voletAOuvrir ).removeClass( 'hidden' ); |
| $( '#volet' ).scrollTop(0); |
| if( 'meta' !== voletAOuvrir ) { |
| $( '#retour-metas' ).removeClass( 'hidden' ); |
| } else { |
| $( '#retour-metas' ).addClass( 'hidden' ); |
| } |
| $( '#retour-metas' ).removeClass( 'hidden', 'meta' === voletAOuvrir ); |
| } |
| }; |
| |
| 290,7 → 299,7 |
|---|
| const lthis = this; |
| |
| $( '#saisir-tag' ).on( 'blur keyup', function( event ) { |
| event = event || window.event; |
| event = ( event || window.event ); |
| |
| var ajouterTag = ( 'blur' === event.type ); |
| |
| 322,7 → 331,7 |
|---|
| // _GET |
| // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938 |
| $( '#tags-pf-supp' ).append( |
| '<a id="' + nouveauTagAttr + '" class="btn tag custom-tag">' + |
| '<a id="' + nouveauTagAttr + '" class="btn tag custom-tag actif">' + |
| nouveauTag + ' <i class="fas fa-times-circle fermer"></i>' + |
| '</a>' |
| ); |
| 332,3 → 341,280 |
|---|
| } |
| }); |
| }; |
| |
| WidgetPhotoPopup.prototype.traiterMetas = function() { |
| this.afficherMetas(); |
| this.afficherPopupLocalisation(); |
| this.afficherMetasPlus(); |
| this.fournirLienTelechargement(); |
| }; |
| |
| WidgetPhotoPopup.prototype.afficherMetas = function() { |
| const lthis = this; |
| const META_CONTENUS = { |
| 'nom' : '<a href="' + this.lienEflore + '" target="_blank">' + this.obs['nom_sel'] + '</a> ', |
| 'localisation' : this.obs['localisation'], |
| 'auteur' : this.auteur, |
| 'date-obs' : this.date, |
| 'commentaire' : this.obs['commentaire'], |
| 'certitude' : this.obs['certitude'], |
| 'fiabilite' : this.obs['fiabilite'], |
| 'num-photo' : this.idImage, |
| 'titre-original' : this.item['nom_original'], |
| 'date-photo' : this.formaterDate( this.item['date_photo'] ), |
| 'attribution-copy' : this.item['attribution'], |
| 'url-copy' : this.urlThisImage |
| }; |
| |
| $.each( META_CONTENUS, function( attrId, contenu ) { |
| let $metaContainer = $( '#bloc-meta #'+attrId ); |
| |
| if ( lthis.valOk( contenu ) ) { |
| switch( attrId ) { |
| case 'attribution-copy' : |
| case 'url-copy' : |
| $metaContainer.val( contenu ); |
| lthis.copieAutoChamp( $metaContainer ); |
| break; |
| case 'nom' : |
| $( '.contenu', $metaContainer ).html( contenu ); |
| $( '.bouton', $metaContainer ).attr( 'href', lthis.lienEflore ); |
| break; |
| case 'auteur' : |
| $( '.bouton', $metaContainer ).attr( 'href', lthis.urlProfil ); |
| default: |
| $( '.contenu', $metaContainer ).text( contenu ); |
| break; |
| } |
| } |
| }); |
| }; |
| |
| WidgetPhotoPopup.prototype.copieAutoChamp = function($champACopier) { |
| $champACopier.on( 'click', function() { |
| |
| $( this ).select(); |
| document.execCommand( 'copy' ); |
| |
| $( this ).after( |
| '<p class="copy-message alert-success" style="width: 100%; height:' + $( this ).outerHeight() + 'px; margin: 0; display:flex;">'+ |
| '<span style="margin:auto; font-size:1rem;">Copié dans le presse papier</span>'+ |
| '</p>' |
| ).addClass( 'hidden' ); |
| |
| setTimeout( function() { |
| $( '.copy-message' ).remove(); |
| $champACopier.removeClass( 'hidden' ); |
| }, 1000 ); |
| }); |
| }; |
| |
| WidgetPhotoPopup.prototype.afficherMetasPlus = function() { |
| const lthis = this; |
| const META_LABELS = { |
| 'id_obs' : 'observation n°', |
| 'projet' : 'projet', |
| 'date_obs' : 'date d´observation', |
| 'nom_sel': 'nom scientifique', |
| 'nom_sel_nn' : 'nom scientifique n°', |
| 'nom_ret' : 'nom retenu', |
| 'nom_ret_nn' : 'nom retenu n°', |
| 'famille' : 'famille', |
| 'nom_referentiel' : 'réferentiel', |
| 'commentaire' : 'commentaire', |
| 'certitude' : 'certitude', |
| 'fiabilite' : 'fiabilite', |
| 'tags_obs' : 'tags de l´observation', |
| 'localisation' : 'localisation', |
| 'lieudit' : 'lieu dit', |
| 'station' : 'station', |
| 'milieu' : 'milieu', |
| 'latitude' : 'latitude', |
| 'longitude' : 'longitude', |
| 'altitude' : 'altitude', |
| 'localisation_precision': 'précision de la localisation', |
| 'code_insee' : 'code insee de la commune', |
| 'dept' : 'département', |
| 'pays' : 'pays', |
| 'est_ip_valide' : 'validée sur identiplante', |
| 'score_ip' : 'score identiplante', |
| 'url_ip' : 'url identiplante', |
| 'abondance' : 'abondance', |
| 'phenologie' : 'phénologie', |
| 'spontaneite' : 'spontaneite', |
| 'type_donnees' : 'type de donnees', |
| 'biblio' : 'bibliographie', |
| 'source' : 'source', |
| 'herbier' : 'herbier', |
| 'observateur' : 'observateur', |
| 'observateur_structure' : 'structure' |
| }; |
| const $contenuPlusMeta = $( '#contenu-meta-plus' ); |
| let degres = '0'; |
| |
| this.rotationFleche( degres ); |
| |
| $.each( META_LABELS, function( cle, label ) { |
| let idAttr = cle.replace( '_', '-' ), |
| contenu = lthis.obs[cle]; |
| |
| if ( 0 <= $.inArray( cle, ['est_ip_valide', 'herbier'] ) && '0' === contenu ) { |
| contenu = 'non'; |
| } else if ( 'date_obs' === cle ) { |
| contenu = lthis.formaterDate(contenu); |
| } |
| |
| if ( lthis.valOk( contenu ) ) { |
| $contenuPlusMeta.append( |
| '<li id="' + idAttr + '-meta-plus" class="row">'+ |
| '<div class="col-5 label">' + label.charAt( 0 ).toUpperCase() + label.slice( 1 ) + '</div>'+ |
| '<div class="col-5 contenu">' + contenu + '</div>'+ |
| '</li>' |
| ); |
| } |
| }); |
| |
| $contenuPlusMeta.hide(); |
| $( '#plus-meta' ).off( 'click' ).on( 'click', function( event ) { |
| event.preventDefault(); |
| |
| $contenuPlusMeta.toggle( 200, function() { |
| degres = $contenuPlusMeta.is( ':visible' ) ? '180' : '0'; |
| lthis.rotationFleche( degres ); |
| }); |
| }); |
| }; |
| |
| WidgetPhotoPopup.prototype.rotationFleche = function( degres ) { |
| $( '#plus-meta i' ).css({ |
| '-webkit-transform' : 'rotate('+ degres +'deg)', |
| '-moz-transform' : 'rotate('+ degres +'deg)', |
| '-ms-transform' : 'rotate('+ degres +'deg)', |
| 'transform' : 'rotate('+ degres +'deg)' |
| }); |
| }; |
| |
| WidgetPhotoPopup.prototype.fournirLienTelechargement = function() { |
| const lthis = this; |
| |
| $( '#formats' ).on( 'change', function() { |
| let format = ( $( this ).val() || 'O' ), |
| lienTelechargement = lthis.urlBaseTelechargement + lthis.idImage + '?methode=telecharger&format=' + format; |
| |
| $( '#telecharger' ).attr( 'href', lienTelechargement ); |
| }); |
| |
| $( '#formats' ).trigger( 'change' ); |
| }; |
| |
| |
| WidgetPhotoPopup.prototype.afficherPopupLocalisation = function() { |
| const lthis = this; |
| |
| $( '#localisation a.bouton' ).on( 'click', function( event ){ |
| event.preventDefault(); |
| |
| $( this ).after( |
| '<div id="localisation-map-container">'+ |
| '<button id="map-close" type="button" class="bouton btn btn-sm btn-outline-secondary" aria-label="Close">'+ |
| '<span aria-hidden="true">×</span>'+ |
| '</button>'+ |
| '<div id="localisation-map"></div>'+ |
| '</div>' |
| ); |
| |
| let lat = lthis.obs['latitude'], |
| lng = lthis.obs['longitude'], |
| map = L.map( 'localisation-map', { |
| zoomControl: true, |
| dragging: false, |
| scrollWheelZoom: 'center' |
| } ).setView( [lat, lng], 12 ); |
| |
| map.markers = []; |
| |
| L.tileLayer( |
| 'https://osm.tela-botanica.org/tuiles/osmfr/{z}/{x}/{y}.png', |
| { |
| attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>', |
| maxZoom: 18 |
| } |
| ).addTo( map ); |
| |
| map.addLayer( new L.FeatureGroup() ); |
| |
| let marker = new L.Marker( |
| { |
| 'lat': lat, |
| 'lng': lng |
| }, |
| { |
| draggable: false, |
| } |
| ); |
| |
| |
| map.addLayer( marker ); |
| map.markers.push( marker ); |
| |
| $( '#map-close' ).on( 'click', function( event ){ |
| $( '#localisation-map-container' ).remove(); |
| }); |
| }); |
| |
| $( '#fenetre-modal' ).on( 'click', function( event ) { |
| if( |
| !$( event.target ).closest( '#localisation-map-container' ).length |
| && !$( event.target ).closest( '#obs-localisation' ).length |
| ) { |
| $( '#localisation-map-container' ).remove(); |
| } |
| }); |
| }; |
| |
| |
| WidgetPhotoPopup.prototype.regenererMiniature = function() { |
| const lthis = this; |
| $( '#regenerer-miniature' ).off( 'click' ).on( 'click', function( event ) { |
| event.preventDefault(); |
| |
| let url = lthis.urlServiceRegenererMiniature + lthis.idImage; |
| |
| $.get( url ).fail( function() { |
| console.log( 'a foiré :(' ); |
| }); |
| }); |
| }; |
| |
| WidgetPhotoPopup.prototype.formaterDate = function( sqlDate ) { |
| dateFormatee = sqlDate |
| .substring( 0, 10 ) |
| .split( '-' ) |
| .reverse() |
| .join('/'); |
| |
| return dateFormatee; |
| }; |
| |
| WidgetPhotoPopup.prototype.fournirLienIdentiplante = function() { |
| const lthis = this; |
| $( '.signaler-erreur-obs' ).each( function() { |
| $( this ).attr( 'href', lthis.urlIP ); |
| }); |
| }; |
| |
| // WidgetPhotoPopup.prototype.afficherTags = function() { |
| // const lthis = this; |
| // const TAGS_BASE = [ |
| // 'port', |
| // 'fleur', |
| // 'fruit', |
| // 'feuille', |
| // 'ecorce', |
| // 'rameau', |
| // 'planche', |
| // 'insecte' |
| // ]; |
| |
| |
| // }; |