Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3822 → Rev 3823

/trunk/widget/modules/photo/squelettes/js/WidgetPhotoPopup.js
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 + '&nbsp;<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'
// ];
 
// };