refs #2465

 * remember the location of the iframe in the l parameter using the core broadcast methods => popoverParam works as well => transitions and row evolution can make use of the back button
 * row evolution and transitions get a static launch method that is used in overlay to trigger the popovers without any knowledge of their implementation
 * broadcast.propagateAjax() gets the disableHistory parameter back but the handling is much easier this time
 * remove full screen link for now because we might want to do that differently - i'll add some details to the ticket later
 * two fixes for sanitized urls

git-svn-id: http://dev.piwik.org/svn/trunk@7477 59fd770c-687e-43c8-a1e3-f5a4ff64c105

3 files changed, 47 insertions, 32 deletions

diff --git a/plugins/Overlay/templates/helper.js b/plugins/Overlay/templates/helper.js
index de98b26851..ee62cd60aa 100644
--- a/plugins/Overlay/templates/helper.js
+++ b/plugins/Overlay/templates/helper.js
@@ -9,20 +9,21 @@ var Overlay_Helper = {
 	
 	/** Encode the iframe url to put it behind the hash in sidebar mode */
 	encodeFrameUrl: function(url) {
-		// make sure there's only one hash in the resulting url
-		return url.replace(/#/g, '%23')
+		// url encode + replace % with $ to make sure that browsers don't break the encoding 
+		return encodeURIComponent(url).replace(/%/g, '$')
 	},
 	
 	/** Decode the url after reading it from the hash */
 	decodeFrameUrl: function(url) {
-		return url.replace(/%23/g, '#');
+		// reverse encodeFrameUrl()
+		return decodeURIComponent(url.replace(/\$/g, '%'));
 	},
 	
 	/** Get the url to launch overlay */
 	getOverlayLink: function(idSite, period, date, link) {
 		var url = 'index.php?module=Overlay&period=' + period + '&date=' + date + '&idSite=' + idSite;
 		if (link) {
-			url += '#' + Overlay_Helper.encodeFrameUrl(link);
+			url += '#l=' + Overlay_Helper.encodeFrameUrl(link);
 		}
 		return url;
 	}
diff --git a/plugins/Overlay/templates/index.js b/plugins/Overlay/templates/index.js
index 42116e62e6..807eb6b565 100644
--- a/plugins/Overlay/templates/index.js
+++ b/plugins/Overlay/templates/index.js
@@ -106,19 +106,28 @@ var Piwik_Overlay = (function() {
 	}
 
 	/** $.history callback for hash change */
-	function hashChangeCallback(currentUrl) {
+	function hashChangeCallback(urlHash) {
+		var location = broadcast.getParamValue('l', urlHash);
+		location = Overlay_Helper.decodeFrameUrl(location);
+		
 		if (!updateComesFromInsideFrame) {
 			var iframeUrl = iframeSrcBase;
-			if (currentUrl) {
-				iframeUrl += '#' + Overlay_Helper.decodeFrameUrl(currentUrl);
+			if (location) {
+				iframeUrl += '#' + location;
 			}
 			$iframe.attr('src', iframeUrl);
 			showLoading();
 		} else {
-			loadSidebar(currentUrl);
+			loadSidebar(location);
 		}
 
 		updateComesFromInsideFrame = false;
+		
+		// handle window resize
+		// this needs to be bound here because broadcast unbinds it after every hash change
+		$(window).resize(function() {
+			adjustDimensions();
+		});
 	}
 
 	return {
@@ -146,18 +155,20 @@ var Piwik_Overlay = (function() {
 
 			showLoading();
 
+			// apply initial dimensions
 			window.setTimeout(function() {
-				// sometimes the frame is too high at first
 				adjustDimensions();
 			}, 50);
 
-			// handle window resize
-			$(window).resize(function() {
-				adjustDimensions();
-			});
-
 			// handle hash change
-			$.history.init(hashChangeCallback, {unescape: true});
+			broadcast.loadAjaxContent = hashChangeCallback;
+			broadcast.init();
+			
+			if (window.location.href.split('#').length == 1) {
+				// if there's no hash, broadcast won't trigger the callback - we have to do it here
+				hashChangeCallback('');
+			}
+			
 
 			// handle date selection
 			var $select = $('select#Overlay_DateRangeSelect').change(function() {
@@ -183,15 +194,13 @@ var Piwik_Overlay = (function() {
 
 			// handle transitions link
 			$transitionsLink.click(function() {
-				var transitions = new Piwik_Transitions('url', iframeCurrentPageNormalized, null);
-				transitions.showPopover();
+				DataTable_RowActions_Transitions.launchForUrl(iframeCurrentPageNormalized);
 				return false;
 			});
 
 			// handle row evolution link
 			$rowEvolutionLink.click(function() {
-				var rowEvolution = new DataTable_RowActions_RowEvolution(null);
-				rowEvolution.showRowEvolution('Actions.getPageUrls', iframeCurrentActionLabel, '0');
+				DataTable_RowActions_RowEvolution.launch('Actions.getPageUrls', iframeCurrentActionLabel);
 				return false;
 			});
 
@@ -210,20 +219,24 @@ var Piwik_Overlay = (function() {
 		setCurrentUrl: function(currentUrl) {
 			showLoading();
 
-			// put the current iframe url in the main url to enable refresh and deep linking.
-			var location = window.location.href;
-			var newLocation = location.split('#')[0] + '#' + Overlay_Helper.encodeFrameUrl(currentUrl);
+			var locationParts = location.href.split('#');
+			var currentLocation = '';
+			if (locationParts.length > 1) {
+				currentLocation = broadcast.getParamValue('l', locationParts[1]);
+			}
+			
+			var newLocation = Overlay_Helper.encodeFrameUrl(currentUrl);
 
-			// location.replace() changes the current url without pushing on the browsers history
-			// stack. this way, the back and forward buttons can be used on the iframe, which in
-			// turn notifies the parent about the location change.
-			if (newLocation != location) {
+			if (newLocation != currentLocation) {
 				updateComesFromInsideFrame = true;
-				window.location.replace(newLocation);
+				// put the current iframe url in the main url to enable refresh and deep linking.
+				// use disableHistory=true to make sure that the back and forward buttons can be 
+				// used on the iframe (which in turn notifies the parent about the location change)
+				broadcast.propagateAjax('l=' + newLocation, true);
+			} else {
+				// happens when the url is changed by hand or when the l parameter is there on page load
+				loadSidebar(currentUrl);
 			}
-
-			// load the sidebar for the current url
-			loadSidebar(currentUrl);
 		}
 
 	};
diff --git a/plugins/Overlay/templates/index.tpl b/plugins/Overlay/templates/index.tpl
index cd03e8d018..2499b1662e 100644
--- a/plugins/Overlay/templates/index.tpl
+++ b/plugins/Overlay/templates/index.tpl
@@ -36,9 +36,10 @@
 <a id="Overlay_RowEvolution">{'CoreHome_RowEvolutionRowActionTooltipTitle_js'|translate|escape:'html'}</a>
 <a id="Overlay_Transitions">{'CoreHome_TransitionsRowActionTooltipTitle_js'|translate|escape:'html'}</a>
 
-<a id="Overlay_FullScreen" href="#">
+<!-- TODO: rethink the way the sidebar works -->
+<!-- <a id="Overlay_FullScreen" href="#">
 	{'Overlay_OpenFullScreen'|translate|escape:'html'}
-</a>
+</a> -->
 
 
 <div id="Overlay_Main">