New file |
0,0 → 1,394 |
//+---------------------------------------------------------------------------------------------------------+ |
// GÉNÉRAL |
/** |
* Stope l'évènement courrant quand on clique sur un lien. |
* Utile pour Chrome, Safari... |
* @param evenement |
* @return |
*/ |
function arreter(evenement) { |
if (evenement.stopPropagation) { |
evenement.stopPropagation(); |
} |
return false; |
} |
// TODO : voir si cette fonction est bien utile. Résoud le pb d'un warning sous chrome. |
(function(){ |
// remove layerX and layerY |
var all = $.event.props, |
len = all.length, |
res = []; |
while (len--) { |
var el = all[len]; |
if (el != 'layerX' && el != 'layerY') res.push(el); |
} |
$.event.props = res; |
}()); |
|
//+----------------------------------------------------------------------------------------------------------+ |
//UPLOAD PHOTO : Traitement de l'image |
$(document).ready(function() { |
//prepare the form when the DOM is ready |
//create service object(proxy) using SMD (generated by the json result) |
var options = { |
success: afficherMiniature, // post-submit callback |
dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type) |
resetForm: true // reset the form after successful submit |
}; |
|
// post-submit callback |
function afficherMiniature(reponse) { |
// 'responseXML' is the XML document returned by the server; we use |
// jQuery to extract the content of the message node from the XML doc |
var miniatureUrl = $("miniature-url", reponse).text(); |
var imgNom = $("image-nom", reponse).text(); |
$("#miniature").empty(); |
$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'); |
console.log(imgNom); |
console.log(miniatureUrl); |
}; |
|
$("#form-upload").submit(function() { |
// inside event callbacks 'this' is the DOM element so we first |
// wrap it in a jQuery object and then invoke ajaxSubmit |
$(this).ajaxSubmit(options); |
|
// !!! Important !!! |
// always return false to prevent standard browser submit and page navigation |
return false; |
}); |
}); |
|
//+----------------------------------------------------------------------------------------------------------+ |
// GOOGLE MAP |
var geocoder; |
var map; |
var marker; |
var latLng; |
|
function initialize(){ |
// Carte |
var latLng = new google.maps.LatLng(43.29545, 5.37458); |
$('#adresse').val('1 rue de la canebiere, 13001'); |
$('#latitude').val('43.29545'); |
$('#longitude').val('5.37458'); |
var options = { |
zoom: 16, |
center: latLng, |
mapTypeId: google.maps.MapTypeId.SATELLITE |
}; |
|
map = new google.maps.Map(document.getElementById("map_canvas"), options); //affiche la google map dans la div map_canvas |
|
// Geocodeur |
geocoder = new google.maps.Geocoder(); |
console.log(GOOGLE_MAP_MARQUEUR_URL); |
|
// Marqueur google draggable |
marker = new google.maps.Marker({ |
map: map, |
draggable: true, |
title: 'Ma station', |
icon: GOOGLE_MAP_MARQUEUR_URL, |
position: latLng |
}); |
} |
|
$(document).ready(function() { |
initialize(); |
|
$(function() { |
// Tentative de geocalisation |
if (navigator.geolocation) { |
navigator.geolocation.getCurrentPosition(function(position) { |
var latitude = position.coords.latitude; |
var longitude = position.coords.longitude; |
var altitude = position.coords.altitude; |
var geocalisation = new google.maps.LatLng(latitude, longitude); |
marker.setPosition(geocalisation); |
map.setCenter(geocalisation); |
$('#latitude').val(marker.getPosition().lat()); |
$('#longitude').val(marker.getPosition().lng()); |
$('#adresse').val(codeLatLng(marker.getPosition())); |
}); |
} |
|
// Autocompletion du champ adresse |
$("#adresse").autocomplete({ |
//Cette partie utilise geocoder pour extraire des valeurs d'adresse |
source: function(request, response) { |
geocoder.geocode( {'address': request.term }, function(results, status) { |
response($.map(results, function(item) { |
return { |
label: item.formatted_address, |
value: item.formatted_address, |
latitude: item.geometry.location.lat(), |
longitude: item.geometry.location.lng() |
} |
})); |
}) |
}, |
// Cette partie est executee a la selection d'une adresse |
select: function(event, ui) { |
$("#latitude").val(ui.item.latitude); |
$("#longitude").val(ui.item.longitude); |
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); |
marker.setPosition(location); |
map.setCenter(location); |
map.setZoom(20); |
} |
}); |
|
// Ajoute un ecouteur sur le marker pour le reverse geocoding |
google.maps.event.addListener(marker, 'drag', function() { |
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { |
if (status == google.maps.GeocoderStatus.OK) { |
if (results[0]) { |
$('#adresse').val(results[0].formatted_address); |
$('#latitude').val(Math.round(marker.getPosition().lat()*100000)/100000); |
$('#longitude').val(Math.round(marker.getPosition().lng()*100000)/100000); |
} |
} |
}); |
}); |
}); |
}); |
|
// Transforme les coordonnés en adresse (reverse geocoder) |
function codeLatLng() { |
var lat = parseFloat(document.getElementById("latitude").value); |
var lng = parseFloat(document.getElementById("longitude").value); |
var latlng = new google.maps.LatLng(lat, lng); |
geocoder.geocode({'latLng': latlng}, function(results, status) { |
if (status == google.maps.GeocoderStatus.OK) { |
if (results[0]) { |
marker.setPosition(latlng); |
map.setCenter(latlng); |
$('#adresse').val(results[0].formatted_address); |
} |
} else { |
alert("Geocoder failed due to: " + status); |
} |
}); |
} |
|
//+---------------------------------------------------------------------------------------------------------+ |
// FORMULAIRE |
$(document).ready(function() { |
$("form#saisie-obs").validate({ |
rules: { |
courriel : { |
required : true, |
email : true}, |
courriel_confirmation : { |
required : true, |
equalTo: "#courriel" |
}, |
milieu : "required", |
adresse : "required", |
latitude : { |
required: true, |
range: [-90, 90]}, |
longitude : { |
required: true, |
range: [-180, 180]}, |
date : { |
required: true, |
date: true}, |
taxon : "required" |
} |
}); |
|
$("#date").datepicker($.datepicker.regional['fr']); |
|
$("#courriel_confirmation").bind('paste', function(e) { |
$("#dialogue-bloquer-copier-coller").dialog(); |
return false; |
}); |
|
/*---Afficher/cacher les coordonnees geographiques----*/ |
|
var showText=" -Afficher-"; |
var hideText=" -Masquer- "; |
|
//créer le lien afficher/masquer |
$("#coordonnees-geo").before("<a href='#' id='toogle_link'>"+showText+"</a>") |
//masquer le contenu |
$("#masque").hide(); |
//bascule le texte d'afficher à masquer |
$("a#toogle_link").click(function() { |
//changer le texte du lien |
if($('a#toogle_link').text()==showText){ |
$('a#toogle_link').text(hideText); |
} else{ |
$('a#toogle_link').text(showText); |
} |
//basuler l'affichage |
$('#masque').toggle('slow'); |
//valeur false pour que le lien ne soit pas suivi |
return false |
}); |
|
/*------obs-----------*/ |
|
var obsNumero = 0; |
$("#ajouter-obs").bind('click', function(e) { |
if ($("#saisie-obs").valid() == false) { |
$("#dialogue-form-invalide").dialog(); |
} else { |
//rassemble les obs dans un tableau html |
obsNumero = obsNumero + 1; |
$("#liste-obs tbody").append( |
'<tr id="obs'+obsNumero+'" class="obs">'+ |
'<td>'+obsNumero+'</td>'+ |
'<td>'+$("#date").val()+'</td>'+ |
'<td>'+$("#adresse").val()+'</td>'+ |
'<td>'+$("#taxon option:selected").text()+'</td>'+ |
'<td>'+$('input[name=milieu]:checked').val()+'</td>'+ |
'<td>'+$("#latitude").val()+'</td>'+ |
'<td>'+$("#longitude").val()+'</td>'+ |
//Ajout du champ photo |
'<td><img class="miniature" alt="'+$("#miniature-img").attr("alt")+'"src="'+$("#miniature-img").attr("src")+'" /></td>'+ |
'<td>'+$("#notes").val()+'</td>'+ |
'<td><button class="supprimer-obs" value="'+obsNumero+'" title="Supprimer l\'observation '+obsNumero+'">'+ |
'<img src="'+SUPPRIMER_ICONE_URL+'"/></button></td>'+ |
'</tr>'); |
//rassemble les obs dans #liste-obs |
var numNomSel = $("#taxon").val(); |
$("#liste-obs").data('obsId'+obsNumero, { |
'date' : $("#date").val(), |
'num_nom_sel' : numNomSel, |
'nom_sel' : taxons[numNomSel]['nom_sel'], |
'nom_ret' : taxons[numNomSel]['nom_ret'], |
'num_nom_ret' : taxons[numNomSel]['num_nom_ret'], |
'num_taxon' : taxons[numNomSel]['num_taxon'], |
'famille' : taxons[numNomSel]['famille'], |
'nom_fr' : taxons[numNomSel]['nom_fr'], |
'station' : $("#adresse").val(), |
'milieu' : $('input[name=milieu]:checked').val(), |
'latitude' : $("#latitude").val(), |
'longitude' : $("#longitude").val(), |
'tag' : 'Sauvages', |
//Ajout du champ photo |
'image_nom' : $("#miniature-img").attr('alt'), |
//'image_b64' : $("#miniature-img").attr('alt'), |
'notes' : $("#notes").val()}); |
} |
}); |
|
$(".supprimer-obs").live('click', function() { |
var obsId = $(this).val(); |
// Problème avec IE 6 et 7 |
if (obsId == "Supprimer") { |
obsId = $(this).attr("title"); |
} |
|
$('#obs'+obsId).remove(); |
$("#liste-obs").removeData('obsId'+obsId) |
}); |
|
$("#effacer-miniature").click(function () { |
$("#miniature").empty(); |
}); |
|
// TODO : remplacer par du jquery |
//document.getElementById('image_file').addEventListener('change', handleFileSelect, false); |
|
$("#transmettre-obs").click(function(e) { |
var observations = $("#liste-obs").data(); |
if (observations == undefined || jQuery.isEmptyObject(observations)) { |
$("#dialogue-zero-obs").dialog(); |
} else if ($("#saisie-obs").valid() == false) { |
$("#dialogue-form-invalide").dialog(); |
} else { |
var utilisateur = new Object(); |
utilisateur.prenom = $("#prenom").val(); |
utilisateur.nom = $("#nom").val(); |
utilisateur.courriel = $("#courriel").val(); |
observations['utilisateur'] = utilisateur; |
$.ajax({ |
url : SERVICE_SAISIE_URL, |
type : "POST", |
data : observations, |
context : document.body, |
beforeSend : function() { |
$("#msg").remove(); |
$("#msg-erreur").remove(); |
$("#msg-debug").remove(); |
}, |
statusCode : { |
500 : function(jqXHR, textStatus, errorThrown) { |
$("#dialogue-obs-transaction").append('<p id="msg">Un problème est survenu lors de la transmission de vos observations.</p>'); |
reponse = jQuery.parseJSON(jqXHR.responseText); |
var erreurMsg = ""; |
if (reponse != null) { |
$.each(reponse, function (cle, valeur) { |
erreurMsg += valeur + "<br />"; |
}); |
} |
|
$("#dialogue-obs-transaction").append('<p id="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>'); |
} |
}, |
success : function(data, textStatus, jqXHR) { |
$("#dialogue-obs-transaction").append('<p id="msg">Vos observations ont bien été transmises.</p>'); |
}, |
complete : function(jqXHR, textStatus) { |
var debugMsg = ""; |
if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') { |
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data")); |
if (debugInfos != null) { |
$.each(debugInfos, function (cle, valeur) { |
debugMsg += valeur + "<br />"; |
}); |
$("#dialogue-obs-transaction").append('<pre id="msg-debug">Débogage : '+debugMsg+'</pre>'); |
} |
} |
|
$("#dialogue-obs-transaction").dialog(); |
$("#liste-obs").removeData(); |
$('.obs').remove(); |
obsNumero = 0; |
}, |
|
}); |
} |
return false; |
}); |
}); |
|
|
function handleFileSelect(evt) { |
// Check for the various File API support. |
if (window.File && window.FileReader && window.FileList && window.Blob) { |
// Great success! All the File APIs are supported. |
var selectedfiles = evt.target.files; // FileList object |
|
// Loop through the FileList and render image files as thumbnails. |
for (var i = 0, f; f = selectedfiles[i]; i++) { |
|
// Only process image files. |
if (!f.type.match('image.*')) { |
continue; |
} |
|
var reader = new FileReader(); |
|
// Read in the image file as a data URL. |
reader.readAsDataURL(f); |
|
// Closure to capture the file information. |
reader.onload = (function(theFile) { |
return function(e) { |
// Render thumbnail. |
document.getElementById('image').src = e.target.result; |
//document.getElementById('list').insertBefore(img, null); |
}; |
})(f); |
} |
|
} |
else { |
alert('The File APIs are not fully supported in this browser.'); |
} |
} |