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