From: John Firebaugh <john.firebaugh@gmail.com>
Date: Sat, 9 Nov 2013 00:49:46 +0000 (-0800)
Subject: preserve visual center of map on sidebar transitions
X-Git-Tag: live~4661^2~121
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/1082d3a6535c5c2a777ae64a3067e9f8657bd32c?hp=a805e0b545a37b19a4162e71850bef9aba9d6628

preserve visual center of map on sidebar transitions
---

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 2d9300247..f16589eee 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -158,19 +158,31 @@ $(document).ready(function () {
   OSM.Index = function(map) {
     var page = {};
 
-    page.pushstate = page.popstate = function(path) {
-      $("#content").addClass("overlay-sidebar");
-      map.invalidateSize();
+    function loadContent(path) {
       $('#sidebar_content').load(path + "?xhr=1", function(a, b, xhr) {
         if (xhr.getResponseHeader('X-Page-Title')) {
           document.title = xhr.getResponseHeader('X-Page-Title');
         }
       });
+    }
+
+    page.pushstate = function(path) {
+      $("#content").addClass("overlay-sidebar");
+      map.invalidateSize({pan: false})
+        .panBy([-300, 0], {animate: false});
+      loadContent(path);
+    };
+
+    page.popstate = function(path) {
+      $("#content").addClass("overlay-sidebar");
+      map.invalidateSize({pan: false});
+      loadContent(path);
     };
 
     page.unload = function() {
+      map.panBy([300, 0], {animate: false});
       $("#content").removeClass("overlay-sidebar");
-      map.invalidateSize();
+      map.invalidateSize({pan: false});
     };
 
     return page;
diff --git a/app/assets/javascripts/router.js b/app/assets/javascripts/router.js
index 606308982..fbad1e28c 100644
--- a/app/assets/javascripts/router.js
+++ b/app/assets/javascripts/router.js
@@ -88,7 +88,7 @@ OSM.Router = function(map, rts) {
       currentRoute = routes.recognize(currentPath);
       currentRoute.run('popstate', currentPath);
       var state = e.originalEvent.state;
-      map.setView(state.center, state.zoom);
+      map.setView(state.center, state.zoom, {animate: false});
       map.updateLayers(state.layers);
     });
 
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 24172416f..de0bad969 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -656,9 +656,9 @@ nav.secondary {
       cursor: pointer;
     }
 
-    -webkit-transition: margin 300ms linear;
-       -moz-transition: margin 300ms linear;
-            transition: margin 300ms linear;
+//    -webkit-transition: margin 300ms linear;
+//       -moz-transition: margin 300ms linear;
+//            transition: margin 300ms linear;
   }
 
   .overlay-sidebar #sidebar {
diff --git a/vendor/assets/leaflet/leaflet.js b/vendor/assets/leaflet/leaflet.js
index b972941d9..a76c6fc8e 100644
--- a/vendor/assets/leaflet/leaflet.js
+++ b/vendor/assets/leaflet/leaflet.js
@@ -1773,11 +1773,7 @@ L.Map = L.Class.extend({
 				this._rawPanBy(offset);
 			}
 
-			this.fire('move');
-
-			// make sure moveend is not fired too often on resize
-			clearTimeout(this._sizeTimer);
-			this._sizeTimer = setTimeout(L.bind(this.fire, this, 'moveend'), 200);
+			this.fire('move').fire('moveend');
 		}
 
 		return this.fire('resize', {