From c6ac229c8e7d6cf032d50ae604f829933b11fd73 Mon Sep 17 00:00:00 2001
From: diosmosis <benaka.moorthi@gmail.com>
Date: Mon, 25 Feb 2013 22:04:50 +0000
Subject: [PATCH] Refs #1845, switch to async JS in other places and apply
 fixes to tracking code admin page & other pages.

Notes:
  * Fix bug in Installation page that displays JS where newlines were not displayed and text would not be selected on click.
  * Modify piwik.js to make sure setTrackerUrl is called before _paq is processed.
  * Move _paq modifications in tracker code to global scope outside every anonymous function.
  * Fix bug in rewritten site selector widget where selecting the same site didn't fire an event (necessary for some uses).
  * Fix bug where change of site resulted in delay before site name in labels changed.
  * Fix bug where site name was double encoded in tracking code admin page.
  * Rewrite piwik_tag.tpl to use async tracking code.
---
 core/Piwik.php                                |  2 +-
 core/Tracker/javascriptCode.tpl               | 25 ++++----
 js/piwik.js                                   | 13 ++++-
 .../templates/jsTrackingGenerator.js          | 58 +++++++++----------
 .../templates/jsTrackingGenerator.tpl         |  4 +-
 plugins/CoreHome/templates/autocomplete.js    | 34 +++++------
 plugins/CoreHome/templates/piwik_tag.tpl      | 44 ++++++++------
 .../templates/DisplayJavascriptCode.tpl       | 32 +++++++++-
 .../SitesManager/templates/SitesManager.tpl   |  2 +-
 .../UsersManager/templates/UsersManager.js    | 15 +++--
 themes/default/styles.css                     |  4 ++
 11 files changed, 143 insertions(+), 90 deletions(-)

diff --git a/core/Piwik.php b/core/Piwik.php
index 9ad4eee9412..c0dba6bdcc6 100644
--- a/core/Piwik.php
+++ b/core/Piwik.php
@@ -1618,7 +1618,7 @@ static public function getPrettyNumber( $value )
 	static public function getJavascriptCode($idSite, $piwikUrl)
 	{
 		$jsCode = file_get_contents( PIWIK_INCLUDE_PATH . "/core/Tracker/javascriptCode.tpl");
-		$jsCode = nl2br(htmlentities($jsCode));
+		$jsCode = htmlentities($jsCode);
 		$piwikUrl = preg_match('~^(http|https)://(.*)$~D', $piwikUrl, $matches);
 		$piwikUrl = @$matches[2];
 		$jsCode = str_replace('{$idSite}', $idSite, $jsCode);
diff --git a/core/Tracker/javascriptCode.tpl b/core/Tracker/javascriptCode.tpl
index 1a7673c2ed4..51bbbd13ef7 100644
--- a/core/Tracker/javascriptCode.tpl
+++ b/core/Tracker/javascriptCode.tpl
@@ -1,11 +1,16 @@
-<!-- Piwik --> <script type="text/javascript"> 
-var _paq = _paq || []; 
-(function(){ var u=(("https:" == document.location.protocol) ? "https://{$piwikUrl}/" : "http://{$piwikUrl}/"); 
-_paq.push(['setSiteId', {$idSite}]); 
-_paq.push(['setTrackerUrl', u+'piwik.php']); 
-_paq.push(['trackPageView']); 
-_paq.push(['enableLinkTracking']); 
-var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.defer=true; g.async=true; g.src=u+'piwik.js'; 
-s.parentNode.insertBefore(g,s); })();
- </script><noscript><p><img src="http://{$piwikUrl}piwik.php?idsite={$idSite}" style="border:0" alt="" /></p></noscript>
+<!-- Piwik -->
+<script type="text/javascript"> 
+  var _paq = _paq || [];
+  _paq.push(['setSiteId', {$idSite}]);
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+
+  (function() {
+    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://{$piwikUrl}/"; 
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
+    g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<noscript><p><img src="http://{$piwikUrl}piwik.php?idsite={$idSite}" style="border:0" alt="" /></p></noscript>
 <!-- End Piwik Code -->
diff --git a/js/piwik.js b/js/piwik.js
index 310d9a510d0..e1fe744a573 100644
--- a/js/piwik.js
+++ b/js/piwik.js
@@ -2882,9 +2882,20 @@ var
         Date.prototype.getTimeAlias = Date.prototype.getTime;
 
         asyncTracker = new Tracker();
+        
+        // find the call to setTrackerUrl (if any) and call it first
+        for (i = 0; i < _paq.length; i++) {
+            if (_paq[i][0] == 'setTrackerUrl') {
+                apply(_paq[i]);
+                delete _paq[i];
+            }
+        }
 
+        // apply the queue of actions
         for (i = 0; i < _paq.length; i++) {
-            apply(_paq[i]);
+            if (_paq[i]) {
+                apply(_paq[i]);
+            }
         }
 
         // replace initialization array with proxy object
diff --git a/plugins/CoreAdminHome/templates/jsTrackingGenerator.js b/plugins/CoreAdminHome/templates/jsTrackingGenerator.js
index 46e5a20afe8..017eb8959de 100644
--- a/plugins/CoreAdminHome/templates/jsTrackingGenerator.js
+++ b/plugins/CoreAdminHome/templates/jsTrackingGenerator.js
@@ -27,7 +27,7 @@ $(document).ready(function() {
 			{
 				var key = customVariables[i][0],
 					value = customVariables[i][1];
-				result += '_paq.push(["setCustomVariable", ' + (i + 1) + ', ' + JSON.stringify(key) + ', '
+				result += '  _paq.push(["setCustomVariable", ' + (i + 1) + ', ' + JSON.stringify(key) + ', '
 						+ JSON.stringify(value) + ', ' + JSON.stringify(scope) + ']);\n';
 			}
 		}
@@ -136,18 +136,17 @@ $(document).ready(function() {
 	// resets the select options of a goal select using a site ID
 	var resetGoalSelectItems = function (idsite, id)
 	{
-		var newOptions = '<option value="">' + noneText + '</option>';
+		var selectElement = $('#' + id).html('');
+		
+		selectElement.append($('<option value=""></option>').text(noneText));
 		
 		var goals = allGoals[idsite] || [];
 		for (var key in goals)
 		{
 			var goal = goals[key];
-			newOptions += '<option value="' + goal.idgoal + '">' + goal.name + '</option>';
+			selectElement.append($('<option/>').attr('value', goal.idgoal).text(goal.name));
 		}
 		
-		// set goal select items
-		$('#' + id).html(newOptions);
-		
 		// set currency string
 		$('#' + id).parent().find('.currency').text(siteCurrencies[idsite]);
 	};
@@ -175,19 +174,18 @@ $(document).ready(function() {
 		// generate JS
 		var result = '<!-- Piwik -->\n\
 <script type="text/javascript">\n\
-var _paq = _paq || [];\n\
-(function(){ var u=(("https:" == document.location.protocol) ? "https://' + piwikHost + '/" : "http://' + piwikHost + '/");\n\
-_paq.push(["setSiteId", ' + JSON.stringify(idSite) + ']);\n';
+  var _paq = _paq || [];\n\
+  _paq.push(["setSiteId", ' + JSON.stringify(idSite) + ']);\n';
 		
 		if (groupPageTitlesByDomain)
 		{
-			result += '_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);\n';
+			result += '  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);\n';
 		}
 		
 		if (mergeSubdomains)
 		{
 			var mainHostAllSub = '*.' + getHostNameFromUrl(siteUrls[idSite][0]);
-			result += '_paq.push(["setCookieDomain", ' + JSON.stringify(mainHostAllSub) + ']);\n';
+			result += '  _paq.push(["setCookieDomain", ' + JSON.stringify(mainHostAllSub) + ']);\n';
 		}
 		
 		if (mergeAliasUrls)
@@ -197,45 +195,49 @@ _paq.push(["setSiteId", ' + JSON.stringify(idSite) + ']);\n';
 			{
 				siteHosts[i] = '*.' + getHostNameFromUrl(siteUrls[idSite][i]);
 			}
-			result += '_paq.push(["setDomains", ' + JSON.stringify(siteHosts) + ']);\n';
+			result += '  _paq.push(["setDomains", ' + JSON.stringify(siteHosts) + ']);\n';
 		}
 		
 		if (visitorCustomVariables.length)
 		{
-			result += '// you can set up to 5 custom variables for each visitor\n';
+			result += '  // you can set up to 5 custom variables for each visitor\n';
 			result += getCustomVariableJS(visitorCustomVariables, 'visit');
 		}
 		
 		if (pageCustomVariables.length)
 		{
-			result += '// you can set up to 5 custom variables for each action (page view, ' + 
+			result += '  // you can set up to 5 custom variables for each action (page view, ' + 
 					  'download, click, site search)\n';
 			result += getCustomVariableJS(pageCustomVariables, 'page');
 		}
 		
 		if (customCampaignNameQueryParam)
 		{
-			result += '_paq.push(["setCampaignNameKey", ' + JSON.stringify(customCampaignNameQueryParam) + ']);\n';
+			result += '  _paq.push(["setCampaignNameKey", ' + JSON.stringify(customCampaignNameQueryParam) + ']);\n';
 		}
 		
 		if (customCampaignKeywordParam)
 		{
-			result += '_paq.push(["setCampaignKeywordKey", ' + JSON.stringify(customCampaignKeywordParam) + ']);\n';
+			result += '  _paq.push(["setCampaignKeywordKey", ' + JSON.stringify(customCampaignKeywordParam) + ']);\n';
 		}
 		
 		if (doNotTrack)
 		{
-			result += '_paq.push(["setDoNotTrack", true]);\n';
+			result += '  _paq.push(["setDoNotTrack", true]);\n';
 		}
 		
-		result += 'var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];\n\
-g.type="text/javascript"; g.defer=true; g.async=true; g.src=u+"piwik.js";\n\
-s.parentNode.insertBefore(g,s); })();\n\
+		result += '  _paq.push(["trackPageView"]);\n\
+  _paq.push(["enableLinkTracking"]);\n\n\
+  (function() {\n\
+    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://' + piwikHost + '/";\n\
+    _paq.push(["setTrackerUrl", u+"piwik.php"]);\n\
+    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";\n\
+    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);\n\
+  })();\n\
 </script>\n\
 <!-- End Piwik Code -->';
 		
-		var ta = $('#javascript-text textarea');
-		ta.val(result)
+		$('#javascript-text textarea').val(result)
 	};
 	
 	// function that generates image tracker link
@@ -281,8 +283,7 @@ s.parentNode.insertBefore(g,s); })();\n\
 <img src="' + piwikURL + '/?' + $.param(params) + '" style="border:0" alt="" />\n\
 <!-- End Piwik -->';
 		
-		var ta = $('#image-tracking-link textarea');
-		ta.val(result);
+		$('#image-tracking-link textarea').val(result);
 	};
 	
 	// on image link tracker site change, change available goals
@@ -295,13 +296,12 @@ s.parentNode.insertBefore(g,s); })();\n\
 	
 	// on js link tracker site change, change available goals
 	$('#js-tracker-website').bind('piwik:siteSelected', function(e, site) {
+		$('.current-site-name', '#optional-js-tracking-options').each(function() {
+			$(this).text(site.name);
+		});
+		
 		getSiteData(site.id, '#js-code-options', function() {
 			resetGoalSelectItems(site.id, 'js-tracker-goal');
-		
-			$('.current-site-name', '#javascript-tracking-options').each(function() {
-				$(this).text(site.name);
-			});
-		
 			generateJsCode();
 		});
 	});
diff --git a/plugins/CoreAdminHome/templates/jsTrackingGenerator.tpl b/plugins/CoreAdminHome/templates/jsTrackingGenerator.tpl
index 4a9848f7c54..8af6eb79f12 100644
--- a/plugins/CoreAdminHome/templates/jsTrackingGenerator.tpl
+++ b/plugins/CoreAdminHome/templates/jsTrackingGenerator.tpl
@@ -39,7 +39,7 @@
 	{* track across all subdomains *}
 	<div class="tracking-option-section">
 		<input type="checkbox" id="javascript-tracking-all-subdomains"/>
-		<label for="javascript-tracking-all-subdomains">{'CoreAdminHome_JSTracking_MergeSubdomains'|translate} <span class='current-site-name'>{$defaultReportSiteName|escape:'html'}</span></label>
+		<label for="javascript-tracking-all-subdomains">{'CoreAdminHome_JSTracking_MergeSubdomains'|translate} <span class='current-site-name'>{$defaultReportSiteName}</span></label>
 		
 		<div class="small-form-description">
 			{'CoreAdminHome_JSTracking_MergeSubdomainsDesc'|translate:'x.domain.com':'y.domain.com'}
@@ -49,7 +49,7 @@
 	{* track across all site aliases *}
 	<div class="tracking-option-section">
 		<input type="checkbox" id="javascript-tracking-all-aliases"/>
-		<label for="javascript-tracking-all-aliases">{'CoreAdminHome_JSTracking_MergeAliases'|translate} <span class='current-site-name'>{$defaultReportSiteName|escape:'html'}</span></label>
+		<label for="javascript-tracking-all-aliases">{'CoreAdminHome_JSTracking_MergeAliases'|translate} <span class='current-site-name'>{$defaultReportSiteName}</span></label>
 		
 		<div class="small-form-description">
 			{'CoreAdminHome_JSTracking_MergeAliasesDesc'|translate}
diff --git a/plugins/CoreHome/templates/autocomplete.js b/plugins/CoreHome/templates/autocomplete.js
index 52523ae054a..78d892dbf33 100644
--- a/plugins/CoreHome/templates/autocomplete.js
+++ b/plugins/CoreHome/templates/autocomplete.js
@@ -72,29 +72,22 @@ $(function() {
 				source: '?module=SitesManager&action=getSitesForAutocompleter',
 				appendTo: $('.custom_select_container', selector),
 				select: function(event, ui) {
-					if (piwik.idSite == ui.item.id)
+					if (ui.item.id > 0)
 					{
+						// set attributes of selected site display (what shows in the box)
+						$('.custom_select_main_link', selector)
+							.attr('siteid', ui.item.id)
+							.text(ui.item.name);
+						
+						// hide the dropdown
 						$('.custom_select_block', selector).removeClass('custom_select_block_show');
+						
+						// fire the site selected event
+						selector.trigger('piwik:siteSelected', ui.item);
 					}
 					else
 					{
-						if (ui.item.id > 0)
-						{
-							// set attributes of selected site display (what shows in the box)
-							$('.custom_select_main_link', selector)
-								.attr('siteid', ui.item.id)
-								.text(ui.item.name);
-							
-							// hide the dropdown
-							$('.custom_select_block', selector).removeClass('custom_select_block_show');
-							
-							// fire the site selected event
-							selector.trigger('piwik:siteSelected', ui.item);
-						}
-						else
-						{
-							reset(selector);
-						}
+						reset(selector);
 					}
 					
 					return false;
@@ -242,7 +235,10 @@ $(function() {
 			if (selector.attr('data-switch-site-on-select') == 1)
 			{
 				selector.bind('piwik:siteSelected', function (e, site) {
-					switchSite(site.id, site.name);
+					if (piwik.idSite !== site.id)
+					{
+						switchSite(site.id, site.name);
+					}
 				});
 			}
 		});
diff --git a/plugins/CoreHome/templates/piwik_tag.tpl b/plugins/CoreHome/templates/piwik_tag.tpl
index 41ed881ad84..9c254d5e050 100644
--- a/plugins/CoreHome/templates/piwik_tag.tpl
+++ b/plugins/CoreHome/templates/piwik_tag.tpl
@@ -5,26 +5,32 @@
 <div class="clear"></div>
 {literal}
 <!-- Piwik -->
-<script src="js/piwik.js" type="text/javascript"></script>
-<script type="text/javascript">
-try {
- var piwikTracker = Piwik.getTracker("piwik.php", 1);
- {/literal}
- {if $piwikUrl == 'http://demo.piwik.org/'}
- 	piwikTracker.setCookieDomain('*.piwik.org');
- {/if}
- {literal}
- //Set the domain the visitor landed on, in the Custom Variable
- if(!piwikTracker.getCustomVariable(1)) { 
-   piwikTracker.setCustomVariable(1, "Domain landed", document.domain );
- }
- //Set the selected Piwik language in a custom var
- piwikTracker.setCustomVariable(2, "Demo language", piwik.languageName );
- piwikTracker.setDocumentTitle(document.domain + "/" + document.title);
- piwikTracker.trackPageView();
- piwikTracker.enableLinkTracking();
-} catch(err) {}
+<script type="text/javascript"> 
+  var _paq = _paq || [];
+  _paq.push(['setTrackerUrl', 'piwik.php']);
+  _paq.push(['setSiteId', {/literal}{$idSite}{literal}]);
+{/literal}{if $piwikUrl == 'http://demo.piwik.org/'}{literal}
+  _paq.push(['setCookieDomain', '*.piwik.org']);
+{/literal}{/if}{literal}
+  // set the domain the visitor landed on, in the Custom Variable
+  _paq.push([function () {
+    if (!this.getCustomVariable(1))
+    {
+      this.setCustomVariable(1, "Domain landed", document.domain);
+    }
+  }]);
+  // Set the selected Piwik language in a custom var
+  _paq.push(['setCustomVariable', 2, "Demo language", piwik.languageName]);
+  _paq.push(['setDocumentTitle', document.domain + "/" + document.title]);
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+
+  (function() {
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript';
+    g.defer=true; g.async=true; g.src='js/piwik.js'; s.parentNode.insertBefore(g,s);
+  })();
 </script>
 <!-- End Piwik Code -->
 {/literal}
+
 {/if}
diff --git a/plugins/SitesManager/templates/DisplayJavascriptCode.tpl b/plugins/SitesManager/templates/DisplayJavascriptCode.tpl
index 3e0b7e1aa72..51bf27e2fde 100644
--- a/plugins/SitesManager/templates/DisplayJavascriptCode.tpl
+++ b/plugins/SitesManager/templates/DisplayJavascriptCode.tpl
@@ -27,7 +27,7 @@ p {
 <h3>{'SitesManager_JsTrackingTag'|translate}</h3>
 <p>{'CoreAdminHome_JSTracking_CodeNote'|translate:"&lt;/body&gt;"}</p>
 
-<code>{$jsTag}</code>
+<pre class="code-pre"><code>{$jsTag}</code></pre>
 
 <br />
 {'CoreAdminHome_JSTrackingIntro5'|translate:'<a target="_blank" href="http://piwik.org/docs/javascript-tracking/">':'</a>'}
@@ -35,4 +35,32 @@ p {
 {'Installation_JSTracking_EndNote'|translate:'<em>':'</em>'}
 
 </div>
-
+{literal}
+<script type="text/javascript">
+$(document).ready(function () {
+	// when code element is clicked, select the text
+	$('code').click(function () {
+		// credit where credit is due:
+		//   http://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click
+		var range;
+		if (document.body.createTextRange) // MSIE
+		{
+			range = document.body.createTextRange();
+			range.moveToElementText(this);
+			range.select();
+		}
+		else if (window.getSelection) // others
+		{
+			range = document.createRange();
+			range.selectNodeContents(this);
+			
+			var selection = window.getSelection();
+			selection.removeAllRanges();
+			selection.addRange(range);
+		}
+	});
+	
+	$('code').click();
+});
+</script>
+{/literal}
diff --git a/plugins/SitesManager/templates/SitesManager.tpl b/plugins/SitesManager/templates/SitesManager.tpl
index edf772452d5..775e82f816a 100644
--- a/plugins/SitesManager/templates/SitesManager.tpl
+++ b/plugins/SitesManager/templates/SitesManager.tpl
@@ -187,7 +187,7 @@ vertical-align:middle;
 				<td id="ecommerce" class="editableSite">{if $site.ecommerce}<span class='ecommerceActive'>{'General_Yes'|translate}</span>{else}<span class='ecommerceInactive'>-</span>{/if}</td>
 				<td><span id="row{$site.idsite}" class='editSite link_but'><img src='themes/default/images/ico_edit.png' title="{'General_Edit'|translate}" border="0"/> {'General_Edit'|translate}</span></td>
 				<td><span id="row{$site.idsite}" class="deleteSite link_but"><img src='themes/default/images/ico_delete.png' title="{'General_Delete'|translate}" border="0" /> {'General_Delete'|translate}</span></td>
-				<td><a href='{url action=displayJavascriptCode idSite=$site.idsite updated=false}'>{'SitesManager_ShowTrackingTag'|translate}</a></td>
+				<td><a href='{url module=CoreAdminHome action=trackingCodeGenerator idSite=$site.idsite updated=false}'>{'SitesManager_ShowTrackingTag'|translate}</a></td>
 			</tr>
 			{/foreach}
 		</tbody>
diff --git a/plugins/UsersManager/templates/UsersManager.js b/plugins/UsersManager/templates/UsersManager.js
index c361d68a0b5..505e400f44f 100644
--- a/plugins/UsersManager/templates/UsersManager.js
+++ b/plugins/UsersManager/templates/UsersManager.js
@@ -244,11 +244,14 @@ $(document).ready( function() {
 	
 	// when a site is selected, reload the page w/o showing the ajax loading element
 	$('#usersManagerSiteSelect').bind('piwik:siteSelected', function(e, site) {
-		switchSite(
-			site.id,
-			site.name,
-			false /* do not show main ajax loading animation */,
-			true /* do not go to all websites dash */
-		);
+		if (site.id != piwik.idSite)
+		{
+			switchSite(
+				site.id,
+				site.name,
+				false /* do not show main ajax loading animation */,
+				true /* do not go to all websites dash */
+			);
+		}
 	});
 });
diff --git a/themes/default/styles.css b/themes/default/styles.css
index 9cbd667bad3..eb20ae94569 100644
--- a/themes/default/styles.css
+++ b/themes/default/styles.css
@@ -46,3 +46,7 @@ code {
 	line-height:1.3em;
 	font-family: "Courier New" Courier monospace;
 }
+
+pre.code-pre {
+	white-space:pre-wrap;
+}