Навигация с помощю history

public/js/app.js

@@ -9,6 +9,7 @@ var statusReHunting = 2; // КУрсор прицел. Переопределе
 var statusAdd = 3; // Открыто окно добавления точки - форма.
 var statusEdit = 4; // Открыто окно редактирования точки. В нём информация о существующей точке, включая ID.
 var statusSendingToServer = 5; // Отправлен запрос на сервер - ждём, не даём жать кнопку повторно, отвлекаем пользователя.
+var statusMovingInHistory = 6;
 
 var status = statusReady;
 var statusPrev = statusReady;
@@ -107,17 +108,50 @@ function showImage(id)
 
 function addRemoveFavorite(id)
 {
-    if (user != '0')
-    {
-        $.ajax({
-            url: "/json/addRemoveFavorites/id/" + id,
+	if (user != '0')
+	{
+		$.ajax({
+			url: "/json/addRemoveFavorites/id/" + id,
             success: function(data) {
                 if (data){
-                    // Тут переключалку классов звёздочки
-                    $('#myFavoritesButton').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
-                }
-            }});
-    } else {
-        alert('Для выполнения действия необходимо войти.');
-    }
+					// Тут переключалку классов звёздочки
+					$('#myFavoritesButton').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
+				}
+			}});
+	} else {
+		alert('Для выполнения действия необходимо войти.');
+	}
 }
+
+window.addEventListener('popstate', function(e)
+{
+	if (typeof(e.state) == 'object' && e.state != null)
+	{
+		setStatus(statusMovingInHistory);
+		if (e.state.hasOwnProperty('pointId'))
+		{
+			points[e.state.pointId].openPopup();
+		} else
+		if (e.state.hasOwnProperty('zoom'))
+		{
+			lat = e.state.lat;
+			lng = e.state.lng;
+			zoom = e.state.zoom;
+			
+			cLat = myMap.getCenter().lat;
+			cLng = myMap.getCenter().lng;
+			cZoom = myMap.getZoom();
+
+			if (lat != cLat || lng != cLng || zoom != cZoom)
+			{
+				myMap.setView([lat, lng], zoom);
+			} else {
+				window.history.go(-1);
+			}
+		} else
+		if (e.state.hasOwnProperty('route'))
+		{
+			loadRouteJSON(e.state.route);
+		}
+	}
+}, false);

public/js/map.js

@@ -87,10 +87,15 @@ function init(lat, lng) {
 	$("#imgsContainer").sortable();
 
 	myMap.on('moveend', function (e) {
-		if (!myMap._popup && $('#boxRoute').css('display') == 'none')
+		if (!myMap._popup && $('#boxRoute').css('display') == 'none' && status != statusMovingInHistory)
 		{
-			history.pushState({}, document.title, "/?lat=" + myMap.getCenter().lat + "&lng=" + myMap.getCenter().lng + "&zoom=" + myMap.getZoom());
 			document.title = pointsCount + ' или даже больше поводов не сидеть дома';
+			history.pushState({lat: myMap.getCenter().lat, lng: myMap.getCenter().lng, zoom: myMap.getZoom()}, document.title, "/?lat=" + myMap.getCenter().lat + "&lng=" + myMap.getCenter().lng + "&zoom=" + myMap.getZoom());
+		}
+
+		if (status == statusMovingInHistory)
+		{
+			resetStatus();
 		}
 	});
 
@@ -219,13 +224,12 @@ function showInfo(id)
 
 				markers.zoomToShowLayer(marker, function () {
 					marker.openPopup();
-					history.pushState({}, document.title, "/?point=" + id);
 
 					bounds = myMap.getBounds();
 					diff = (bounds._northEast.lat - bounds._southWest.lat) / 4;
 					myMap.setView([points[id]._latlng.lat + diff, points[id]._latlng.lng], myMap.getZoom());
 
-					history.pushState({}, document.title, "/?point=" + id);
+					history.pushState({pointId: id}, document.title, "/?point=" + id);
 					document.title = data.name;
 				});
 			}
@@ -235,7 +239,7 @@ function showInfo(id)
 		diff = (bounds._northEast.lat - bounds._southWest.lat) / 4;
 		myMap.setView([points[id]._latlng.lat + diff, points[id]._latlng.lng], myMap.getZoom());
 
-		history.pushState({}, document.title, "/?point=" + id);
+		history.pushState({pointId: id}, document.title, "/?point=" + id);
 		document.title = points[id].options.title;
 	}
 }

public/js/route.js

@@ -174,7 +174,7 @@ function routeToURL()
 		wayPoints.push($(el).attr('pointId'));
 	});
 
-	history.pushState({}, document.title, "/?route=" + JSON.stringify(wayPoints));
+	history.pushState({route: JSON.stringify(wayPoints)}, document.title, "/?route=" + JSON.stringify(wayPoints));
 
 	return true;
 }