Subversion Repositories eFlore/Applications.cel

Rev

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