promise + async + GMap MVC

Signed-off-by: fpumir <[email protected]>

board/js/UI.js

@@ -32,6 +32,27 @@ var UI={
 
 	delete:function(elmt){
 		elmt.parentNode.remove();
+	},
+
+	drawMap : function(userPos,callback){
+		var centered=new google.maps.LatLng(userPos.lat,userPos.lng);
+		var settings={
+			zoom:17,
+			mapTypeId: google.maps.MapTypeId.ROADMAP,
+			center:centered
+		}
+		new google.maps.Map(document.querySelector('#map > div'),settings);
+		callback.call(this);
+	},
+
+	toggleMap : function(){
+		document.getElementById('map').classList.toggle('on');
+		return this;
+	},
+
+	toggleLoader : function(){
+		document.querySelector('.loader').classList.toggle('on');
+		return this;
 	}
 
 }

board/js/cards.js

@@ -10,6 +10,8 @@ model.init(function(card){
 	UI.render(card);
 });
 
+
+
 function getCard (e) {
 	e.preventDefault();
   var name=document.querySelector("input[name='name']").value;
@@ -38,29 +40,12 @@ function deleteCard (e) {
 
 function addLocation(e){
 	e.preventDefault();
-	navigator.geolocation.getCurrentPosition(
-		function(pos){
-			var userPos={lat:pos.coords.latitude,lng:pos.coords.longitude};
-			drawMap(userPos);
-			console.log(userPos); 
-		},
-		function(){
-			var userPos={lat:48.857713,lng:2.347271};
-			drawMap(userPos);
-		},
-		{enableHighAccuracy:true}
-	);
-
-}
-function drawMap(userPos){
-	var centered=new google.maps.LatLng(userPos.lat,userPos.lng);
-	var settings={
-		zoom:17,
-		mapTypeId: google.maps.MapTypeId.ROADMAP,
-		center:centered
-	}
-	new google.maps.Map(document.querySelector('#map > div'),settings);
-	document.getElementById('map').classList.toggle('on');
+	UI.toggleLoader();
+	model.getUserLocation(function(userPos){
+		UI.drawMap(userPos,function(){
+			UI.toggleMap().toggleLoader();
+		});
+	});
 }
 
 

board/js/model.js

@@ -2,6 +2,26 @@
 
 var model={
 
+	load : function(params){
+		return new Promise(function(resolve,reject){
+			var xhr = new XMLHttpRequest();
+			xhr.onreadystatechange = ensureReadiness;
+			function ensureReadiness() {
+					if(xhr.readyState === 4) { 
+						if(xhr.status==200){
+							resolve(xhr);
+						}
+						else{
+							reject();
+						}
+					}
+			}
+			xhr.open('GET', params.url, true);
+			xhr.responseType = params.type||'text';
+			xhr.send('');
+		});
+	},
+
 	init : function(callback){
 		for (var i in localStorage){
 			callback.call(this,JSON.parse(localStorage.getItem(i)));
@@ -20,7 +40,32 @@ var model={
 		if(!localStorage.getItem(key)){
 			callback.call(this);
 		}
-	}
+	},
+
+	getUserLocation : function(callback){
+		var self=this;
+		navigator.geolocation.getCurrentPosition(
+			function(pos){
+				var userPos={lat:pos.coords.latitude,lng:pos.coords.longitude};
+				callback.call(this,userPos); 
+			},
+			function(){
+				self.load({url:'js/pos.json',type:'json'}).then(
+					function(xhr){
+						var userPos={
+							lat:xhr.response.coords.latitude,
+							lng:xhr.response.coords.longitude};
+						callback.call(this,userPos);
+					},
+					function(){
+						// traitement de l'erreur xhr;
+					}
+				);
+			},
+			{enableHighAccuracy:true}
+		);
+	},
+
 
 
 }

board/js/pos.json

@@ -0,0 +1 @@
+{"coords":{"latitude":48.857713,"longitude":2.347271}}