Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
3999 julien 1 
function WidgetPhotoPopup( proprietes ) {
2 
	if( this.valOk( proprietes ) ) {
3 
		this.urlWidget                    = proprietes.urlWidget;
4 
		this.urls                         = proprietes.urls;
5 
		this.infosImages                  = proprietes.infosImages;
6 
		this.urlImage                     = proprietes.urlImage;
7 
		this.indexPremiereImage           = proprietes.indexPremiereImage;
8 
		this.indexImage                   = this.indexPremiereImage;
9 
		this.tailleMax                    = proprietes.tailleMax;
10 
		this.popupUrl                     = proprietes.popupUrl;
11 
		this.urlBaseTelechargement        = proprietes.urlBaseTelechargement;
12 
		this.urlServiceRegenererMiniature = proprietes.urlServiceRegenererMiniature;
13 
		this.userId       				  = proprietes.userId;
14 
		this.token						  = proprietes.token;
15 
		this.protocoles					  = proprietes.protocoles;
16 
		this.urlServiceDel				  = proprietes.urlServiceDel;
17 
		this.urlServiceNewCel			  = proprietes.urlServiceNewCel;
18 
	}
19 
	this.protocole = null;
20 
	this.voteId = null;
21 
	this.votes = null;
22 
	this.mettreAJourInfosImage();
23 
}
24 
 
25 
WidgetPhotoPopup.prototype = new WidgetPhotoCommun();
26 
 
27 
WidgetPhotoPopup.prototype.initTpl = function() {
28 
	this.redimensionnerGalerie();
29 
	$( '#info-img-galerie' ).find( '.active' ).removeClass( 'active' );
30 
	$( '#img-cadre-' + this.indexImage + ',#indicateur-img-' + this.indexImage ).addClass( 'active' );
31 
 
32 
	this.mettreAJourPopup();
33 
 
34 
	this.redimentionnerModaleCarousel();
35 
};
36 
 
37 
WidgetPhotoPopup.prototype.initEvts = function() {
38 
	const lthis = this;
39 
 
40 
	this.initEvtsDefilerImage();
41 
	// this.initEvtsContact();
42 
	$( window ).on( 'resize', lthis.redimentionnerModaleCarousel.bind( lthis ) );
43 
	this.initEvtsFonctionsPhoto();
44 
	this.initEvtsRetourGalerieResponsive();
45 
	this.initEvtsToggleVolet();
46 
};
47 
 
48 
WidgetPhotoPopup.prototype.mettreAJourPopup = function() {
49 
	this.mettreAJourInfosImage();
50 
	this.afficherTitreImage();
51 
	this.traiterMetas();
52 
	this.regenererMiniature();
53 
	this.fournirLienIdentiplante();
54 
	this.pivoterImage();
55 
	this.initEvtsProtocole();
56 
	this.initEvtsTagsPF();
57 
	this.initEvtsTagsCel();
58 
};
59 
 
60 
WidgetPhotoPopup.prototype.mettreAJourInfosImage = function() {
61 
	this.item          = this.infosImages[this.urls[this.indexImage]];
62 
	this.titreImage    = this.item['titre'];
63 
	this.urlLienEflore = this.item['lien'];
64 
	this.idImage       = this.item['id_photo'];
65 
 
66 
	// If last caract of the url is a ',' we remove it
67 
	const lastCaractUrlImage = this.item['url_photo'].slice(-1);
68 
	if (lastCaractUrlImage === ','){
69 
		this.item['url_photo'] = this.item['url_photo'].replace(/.$/,'');
70 
	}
71 
 
72 
	this.urlThisImage  = this.item['url_photo']+'.jpg';
73 
	this.obs           = this.item['obs'];
74 
	this.nn            = '[nn' + this.obs['nom_sel_nn']+']';
75 
	this.urlIP         = this.obs['url_ip'];
76 
	this.tagsImage     = this.tagsToArray( this.item['tags_photo'] );
77 
	this.tagsObs       = this.tagsToArray( this.obs['tags_obs'] );
78 
	this.isAuteurTela  = this.item['is_auteur_tela'];
79 
	let auteurMail 	   = this.item['utilisateur']['mail_utilisateur'].split("@")[0] + '@...';
80 
	this.auteur        = this.item["utilisateur"]["nom_utilisateur"].trim().length !== 0 ? this.item["utilisateur"]["nom_utilisateur"] : auteurMail;
81 
	this.date          = this.item['date'];
82 
	this.urlTpl 	   = this.item['url_tpl'];
83 
	if (!this.urlIP){
84 
		this.urlIP = 'www.tela-botanica.org/appli:identiplante#obs~' + this.obs['id_obs'];
85 
	}
86 
};
87 
 
88 
WidgetPhotoPopup.prototype.tagsToArray = function( tags ) {
89 
	if(!this.valOk(tags)) {
90 
		return [];
91 
	}
92 
	tags = tags.replace( new RegExp('\\.'), '' ).split( ',' );
93 
 
94 
	let cleanTags       = [],
95 
		nbTags          = tags.length,
96 
		tag             = '',
97 
		tagsSansEspaces = '',
98 
		cleanTagIndex   = 0;
99 
 
100 
	for(let i = 0; i < nbTags; i++) {
101 
		tag = tags[i];
102 
		tagsSansEspaces = tag.replace( ' ', '');
103 
		if( '' !== tagsSansEspaces ) {
104 
			cleanTags.push( tag.trim() );
105 
		}
106 
	}
107 
 
108 
	return cleanTags;
109 
};
110 
 
111 
WidgetPhotoPopup.prototype.initEvtsDefilerImage = function() {
112 
	const lthis = this;
113 
 
114 
	$( '#precedent, #suivant' ).off('click');
115 
 
116 
	$( '#precedent, #suivant' ).on( 'click', function() {
117 
		lthis.defilerImage( this.id );
118 
		lthis.initEvtsTagsPF();
119 
	});
120 
 
121 
	$( '#print_content:not(saisir-tag)' ).on( 'keydown', function( event ) {
122 
 
123 
		const determinerSens = function( enventKey, left, right ) {
124 
			switch ( enventKey ) {
125 
				case left:
126 
					return 'suivant';
127 
				case right:
128 
					return 'precedent';
129 
				default:
130 
					break;
131 
			}
132 
 
133 
			return;
134 
		}
135 
 
136 
		event = (event || window.event);
137 
		// event.keyCode déprécié, on tente d'abord event.key
138 
		let sens = ( 'key' in event ) ? determinerSens( event.key, 'ArrowLeft', 'ArrowRight' ) : determinerSens( event.keyCode, 37, 39 );;
139 
 
140 
		if ( lthis.valOk( sens ) ) {
141 
			lthis.defilerImage( sens );
142 
		}
143 
	});
144 
};
145 
 
146 
// WidgetPhotoPopup.prototype.initEvtsContact = function() {
147 
// 	const lthis = this;
148 
//
149 
// 	$( '#bloc-infos-img' ).on( 'click', '.lien_contact', function( event ) {
150 
// 		event.preventDefault();
151 
// 		lthis.chargerContenuModale( this.href );
152 
// 	});
153 
// };
154 
 
155 
WidgetPhotoPopup.prototype.initEvtsFonctionsPhoto = function() {
156 
	const lthis = this;
157 
 
158 
	$( '#boutons-footer #bloc-fct a, #retour-metas' ).on( 'click', function( event ){
159 
		event.preventDefault();
160 
		var voletAOuvrir = $( this ).data( 'volet' ),
161 
			voletAFermer = $( '.bloc-volet:not(.hidden)' ).data( 'volet' );
162 
 
163 
		lthis.ouvrirVoletFct( voletAOuvrir, voletAFermer );
164 
		if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
165 
			$( '#info-img-galerie' ).addClass( 'hidden' );
166 
			$( '#volet, #retour-galerie' ).removeClass( 'hidden' );
167 
			$( '#hide-metas-div' ).addClass( 'hidden' );
168 
		}
169 
	});
170 
};
171 
 
172 
WidgetPhotoPopup.prototype.initEvtsRetourGalerieResponsive = function() {
173 
	$( '#retour-galerie' ).on( 'click', function( event ) {
174 
		event.preventDefault();
175 
		$( '#info-img-galerie' ).removeClass( 'hidden' );
176 
		$( this ).addClass( 'hidden' );
177 
		if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
178 
			$( '#volet' ).addClass( 'hidden' );
179 
			$( '.bouton-fct.actif' ).removeClass( 'actif' );
180 
			$( '#hide-metas-div' ).addClass( 'hidden' );
181 
		}
182 
	});
183 
};
184 
 
185 
WidgetPhotoPopup.prototype.initEvtsTagsCel = function(){
186 
	const lthis = this;
187 
	$( '#tags-cel' ).html('');
188 
 
189 
	$( '#tags-cel' ).append(
190 
		"<p>"+ lthis.item['tags_photo']+"</p>"
191 
	)
192 
}
193 
 
194 
WidgetPhotoPopup.prototype.initEvtsTagsPF = function() {
195 
	// Récupération des tags PF
196 
	let url = lthis.urlServiceDel + 'mots-cles?image=' + this.idImage;
197 
	this.envoyerVersService('GET', url, null, null, function (erreur, data) {
198 
		if (erreur) {
199 
			console.error("Erreur lors de la requête :", erreur);
200 
		} else {
201 
			lthis.item['tags_pf']= [];
202 
			let tags = Object.values(data['resultats']);
203 
			tags.forEach(tag => {
204 
				lthis.item['tags_pf'].push({'id_mot_cle' : tag.id_mot_cle, 'mot_cle' : tag.mot_cle})
205 
			})
206 
			lthis.tagsPf();
207 
			lthis.tagsPfCustom();
208 
		}
209 
	});
210 
 
211 
	const tagsPfDiv = $('#tags-pf');
212 
	tagsPfDiv.html('');
213 
	tagsPfDiv.append('<a id="port" class="btn tag">Port</a>' +
214 
		'<a id="fleur" class="btn tag">Fleur</a>' +
215 
		'<a id="fruit" class="btn tag">Fruit</a>' +
216 
		'<a id="feuille" class="btn tag">Feuille</a>' +
217 
		'<a id="ecorce" class="btn tag">Ecorce</a>' +
218 
		'<a id="rameau" class="btn tag">Rameau</a>' +
219 
		'<a id="planche" class="btn tag">Planche</a>' +
220 
		'<a id="rosette" class="btn tag">Rosette</a>' +
221 
		'<a id="pousse" class="btn tag">Pousse</a>');
222 
 
223 
	$( '#bloc-tags' ).off('click').on( 'click', '.tag', function( event ) {
224 
		event.preventDefault();
225 
		$( this ).toggleClass( 'actif' );
226 
 
227 
		var motCleClique = '';
228 
		motCleClique = $(this).attr('id');
229 
 
230 
		// Utiliser la méthode findIndex pour obtenir l'index de l'élément dans le tableau
231 
		var indexElementTrouve = lthis.item['tags_pf'].findIndex(function (tag) {
232 
			return tag['mot_cle'] === motCleClique;
233 
		});
234 
 
235 
		// Vérifier si l'élément a été trouvé
236 
		if (indexElementTrouve !== -1) {
237 
			//supprimer tag dans DEL
238 
			if (lthis.item['tags_pf'][indexElementTrouve].hasOwnProperty('id_mot_cle') && lthis.item['tags_pf'][indexElementTrouve]['id_mot_cle'] != ''){
239 
				let url = lthis.urlServiceDel + 'mots-cles/' + lthis.item['tags_pf'][indexElementTrouve]['id_mot_cle']
240 
 
241 
				lthis.envoyerVersService('DELETE', url)
242 
			}
243 
 
244 
			// Supprimer l'élément de this.item['tags_pf'] à l'index trouvé
245 
			lthis.item['tags_pf'].splice(indexElementTrouve, 1);
246 
		} else {
247 
			//Ajout tag dans le DEL
248 
			let url = lthis.urlServiceDel + 'mots-cles';
249 
			let donnees = {
250 
				"image" : lthis.idImage,
251 
				"mot_cle" : motCleClique,
252 
				"auteur.id" : lthis.item["utilisateur"]["id_utilisateur"]
253 
			}
254 
 
255 
			lthis.envoyerVersService('PUT', url, null, JSON.stringify(donnees), function (erreur, tagId) {
256 
				if (erreur) {
257 
					console.error("Erreur lors de la requête :", erreur);
258 
				} else {
259 
					console.log('tag : ' + motCleClique + ' ajouté');
260 
					lthis.item['tags_pf'].push({'id_mot_cle' : tagId['id'][0], 'mot_cle' : motCleClique})
261 
				}
262 
			});
263 
		}
264 
	});
265 
};
266 
 
267 
WidgetPhotoPopup.prototype.defilerImage = function( sens ) {
268 
	if ( 'suivant' === sens ) {
269 
		this.indexImage++ ;
270 
		if( this.indexImage >= this.urls.length ) {
271 
			this.indexImage = 0;
272 
		}
273 
	} else if ( 'precedent' === sens ) {
274 
		this.indexImage--;
275 
		if( this.indexImage < 0 ) {
276 
			this.indexImage = this.urls.length -1;
277 
		}
278 
	}
279 
	// @TODO: Modifier l'attr content de 'meta[property=og:image]' et y mettre l'url de l'image
280 
	this.mettreAJourPopup();
281 
};
282 
 
283 
WidgetPhotoPopup.prototype.afficherTitreImage = function() {
284 
	let lienContact  =
285 
			this.urlWidget +'?mode=contact&nn=' + this.nn +
286 
			'&nom_sci=' + this.obs['nom_sel'] +
287 
			'&date=' + this.date +
288 
			'&localisation=' + this.obs['localisation'] +
289 
			'&id_image=' + this.idImage +
290 
			'&auteur=' + this.auteur;
291 
 
292 
	if ( this.valOk( this.popupUrl ) ) {
293 
		if (! this.popupUrl.match( new RegExp( 'img:' + this.idImage ) ) ) {
294 
			this.popupUrl = this.actualiserPopupUrl( this.popupUrl, this.urlThisImage );
295 
		}
296 
		lienContact += '&popup_url=' + encodeURIComponent( this.popupUrl );
297 
	}
298 
 
299 
	if (this.isAuteurTela){
300 
		$( '#bloc-infos-img' ).html(
301 
			this.afficherLien( this.urlLienEflore, this.obs['nom_sel'] )+
302 
			' par '+
303 
			'<a class="lien_contact" href="' + this.item['urlProfil'] + '" target="_blank" title="Afficher le profil">' + this.auteur + '</a> '+
304 
			' le ' + this.date + ' - ' + this.obs['localisation']
305 
		);
306 
	} else {
307 
		$( '#bloc-infos-img' ).html(
308 
			this.afficherLien( this.urlLienEflore, this.obs['nom_sel'] )+
309 
			' par '+
310 
			this.auteur +
311 
			' le ' + this.date + ' - ' + this.obs['localisation']
312 
		);
313 
	}
314 
 
315 
};
316 
 
317 
WidgetPhotoPopup.prototype.actualiserPopupUrl = function( queryString, remplacement ) {
318 
	let queryStringParsee = queryString.substring(1).split('&');
319 
 
320 
	$.each( queryStringParsee,  function( i, param ) {
321 
		if( /url_image/.test( param ) ) {
322 
			queryString = queryString.replace( param, 'url_image=' + remplacement );
323 
			return false;
324 
		}
325 
	});
326 
	return queryString;
327 
};
328 
 
329 
WidgetPhotoPopup.prototype.redimentionnerModaleCarousel = function() {
330 
	this.redimensionnerGalerie();
331 
	if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
332 
		$( '#volet, #retour-galerie' ).addClass( 'hidden' );
333 
		$( '#info-img-galerie' ).removeClass( 'hidden' );
334 
		$( '.bouton-fct.actif' ).removeClass( 'actif' );
335 
		$( '.nettoyage-volet.haut' ).text( $( '#bloc-infos-img' ).text() );
336 
		$( '#boutons-footer, #info-img-galerie' ).removeClass( 'col-lg-8' );
337 
		$( '#bloc-infos-img, #volet' ).removeClass( 'col-lg-4' );
338 
		$( '#hide-metas-div' ).addClass( 'hidden' );
339 
	} else {
340 
		$( '#volet, #info-img-galerie' ).removeClass( 'hidden' );
341 
		if ( this.valOk( $( '.bloc-volet:not(.hidden)' ) ) ) {
342 
			$( '.bouton-fct.' + $( '.bloc-volet:not(.hidden)' ).data( 'volet' ) ).addClass( 'actif' );
343 
		}
344 
		$( '.nettoyage-volet.bas' ).text( $( '#bloc-infos-img' ).text() );
345 
		$( '#boutons-footer, #info-img-galerie' ).addClass( 'col-lg-8' );
346 
		$( '#bloc-infos-img, #volet' ).addClass( 'col-lg-4' );
347 
		$( '#retour-galerie' ).addClass( 'hidden' );
348 
		$( '#hide-metas-div' ).removeClass( 'hidden' );
349 
	}
350 
};
351 
 
352 
WidgetPhotoPopup.prototype.redimensionnerGalerie = function() {
353 
	var maxSize = ( $( window ).width() / $( window ).height() ) < 1 ? $( window ).width() : $( window ).height();
354 
 
355 
	maxSize -= 30;
356 
	$( '.carousel-item img' ).each( function( index, image ) {
357 
		var proportion  = image.dataset.width / image.dataset.height,
358 
			cssResize   = {};
359 
 
360 
		if ( proportion >= 1 ) {
361 
			cssResize['width'] = maxSize;
362 
		}
363 
		if ( proportion <= 1) {
364 
			cssResize['height'] = maxSize;
365 
		}
366 
		$( image ).css( cssResize );
367 
	});
368 
};
369 
 
370 
WidgetPhotoPopup.prototype.ouvrirVoletFct = function( voletAOuvrir, voletAFermer ) {
371 
	if( voletAOuvrir !== voletAFermer ) {
372 
		$( '#boutons-footer  .' + voletAFermer ).removeClass( 'actif' );
373 
		$( '#boutons-footer  .' + voletAOuvrir ).addClass( 'actif' );
374 
		$( '#bloc-' + voletAFermer ).addClass( 'hidden' );
375 
		$( '#bloc-' + voletAOuvrir ).removeClass( 'hidden' );
376 
		$( '#volet' ).scrollTop(0);
377 
		$( '#retour-metas' ).removeClass( 'hidden', 'meta' === voletAOuvrir );
378 
	}
379 
};
380 
 
381 
WidgetPhotoPopup.prototype.tagsPf = function () {
382 
	const lthis = this;
383 
	$('#tags-pf-supp').html('');
384 
 
385 
	lthis.item['tags_pf'].forEach(tag => {
386 
		const tagElement = document.getElementById(tag['mot_cle']);
387 
 
388 
		// Vérifier si l'élément existe
389 
		if (tagElement) {
390 
			// Ajouter la classe 'active' à l'élément <a>
391 
			tagElement.classList.add('actif');
392 
		} else {
393 
			$('#tags-pf-supp').append('<a id="'+tag['mot_cle']+'" class="btn tag custom-tag actif">' + tag['mot_cle'] + '&nbsp;' +
394 
				'</a>')
395 
		}
396 
	});
397 
}
398 
 
399 
WidgetPhotoPopup.prototype.tagsPfCustom = function() {
400 
	const lthis = this;
401 
 
402 
	$( '#saisir-tag' ).on( 'blur keyup', function( event ) {
403 
		event = ( event || window.event );
404 
 
405 
		var ajouterTag = ( 'blur' === event.type );
406 
 
407 
		// event.keyCode déprécié, on tente d'abord event.key
408 
		if ( 'key' in event  ) {
409 
			if ( 'Enter' === event.key ) {
410 
				ajouterTag = true;
411 
			}
412 
		} else if ( 13 === event.keyCode ) {
413 
			ajouterTag = true;
414 
		}
415 
		if	( ajouterTag ) {
416 
			var nouveauTag     = $( this ).val(),
417 
				nouveauTagAttr = lthis.chaineValableAttributsHtml( nouveauTag.toLowerCase() );
418 
 
419 
			if( lthis.valOk( nouveauTagAttr ) && !lthis.valOk( $( '#' + nouveauTagAttr + '.tag' ) ) ) {
420 
				$( '#tags-pf-supp' ).append(
421 
					'<a id="' + nouveauTagAttr + '" class="btn tag custom-tag actif">' +
422 
						nouveauTag + '&nbsp;' +
423 
					'</a>'
424 
				);
425 
 
426 
				let url = lthis.urlServiceDel + 'mots-cles';
427 
				let donnees = {
428 
					"image" : lthis.idImage,
429 
					"mot_cle" : nouveauTagAttr,
430 
					"auteur.id" : lthis.item["utilisateur"]["id_utilisateur"]
431 
				}
432 
 
433 
				// Envoie du nouveau tag dans le DEL
434 
				lthis.envoyerVersService('PUT', url, null, JSON.stringify(donnees), function (erreur, tagId) {
435 
					if (erreur) {
436 
						console.error("Erreur lors de la requête :", erreur);
437 
					} else {
438 
						console.log('tag : ' + nouveauTagAttr + ' ajouté');
439 
						lthis.item['tags_pf'].push({'id_mot_cle' : tagId['id'][0], 'mot_cle' : nouveauTagAttr})
440 
					}
441 
				});
442 
 
443 
				$( this ).val( '' );
444 
			}
445 
		}
446 
	});
447 
};
448 
 
449 
WidgetPhotoPopup.prototype.traiterMetas = function() {
450 
	this.afficherMetas();
451 
	this.afficherPopupLocalisation();
452 
	this.afficherMetasPlus();
453 
	this.fournirLienTelechargement();
454 
};
455 
 
456 
WidgetPhotoPopup.prototype.afficherMetas = function() {
457 
	const lthis         = this;
458 
	if (!this.obs['fiabilite']){
459 
		this.obs['fiabilite'] = 'impossible de récupérer le grade';
460 
	}
461 
	const META_CONTENUS = {
462 
		'nom' : this.afficherLien( this.urlLienEflore, this.obs['nom_sel'] ),
463 
		'localisation' : this.obs['localisation'],
464 
		'auteur' : this.auteur,
465 
		'date-obs' : this.date,
466 
		'commentaire' : this.obs['commentaire'],
467 
		'certitude' : this.obs['certitude'],
468 
		'fiabilite' : this.obs['fiabilite'],
469 
		'num-photo' : this.idImage,
470 
		'titre-original' : this.item['nom_original'],
471 
		'date-photo' : this.formaterDate( this.item['date_photo'] ),
472 
		'attribution-copy' : this.item['attribution'],
473 
		'url-copy' : this.urlThisImage
474 
	};
475 
 
476 
	$.each( META_CONTENUS, function( attrId, contenu ) {
477 
		let $metaContainer = $( '#bloc-meta #'+attrId );
478 
 
479 
		if ( lthis.valOk( contenu ) ) {
480 
			switch( attrId ) {
481 
				case 'attribution-copy' :
482 
				case 'url-copy' :
483 
					$metaContainer.val( contenu );
484 
					lthis.copieAutoChamp( $metaContainer );
485 
					break;
486 
				case 'nom' :
487 
					$( '.contenu', $metaContainer ).html( contenu );
488 
					$( '.bouton', $metaContainer ).attr( 'href', lthis.urlLienEflore );
489 
					break;
490 
				case 'auteur' :
491 
					if (lthis.isAuteurTela) {
492 
						$('.bouton', $metaContainer).attr('href', lthis.item['urlProfil']);
493 
						$( '#bloc-meta #auteur i').removeClass('hidden');
494 
						$('.bouton', $metaContainer).removeClass('hidden');
495 
					} else {
496 
						$('.bouton', $metaContainer).addClass('hidden');
497 
						$( '#bloc-meta #auteur i').addClass('hidden');
498 
					}
499 
				default:
500 
					$( '.contenu', $metaContainer ).text( contenu );
501 
					break;
502 
			}
503 
		}
504 
	});
505 
};
506 
 
507 
WidgetPhotoPopup.prototype.copieAutoChamp = function( $champACopier ) {
508 
	$champACopier.off( 'click' ).on( 'click', function() {
509 
		$( '#attribution-copy, #url-copy' ).removeClass( 'hidden' )
510 
			.find( '.copy-message' ).remove();
511 
 
512 
		$( this ).select();
513 
		document.execCommand( 'copy' );
514 
 
515 
		$( this ).after(
516 
			'<p class="copy-message alert-success" style="width: 100%; height:' + $( this ).outerHeight() + 'px; margin: 0; display:flex;">'+
517 
				'<span style="margin:auto; font-size:1rem;">Copié dans le presse papier</span>'+
518 
			'</p>'
519 
		).addClass( 'hidden' );
520 
 
521 
		setTimeout( function() {
522 
			$( '.copy-message' ).remove();
523 
			$champACopier.removeClass( 'hidden' );
524 
		}, 1000 );
525 
	});
526 
};
527 
 
528 
WidgetPhotoPopup.prototype.afficherMetasPlus = function() {
529 
	const lthis         = this;
530 
	const META_LABELS  = {
531 
		'id_obs' : 'observation n°',
532 
		'projet' : 'projet',
533 
		'nom_referentiel' : 'réferentiel',
534 
		'date_obs' : 'date d´observation',
535 
		'nom_sel': 'nom scientifique',
536 
		'nom_sel_nn' : 'nom scientifique n°',
537 
		'nom_ret' : 'nom retenu',
538 
		'nom_ret_nn' : 'nom retenu n°',
539 
		'famille' : 'famille',
540 
		'tags_obs' : 'tags de l´observation',
541 
		'lieudit' : 'lieu dit',
542 
		'station' : 'station',
543 
		'milieu' : 'milieu',
544 
		'latitude' : 'latitude',
545 
		'longitude' : 'longitude',
546 
		'altitude' : 'altitude',
547 
		'localisation_precision': 'précision de la localisation',
548 
		'code_insee' : 'code insee de la commune',
549 
		'dept' : 'département',
550 
		'pays' : 'pays',
551 
		'est_ip_valide' : 'validée sur identiplante',
552 
		'score_ip' : 'score identiplante',
553 
		'url_ip' : 'url identiplante',
554 
		'abondance' : 'abondance',
555 
		'phenologie' : 'phénologie',
556 
		'spontaneite' : 'spontanéite',
557 
		'type_donnees' : 'type de données',
558 
		'biblio' : 'bibliographie',
559 
		'source' : 'source',
560 
		'herbier' : 'herbier',
561 
		'observateur' : 'observateur',
562 
		'observateur_structure' : 'structure'
563 
	};
564 
 
565 
	const $contenuPlusMeta  = $( '#contenu-meta-plus' );
566 
	let degres = $contenuPlusMeta.is( ':visible' ) ? '180' : '0';
567 
 
568 
	this.rotationFleche( degres );
569 
	$contenuPlusMeta.empty();
570 
 
571 
	$.each( META_LABELS, function( cle, label ) {
572 
		let idAttr = cle.replace( '_', '-' ),
573 
			contenu = lthis.obs[cle];
574 
 
575 
		switch( cle ) {
576 
			case 'nom_sel':
577 
				contenu = lthis.afficherLien( lthis.urlLienEflore, contenu );
578 
				break;
579 
 
580 
			case 'nom_ret':
581 
				let urlEfloreNomRetenu = lthis.urlLienEflore.replace( lthis.obs['nom_sel_nn'], lthis.obs['nom_ret_nn'] );
582 
 
583 
				contenu = lthis.afficherLien( urlEfloreNomRetenu, contenu );
584 
				break;
585 
 
586 
			case 'url_ip':
587 
				contenu = lthis.afficherLien( contenu, contenu );
588 
				break;
589 
 
590 
			case 'est_ip_valide':
591 
			case 'herbier':
592 
				if( '0' === contenu ) {
593 
					contenu = 'non';
594 
				}
595 
				break;
596 
 
597 
			case 'date_obs':
598 
				contenu = lthis.formaterDate( contenu );
599 
				break;
600 
 
601 
			case 'tags_obs':
602 
				let tagsObsLength = lthis.tagsObs.length;
603 
				contenu = lthis.tagsObs.join( '<br>' );
604 
				break;
605 
 
606 
			default:
607 
				break;
608 
		}
609 
 
610 
		if ( lthis.valOk( contenu ) ) {
611 
			$contenuPlusMeta.append(
612 
				'<li id="' + idAttr + '-meta-plus" class="row">'+
613 
					'<div class="col-5 label">' + label.charAt( 0 ).toUpperCase() + label.slice( 1 ) + '</div>'+
614 
					'<div class="col-7 contenu">' + contenu + '</div>'+
615 
				'</li>'
616 
			);
617 
		}
618 
	});
619 
 
620 
	if( !$contenuPlusMeta.hasClass( 'actif' ) ) {
621 
		$contenuPlusMeta.hide();
622 
	}
623 
 
624 
	let estVisible = false;
625 
 
626 
	$( '#plus-meta' ).off( 'click' ).on( 'click', function( event ) {
627 
		event.preventDefault();
628 
		$contenuPlusMeta.toggle( 200, function() {
629 
			estVisible = $contenuPlusMeta.is( ':visible' );
630 
			degres     = estVisible ? '180' : '0';
631 
			$( this ).toggleClass( 'actif', estVisible );
632 
			lthis.rotationFleche( degres );
633 
		});
634 
	});
635 
};
636 
 
637 
WidgetPhotoPopup.prototype.rotationFleche = function( degres ) {
638 
	$( '#plus-meta i' ).css({
639 
		'-webkit-transform' : 'rotate('+ degres +'deg)',
640 
		'-moz-transform' : 'rotate('+ degres +'deg)',
641 
		'-ms-transform' : 'rotate('+ degres +'deg)',
642 
		'transform' : 'rotate('+ degres +'deg)'
643 
	});
644 
};
645 
 
646 
WidgetPhotoPopup.prototype.fournirLienTelechargement = function() {
647 
	const lthis = this;
648 
 
649 
	$( '#formats' ).on( 'change', function() {
650 
		let format             = ( $( this ).val() || 'O' ),
651 
			lienTelechargement = lthis.urlBaseTelechargement + lthis.idImage + '?methode=telecharger&format=' + format;
652 
 
653 
		$( '#telecharger' ).attr( 'href', lienTelechargement );
654 
	});
655 
 
656 
	$( '#formats' ).trigger( 'change' );
657 
};
658 
 
659 
 
660 
WidgetPhotoPopup.prototype.afficherPopupLocalisation = function() {
661 
	const lthis = this;
662 
 
663 
	$( '#localisation a.bouton' ).on( 'click', function( event ){
664 
		event.preventDefault();
665 
 
666 
		$( this ).after(
667 
			'<div id="localisation-map-container">'+
668 
				'<button id="map-close" type="button" class="bouton btn btn-sm btn-outline-secondary" aria-label="Close">'+
669 
					'<span aria-hidden="true">×</span>'+
670 
				'</button>'+
671 
				'<div id="localisation-map"></div>'+
672 
			'</div>'
673 
		);
674 
 
675 
		let lat = lthis.obs['latitude'],
676 
			lng = lthis.obs['longitude'],
677 
			map = L.map( 'localisation-map', {
678 
				zoomControl: true,
679 
				dragging: false,
680 
				scrollWheelZoom: 'center'
681 
			} ).setView( [lat, lng], 12 );
682 
 
683 
		map.markers = [];
684 
 
685 
		L.tileLayer(
686 
			// 'https://osm.tela-botanica.org/tuiles/osmfr/{z}/{x}/{y}.png',
687 
			'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
688 
			{
689 
				attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
690 
				maxZoom: 18
691 
			}
692 
		).addTo( map );
693 
 
694 
		map.addLayer( new L.FeatureGroup() );
695 
 
696 
		let marker = new L.Marker(
697 
			{
698 
				'lat': lat,
699 
				'lng': lng
700 
			},
701 
			{
702 
				draggable: false,
703 
			}
704 
		);
705 
 
706 
 
707 
		map.addLayer( marker );
708 
		map.markers.push( marker );
709 
 
710 
		$( '#map-close' ).on( 'click', function( event ){
711 
			$( '#localisation-map-container' ).remove();
712 
		});
713 
	});
714 
 
715 
	$( '#fenetre-modal' ).on( 'click', function( event ) {
716 
		if(
717 
			!$( event.target ).closest( '#localisation-map-container' ).length
718 
			&& !$( event.target ).closest( '#obs-localisation' ).length
719 
		) {
720 
			$( '#localisation-map-container' ).remove();
721 
		}
722 
	});
723 
};
724 
 
725 
 
726 
WidgetPhotoPopup.prototype.regenererMiniature = function() {
727 
	const lthis = this;
728 
	$( '#regenerer-miniature' ).off( 'click' ).on( 'click', function( event ) {
729 
		event.preventDefault();
730 
 
731 
		let url = lthis.urlServiceRegenererMiniature + lthis.idImage;
732 
		$.get( url, function( data ) {
733 
				console.log( data );
734 
			lthis.forcerMajImage(lthis.urlThisImage, lthis.urlTpl);
735 
			}
736 
		).fail( function() {
737 
			console.log( 'La régénération d´image ne s´est pas faite' );
738 
		});
739 
	});
740 
};
741 
 
742 
WidgetPhotoPopup.prototype.formaterDate = function( sqlDate ) {
743 
	dateFormatee = sqlDate
744 
		.substring( 0, 10 )
745 
		.split( '-' )
746 
		.reverse()
747 
		.join('/');
748 
 
749 
	return dateFormatee;
750 
};
751 
 
752 
WidgetPhotoPopup.prototype.afficherLien = function( url, nom ) {
753 
	if( !/https?:\/\//.test( url ) ) {
754 
		url = 'https://' + url;
755 
	}
756 
	return '<a href="' + url + '" target="_blank">' + nom + '</a> ';
757 
};
758 
 
759 
WidgetPhotoPopup.prototype.fournirLienIdentiplante = function() {
760 
	const lthis = this;
761 
	$( '.signaler-erreur-obs' ).each( function() {
762 
		$( this ).attr( 'href', 'https://' + lthis.urlIP );
763 
	});
764 
};
765 
 
766 
WidgetPhotoPopup.prototype.initEvtsProtocole = function() {
767 
	const lthis = this;
768 
	$('#bloc-notes-protocole').addClass('hidden');
769 
	lthis.votes = null
770 
	//On transforme la promesse en array
771 
	const PROTOCOLES_ARRAY = Object.values(lthis.protocoles);
772 
 
773 
	const $select = $('#protocole');
774 
	$select.empty(); // Clear existing options
775 
 
776 
	// Add the default hidden option
777 
	$select.append('<option value="" selected hidden>Choix du protocole</option>');
778 
 
779 
	PROTOCOLES_ARRAY.forEach(protocoleData => {
780 
		$select.append(`<option id="protocole_${protocoleData['protocole.id']}" value="protocole_${protocoleData['protocole.id']}">${protocoleData['protocole.intitule']}</option>`);
781 
	})
782 
 
783 
	$( '#protocole').on( 'change', function( event ){
784 
		event.preventDefault();
785 
		lthis.votes = null
786 
 
787 
		var id = $(this).children(":selected").attr("id");
788 
		var protocole = id.split("_")[1];
789 
 
790 
		$('#bloc-notes-protocole').removeClass('hidden');
791 
 
792 
		// Find the object corresponding to the selected id (protocole.id)
793 
		var selectedProtocoleData = PROTOCOLES_ARRAY.find(protocoleData => protocoleData['protocole.id'] === protocole);
794 
 
795 
		lthis.protocole = selectedProtocoleData['protocole.id'];
796 
		const message = selectedProtocoleData['protocole.descriptif'];
797 
 
798 
		$('#message-protocole').html('<p>' + message + '</p>');
799 
 
800 
		// On envoie le protocole sélectionné à la partie "vote"
801 
		// On récupère tous les votes de l'image depuis pictoflora
802 
		lthis.votes = lthis.getVotes(lthis.protocole)
803 
 
804 
		// Si l'utilisateur est connect, on vérifie s'il a déjà voté pour cette image et on affiche les étoiles correspondantes
805 
		if(lthis.userId){
806 
			lthis.checkUserVote(lthis.userId, lthis.protocole, lthis.votes);
807 
		} else {
808 
			lthis.voteId = null;
809 
			lthis.removeVoteStars()
810 
		}
811 
 
812 
		// Remove any previous click event listeners on rating stars
813 
		for (let i=1; i<=5; i++){
814 
			$("#rating-star-"+i).off("click");
815 
		}
816 
 
817 
		// Si l'utilisateur vote, on affiche les étoiles correspondantes et on l'envoie vers pictoflora
818 
		lthis.traiterVote();
819 
	});
820 
}
821 
 
822 
WidgetPhotoPopup.prototype.traiterVote = function () {
823 
	const lthis = this;
824 
	let starSelected = 0
825 
	let mode = '';
826 
 
827 
	$("#note").attr("value", -1);
828 
 
829 
	// Traitement du bouton suppression du vote
830 
	$("#note-remove").click(function (){
831 
		lthis.removeVoteStars();
832 
		mode = 'DELETE';
833 
		// On n'envoie le vote que si l'utilisateur est connecté
834 
		if (lthis.userId) {
835 
			lthis.sendVote(lthis.userId, lthis.protocole, starSelected, mode, lthis.voteId);
836 
		}
837 
	})
838 
 
839 
	// Si l'utilisateur a déjà voté pour cette image on affiche son vote et on passe en mode modification
840 
	let userAVoter = lthis.checkUserVote(lthis.userId, lthis.protocole, lthis.votes);
841 
	userAVoter ? mode = 'POST' : mode = 'PUT';
842 
 
843 
	// Affichage du nombre d'étoiles sélectionnées et envoi du vote
844 
	for (let i=1; i<=5; i++){
845 
		$("#rating-star-"+i).click(function () {
846 
			starSelected = i
847 
			lthis.displayVote(starSelected);
848 
			$("#note").attr("value", starSelected);
849 
			// On n'envoie le vote que si l'utilisateur est connecté
850 
			if (lthis.userId){
851 
				lthis.sendVote(lthis.userId, lthis.protocole, starSelected, mode);
852 
			}
853 
		});
854 
	}
855 
};
856 
 
857 
// Envoi du vote vers la fonction sendVote() du fichier php
858 
WidgetPhotoPopup.prototype.sendVote = function (userId, protocole, note, mode, voteId){
859 
	const lthis = this;
860 
 
861 
	var xhttp = new XMLHttpRequest();
862 
	xhttp.onreadystatechange = function() {
863 
		if (this.readyState == 4 && this.status == 200) {
864 
			let votesUrl = lthis.urlServiceDel + 'images/' + lthis.idImage + '/votes';
865 
			// Récupération des données et maj de l'affichage
866 
			lthis.envoyerVersService('GET', votesUrl, null, null, function (erreur, data) {
867 
				if (erreur) {
868 
					console.error("Erreur lors de la requête :", erreur);
869 
				} else {
870 
					lthis.item["votes"] = Object.values(data['resultats']);
871 
					lthis.getVotes(protocole)
872 
				}
873 
			});
874 
			console.log('vote envoyé')
875 
		}
876 
	};
877 
 
878 
	var url = "../widget:cel:photo/";
879 
 
880 
	// Convertir les données en une chaîne JSON pour les envoyer dans le corps de la requête
881 
	var data = {
882 
		idImage: this.idImage,
883 
		mode: mode,
884 
		user: userId,
885 
		protocole: protocole,
886 
		vote: note,
887 
		voteId: voteId
888 
	}
889 
	var jsonData = JSON.stringify(data);
890 
 
891 
	xhttp.open("POST", url+"?action=send_pf_vote", true);
892 
	xhttp.setRequestHeader("Content-Type", "application/json");
893 
	xhttp.send(jsonData);
894 
}
895 
 
896 
WidgetPhotoPopup.prototype.getVotes = function (protocoleId){
897 
	let votes = Object.values(this.item["votes"]);
898 
	let noteMoyenne = 0;
899 
	let nombreVotes= 0;
900 
	let noteTotal = 0;
901 
	let itemVotes = [];
902 
 
903 
	votes.forEach(vote => {
904 
		if (vote["protocole.id"] == protocoleId){
905 
			nombreVotes++
906 
			noteTotal += parseInt(vote["vote"]);
907 
			noteMoyenne = (noteTotal / nombreVotes).toFixed(1)
908 
			itemVotes.push(vote);
909 
		}
910 
	})
911 
 
912 
	let elementNoteMoyenne = $("#note-moyenne .contenu");
913 
	elementNoteMoyenne.text(noteMoyenne);
914 
 
915 
	let elementNoteCount = $("#note-count .contenu");
916 
	elementNoteCount.text(nombreVotes);
917 
 
918 
	return itemVotes;
919 
}
920 
 
921 
WidgetPhotoPopup.prototype.displayVote = function (note){
922 
	lthis.removeVoteStars();
923 
 
924 
	for (let i=1; i<=5; i++){
925 
		for (let j=1; j<=note; j++){
926 
			$("#rating-star-"+j).removeClass('far').addClass('fa').css("color", "#c3d45d");
927 
		}
928 
	}
929 
}
930 
 
931 
WidgetPhotoPopup.prototype.removeVoteStars = function (){
932 
	$(".notation-star").removeClass('fa').addClass('far').css("color", "grey");
933 
	$("#note").attr("value", -1);
934 
}
935 
 
936 
WidgetPhotoPopup.prototype.checkUserVote = function (userId, protocoleId, votes){
937 
	let userVote = null;
938 
 
939 
	votes.forEach(vote => {
940 
		if (vote["protocole.id"] == protocoleId && vote["auteur.id"] == userId){
941 
			userVote = vote;
942 
		}
943 
	})
944 
 
945 
	if (userVote){
946 
		this.displayVote(userVote['vote']);
947 
		this.voteId = userVote['vote.id'];
948 
 
949 
		return true
950 
	} else {
951 
		this.voteId = null;
952 
		this.removeVoteStars()
953 
	}
954 
}
955 
 
956 
WidgetPhotoPopup.prototype.pivoterImage = function() {
957 
	lthis = this;
958 
 
959 
	let newCel = lthis.urlServiceNewCel + "photo_rotations?photoId=" + lthis.idImage + "&degrees=";
960 
	let url = '';
961 
 
962 
	$( '#pivoter-droite' ).off( 'click' ).on( 'click', function( event ) {
963 
		event.preventDefault();
964 
 
965 
		url = "";
966 
		lthis.pivoter('droite');
967 
		url = newCel + "-90";
968 
 
969 
		lthis.envoyerVersService('GET', url, lthis.token, null, function (erreur, cb) {
970 
			lthis.forcerMajImage(lthis.urlThisImage, lthis.urlTpl);
971 
		});
972 
	});
973 
 
974 
	$( '#pivoter-gauche' ).off( 'click' ).on( 'click', function( event ) {
975 
		event.preventDefault();
976 
 
977 
		url = "";
978 
		lthis.pivoter('gauche');
979 
		url = newCel + "90";
980 
		lthis.envoyerVersService('GET', url, lthis.token, null, function (erreur, cb) {
981 
			lthis.forcerMajImage(lthis.urlThisImage, lthis.urlTpl);
982 
		});
983 
	});
984 
};
985 
 
986 
WidgetPhotoPopup.prototype.pivoter = function(direction) {
987 
	let imageSelected = $('img[src="' + lthis.urlThisImage + '"]').attr('id');
988 
	let angle = $('#' + imageSelected).data('angle');
989 
 
990 
	if (angle == 360 || angle == (-360) || angle == undefined){
991 
		angle = 0
992 
	}
993 
	if (direction == 'droite'){
994 
		angle += 90;
995 
	} else {
996 
		angle -= 90;
997 
	}
998 
 
999 
	$('#' + imageSelected).css("transform", "rotate(" + angle + "deg) ");
1000 
	$('#' + imageSelected).data('angle', angle);
1001 
}
1002 
 
1003 
WidgetPhotoPopup.prototype.forcerMajImage = function (urlImage, urlTpl){
1004 
	var indexPourcentage = urlTpl.indexOf('%');
1005 
	urlTpl = urlTpl.substring(0, indexPourcentage);
1006 
 
1007 
	// Sélectionne l'élément img avec l'attribut src égal à this.urlImage
1008 
	var $image = $('img[src^="' +  urlTpl + '"]');
1009 
 
1010 
	// Ajoute un paramètre unique à l'URL pour éviter le cache
1011 
	var newSrc = urlImage + '?timestamp=' + new Date().getTime();
1012 
 
1013 
	// Met à jour l'attribut 'src' de l'image avec la nouvelle URL
1014 
	$image.attr('src', newSrc);
1015 
}
1016 
 
1017 
WidgetPhotoPopup.prototype.initEvtsToggleVolet = function (){
1018 
	lthis = this;
1019 
 
1020 
	$('#hide-metas-div').off('click').on('click', function () {
1021 
		$('#hide-metas-div').toggleClass('volet-hidden')
1022 
		$('#hide-metas i').toggleClass('fa-angle-double-left')
1023 
		$('#hide-metas i').toggleClass('fa-angle-double-right')
1024 
		if ($('#hide-metas-div').hasClass('volet-hidden')){
1025 
			$('#hide-metas').attr('title', "Afficher le volet d'information")
1026 
		} else {
1027 
			$('#hide-metas').attr('title', "Cacher le volet d'information")
1028 
		}
1029 
 
1030 
		$( '#volet, #retour-galerie' ).toggleClass( 'hidden' );
1031 
		$( '#boutons-footer, #info-img-galerie' ).toggleClass( 'col-lg-8' );
1032 
	})
1033 
}