WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/carto/squelettes/scripts/carto.js

 /*+--------------------------------------------------------------------------------------------------------+*/
 // PARAMÊTRES et CONSTANTES
 var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
 var pointsOrigine = null;
 var boundsOrigine = null;
 var markerClusterer = null;
 var map = null;
 var infoBulle = new google.maps.InfoWindow();
 var pointClique = null;
 var carteCentre = new google.maps.LatLng(46.4, 3.10);
 var carteOptions = {
 	zoom: 6,
 	mapTypeId: google.maps.MapTypeId.ROADMAP,
 	mapTypeControlOptions: {
 		mapTypeIds: ['OSM',
 		             google.maps.MapTypeId.ROADMAP,
 		             google.maps.MapTypeId.HYBRID,
 		             google.maps.MapTypeId.SATELLITE,
 		             google.maps.MapTypeId.TERRAIN]
+	}
 };
 var ctaLayer = null;
 var osmMapType = new google.maps.ImageMapType({
 	getTileUrl: function(coord, zoom) {
 		return "http://tile.openstreetmap.org/" +
 		zoom + "/" + coord.x + "/" + coord.y + ".png";
 	},
 	tileSize: new google.maps.Size(256, 256),
 	isPng: true,
 	alt: "OpenStreetMap",
 	name: "OSM",
 	maxZoom: 19
 });
+var pagineur = {'limite':50, 'start':0, 'total':0, 'stationId':null, 'format':'tableau'};
+var station = {'commune':'', 'obsNbre':0};
+var obsStation = new Array();
+var obsPage = new Array();
 /*+--------------------------------------------------------------------------------------------------------+*/
 // INITIALISATION DU CODE
 //Déclenchement d'actions quand JQuery et le document HTML sont OK
 $(document).ready(function() {
 	initialiserWidget();
 });
-/*+--------------------------------------------------------------------------------------------------------+*/
-// FONCTIONS
 function initialiserWidget() {
 	afficherStats();
 	initialiserAffichageCarte();
 	initialiserAffichagePanneauLateral();
 	initialiserCarte();
 	initialiserInfoBulle();
 	chargerLimitesCommunales();
 	rafraichirCarte();
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+// AFFICHAGE GÉNÉRAL
 function afficherStats() {
 	// Ajout du nombre de communes où des observations ont eu lieu
 	$('#commune-nbre').append(obs.stats.communes.formaterNombre());
 	// Ajout du nombre d'observations
 	$('#obs-nbre').append(obs.stats.observations.formaterNombre());
 	// Ajout du nombre de plantes
 	$('.plantes-nbre').append(plantesNbre.formaterNombre());
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+// CARTE
 function initialiserAffichageCarte() {
 	$('#carte').height($(window).height() - 35);
 	$('#carte').width($(window).width() - 24);
 	if (nt != '*') {
 		$('#carte').css('left', 0);
+	}
+}
-function initialiserAffichagePanneauLateral() {
-	$('#panneau-lateral').height($(window).height() - 35);
-	if (nt == '*') {
-		$('#pl-ouverture').bind('click', afficher);
-		$('#pl-fermeture').bind('click', cacher);
-		$('.taxon').live('click', filtrerParTaxon);
-	}
-}
 function initialiserCarte() {
 	map = new google.maps.Map(document.getElementById('carte'), carteOptions);
 	// Ajout de la couche OSM à la carte
 	map.mapTypes.set('OSM', osmMapType);
+}
-function initialiserInfoBulle() {
-	google.maps.event.addListener(infoBulle, 'domready', modifierContenuInfoBulle);
-	google.maps.event.addListener(infoBulle, 'closeclick', deplacerCartePointClique);
 function chargerLimitesCommunales() {
 	if (urlsLimitesCommunales != null) {
 		for (urlId in urlsLimitesCommunales) {
 			var url = urlsLimitesCommunales[urlId];
 			ctaLayer = new google.maps.KmlLayer(url, {preserveViewport: true});
 			ctaLayer.setMap(map);
+		}
+	}
+}
 function rafraichirCarte() {
 	var points = [];
 	var bounds = new google.maps.LatLngBounds();
 	for (var i = 0; i < obs.stats.communes; ++i) {
 		var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
 		var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
 		var point = new google.maps.Marker({
 			position: maLatLng,
 			map: map,
 			icon: pointImage,
 			stationId: obs.points[i].id
 		});
 		bounds.extend(maLatLng);
 		google.maps.event.addListener(point, 'click', function() {
 			pointClique =  this;
 			infoBulle.open(map, this);
 			var limites = map.getBounds();
 			var centre = limites.getCenter();
 			var nordEst = limites.getNorthEast();
 			var centreSudLatLng = new google.maps.LatLng(nordEst.lat(), centre.lng());
 			map.panTo(centreSudLatLng);
-			afficherMsgChargement();
+			afficherInfoBulle();
-			chargerFormatObs(this.stationId, '*');
+			lancerChargementObs();
 		});
 		points.push(point);
+	}
 	if (pointsOrigine == null && boundsOrigine == null) {
 		pointsOrigine = points;
 		boundsOrigine = bounds;
+	}
 	executerMarkerClusterer(points, bounds);
+}
+function deplacerCartePointClique() {
+	map.panTo(pointClique.position);
+}
-function modifierContenuInfoBulle() {
-	// Onglet Tableau : Jquery => TableSorter
+function executerMarkerClusterer(points, bounds) {
-	if ($("#observations table").get() != '') {
+	if (markerClusterer) {
-		ajouterTableauTriable("#observations table");
+		markerClusterer.clearMarkers();
+	}
+	markerClusterer = new MarkerClusterer(map, points);
+	map.fitBounds(bounds);
+}
+/*+--------------------------------------------------------------------------------------------------------+*/
+// INFO BULLE
+function initialiserInfoBulle() {
+	google.maps.event.addListener(infoBulle, 'domready', initialiserContenuInfoBulle);
+	google.maps.event.addListener(infoBulle, 'closeclick', deplacerCartePointClique);
+}
+function afficherInfoBulle() {
-	}
+	var obsHtml = $("#tpl-obs").html();
+	infoBulle.setContent(obsHtml);
+}
-	// Onglet Liste : Jquery => FancyBox
+function afficherMessageChargement(element) {
+	if ($('#chargement').get() == '') {
+		$('#tpl-chargement').tmpl().appendTo(element);
+	}
+}
+function supprimerMessageChargement() {
+	$('#chargement').remove();
+}
+function lancerChargementObs() {
+	var urlObsNbre = urlObsStation;
+	urlObsNbre = urlObsNbre.replace(/\{action\}/g, 'observations-nombre');
+	urlObsNbre = urlObsNbre.replace(/\{stationId\}/g, pointClique.stationId);
+	console.log("Lancement recup nombre");
+	$.getJSON(urlObsNbre, function(infos){
+		console.log("Lancement charger obs");
+		chargerObs(0, infos.obsNbre);
+		station = infos;
+		actualiserPagineur();
+		creerTitreInfoBulle();
+	});
+}
+function actualiserPagineur() {
+	pagineur.stationId = pointClique.stationId;
+	pagineur.total = station.obsNbre;
+	console.log(pagineur.total);
+	if (pagineur.total > 4) {
+		pagineur.format = 'tableau';
+	} else {
+		pagineur.format = 'liste';
+	}
+}
+function chargerObs(depart, total) {
+	if (depart < total) {
+		var limite = 300;
+		if (depart == 0) {
+			obsStation = new Array();
+		}
+		console.log("Chargement de "+depart+" à "+(depart+limite));
+		var urlObs = urlObsStation+'&start={start}&limit='+limite;
+		urlObs = urlObs.replace(/\{action\}/g, 'observations');
+		urlObs = urlObs.replace(/\{stationId\}/g, pointClique.stationId);
+		urlObs = urlObs.replace(/\{start\}/g, depart);
+		$.getJSON(urlObs, function(observations){
+			obsStation = obsStation.concat(observations.observations);
+			console.log("Chargement ok");
+			chargerObs(depart+limite, total);
+		});
+	} else {
+		if (pagineur.limite < total) {
+			afficherPagination();
+		} else {
+			surClicPagePagination(0, null);
+		}
+	}
+}
+function afficherPagination(observations) {
+	$(".navigation").pagination(pagineur.total, {
+		items_per_page:pagineur.limite,
+		callback:surClicPagePagination,
+		next_text:'Suivant',
+		prev_text:'Précédent',
+		prev_show_always:false,
+		num_edge_entries:1,
+		num_display_entries:5,
+		load_first_page:true
+	});
+}
+function surClicPagePagination(pageIndex, paginationConteneur) {
+	var index = pageIndex * pagineur.limite;
+	var indexMax = index + pagineur.limite;
+	pagineur.depart = index;
+	obsPage = new Array();
+    for(index; index < indexMax; index++) {
+    	obsPage.push(obsStation[index]);
+    }
+    supprimerMessageChargement();
+    mettreAJourObservations();
+	return false;
+}
+function mettreAJourObservations() {
+	$("#obs-"+pagineur.format+"-lignes").empty();
+   	$("#obs-vue-"+pagineur.format).css('display', 'block');
+   	$(".obs-conteneur").css('counter-reset', 'item '+pagineur.depart);
+	$("#tpl-obs-"+pagineur.format).tmpl(obsPage).appendTo("#obs-"+pagineur.format+"-lignes");
+	// Actualisation de Fancybox
-	if ($("#observations ol").get() != '') {
+	if (pagineur.format == 'liste') {
 		ajouterGaleriePhoto("a.cel-img");
+	}
+}
+function creerTitreInfoBulle() {
+	$("#obs-total").append(station.obsNbre);
+	$("#obs-commune").append(station.commune);
+}
+function initialiserContenuInfoBulle() {
+	afficherOnglets();
+	afficherMessageChargement('#observations');
+	ajouterTableauTriable("#obs-tableau");
+	afficherTextStationId();
+	corrigerLargeurInfoWindow();
+}
+function afficherOnglets() {
+	var $tabs = $('#obs').tabs();
+	$('#obs').bind('tabsselect', function(event, ui) {
+		if (ui.panel.id == 'obs-vue-tableau') {
+			surClicAffichageTableau();
+		} else if (ui.panel.id == 'obs-vue-liste') {
+			surClicAffichageListe();
+		}
+	});
+	$tabs.tabs('select', "#obs-vue-"+pagineur.format);
+}
+function afficherTextStationId() {
+	$('#obs-station-id').text(pointClique.stationId);
+}
+function corrigerLargeurInfoWindow() {
+	$("#info-bulle").width($("#info-bulle").width() - 16);
+}
+function surClicAffichageTableau(event) {
+	console.log('tableau');
+	pagineur.format = 'tableau';
+	mettreAJourObservations();
+	mettreAJourTableauTriable("#obs-tableau");
+}
+function surClicAffichageListe(event) {
+	console.log('liste');
+	pagineur.format = 'liste';
+	mettreAJourObservations();
+	ajouterGaleriePhoto("a.cel-img");
+}
 function ajouterTableauTriable(element) {
 	// add parser through the tablesorter addParser method
 	$.tablesorter.addParser({
 		// Définition d'un id unique pour ce parsseur
 		id: 'date_cel',
 		is: function(s) {
-			// retourne false si le parsseur n'est pas autodétecté
+			// doit retourner false si le parsseur n'est pas autodétecté
-			return false;
+			return /^\s*\d{2}[\/-]\d{2}[\/-]\d{4}\s*$/.test(s);
 		},
-		format: function(s) {
+		format: function(date) {
 			// Transformation date jj/mm/aaaa en aaaa/mm/jj
-			s = s.replace(/(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})/, "$3/$2/$1");
+			date = date.replace(/^\s*(\d{2})[\/-](\d{2})[\/-](\d{4})\s*$/, "$3/$2/$1");
 			// Remplace la date par un nombre de millisecondes pour trier numériquement
-			return $.tablesorter.formatFloat(new Date(s).getTime());
+			return $.tablesorter.formatFloat(new Date(date).getTime());
 		},
 		// set type, either numeric or text
 		type: 'numeric'
 	});
 	$(element).tablesorter({
         headers: {
 : {
-                sorter:'date_cel'
+            	sorter:'date_cel'
-            }
-        }
+        	}
-    });
+    	}
-}
-function ajouterGaleriePhoto(element) {
-	$(element).fancybox({
-		transitionIn : 'elastic',
-		transitionOut : 'elastic',
-		speedIn	 : 600,
-		speedOut : 200,
-		overlayShow : true
-	}).live('click', function(e) {
-		if (e.stopPropagation) {
-			e.stopPropagation();
-		}
-		return false;
 	});
+}
-function deplacerCartePointClique() {
+function mettreAJourTableauTriable(element) {
-	map.panTo(pointClique.position);
+	$(element).trigger('update');
 }
-function executerMarkerClusterer(points, bounds) {
+function ajouterGaleriePhoto(element) {
+	$(element).fancybox({
+		transitionIn:'elastic',
-	if (markerClusterer) {
+		transitionOut:'elastic',
+		speedIn	:600,
+		speedOut:200,
+		overlayShow:true,
-		markerClusterer.clearMarkers();
+		titleShow:true,
+		titlePosition:'inside',
-	}
+		titleFormat:function (titre, currentArray, currentIndex, currentOpts) {
+			var motif = /urn:lsid:tela-botanica[.]org:cel:img([0-9]+)$/;
+			motif.exec(titre);
+			var id = RegExp.$1;
+			var info = $('#cel-info-'+id).clone().html();
+			var tpl =
+				'<div class="cel-legende">'+
+				'<p class="cel-legende-vei">'+'Image n°' + (currentIndex + 1) + ' sur ' + currentArray.length +'<\/p>'+
+				(titre && titre.length ? '<p>'+info+'<\/p>' : '' )+
-	markerClusterer = new MarkerClusterer(map, points);
+				'<\/div>';
-	map.fitBounds(bounds);
-}
+			return tpl;
+		}
-function afficherMsgChargement() {
+		}).live('click', function(e) {
+			if (e.stopPropagation) {
-	var chargement = document.getElementById('chargement').cloneNode(true);
+				e.stopPropagation();
+			}
-	chargement.setAttribute('id', 'chargement-copie');
+			return false;
-	infoBulle.setContent(chargement);
-}
-var pagineur = {'limite':150, 'obsTotal':0, 'stationId':null, 'format':null};
+		});
-function handlePaginationClick(new_page_index, pagination_container) {
-	$('.obs-liste-conteneur').css('display', 'none');
-	$('#chargement').clone().attr('id', 'chargement-copie').appendTo('#observations').css('display', 'block');
-	console.log($('#chargement').get());
+}
-	var start = new_page_index * pagineur.limite;
-	var url = urlObs+
-	'&format='+pagineur.format+
-	'&station='+pagineur.stationId+
-	'&start='+start+
-	'&limit='+pagineur.limite;
-	$.get(url, function(observations) {
-		$('#chargement-copie').remove();
-		$('.obs-liste-conteneur').css('display', 'block');
-		$('#obs-liste').empty();
-		$('#obs-liste').append(observations);
-	});
-	return false;
+/*+--------------------------------------------------------------------------------------------------------+*/
-}
-function chargerFormatObs(stationId, format) {
-	pagineur.obsTotal = parseInt($('#obs-total').text());
-	pagineur.stationId = stationId;
-	pagineur.format = format;
+// PANNEAU LATÉRAL
-	var start = 1 * pagineur.limite;
-	var url = urlStation+
-		'&format='+format+
-		'&station='+stationId+
-		'&start='+start+
-		'&limit='+pagineur.limite;
+function initialiserAffichagePanneauLateral() {
-	$.get(url, function(observations){
-		infoBulle.setContent(observations);
-		// First Parameter: number of items
-		// Second Parameter: options object
-		$("#pagination").pagination(pagineur.obsTotal, {
-			items_per_page:pagineur.limite,
-			callback:handlePaginationClick
-		});
-	});
-}
+	$('#panneau-lateral').height($(window).height() - 35);
 function arreter(event) {
-	if (event.stopPropagation) {
-		event.stopPropagation();
+	if (nt == '*') {
-	} else if (window.event) {
+		$('#pl-ouverture').bind('click', afficherPanneauLateral);
-		window.event.cancelBubble = true;
+		$('#pl-fermeture').bind('click', cacherPanneauLateral);
 		$('.taxon').live('click', filtrerParTaxon);
 	return false;
+}
-function afficher() {
+function afficherPanneauLateral() {
 	$('#panneau-lateral').width(300);
 	$('#pl-contenu').css('display', 'block');
 	$('#pl-ouverture').css('display', 'none');
 	$('#pl-fermeture').css('display', 'block');
 	$('#carte').css('left', '300px');
 	google.maps.event.trigger(map, 'resize');
 };
-function cacher() {
+function cacherPanneauLateral() {
 	$('#panneau-lateral').width(24);
 	$('#pl-contenu').css('display', 'none');
 	$('#pl-ouverture').css('display', 'block');
 	$('#pl-fermeture').css('display', 'none');
 	$('#carte').css('left', '24px');
 	google.maps.event.trigger(map, 'resize');
 };
 function ouvrirPopUp(url, nom) {
 	window.open(url, nom, 'scrollbars=yes,width=650,height=600,directories=no,location=no,menubar=no,status=no,toolbar=no');
 };
 function filtrerParTaxon() {
 	var ntAFiltrer = $('.nt', this).text();
 	infoBulle.close();
 	$('#taxon-'+nt).removeClass('taxon-actif');
 	if (nt == ntAFiltrer) {
 		nt = '*';
 		executerMarkerClusterer(pointsOrigine, boundsOrigine);
 	} else {
 		var url = urlObsCarte+'&'+
 			'num_taxon='+ntAFiltrer+'&'+
 			'formatRetour=jsonp'+'&'+
 			'callback=?';
 		$.getJSON(url, function (observations) {
 			obs = observations;
 			nt = ntAFiltrer;
 			$('#taxon-'+nt).addClass('taxon-actif');
 			rafraichirCarte();
 		});
+	}
 };
+/*+--------------------------------------------------------------------------------------------------------+*/
+// FONCTIONS UTILITAIRES
+function arreter(event) {
+	if (event.stopPropagation) {
+		event.stopPropagation();
+	} else if (window.event) {
+		window.event.cancelBubble = true;
+	}
+	return false;
+}
 /**
  * +-------------------------------------+
  * Number.prototype.formaterNombre
  * +-------------------------------------+
  * Params (facultatifs):
  * - Int decimales: nombre de decimales (exemple: 2)
  * - String signe: le signe precedent les decimales (exemple: "," ou ".")
  * - String separateurMilliers: comme son nom l'indique
  * Returns:
  * - String chaine formatee
  * @author	::mastahbenus::
  * @author	Jean-Pascal MILCENT <jpm@tela-botanica.org> : ajout détection auto entier/flotant
  * @souce	http://www.javascriptfr.com/codes/FORMATER-NOMBRE-FACON-NUMBER-FORMAT-PHP_40060.aspx
  */
 Number.prototype.formaterNombre = function (decimales, signe, separateurMilliers) {
 	var _sNombre = String(this), i, _sRetour = "", _sDecimales = "";
 	function is_int(nbre) {
 		nbre = nbre.replace(',', '.');
 		return !(parseFloat(nbre)-parseInt(nbre) > 0);
+	}
 	if (decimales == undefined) {
 		if (is_int(_sNombre)) {
 			decimales = 0;
 		} else {
 			decimales = 2;
+		}
+	}
 	if (signe == undefined) {
 		if (is_int(_sNombre)) {
 			signe = '';
 		} else {
 			signe = '.';
+		}
+	}
 	if (separateurMilliers == undefined) {
 		separateurMilliers = ' ';
+	}
 	function separeMilliers (sNombre) {
 		var sRetour = "";
 		while (sNombre.length % 3 != 0) {
 			sNombre = "0"+sNombre;
+		}
 		for (i = 0; i < sNombre.length; i += 3) {
 			if (i == sNombre.length-1) separateurMilliers = '';
 			sRetour += sNombre.substr(i, 3) + separateurMilliers;
+		}
 		while (sRetour.substr(0, 1) == "0") {
 			sRetour = sRetour.substr(1);
+		}
 		return sRetour.substr(0, sRetour.lastIndexOf(separateurMilliers));
+	}
 	if (_sNombre.indexOf('.') == -1) {
 		for (i = 0; i < decimales; i++) {
 			_sDecimales += "0";
+		}
 		_sRetour = separeMilliers(_sNombre) + signe + _sDecimales;
 	} else {
 		var sDecimalesTmp = (_sNombre.substr(_sNombre.indexOf('.')+1));
 		if (sDecimalesTmp.length > decimales) {
 			var nDecimalesManquantes = sDecimalesTmp.length - decimales;
 			var nDiv = 1;
 			for (i = 0; i < nDecimalesManquantes; i++) {
 				nDiv *= 10;
+			}
 			_sDecimales = Math.round(Number(sDecimalesTmp) / nDiv);
+		}
 		_sRetour = separeMilliers(_sNombre.substr(0, _sNombre.indexOf('.')))+String(signe)+_sDecimales;
+	}
 	return _sRetour;
+}
+function debug(objet) {
+	var msg = '';
+	if (objet != null) {
+		$.each(objet, function (cle, valeur) {
+			msg += cle+":"+valeur + "\n";
+		});
+	} else {
+		msg = "La variable vaut null.";
+	}
+	console.log(msg);
+}

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/carto/squelettes/scripts/carto.js @ 2081 – Rev 841 → 915