refs #3332 Transitions:

 * Showing referrals from campaigns in the center box
 * Proper error message when URL was not found or truncated from the actions report (introducing general popover error method)
 * Stylish icon for row-action
 * Minor JS and CSS fixes

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

14 files changed, 123 insertions, 18 deletions

diff --git a/lang/en.php b/lang/en.php
index 832f460a8e..785d895f4e 100644
--- a/lang/en.php
+++ b/lang/en.php
@@ -1683,5 +1683,8 @@ And thank you for using Piwik!',
 	'Transitions_FromCampaignsInline' => '%s from campaigns',
 	'Transitions_ExitsInline' => '%s exits',
 	'Transitions_BouncesInline' => '%s bounces',
-	'Transitions_ShareOfAllPageviews' => 'This page had %s pageviews (%s of all pageviews)'
+	'Transitions_ShareOfAllPageviews' => 'This page had %s pageviews (%s of all pageviews)',
+	'Transitions_NoDataForUrl' => 'There\'s no data for the URL %s',
+	'Transitions_NoDataForUrlDetails' => 'Either the URL had no pageviews during the period %s or the URL was truncated from the actions report %s because there were too many distinct URLs during the period %s or the URL is invalid.',
+	'Transitions_ErrorBack' => 'Go back to the previous URL',
 );
diff --git a/plugins/CoreHome/templates/broadcast.js b/plugins/CoreHome/templates/broadcast.js
index 75f767c4a2..cd8fccfcdc 100644
--- a/plugins/CoreHome/templates/broadcast.js
+++ b/plugins/CoreHome/templates/broadcast.js
@@ -114,12 +114,12 @@ var broadcast = {
 				}
 			}
 			
+			broadcast.currentHashParts = hashParts;
+			
 		} else {
 			// start page
 			$('#content').empty();
 		}
-		
-		broadcast.currentHashParts = hashParts;
     },
 
     /**
diff --git a/plugins/CoreHome/templates/datatable.css b/plugins/CoreHome/templates/datatable.css
index dec1aa899e..90cdc97800 100644
--- a/plugins/CoreHome/templates/datatable.css
+++ b/plugins/CoreHome/templates/datatable.css
@@ -592,8 +592,16 @@ table.dataTable .dataTableRowActions {
 table.dataTable .dataTableRowActions a {
 	display: block;
 	float: left;
-	padding: 6px;
-	margin: 0 6px 0 0;
+	padding: 6px 6px 6px 0;
+	margin: 0;
+}
+
+table.dataTable .dataTableRowActions a.leftmost {
+	padding-left: 6px;
+}
+
+table.dataTable .dataTableRowActions a.rightmost {
+	padding-right: 10px;
 }
 
 table.dataTable .dataTableRowActions a img {
diff --git a/plugins/CoreHome/templates/datatable.js b/plugins/CoreHome/templates/datatable.js
index 1355d86cee..d8ebcc7b14 100644
--- a/plugins/CoreHome/templates/datatable.js
+++ b/plugins/CoreHome/templates/datatable.js
@@ -1293,7 +1293,7 @@ dataTable.prototype =
 	{
 		var container = $(document.createElement('div')).addClass('dataTableRowActions');
 		
-		for (var i = 0; i < availableActions.length; i++)
+		for (var i = availableActions.length - 1; i >= 0; i--)
 		{
 			var action = availableActions[i];
 			
@@ -1301,6 +1301,13 @@ dataTable.prototype =
 			actionEl.append($(document.createElement('img')).attr({src: action.dataTableIcon}));
 			container.append(actionEl);
 			
+			if (i == availableActions.length - 1) {
+				actionEl.addClass('leftmost');
+			}
+			if (i == 0) {
+				actionEl.addClass('rightmost');
+			}
+			
 			actionEl.click((function(action)
 			{
 				return function(e)
diff --git a/plugins/CoreHome/templates/datatable_rowactions.js b/plugins/CoreHome/templates/datatable_rowactions.js
index 33d0332656..fb12571e30 100644
--- a/plugins/CoreHome/templates/datatable_rowactions.js
+++ b/plugins/CoreHome/templates/datatable_rowactions.js
@@ -47,6 +47,7 @@ var DataTable_RowActions_Registry = {
 				return this.registry[i];
 			}
 		}
+		return false;
 	}
 	
 };
@@ -195,7 +196,9 @@ broadcast.addSecondHashHandler('RowAction', function(param) {
 	param = paramParts.join(':');
 	
 	var rowAction = DataTable_RowActions_Registry.getActionByName(rowActionName);
-	rowAction.createInstance().doOpenPopover(param);
+	if (rowAction) {
+		rowAction.createInstance().doOpenPopover(param);
+	}
 });
 
 /** To be overridden */
diff --git a/plugins/CoreHome/templates/popover.js b/plugins/CoreHome/templates/popover.js
index 4a131a64af..b33fb58444 100644
--- a/plugins/CoreHome/templates/popover.js
+++ b/plugins/CoreHome/templates/popover.js
@@ -119,6 +119,34 @@ var Piwik_Popover = (function() {
 			container.html(html);
 			centerPopover();
 		},
+		
+		/** Show an error message. All params are HTML! */
+		showError: function(title, message, backLabel) {
+			var error = $(document.createElement('div')).addClass('Piwik_Popover_Error');
+			
+			var p = $(document.createElement('p')).addClass('Piwik_Popover_Error_Title');
+			error.append(p.html(title));
+
+			if (message) {
+				p = $(document.createElement('p')).addClass('Piwik_Popover_Error_Message');
+				error.append(p.html(message));
+			}
+			
+			if (backLabel) {
+				var back = $(document.createElement('a')).addClass('Piwik_Popover_Error_Back');
+				back.attr('href', '#').click(function() {
+					history.back();
+					return false;
+				});
+				error.append(back.html(backLabel));
+			}
+
+			if (!isOpen) {
+				openPopover();
+			}
+				
+			this.setContent(error);
+		},
 
 		/** Close the popover */
 		close: function() {
diff --git a/plugins/CoreHome/templates/styles.css b/plugins/CoreHome/templates/styles.css
index 54ff39f9fe..3d9b1c0a43 100644
--- a/plugins/CoreHome/templates/styles.css
+++ b/plugins/CoreHome/templates/styles.css
@@ -158,7 +158,7 @@ div.pk-emptyGraph {
  * @see popover.js
  */
 
-.Piwik_Popover {
+#Piwik_Popover {
 	font-family: Arial, Helvetica, sans-serif;
 }
 
@@ -181,3 +181,33 @@ div.pk-emptyGraph {
 	text-align: center;
 	font-size: 14px;
 }
+
+.Piwik_Popover_Error {
+	padding: 50px 20px 65px 20px;
+	text-align: center;
+}
+
+.Piwik_Popover_Error_Title {
+	color: #E87500;
+	font-weight: bold;
+	font-size: 16px;
+}
+
+.Piwik_Popover_Error_Title span {
+	color: #222;
+	font-weight: normal;
+	font-size: 16px;
+}
+
+.Piwik_Popover_Error_Message {
+	color: #7e7363;
+	padding: 20px 0 0 0;
+	font-size: 14px;
+}
+
+a.Piwik_Popover_Error_Back {
+	display: block;
+	margin: 20px 0 0 0;
+	color: #1D3256;
+	font-size: 14px;
+} 
\ No newline at end of file
diff --git a/plugins/Transitions/API.php b/plugins/Transitions/API.php
index ceb0438514..8e3d0acff2 100644
--- a/plugins/Transitions/API.php
+++ b/plugins/Transitions/API.php
@@ -119,7 +119,7 @@ class Piwik_Transitions_API
 		
 		if ($dataTable->getRowsCount() == 0)
 		{
-			throw new Exception("The label '$label' could not be found in Actions.getPageUrls\n");
+			throw new Exception('NoDataForUrl');
 		}
 		
 		$row = $dataTable->getFirstRow();
diff --git a/plugins/Transitions/Controller.php b/plugins/Transitions/Controller.php
index 61a85908fa..b913eb73df 100644
--- a/plugins/Transitions/Controller.php
+++ b/plugins/Transitions/Controller.php
@@ -52,7 +52,10 @@ class Piwik_Transitions_Controller extends Piwik_Controller
 	 */
 	private static $jsTranslations = array(
 		'XOfY' => 'Transitions_XOutOfYVisits',
-		'XOfAllPageviews' => 'Transitions_XOfAllPageviews'
+		'XOfAllPageviews' => 'Transitions_XOfAllPageviews',
+		'NoDataForUrl' => 'Transitions_NoDataForUrl',
+		'NoDataForUrlDetails' => 'Transitions_NoDataForUrlDetails',
+		'NoDataForUrlBack' => 'Transitions_ErrorBack'
 	);
 
 	public static function getTranslation($key)
diff --git a/plugins/Transitions/templates/transitions.css b/plugins/Transitions/templates/transitions.css
index b49d3aee9b..6df6c7695f 100644
--- a/plugins/Transitions/templates/transitions.css
+++ b/plugins/Transitions/templates/transitions.css
@@ -32,7 +32,7 @@
 #Transitions_CenterBox {
 	margin: 60px 0 0 345px;
 	width: 208px;
-	height: 344px;
+	height: 354px;
 	background: #f7f7f7;
 	border: 1px solid #a9a399;
 	border-radius:10px;
@@ -86,7 +86,7 @@
 }
 
 #Transitions_Loops {
-	margin: 435px 0 0 346px;
+	margin: 445px 0 0 346px;
 	width: 208px;
 	text-align: center;
 	line-height: 25px;
@@ -101,7 +101,7 @@
 	padding: 0;
 	cursor: default;
 	font-size: 12px;
-	line-height: 16px;
+	line-height: 15px;
 }
 
 .Transitions_CenterBoxMetrics p.Transitions_Margin {
diff --git a/plugins/Transitions/templates/transitions.js b/plugins/Transitions/templates/transitions.js
index 4522771150..bd41ef0a48 100644
--- a/plugins/Transitions/templates/transitions.js
+++ b/plugins/Transitions/templates/transitions.js
@@ -37,7 +37,7 @@ DataTable_RowActions_Registry.register({
 	
 	name: 'Transitions',
 	
-	dataTableIcon: 'plugins/Transitions/templates/transitions_rowaction.png',
+	dataTableIcon: 'plugins/Transitions/templates/transitions_icon.png',
 	
 	createInstance: function(dataTable) {
 		return new DataTable_RowActions_Transitions(dataTable);
@@ -208,6 +208,7 @@ Piwik_Transitions.prototype.renderCenterBox = function() {
 	showMetric('PreviousPages', 'previousPagesNbTransitions', 'left');
 	showMetric('SearchEngines', 'searchEnginesNbTransitions', 'left');
 	showMetric('Websites', 'websitesNbTransitions', 'left');
+	showMetric('Campaigns', 'campaignsNbTransitions', 'left');
 
 	showMetric('FollowingPages', 'followingPagesNbTransitions', 'right');
 	showMetric('Outlinks', 'outlinksNbTransitions', 'right');
@@ -875,7 +876,7 @@ Piwik_Transitions_Canvas.prototype.renderLoops = function(share) {
 	
 	// curve from the upper left connection to the center box to the lower left connection to the text box 
 	var point1 = {x: this.leftCurveEndX, y: this.leftCurvePositionY};
-	var point2 = {x: this.leftCurveEndX, y: 460};
+	var point2 = {x: this.leftCurveEndX, y: 470};
 	
 	var cpLeftX = (this.leftCurveBeginX + this.leftCurveEndX) / 2 + 30;
 	var cp1 = {x: cpLeftX, y: point1.y};
@@ -1144,7 +1145,27 @@ Piwik_Transitions_Ajax.prototype.callApi = function(method, params, callback) {
 
 	piwikHelper.queueAjaxRequest($.post('index.php', params, function(result) {
 		if (typeof result.result != 'undefined' && result.result == 'error') {
-			alert(result.message);
+			var errorName = result.message;
+			var errorTitle = Piwik_Transitions_Translations[errorName];
+			var errorMessage = Piwik_Transitions_Translations[errorName + 'Details'];
+			var errorBack = Piwik_Transitions_Translations[errorName + 'Back'];
+			
+			if (typeof errorTitle == 'undefined') {
+				alert(result.message);
+				return;
+			}
+			
+			if (typeof params.pageUrl != 'undefined') {
+				var url = params.pageUrl;
+				url = Piwik_Transitions_Util.addBreakpoints(url, '|||');
+				url = $(document.createElement('p')).text(url).html();
+				url = url.replace(/\|\|\|/g, '<wbr />');
+				errorTitle = errorTitle.replace(/%s/, '<span>' + url + '</span>');
+			}
+			
+			errorMessage = errorMessage.replace(/%s/g, '<br />');
+			
+			Piwik_Popover.showError(errorTitle, errorMessage, errorBack);
 		} else {
 			callback(result);
 		}
@@ -1180,8 +1201,9 @@ Piwik_Transitions_Util = {
 	},
 
 	/** Add break points to string so that it can be displayed more compactly */
-	addBreakpoints: function(text) {
-		return text.replace(/([\/&=?\.%#:])/g, '$1<wbr>');
+	addBreakpoints: function(text, breakpointMarkup) {
+		return text.replace(/([\/&=?\.%#:])/g, '$1' + 
+			(typeof breakpointMarkup == 'undefined' ? '<wbr>' : breakpointMarkup));
 	},
 
 	/**
diff --git a/plugins/Transitions/templates/transitions.tpl b/plugins/Transitions/templates/transitions.tpl
index f9ae7c3b52..b15b799490 100644
--- a/plugins/Transitions/templates/transitions.tpl
+++ b/plugins/Transitions/templates/transitions.tpl
@@ -11,6 +11,7 @@
 				<p class="Transitions_PreviousPages">{$translations.fromPreviousPagesInline|translate}</p>
 				<p class="Transitions_SearchEngines">{$translations.fromSearchEnginesInline|translate}</p>
 				<p class="Transitions_Websites">{$translations.fromWebsitesInline|translate}</p>
+				<p class="Transitions_Campaigns">{$translations.fromCampaignsInline|translate}</p>
 			</div>
 			
 			<div class="Transitions_OutgoingTraffic">
diff --git a/plugins/Transitions/templates/transitions_icon.png b/plugins/Transitions/templates/transitions_icon.png
new file mode 100755
index 0000000000..08cc2f302e
--- /dev/null
+++ b/plugins/Transitions/templates/transitions_icon.png
diff --git a/plugins/Transitions/templates/transitions_rowaction.png b/plugins/Transitions/templates/transitions_rowaction.png
deleted file mode 100755
index 5e31bbe260..0000000000
--- a/plugins/Transitions/templates/transitions_rowaction.png
+++ /dev/null