diff options
| author | BeezyT <timo@ezdesign.de> | 2012-11-14 17:02:46 +0400 |
|---|---|---|
| committer | BeezyT <timo@ezdesign.de> | 2012-11-14 17:02:46 +0400 |
| commit | 340d7f8892271e509324ffcba1933ef9ffed4d43 (patch) | |
| tree | fad194a248a441fe9f8fac031f2b5fbe0cd304c7 /plugins/Overlay/templates | |
| parent | c376b45e534b959effe9c4ab68b77fd26b65bf5d (diff) | |
refs #2465
overlay has two modes now: full screen with sidebar & full screen without sidebar. for now, it is only accessible via a new row action in the pages report.
because of this change, some mostly not-so-nice core-changes could be removed (mainly that's good because overlay doesn't impact as many things outside the plugin anymore):
* disableHistory option of broadcast
* handling for parameter overlayUrl in broadcast
* openLinksInOverlay() method of html table
* config option overlay_launch_from_pages_report
* hack for data table to launch overlay from the links
other changes:
* error message for wrong domain has nice styles and links to admin page when the user has admin privileges
* when registering row actions, the order can be set
* made row action style a little more compact
* increased min width of label column a bit
git-svn-id: http://dev.piwik.org/svn/trunk@7470 59fd770c-687e-43c8-a1e3-f5a4ff64c105
Diffstat (limited to 'plugins/Overlay/templates')
| -rw-r--r-- | plugins/Overlay/templates/error_wrong_domain.tpl | 36 | ||||
| -rw-r--r-- | plugins/Overlay/templates/helper.js | 30 | ||||
| -rw-r--r-- | plugins/Overlay/templates/index.css | 99 | ||||
| -rw-r--r-- | plugins/Overlay/templates/index.js | 183 | ||||
| -rw-r--r-- | plugins/Overlay/templates/index.tpl | 71 | ||||
| -rw-r--r-- | plugins/Overlay/templates/index_noframe.tpl | 27 | ||||
| -rwxr-xr-x | plugins/Overlay/templates/overlay_icon.png | bin | 0 -> 359 bytes | |||
| -rwxr-xr-x | plugins/Overlay/templates/overlay_icon_hover.png | bin | 0 -> 360 bytes | |||
| -rw-r--r-- | plugins/Overlay/templates/rowaction.js | 62 | ||||
| -rw-r--r-- | plugins/Overlay/templates/sidebar.tpl | 10 |
10 files changed, 320 insertions, 198 deletions
diff --git a/plugins/Overlay/templates/error_wrong_domain.tpl b/plugins/Overlay/templates/error_wrong_domain.tpl new file mode 100644 index 0000000000..49bd01ed20 --- /dev/null +++ b/plugins/Overlay/templates/error_wrong_domain.tpl @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title></title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta name="generator" content="Piwik - Open Source Web Analytics" /> + <link rel="shortcut icon" href="plugins/CoreHome/templates/images/favicon.ico" /> + + <style type="text/css"> + {literal} + body { + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; + color: black; + background: white; + margin: 15px; + padding: 0; + } + + p { + margin: 0 0 10px 0; + padding: 0; + } + + a { + color: #255792; + } + {/literal} + </style> + +</head> +<body> + <p><b>{$message}</b></p> + <p>{$troubleshoot}</p> +</body> +</html>
\ No newline at end of file diff --git a/plugins/Overlay/templates/helper.js b/plugins/Overlay/templates/helper.js new file mode 100644 index 0000000000..de98b26851 --- /dev/null +++ b/plugins/Overlay/templates/helper.js @@ -0,0 +1,30 @@ +/*! + * Piwik - Web Analytics + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +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') + }, + + /** Decode the url after reading it from the hash */ + decodeFrameUrl: function(url) { + return url.replace(/%23/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); + } + return url; + } + +};
\ No newline at end of file diff --git a/plugins/Overlay/templates/index.css b/plugins/Overlay/templates/index.css index 2135e39015..afc28828d0 100644 --- a/plugins/Overlay/templates/index.css +++ b/plugins/Overlay/templates/index.css @@ -1,60 +1,38 @@ -#Overlay_Container { - margin-top: 9px; - height: 300px; - position: relative; +body #header { + margin-left: -12px; } -#Overlay_Container.Overlay_FullScreen { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: white; - z-index: 100000; - margin: 0; - padding: 0; +body #logo { + margin-top: 5px; } -#Overlay_Location { - color: #7E7363; - padding-left: 220px; - padding-bottom: 7px; - font-size: 12px; - cursor: default; +body h1 { + font-size: 15px; + font-weight: normal; + margin: -3px 0 0 0; + padding: 0 0 0 5px; } -#Overlay_Container.Overlay_FullScreen #Overlay_Location { - float: left; - width: 180px; - position: relative; - margin: 15px 0 30px 20px; - font-size: 11px; - padding: 0; +#Overlay_Location { + width: 200px; + padding: 30px 0; + margin-left: 5px; + font-size: 12px; } #Overlay_Loading { background: url(../../../themes/default/images/loading-blue.gif) no-repeat center 10px; - float: left; width: 190px; - position: relative; - clear: left; - padding-top: 35px; + padding-top: 30px; + margin-top: 30px; text-align: center; display: none; } #Overlay_Sidebar { - float: left; width: 200px; - position: relative; - clear: left; -} - -#Overlay_Container.Overlay_FullScreen #Overlay_Sidebar { - width: 180px; - margin-left: 20px; + margin-left: 5px; } #Overlay_Sidebar h2 { @@ -64,55 +42,29 @@ color: #255792; } -#Overlay_Sidebar a.Overlay_FullScreen, -#Overlay_Sidebar a.Overlay_NewTab { +a#Overlay_FullScreen { display: block; color: #255792; font-size: 13px; line-height: 15px; - margin-top: 20px; + margin: 20px 0 0 5px; padding: 8px 0 3px 22px; background: url(../../../themes/default/images/fullscreen.png) no-repeat 0 8px; text-decoration: none; } -#Overlay_Sidebar a.Overlay_NewTab { - margin-top: 0; - background: url(../../../themes/default/images/newtab.png) no-repeat 0 7px; -} - -#Overlay_Sidebar a.Overlay_FullScreen:hover, -#Overlay_Sidebar a.Overlay_NewTab:hover { +a#Overlay_FullScreen:hover { color: #E87500; } -#Overlay_Sidebar span.Overlay_CloseFullScreen { - display: none; -} - -#Overlay_Container.Overlay_FullScreen #Overlay_Sidebar span.Overlay_OpenFullScreen { - display: none; -} - -#Overlay_Container.Overlay_FullScreen #Overlay_Sidebar span.Overlay_CloseFullScreen { - display: inline; -} - #Overlay_Main { margin-left: 220px; - position: relative; + position: absolute; + top: 0; } #Overlay_Iframe { - width: 100%; - height: 100%; - border: 2px solid #ddd; -} - -#Overlay_Container.Overlay_FullScreen #Overlay_Iframe { - border-top: 0; - border-right: 0; - border-bottom: 0; + border-left: 2px solid #ddd; } .Overlay_Metric { @@ -144,11 +96,10 @@ body .piwik-tooltip.Overlay_Tooltip { } #Overlay_Error_NotLoading { - float: left; width: 190px; - position: relative; - clear: left; display: none; + margin: 20px 0 0 5px; + font-size: 14px; } #Overlay_Error_NotLoading span { diff --git a/plugins/Overlay/templates/index.js b/plugins/Overlay/templates/index.js index 60e3bd8441..67948a9855 100644 --- a/plugins/Overlay/templates/index.js +++ b/plugins/Overlay/templates/index.js @@ -1,135 +1,166 @@ +/*! + * Piwik - Web Analytics + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + var Piwik_Overlay = (function() { + + var $body, $iframe, $sidebar, $main, $location, $loading, $errorNotLoading, $fullScreenLink; - var $container, $iframe, $sidebar, $main, $location, $loading, $errorNotLoading; - - var isFullScreen = false; + var errorTimeout = false; + var iframeSrcBase; var iframeDomain = ''; + var iframeCurrentPage = ''; + var updateComesFromInsideFrame = false; - var errorTimeout; - + /** Load the sidebar for a url */ function loadSidebar(currentUrl) { - $sidebar.hide(); - $location.html(' '); - $loading.show(); + showLoading(); + $location.html(' ').unbind('mouseenter').unbind('mouseleave'); + + iframeCurrentPage = currentUrl; iframeDomain = currentUrl.match(/http(s)?:\/\/(www\.)?([^\/]*)/i)[3]; - + + piwikHelper.abortQueueAjax(); piwikHelper.ajaxCall('Overlay', 'renderSidebar', { currentUrl: currentUrl }, function(response) { - var $response = $(response); + hideLoading(); + var $response = $(response); + var $responseLocation = $response.find('.Overlay_Location'); var $url = $responseLocation.find('span'); $url.html(piwikHelper.addBreakpointsToUrl($url.text())); $location.html($responseLocation.html()).show(); $responseLocation.remove(); - + $location.find('span').hover(function() { if (iframeDomain) { // use addBreakpointsToUrl because it also encoded html entities - Piwik_Tooltip.show('<b>' + Piwik_Overlay_Translations.domain + ':</b> ' + + Piwik_Tooltip.show('<b>' + Piwik_Overlay_Translations.domain + ':</b> ' + piwikHelper.addBreakpointsToUrl(iframeDomain), 'Overlay_Tooltip'); } }, function() { Piwik_Tooltip.hide(); }); - + $sidebar.empty().append($response).show(); - $loading.hide(); - - var $fullScreen = $sidebar.find('a.Overlay_FullScreen'); - $fullScreen.click(function() { - handleFullScreen(); - return false; - }); }, 'html'); } + + /** Adjust the dimensions of the iframe */ + function adjustDimensions() { + $iframe.height($(window).height()); + $iframe.width($body.width()); + } - /** Adjust the height of the iframe */ - function adjustHeight() { - var height, iframeHeight; - if (isFullScreen) { - iframeHeight = height = $(window).height(); - } else { - height = $(window).height() - $main.offset().top - 25; - iframeHeight = height - 4; + /** Display the loading message and hide other containers */ + function showLoading() { + $loading.show(); + + $sidebar.hide(); + $location.hide(); + $fullScreenLink.hide(); + $errorNotLoading.hide(); + + // Start a timeout that shows an error when nothing is loaded + if (errorTimeout) { + window.clearTimeout(errorTimeout); } - height = Math.max(300, height); - $container.height(height); - $iframe.height(iframeHeight); + errorTimeout = window.setTimeout(function() { + hideLoading(); + $errorNotLoading.show(); + }, 9000); } - /** Handle full screen */ - function handleFullScreen() { - if (!isFullScreen) { - // open full screen - isFullScreen = true; - $container.addClass('Overlay_FullScreen'); - adjustHeight(); - } else { - // close full screen - isFullScreen = false; - $container.removeClass('Overlay_FullScreen'); - adjustHeight(); + /** Hide the loading message */ + function hideLoading() { + if (errorTimeout) { + window.clearTimeout(errorTimeout); + errorTimeout = false; } + $loading.hide(); + $fullScreenLink.show(); } - return { + /** $.history callback for hash change */ + function hashChangeCallback(currentUrl) { + if (!updateComesFromInsideFrame) { + var iframeUrl = iframeSrcBase; + if (currentUrl) { + iframeUrl += '#' + Overlay_Helper.decodeFrameUrl(currentUrl); + } + $iframe.attr('src', iframeUrl); + showLoading(); + } else { + loadSidebar(currentUrl); + } + updateComesFromInsideFrame = false; + } + + return { + /** This method is called when Overlay loads (from index.tpl) */ - init: function() { - $container = $('#Overlay_Container'); - $iframe = $container.find('iframe'); + init: function(iframeSrc) { + iframeSrcBase = iframeSrc; + + $body = $('body'); + $iframe = $('#Overlay_Iframe'); $sidebar = $('#Overlay_Sidebar'); $location = $('#Overlay_Location'); $main = $('#Overlay_Main'); $loading = $('#Overlay_Loading'); $errorNotLoading = $('#Overlay_Error_NotLoading'); - - adjustHeight(); - - $loading.show(); - + $fullScreenLink = $('#Overlay_FullScreen'); + + adjustDimensions(); + + showLoading(); + window.setTimeout(function() { // sometimes the frame is too high at first - adjustHeight(); + adjustDimensions(); }, 50); - - // this callback is unbound in broadcast.pageload + $(window).resize(function() { - adjustHeight(); + adjustDimensions(); }); - errorTimeout = window.setTimeout(function() { - $loading.hide(); - $errorNotLoading.show(); - }, 8000); + $.history.init(hashChangeCallback, {unescape: true}); + + $fullScreenLink.click(function() { + var href = iframeSrcBase; + if (iframeCurrentPage) { + href += '#' + iframeCurrentPage.replace(/#/g, '%23'); + } + window.location.href = href; + return false; + }); }, /** This callback is used from within the iframe */ setCurrentUrl: function(currentUrl) { - window.clearTimeout(errorTimeout); - $loading.show(); - $errorNotLoading.hide(); - + showLoading(); + // put the current iframe url in the main url to enable refresh and deep linking. - // to prevent browsers from braking the encoding, we replace the % with a $. - var urlValue = encodeURIComponent(currentUrl).replace(/%/g, '$'); + var location = window.location.href; + var newLocation = location.split('#')[0] + '#' + Overlay_Helper.encodeFrameUrl(currentUrl); - // the overlayUrl parameter is removed when the location changes in broadcast.propagateAjax() - var urlKeyValue = 'overlayUrl=' + urlValue; - - var urlOldValue = broadcast.getValueFromHash('overlayUrl', window.location.href); - if (urlOldValue != urlValue) { - // we don't want the location in the browser history because the back and - // forward buttons should trigger a change in the iframe. - // so we use disableHistory = true - broadcast.propagateAjax(urlKeyValue, true); + // 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) { + updateComesFromInsideFrame = true; + window.location.replace(newLocation); } - + // load the sidebar for the current url loadSidebar(currentUrl); } diff --git a/plugins/Overlay/templates/index.tpl b/plugins/Overlay/templates/index.tpl index d011875161..bc29db000e 100644 --- a/plugins/Overlay/templates/index.tpl +++ b/plugins/Overlay/templates/index.tpl @@ -1,42 +1,49 @@ +{include file="CoreHome/templates/header.tpl"} +<h1>{'Overlay_Overlay'|translate|escape:'html'}</h1> -<div id="Overlay_Container"> +<div id="Overlay_Error_NotLoading"> + <p> + <span>{'Overlay_ErrorNotLoading'|translate|escape:'html'}</span> + </p> + <p> + {if $ssl} + {'Overlay_ErrorNotLoadingDetailsSSL'|translate|escape:'html'} + {else} + {'Overlay_ErrorNotLoadingDetails'|translate|escape:'html'} + {/if} + </p> + <p> + <a href="#">{'Overlay_ErrorNotLoadingLink'|translate|escape:'html'}</a> + </p> +</div> - <div id="Overlay_Location"> </div> - - <div id="Overlay_Sidebar"></div> - - <div id="Overlay_Error_NotLoading"> - <p> - <span>{'Overlay_ErrorNotLoading'|translate|escape:'html'}</span> - </p> - <p> - {if $ssl} - {'Overlay_ErrorNotLoadingDetailsSSL'|translate|escape:'html'} - {else} - {'Overlay_ErrorNotLoadingDetails'|translate|escape:'html'} - {/if} - </p> - <p> - <a href="#">{'Overlay_ErrorNotLoadingLink'|translate|escape:'html'}</a> - </p> - </div> - - <div id="Overlay_Loading">{'General_Loading_js'|translate|escape:'html'}</div> - - <div id="Overlay_Main"> - <iframe - id="Overlay_Iframe" - src="index.php?module=Overlay&action=startOverlaySession&idsite={$idSite}&period={$period}&date={$date}{if $targetUrl}#{$targetUrl}{/if}"> - </iframe> - </div> - +<div id="Overlay_Location"> </div> + +<div id="Overlay_Loading">{'General_Loading_js'|translate|escape:'html'}</div> + +<div id="Overlay_Sidebar"></div> + +<a id="Overlay_FullScreen" href="#"> + {'Overlay_OpenFullScreen'|translate|escape:'html'} +</a> + + +<div id="Overlay_Main"> + <iframe id="Overlay_Iframe" src=""></iframe> </div> <script type="text/javascript"> - Piwik_Overlay.init(); + var iframeSrc = 'index.php?module=Overlay&action=startOverlaySession&idsite={$idSite}&period={$period}&date={$date}'; + Piwik_Overlay.init(iframeSrc); Piwik_Overlay_Translations = {literal}{{/literal} domain: "{'Overlay_Domain'|translate|escape:'html'}" {literal}}{/literal}; -</script>
\ No newline at end of file +</script> + + +<!-- close tag opened in header.tpl --> +</div> +</body> +</html>
\ No newline at end of file diff --git a/plugins/Overlay/templates/index_noframe.tpl b/plugins/Overlay/templates/index_noframe.tpl index 867f2a7dc0..ec2008c5d3 100644 --- a/plugins/Overlay/templates/index_noframe.tpl +++ b/plugins/Overlay/templates/index_noframe.tpl @@ -1,13 +1,26 @@ +{include file="CoreHome/templates/header.tpl"} +<h1>{'Overlay_Overlay'|translate|escape:'html'}</h1> <div id="Overlay_NoFrame"> - - {capture name="link"}index.php?module=Overlay&action=startOverlaySession&idsite={$idSite}&period={$period}&date={$date}{if $targetUrl}#{$targetUrl}{/if}{/capture} - {capture name="linkTag"}<a id="Overlay_Link" href="{$smarty.capture.link}" target="_blank">{/capture} - - {'Overlay_NoFrameModeText'|translate|escape:'html'|sprintf:'<br />':$smarty.capture.linkTag:'</a>'} <script type="text/javascript"> - window.open('{$smarty.capture.link}', '_newtab'); + var newLocation = 'index.php?module=Overlay&action=startOverlaySession&idsite={$idSite}&period={$period}&date={$date}'; + + {literal} + + var loactionParts = window.location.href.split('#'); + if (loactionParts.length > 1) { + newLocation += '#' + loactionParts[1]; + } + + window.location.href = newLocation; + + {/literal} </script> -</div>
\ No newline at end of file +</div> + +<!-- close tag opened in header.tpl --> +</div> +</body> +</html>
\ No newline at end of file diff --git a/plugins/Overlay/templates/overlay_icon.png b/plugins/Overlay/templates/overlay_icon.png Binary files differnew file mode 100755 index 0000000000..a960d1bbc9 --- /dev/null +++ b/plugins/Overlay/templates/overlay_icon.png diff --git a/plugins/Overlay/templates/overlay_icon_hover.png b/plugins/Overlay/templates/overlay_icon_hover.png Binary files differnew file mode 100755 index 0000000000..10296ef392 --- /dev/null +++ b/plugins/Overlay/templates/overlay_icon_hover.png diff --git a/plugins/Overlay/templates/rowaction.js b/plugins/Overlay/templates/rowaction.js new file mode 100644 index 0000000000..24ccb80350 --- /dev/null +++ b/plugins/Overlay/templates/rowaction.js @@ -0,0 +1,62 @@ +/*! + * Piwik - Web Analytics + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +/** + * This file registers the Overlay row action on the pages report. + */ + +function DataTable_RowActions_Overlay(dataTable) { + this.dataTable = dataTable; +} + +DataTable_RowActions_Overlay.prototype = new DataTable_RowAction; + +DataTable_RowActions_Overlay.prototype.onClick = function(actionA, tr, e) { + if (!actionA.data('overlay-manipulated')) { + actionA.data('overlay-manipulated', 1); + + var link = tr.find('> td:first > a').attr('href'); + link = $('<textarea>').html(link).val(); // remove html entities + + actionA.attr({ + target: '_blank', + href: Overlay_Helper.getOverlayLink(this.dataTable.param.idSite, this.dataTable.param.period, + this.dataTable.param.date, link) + }); + } + + return true; +}; + +DataTable_RowActions_Registry.register({ + + name: 'Overlay', + + dataTableIcon: 'plugins/Overlay/templates/overlay_icon.png', + dataTableIconHover: 'plugins/Overlay/templates/overlay_icon_hover.png', + + order: 30, + + dataTableIconTooltip: [ + _pk_translate('CoreHome_OverlayRowActionTooltipTitle_js'), + _pk_translate('CoreHome_OverlayRowActionTooltip_js') + ], + + createInstance: function(dataTable) { + return new DataTable_RowActions_Overlay(dataTable); + }, + + isAvailableOnReport: function(dataTableParams) { + return DataTable_RowActions_Transitions.isPageUrlReport(dataTableParams.module, dataTableParams.action); + }, + + isAvailableOnRow: function(dataTableParams, tr) { + var transitions = DataTable_RowActions_Registry.getActionByName('Transitions'); + return transitions.isAvailableOnRow(dataTableParams, tr); + } + +}); diff --git a/plugins/Overlay/templates/sidebar.tpl b/plugins/Overlay/templates/sidebar.tpl index 612bb497d4..9f3f4ca7e0 100644 --- a/plugins/Overlay/templates/sidebar.tpl +++ b/plugins/Overlay/templates/sidebar.tpl @@ -2,7 +2,7 @@ <!-- This div is removed by JS and the content is put in the location div --> <div class="Overlay_Location"> - <b>{'Overlay_Page'|translate|escape:'html'}:</b> + <b>{'Overlay_Location'|translate|escape:'html'}:</b> <span>{$location|escape:'html'}</span> </div> @@ -17,12 +17,4 @@ <div class="Overlay_NoData">{'Overlay_NoData'|translate|escape:'html'}</div> {/if} - <a class="Overlay_FullScreen" href="#"> - <span class="Overlay_OpenFullScreen">{'Overlay_OpenFullScreen'|translate|escape:'html'}</span> - <span class="Overlay_CloseFullScreen">{'Overlay_CloseFullScreen'|translate|escape:'html'}</span> - </a> - <a class="Overlay_NewTab" href="index.php?module=Overlay&action=startOverlaySession&idsite={$idSite}&period={$period}&date={$date}#{$currentUrl|escape:'html'}" target="_blank"> - {'Overlay_OpenNewTab'|translate|escape:'html'} - </a> - </div>
\ No newline at end of file |
