Auto pan map on feed panel opening/closing

masks/project.html

@@ -39,7 +39,7 @@ oSpot.pageInit = function(asHash) {
 	initPage(asHash);
 };
 
-self.onResize = function() {
+oSpot.onResize = function() {
 	self.tmp('mobile', $('#mobile').is(':visible'));
 	self.tmp('feed_width', self.tmp('with_feed')?$('#feed').outerWidth(true):0);
 	self.tmp('map_offset', -1 * self.tmp('feed_width') / $('body').outerWidth(true));
@@ -51,18 +51,33 @@ self.onResize = function() {
 	}
 };
 
-self.onQuitPage = function() {
+oSpot.onQuitPage = function() {
 	setFeedUpdateTimer(false);
 	return true;
 }
 
-function toggleFeedPanel(bShow) {
+oSpot.onKeydown = function(oEvent) {
+	switch(oEvent.which) {
+		case 27:
+			toggleFeedPanel(false);
+			break;
+	}
+}
+
+function toggleFeedPanel(bShow, bAutoPan) {
 	var $Container = $('#projects');
 	if(typeof bShow === 'undefined') $Container.toggleClass('with-feed');
 	else $Container.toggleClass('with-feed', bShow);
 	
 	oSpot.tmp('with_feed', $Container.hasClass('with-feed'));
 	oSpot.onResize();
+
+	if(typeof bAutoPan === 'undefined') bAutoPan = true;
+	if(bAutoPan && typeof oSpot.tmp('map') != 'undefined') {
+		oSpot.tmp('map').panBy([(oSpot.tmp('with_feed')?1:-1)*$('#feed').outerWidth(true)/2, 0], {
+	        duration: 0.5
+	    });
+	}
 }
 
 function isMobile() {
@@ -82,7 +97,7 @@ function initPage(asHash) {
 		self.tmp('trail-markers', 'object');
 		self.tmp('marker_size', {width: 32, height: 32});
 		
-		toggleFeedPanel(!isMobile());
+		toggleFeedPanel(!isMobile(), false);
 		oSpot.onResize();
 		
 		//Lightbox options
@@ -483,7 +498,7 @@ function updateFeed(bFirstChunk, bDiscrete) {
 				
 				self.tmp('updatable', true);
 				
-				if(bFirstChunk) toggleFeedPanel(!$.isEmptyObject(asData));
+				if(bFirstChunk) toggleFeedPanel(!$.isEmptyObject(asData), false);
 			}, {
 				'project_id': self.vars(['project', 'id']),
 				'chunk': self.tmp('news_chunk')