Subversion Repositories eFlore/Applications.cel

Rev

Rev 3948 | Rev 3950 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3631 idir 1 
function WidgetPhotoPopup( proprietes ) {
2 
	if( this.valOk( proprietes ) ) {
3823 idir 3 
		this.urlWidget                    = proprietes.urlWidget;
4 
		this.urls                         = proprietes.urls;
3837 idir 5 
		this.infosImages                  = proprietes.infosImages;
6 
		this.urlImage                     = proprietes.urlImage;
7 
		this.indexPremiereImage           = proprietes.indexPremiereImage;
3833 idir 8 
		this.indexImage                   = this.indexPremiereImage;
3823 idir 9 
		this.tailleMax                    = proprietes.tailleMax;
10 
		this.popupUrl                     = proprietes.popupUrl;
11 
		this.urlBaseTelechargement        = proprietes.urlBaseTelechargement;
12 
		this.urlServiceRegenererMiniature = proprietes.urlServiceRegenererMiniature;
3631 idir 13 
	}
3823 idir 14 
 
15 
	this.mettreAJourInfosImage();
3631 idir 16 
}
17 
 
3825 idir 18 
WidgetPhotoPopup.prototype = new WidgetPhotoCommun();
3631 idir 19 
 
20 
WidgetPhotoPopup.prototype.initTpl = function() {
21 
	this.redimensionnerGalerie();
3837 idir 22 
	$( '#info-img-galerie' ).find( '.active' ).removeClass( 'active' );
23 
	$( '#img-cadre-' + this.indexImage + ',#indicateur-img-' + this.indexImage ).addClass( 'active' );
3823 idir 24 
 
3837 idir 25 
	this.mettreAJourPopup();
3823 idir 26 
 
3631 idir 27 
	this.redimentionnerModaleCarousel();
28 
};
29 
 
30 
WidgetPhotoPopup.prototype.initEvts = function() {
31 
	const lthis = this;
32 
 
33 
	this.initEvtsDefilerImage();
34 
	this.initEvtsContact();
35 
	$( window ).on( 'resize', lthis.redimentionnerModaleCarousel.bind( lthis ) );
3823 idir 36 
	this.initEvtsFonctionsPhoto();
3631 idir 37 
	this.initEvtsRetourGalerieResponsive();
38 
	this.initEvtsTagsPF();
3948 julien 39 
	this.initEvtsProtocole();
3631 idir 40 
};
41 
 
3823 idir 42 
WidgetPhotoPopup.prototype.mettreAJourPopup = function() {
43 
	this.mettreAJourInfosImage();
44 
	this.afficherTitreImage();
45 
	this.traiterMetas();
46 
	this.regenererMiniature();
47 
	this.fournirLienIdentiplante();
3948 julien 48 
	this.traiterVote();
49 
	this.pivoterImage();
3949 julien 50 
	// this.pivoterGauche();
3823 idir 51 
};
52 
 
53 
WidgetPhotoPopup.prototype.mettreAJourInfosImage = function() {
3837 idir 54 
	this.item          = this.infosImages[this.urls[this.indexImage]];
3826 idir 55 
	this.titreImage    = this.item['titre'];
3825 idir 56 
	this.urlLienEflore = this.item['lien'];
3826 idir 57 
	this.idImage       = this.item['id_photo'];
3946 julien 58 
 
59 
	// If last caract of the url is a ',' we remove it
60 
	const lastCaractUrlImage = this.item['url_photo'].slice(-1);
61 
	if (lastCaractUrlImage === ','){
62 
		this.item['url_photo'] = this.item['url_photo'].replace(/.$/,'');
63 
	}
64 
 
3826 idir 65 
	this.urlThisImage  = this.item['url_photo']+'.jpg';
66 
	this.obs           = this.item['obs'];
67 
	this.nn            = '[nn' + this.obs['nom_sel_nn']+']';
68 
	this.urlIP         = this.obs['url_ip'];
69 
	this.tagsImage     = this.tagsToArray( this.item['tags_photo'] );
70 
	this.tagsObs       = this.tagsToArray( this.obs['tags_obs'] );
71 
	this.auteur        = this.item['utilisateur']['nom_utilisateur'];
72 
	this.date          = this.item['date'];
3823 idir 73 
};
74 
 
3825 idir 75 
WidgetPhotoPopup.prototype.tagsToArray = function( tags ) {
3832 idir 76 
	if(!this.valOk(tags)) {
77 
		return [];
78 
	}
3825 idir 79 
	tags = tags.replace( new RegExp('\\.'), '' ).split( ',' );
80 
 
81 
	let cleanTags       = [],
82 
		nbTags          = tags.length,
83 
		tag             = '',
84 
		tagsSansEspaces = '',
85 
		cleanTagIndex   = 0;
86 
 
87 
	for(let i = 0; i < nbTags; i++) {
88 
		tag = tags[i];
89 
		tagsSansEspaces = tag.replace( ' ', '');
90 
		if( '' !== tagsSansEspaces ) {
91 
			cleanTags.push( tag.trim() );
92 
		}
93 
	}
94 
 
95 
	return cleanTags;
96 
};
97 
 
3631 idir 98 
WidgetPhotoPopup.prototype.initEvtsDefilerImage = function() {
99 
	const lthis = this;
100 
 
101 
	$( '#precedent, #suivant' ).on( 'click', function() {
102 
		lthis.defilerImage( this.id );
103 
	});
3823 idir 104 
 
3631 idir 105 
	$( '#print_content:not(saisir-tag)' ).on( 'keydown', function( event ) {
106 
 
3823 idir 107 
		const determinerSens = function( enventKey, left, right ) {
108 
			switch ( enventKey ) {
109 
				case left:
110 
					return 'suivant';
111 
				case right:
3825 idir 112 
					return 'precedent';
3823 idir 113 
				default:
114 
					break;
3631 idir 115 
			}
3823 idir 116 
 
117 
			return;
3631 idir 118 
		}
3823 idir 119 
 
120 
		event = (event || window.event);
121 
		// event.keyCode déprécié, on tente d'abord event.key
122 
		let sens = ( 'key' in event ) ? determinerSens( event.key, 'ArrowLeft', 'ArrowRight' ) : determinerSens( event.keyCode, 37, 39 );;
123 
 
3631 idir 124 
		if ( lthis.valOk( sens ) ) {
125 
			lthis.defilerImage( sens );
126 
		}
127 
	});
128 
};
129 
 
130 
WidgetPhotoPopup.prototype.initEvtsContact = function() {
131 
	const lthis = this;
132 
 
133 
	$( '#bloc-infos-img' ).on( 'click', '.lien_contact', function( event ) {
134 
		event.preventDefault();
135 
		lthis.chargerContenuModale( this.href );
136 
	});
137 
};
138 
 
3823 idir 139 
WidgetPhotoPopup.prototype.initEvtsFonctionsPhoto = function() {
3631 idir 140 
	const lthis = this;
141 
 
142 
	$( '#boutons-footer #bloc-fct a, #retour-metas' ).on( 'click', function( event ){
143 
		event.preventDefault();
144 
		var voletAOuvrir = $( this ).data( 'volet' ),
145 
			voletAFermer = $( '.bloc-volet:not(.hidden)' ).data( 'volet' );
146 
 
147 
		lthis.ouvrirVoletFct( voletAOuvrir, voletAFermer );
148 
		if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
149 
			$( '#info-img-galerie' ).addClass( 'hidden' );
150 
			$( '#volet, #retour-galerie' ).removeClass( 'hidden' );
151 
		}
152 
	});
153 
};
154 
 
155 
WidgetPhotoPopup.prototype.initEvtsRetourGalerieResponsive = function() {
156 
	$( '#retour-galerie' ).on( 'click', function( event ) {
157 
		event.preventDefault();
158 
		$( '#info-img-galerie' ).removeClass( 'hidden' );
159 
		$( this ).addClass( 'hidden' );
160 
		if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
161 
			$( '#volet' ).addClass( 'hidden' );
162 
			$( '.bouton-fct.actif' ).removeClass( 'actif' );
163 
		}
164 
	});
165 
};
166 
 
167 
WidgetPhotoPopup.prototype.initEvtsTagsPF = function() {
168 
	//recupérer tags en ajax (voir pictoflora, peut-être dans le php?)
169 
	//	_OPTIONS
170 
	// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
171 
	//	_GET
172 
	// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
173 
	this.tagsPfCustom();
174 
	$( '#bloc-tags' ).on( 'click', '.tag', function( event ) {
175 
		event.preventDefault();
176 
		$( this ).toggleClass( 'actif' );
177 
	});
178 
	$( '#bloc-tags' ).on( 'click', '.custom-tag.actif .fermer', function( event ) {
179 
		event.preventDefault();
180 
		//			Supprimer un custom-tag
181 
		//	_OPTIONS
182 
		// https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
183 
		// 	_paramètres
184 
		// L'id du tag à la fin de l'url
185 
		//	_DELETE
186 
		// https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
187 
		// 	_réponse:
188 
		// ""
189 
		// 			Mettre à jour les mots cles
190 
		//	_OPTIONS
191 
		// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
192 
		//	_GET
193 
		// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
194 
		$( this ).parent( '.custom-tag' ).remove();
195 
	});
196 
 
197 
	$( '#bloc-tags' ).on( 'keyup', '.custom-tag.actif', function( event ) {
3823 idir 198 
		let supprimerTag = false;
3631 idir 199 
 
3823 idir 200 
		event = ( event || window.event );
3631 idir 201 
		// event.keyCode déprécié, on tente d'abord event.key
202 
		if ( 'key' in event ) {
203 
			supprimerTag = ( 'Delete' === event.key || 'Backspace' === event.key );
204 
		} else {
205 
			supprimerTag = ( 46 === event.keyCode || 8 === event.keyCode );
206 
		}
207 
		if ( supprimerTag ) {
3823 idir 208 
			//			Supprimer un custom-tag
209 
			//	_OPTIONS
210 
			// https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
211 
			// 	_paramètres
212 
			// L'id du tag à la fin de l'url
213 
			//	_DELETE
214 
			// https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
215 
			// 	_réponse:
216 
			// ""
217 
			// 			Mettre à jour les mots cles
218 
			//	_OPTIONS
219 
			// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
220 
			//	_GET
221 
			// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
3631 idir 222 
			$( this ).parent( '.custom-tag' ).remove();
223 
		}
224 
	});
225 
};
226 
 
227 
WidgetPhotoPopup.prototype.defilerImage = function( sens ) {
3823 idir 228 
	if ( 'suivant' === sens ) {
3631 idir 229 
		this.indexImage++ ;
3837 idir 230 
		if( this.indexImage >= this.urls.length ) {
3631 idir 231 
			this.indexImage = 0;
232 
		}
3823 idir 233 
	} else if ( 'precedent' === sens ) {
3631 idir 234 
		this.indexImage--;
235 
		if( this.indexImage <= 0 ) {
3837 idir 236 
			this.indexImage = this.urls.length -1;
3631 idir 237 
		}
238 
	}
3823 idir 239 
	// @TODO: Modifier l'attr content de 'meta[property=og:image]' et y mettre l'url de l'image
240 
	this.mettreAJourPopup();
3631 idir 241 
};
242 
 
243 
WidgetPhotoPopup.prototype.afficherTitreImage = function() {
3823 idir 244 
	let lienContact  =
245 
			this.urlWidget +'?mode=contact&nn=' + this.nn +
246 
			'&nom_sci=' + this.obs['nom_sel'] +
247 
			'&date=' + this.date +
248 
			'&localisation=' + this.obs['localisation'] +
249 
			'&id_image=' + this.idImage +
250 
			'&auteur=' + this.auteur;
3631 idir 251 
 
3823 idir 252 
	if ( this.valOk( this.popupUrl ) ) {
253 
		if (! this.popupUrl.match( new RegExp( 'img:' + this.idImage ) ) ) {
254 
			this.popupUrl = this.actualiserPopupUrl( this.popupUrl, this.urlThisImage );
3631 idir 255 
		}
3823 idir 256 
		lienContact += '&popup_url=' + encodeURIComponent( this.popupUrl );
3631 idir 257 
	}
258 
 
3823 idir 259 
	$( '#bloc-infos-img' ).html(
3825 idir 260 
		this.afficherLien( this.urlLienEflore, this.obs['nom_sel'] )+
3823 idir 261 
		' par '+
262 
		'<a class="lien_contact" href="' + lienContact + '">' + this.auteur + '</a> '+
263 
		' le ' + this.date + ' - ' + this.obs['localisation']
264 
	);
3631 idir 265 
};
266 
 
267 
WidgetPhotoPopup.prototype.actualiserPopupUrl = function( queryString, remplacement ) {
3823 idir 268 
	let queryStringParsee = queryString.substring(1).split('&');
3631 idir 269 
 
270 
	$.each( queryStringParsee,  function( i, param ) {
271 
		if( /url_image/.test( param ) ) {
272 
			queryString = queryString.replace( param, 'url_image=' + remplacement );
273 
			return false;
274 
		}
275 
	});
276 
	return queryString;
277 
};
278 
 
279 
WidgetPhotoPopup.prototype.redimentionnerModaleCarousel = function() {
280 
	this.redimensionnerGalerie();
281 
	if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
282 
		$( '#volet, #retour-galerie' ).addClass( 'hidden' );
283 
		$( '#info-img-galerie' ).removeClass( 'hidden' );
284 
		$( '.bouton-fct.actif' ).removeClass( 'actif' );
285 
		$( '.nettoyage-volet.haut' ).text( $( '#bloc-infos-img' ).text() );
286 
		$( '#boutons-footer, #info-img-galerie' ).removeClass( 'col-lg-8' );
287 
		$( '#bloc-infos-img, #volet' ).removeClass( 'col-lg-4' );
288 
	} else {
289 
		$( '#volet, #info-img-galerie' ).removeClass( 'hidden' );
290 
		if ( this.valOk( $( '.bloc-volet:not(.hidden)' ) ) ) {
291 
			$( '.bouton-fct.' + $( '.bloc-volet:not(.hidden)' ).data( 'volet' ) ).addClass( 'actif' );
292 
		}
293 
		$( '.nettoyage-volet.bas' ).text( $( '#bloc-infos-img' ).text() );
294 
		$( '#boutons-footer, #info-img-galerie' ).addClass( 'col-lg-8' );
295 
		$( '#bloc-infos-img, #volet' ).addClass( 'col-lg-4' );
296 
		$( '#retour-galerie' ).addClass( 'hidden' );
297 
	}
298 
};
299 
 
300 
WidgetPhotoPopup.prototype.redimensionnerGalerie = function() {
301 
	var maxSize = ( $( window ).width() / $( window ).height() ) < 1 ? $( window ).width() : $( window ).height();
302 
 
303 
	maxSize -= 30;
304 
	$( '.carousel-item img' ).each( function( index, image ) {
305 
		var proportion  = image.dataset.width / image.dataset.height,
306 
			cssResize   = {};
307 
 
308 
		if ( proportion >= 1 ) {
309 
			cssResize['width'] = maxSize;
310 
		}
311 
		if ( proportion <= 1) {
312 
			cssResize['height'] = maxSize;
313 
		}
314 
		$( image ).css( cssResize );
315 
	});
316 
};
317 
 
318 
WidgetPhotoPopup.prototype.ouvrirVoletFct = function( voletAOuvrir, voletAFermer ) {
319 
	if( voletAOuvrir !== voletAFermer ) {
320 
		$( '#boutons-footer  .' + voletAFermer ).removeClass( 'actif' );
321 
		$( '#boutons-footer  .' + voletAOuvrir ).addClass( 'actif' );
322 
		$( '#bloc-' + voletAFermer ).addClass( 'hidden' );
323 
		$( '#bloc-' + voletAOuvrir ).removeClass( 'hidden' );
324 
		$( '#volet' ).scrollTop(0);
3823 idir 325 
		$( '#retour-metas' ).removeClass( 'hidden', 'meta' === voletAOuvrir );
3631 idir 326 
	}
327 
};
328 
 
329 
WidgetPhotoPopup.prototype.tagsPfCustom = function() {
330 
	const lthis = this;
331 
 
332 
	$( '#saisir-tag' ).on( 'blur keyup', function( event ) {
3823 idir 333 
		event = ( event || window.event );
3631 idir 334 
 
335 
		var ajouterTag = ( 'blur' === event.type );
336 
 
337 
		// event.keyCode déprécié, on tente d'abord event.key
338 
		if ( 'key' in event  ) {
339 
			if ( 'Enter' === event.key ) {
340 
				ajouterTag = true;
341 
			}
342 
		} else if ( 13 === event.keyCode ) {
343 
			ajouterTag = true;
344 
		}
345 
		if	( ajouterTag ) {
346 
			var nouveauTag     = $( this ).val(),
347 
				nouveauTagAttr = lthis.chaineValableAttributsHtml( nouveauTag.toLowerCase() );
348 
 
349 
			if( lthis.valOk( nouveauTagAttr ) && !lthis.valOk( $( '#' + nouveauTagAttr + '.tag' ) ) ) {
350 
				// 			Envoyer tags en ajax :
351 
				// 	_OPTIONS
352 
				// https://api-test.tela-botanica.org/service:del:0.1/mots-cles/
353 
				//  _paramètres :
354 
				//rien
355 
				// 	_PUT
356 
				// https://api-test.tela-botanica.org/service:del:0.1/mots-cles/
357 
				// 	_paramètres :
358 
				// image=197938&mot_cle=motcleperso&auteur.id=44084
359 
				// 			Mettre à jour les mots cles
360 
				//	_OPTIONS
361 
				// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
362 
				//	_GET
363 
				// https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
364 
				$( '#tags-pf-supp' ).append(
3823 idir 365 
					'<a id="' + nouveauTagAttr + '" class="btn tag custom-tag actif">' +
3631 idir 366 
						nouveauTag + '&nbsp;<i class="fas fa-times-circle fermer"></i>' +
367 
					'</a>'
368 
				);
369 
				$( '#form-tags-auteur' )[0].reset();
370 
				$( this ).val( '' );
371 
			}
372 
		}
373 
	});
374 
};
3823 idir 375 
 
376 
WidgetPhotoPopup.prototype.traiterMetas = function() {
377 
	this.afficherMetas();
378 
	this.afficherPopupLocalisation();
379 
	this.afficherMetasPlus();
380 
	this.fournirLienTelechargement();
381 
};
382 
 
383 
WidgetPhotoPopup.prototype.afficherMetas = function() {
384 
	const lthis         = this;
385 
	const META_CONTENUS = {
3825 idir 386 
		'nom' : this.afficherLien( this.urlLienEflore, this.obs['nom_sel'] ),
3823 idir 387 
		'localisation' : this.obs['localisation'],
388 
		'auteur' : this.auteur,
389 
		'date-obs' : this.date,
390 
		'commentaire' : this.obs['commentaire'],
391 
		'certitude' : this.obs['certitude'],
392 
		'fiabilite' : this.obs['fiabilite'],
393 
		'num-photo' : this.idImage,
394 
		'titre-original' : this.item['nom_original'],
395 
		'date-photo' : this.formaterDate( this.item['date_photo'] ),
396 
		'attribution-copy' : this.item['attribution'],
397 
		'url-copy' : this.urlThisImage
398 
	};
399 
 
400 
	$.each( META_CONTENUS, function( attrId, contenu ) {
401 
		let $metaContainer = $( '#bloc-meta #'+attrId );
402 
 
403 
		if ( lthis.valOk( contenu ) ) {
404 
			switch( attrId ) {
405 
				case 'attribution-copy' :
406 
				case 'url-copy' :
407 
					$metaContainer.val( contenu );
408 
					lthis.copieAutoChamp( $metaContainer );
409 
					break;
410 
				case 'nom' :
411 
					$( '.contenu', $metaContainer ).html( contenu );
3825 idir 412 
					$( '.bouton', $metaContainer ).attr( 'href', lthis.urlLienEflore );
3823 idir 413 
					break;
414 
				case 'auteur' :
3827 idir 415 
					$( '.bouton', $metaContainer ).attr( 'href', lthis.item['urlProfil'] );
3823 idir 416 
				default:
417 
					$( '.contenu', $metaContainer ).text( contenu );
418 
					break;
419 
			}
420 
		}
421 
	});
422 
};
423 
 
3824 idir 424 
WidgetPhotoPopup.prototype.copieAutoChamp = function( $champACopier ) {
3838 idir 425 
	$champACopier.off( 'click' ).on( 'click', function() {
426 
		$( '#attribution-copy, #url-copy' ).removeClass( 'hidden' )
427 
			.find( '.copy-message' ).remove();
3823 idir 428 
 
429 
		$( this ).select();
430 
		document.execCommand( 'copy' );
431 
 
432 
		$( this ).after(
433 
			'<p class="copy-message alert-success" style="width: 100%; height:' + $( this ).outerHeight() + 'px; margin: 0; display:flex;">'+
434 
				'<span style="margin:auto; font-size:1rem;">Copié dans le presse papier</span>'+
435 
			'</p>'
436 
		).addClass( 'hidden' );
437 
 
438 
		setTimeout( function() {
439 
			$( '.copy-message' ).remove();
440 
			$champACopier.removeClass( 'hidden' );
441 
		}, 1000 );
442 
	});
443 
};
444 
 
445 
WidgetPhotoPopup.prototype.afficherMetasPlus = function() {
446 
	const lthis         = this;
447 
	const META_LABELS  = {
448 
		'id_obs' : 'observation n°',
449 
		'projet' : 'projet',
3825 idir 450 
		'nom_referentiel' : 'réferentiel',
3823 idir 451 
		'date_obs' : 'date d´observation',
452 
		'nom_sel': 'nom scientifique',
453 
		'nom_sel_nn' : 'nom scientifique n°',
454 
		'nom_ret' : 'nom retenu',
455 
		'nom_ret_nn' : 'nom retenu n°',
456 
		'famille' : 'famille',
457 
		'tags_obs' : 'tags de l´observation',
458 
		'lieudit' : 'lieu dit',
459 
		'station' : 'station',
460 
		'milieu' : 'milieu',
461 
		'latitude' : 'latitude',
462 
		'longitude' : 'longitude',
463 
		'altitude' : 'altitude',
464 
		'localisation_precision': 'précision de la localisation',
465 
		'code_insee' : 'code insee de la commune',
466 
		'dept' : 'département',
467 
		'pays' : 'pays',
468 
		'est_ip_valide' : 'validée sur identiplante',
469 
		'score_ip' : 'score identiplante',
470 
		'url_ip' : 'url identiplante',
471 
		'abondance' : 'abondance',
472 
		'phenologie' : 'phénologie',
473 
		'spontaneite' : 'spontaneite',
474 
		'type_donnees' : 'type de donnees',
475 
		'biblio' : 'bibliographie',
476 
		'source' : 'source',
477 
		'herbier' : 'herbier',
478 
		'observateur' : 'observateur',
479 
		'observateur_structure' : 'structure'
480 
	};
3825 idir 481 
 
3823 idir 482 
	const $contenuPlusMeta  = $( '#contenu-meta-plus' );
3825 idir 483 
	let degres = $contenuPlusMeta.is( ':visible' ) ? '180' : '0';
3823 idir 484 
 
485 
	this.rotationFleche( degres );
3825 idir 486 
	$contenuPlusMeta.empty();
3823 idir 487 
 
488 
	$.each( META_LABELS, function( cle, label ) {
489 
		let idAttr = cle.replace( '_', '-' ),
490 
			contenu = lthis.obs[cle];
491 
 
3825 idir 492 
		switch( cle ) {
493 
			case 'nom_sel':
494 
				contenu = lthis.afficherLien( lthis.urlLienEflore, contenu );
495 
				break;
496 
 
497 
			case 'nom_ret':
498 
				let urlEfloreNomRetenu = lthis.urlLienEflore.replace( lthis.obs['nom_sel_nn'], lthis.obs['nom_ret_nn'] );
499 
 
500 
				contenu = lthis.afficherLien( urlEfloreNomRetenu, contenu );
501 
				break;
502 
 
503 
			case 'url_ip':
504 
				contenu = lthis.afficherLien( contenu, contenu );
505 
				break;
506 
 
507 
			case 'est_ip_valide':
508 
			case 'herbier':
509 
				if( '0' === contenu ) {
510 
					contenu = 'non';
511 
				}
512 
				break;
513 
 
514 
			case 'date_obs':
515 
				contenu = lthis.formaterDate( contenu );
516 
				break;
517 
 
518 
			case 'tags_obs':
519 
				let tagsObsLength = lthis.tagsObs.length;
520 
				contenu = lthis.tagsObs.join( '<br>' );
521 
				break;
522 
 
523 
			default:
524 
				break;
3823 idir 525 
		}
526 
 
527 
		if ( lthis.valOk( contenu ) ) {
528 
			$contenuPlusMeta.append(
529 
				'<li id="' + idAttr + '-meta-plus" class="row">'+
530 
					'<div class="col-5 label">' + label.charAt( 0 ).toUpperCase() + label.slice( 1 ) + '</div>'+
3829 idir 531 
					'<div class="col-7 contenu">' + contenu + '</div>'+
3823 idir 532 
				'</li>'
533 
			);
534 
		}
535 
	});
536 
 
3825 idir 537 
	if( !$contenuPlusMeta.hasClass( 'actif' ) ) {
538 
		$contenuPlusMeta.hide();
539 
	}
540 
 
541 
	let estVisible = false;
542 
 
3823 idir 543 
	$( '#plus-meta' ).off( 'click' ).on( 'click', function( event ) {
544 
		event.preventDefault();
545 
		$contenuPlusMeta.toggle( 200, function() {
3825 idir 546 
			estVisible = $contenuPlusMeta.is( ':visible' );
547 
			degres     = estVisible ? '180' : '0';
548 
			$( this ).toggleClass( 'actif', estVisible );
3823 idir 549 
			lthis.rotationFleche( degres );
550 
		});
551 
	});
552 
};
553 
 
554 
WidgetPhotoPopup.prototype.rotationFleche = function( degres ) {
555 
	$( '#plus-meta i' ).css({
556 
		'-webkit-transform' : 'rotate('+ degres +'deg)',
557 
		'-moz-transform' : 'rotate('+ degres +'deg)',
558 
		'-ms-transform' : 'rotate('+ degres +'deg)',
559 
		'transform' : 'rotate('+ degres +'deg)'
560 
	});
561 
};
562 
 
563 
WidgetPhotoPopup.prototype.fournirLienTelechargement = function() {
564 
	const lthis = this;
565 
 
566 
	$( '#formats' ).on( 'change', function() {
567 
		let format             = ( $( this ).val() || 'O' ),
568 
			lienTelechargement = lthis.urlBaseTelechargement + lthis.idImage + '?methode=telecharger&format=' + format;
569 
 
570 
		$( '#telecharger' ).attr( 'href', lienTelechargement );
571 
	});
572 
 
573 
	$( '#formats' ).trigger( 'change' );
574 
};
575 
 
576 
 
577 
WidgetPhotoPopup.prototype.afficherPopupLocalisation = function() {
578 
	const lthis = this;
579 
 
580 
	$( '#localisation a.bouton' ).on( 'click', function( event ){
581 
		event.preventDefault();
582 
 
583 
		$( this ).after(
584 
			'<div id="localisation-map-container">'+
585 
				'<button id="map-close" type="button" class="bouton btn btn-sm btn-outline-secondary" aria-label="Close">'+
586 
					'<span aria-hidden="true">×</span>'+
587 
				'</button>'+
588 
				'<div id="localisation-map"></div>'+
589 
			'</div>'
590 
		);
591 
 
592 
		let lat = lthis.obs['latitude'],
593 
			lng = lthis.obs['longitude'],
594 
			map = L.map( 'localisation-map', {
595 
				zoomControl: true,
596 
				dragging: false,
597 
				scrollWheelZoom: 'center'
598 
			} ).setView( [lat, lng], 12 );
599 
 
600 
		map.markers = [];
601 
 
602 
		L.tileLayer(
603 
			'https://osm.tela-botanica.org/tuiles/osmfr/{z}/{x}/{y}.png',
604 
			{
605 
				attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
606 
				maxZoom: 18
607 
			}
608 
		).addTo( map );
609 
 
610 
		map.addLayer( new L.FeatureGroup() );
611 
 
612 
		let marker = new L.Marker(
613 
			{
614 
				'lat': lat,
615 
				'lng': lng
616 
			},
617 
			{
618 
				draggable: false,
619 
			}
620 
		);
621 
 
622 
 
623 
		map.addLayer( marker );
624 
		map.markers.push( marker );
625 
 
626 
		$( '#map-close' ).on( 'click', function( event ){
627 
			$( '#localisation-map-container' ).remove();
628 
		});
629 
	});
630 
 
631 
	$( '#fenetre-modal' ).on( 'click', function( event ) {
632 
		if(
633 
			!$( event.target ).closest( '#localisation-map-container' ).length
634 
			&& !$( event.target ).closest( '#obs-localisation' ).length
635 
		) {
636 
			$( '#localisation-map-container' ).remove();
637 
		}
638 
	});
639 
};
640 
 
641 
 
642 
WidgetPhotoPopup.prototype.regenererMiniature = function() {
643 
	const lthis = this;
644 
	$( '#regenerer-miniature' ).off( 'click' ).on( 'click', function( event ) {
645 
		event.preventDefault();
646 
 
647 
		let url = lthis.urlServiceRegenererMiniature + lthis.idImage;
3829 idir 648 
		$.get( url, function( data ) {
649 
				console.log( data );
650 
			}
651 
		).fail( function() {
3948 julien 652 
			console.log( 'La régénération d´image ne s´est pas faite' );
3823 idir 653 
		});
654 
	});
655 
};
656 
 
657 
WidgetPhotoPopup.prototype.formaterDate = function( sqlDate ) {
658 
	dateFormatee = sqlDate
659 
		.substring( 0, 10 )
660 
		.split( '-' )
661 
		.reverse()
662 
		.join('/');
663 
 
664 
	return dateFormatee;
665 
};
666 
 
3825 idir 667 
WidgetPhotoPopup.prototype.afficherLien = function( url, nom ) {
668 
	if( !/https?:\/\//.test( url ) ) {
669 
		url = 'https://' + url;
670 
	}
671 
	return '<a href="' + url + '" target="_blank">' + nom + '</a> ';
672 
};
673 
 
3823 idir 674 
WidgetPhotoPopup.prototype.fournirLienIdentiplante = function() {
675 
	const lthis = this;
676 
	$( '.signaler-erreur-obs' ).each( function() {
677 
		$( this ).attr( 'href', lthis.urlIP );
678 
	});
679 
};
680 
 
3948 julien 681 
WidgetPhotoPopup.prototype.initEvtsProtocole = function() {
682 
	const lthis = this;
683 
 
684 
	$( '#protocole').on( 'change', function( event ){
685 
		event.preventDefault();
686 
		var id = $(this).children(":selected").attr("id");
687 
 
688 
		$('#bloc-notes-protocole').removeClass('hidden');
689 
 
690 
		const message = {
691 
			'capitalisation_image': "\"Capitalisation d'image\" est un programme de sciences participatives initié" +
692 
				" dans le cadre du projet Pl@nttNet. En attribuant une note aux photos vous nous aidez à connaître" +
693 
				" leur qualité.",
694 
			'aide_identification': "Message du protocole aide identification",
695 
			'defi_photo': "Message du protocole défi photo",
696 
			'gentiane_azure': "Message du protocole gentiane_azure",
697 
			'arbres_tetards': "Message du protocole arbres_tetards",
698 
		}
699 
		$('#message-protocole').html('<p>' + message[id] + '</p>');
700 
	});
701 
};
702 
 
703 
WidgetPhotoPopup.prototype.traiterVote = function () {
704 
 
705 
	$("#note").attr("value", -1);
706 
 
707 
	$("#note-remove").click(function (){
708 
		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
709 
 
710 
		$("#note").attr("value", -1);
711 
	})
712 
 
713 
	$("#rating-star-1").hover(function () {
714 
		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
715 
 
716 
		$("#rating-star-1").removeClass('far').addClass('fa').css("color", "#c3d45d");
717 
 
718 
		$("#note").attr("value", 1);
719 
	});
720 
 
721 
	$("#rating-star-2").hover(function () {
722 
		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
723 
 
724 
		$("#rating-star-1, #rating-star-2").removeClass('far').addClass('fa').css("color", "#c3d45d");
725 
 
726 
		$("#note").attr("value", 2);
727 
	});
728 
 
729 
	$("#rating-star-3").hover(function () {
730 
		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
731 
 
732 
		$("#rating-star-1, #rating-star-2, #rating-star-3").removeClass('far').addClass('fa').css("color", "#c3d45d");
733 
 
734 
		$("#note").attr("value", 3);
735 
	});
736 
 
737 
	$("#rating-star-4").hover(function () {
738 
		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
739 
 
740 
		$("#rating-star-1, #rating-star-2, #rating-star-3, #rating-star-4").removeClass('far').addClass('fa').css("color", "#c3d45d");
741 
 
742 
		$("#note").attr("value", 4);
743 
	});
744 
 
745 
	$("#rating-star-5").hover(function () {
746 
		$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
747 
 
748 
		$("#rating-star-1, #rating-star-2, #rating-star-3, #rating-star-4, #rating-star-5").removeClass('far').addClass('fa').css("color", "#c3d45d");
749 
 
750 
		$("#note").attr("value", 5);
751 
	});
752 
 
753 
	// TODO Envoyer le vote
754 
};
755 
 
756 
WidgetPhotoPopup.prototype.pivoterImage = function() {
3949 julien 757 
	lthis = this;
758 
	$( '#pivoter-droite' ).off( 'click' ).on( 'click', function( event ) {
3948 julien 759 
		event.preventDefault();
760 
 
3949 julien 761 
		lthis.pivoter('droite');
3948 julien 762 
	});
763 
 
3949 julien 764 
	$( '#pivoter-gauche' ).off( 'click' ).on( 'click', function( event ) {
3948 julien 765 
		event.preventDefault();
766 
 
3949 julien 767 
		lthis.pivoter('gauche');
3948 julien 768 
	});
769 
};
770 
 
3949 julien 771 
WidgetPhotoPopup.prototype.pivoter = function(direction) {
772 
	let imageSelected = $('img[src="' + lthis.urlThisImage + '"]').attr('id');
773 
	let angle = $('#' + imageSelected).data('angle');
774 
 
775 
	if (angle == 360 || angle == (-360) || angle == undefined){
776 
		angle = 0
777 
	}
778 
	if (direction == 'droite'){
779 
		angle += 90;
780 
	} else {
781 
		angle -= 90;
782 
	}
783 
 
784 
	$('#' + imageSelected).css("transform", "rotate(" + angle + "deg) ");
785 
	$('#' + imageSelected).data('angle', angle);
786 
}
787 
 
3823 idir 788 
// WidgetPhotoPopup.prototype.afficherTags = function() {
789 
// 	const lthis = this;
790 
// 	const TAGS_BASE = [
791 
// 		'port',
792 
// 		'fleur',
793 
// 		'fruit',
794 
// 		'feuille',
795 
// 		'ecorce',
796 
// 		'rameau',
797 
// 		'planche',
798 
// 		'insecte'
799 
// 	];
800 
 
801 
 
802 
// };