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' |
// ]; |
|
|
// }; |