diff options
author | Stefan Giehl <stefan@piwik.org> | 2017-12-20 18:43:07 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-12-20 18:43:07 +0300 |
commit | 786c3dae08e1e131c3dd4cd2c098e661fe3a986b (patch) | |
tree | 77f6cbf4d8bf4470d02fd2063bda873347396c41 /plugins | |
parent | 16a112e7af104a797f1683f9c3e9badc02b12341 (diff) |
Hide duplicate actions in visitor log by default (#12160)
* Hide duplicate action in visitor log by default
and extend them on click
* update screenshots
* adds ui test for expanded actions
* use same behaviour for log and profile
* update ui files
* fix js
* update expected screenshot
Diffstat (limited to 'plugins')
-rw-r--r-- | plugins/Live/Live.php | 2 | ||||
-rw-r--r-- | plugins/Live/javascripts/visitorActions.js | 92 | ||||
-rw-r--r-- | plugins/Live/javascripts/visitorLog.js | 85 | ||||
-rw-r--r-- | plugins/Live/javascripts/visitorProfile.js | 26 | ||||
-rw-r--r-- | plugins/Live/lang/en.json | 1 | ||||
-rw-r--r-- | plugins/Live/stylesheets/live.less | 7 | ||||
-rw-r--r-- | plugins/Live/tests/UI/Live_spec.js | 6 | ||||
-rw-r--r-- | plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log.png | bin | 421651 -> 415530 bytes | |||
-rw-r--r-- | plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log_expand_actions.png | bin | 0 -> 52143 bytes | |||
-rw-r--r-- | plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile.png | bin | 441070 -> 436409 bytes | |||
-rw-r--r-- | plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile_action_details.png | bin | 301848 -> 296202 bytes |
11 files changed, 110 insertions, 109 deletions
diff --git a/plugins/Live/Live.php b/plugins/Live/Live.php index 4381adecf2..71ad0f72dd 100644 --- a/plugins/Live/Live.php +++ b/plugins/Live/Live.php @@ -41,6 +41,7 @@ class Live extends \Piwik\Plugin $jsFiles[] = "libs/bower_components/visibilityjs/lib/visibility.core.js"; $jsFiles[] = "plugins/Live/javascripts/live.js"; $jsFiles[] = "plugins/Live/javascripts/SegmentedVisitorLog.js"; + $jsFiles[] = "plugins/Live/javascripts/visitorActions.js"; $jsFiles[] = "plugins/Live/javascripts/visitorProfile.js"; $jsFiles[] = "plugins/Live/javascripts/visitorLog.js"; $jsFiles[] = "plugins/Live/javascripts/rowaction.js"; @@ -49,6 +50,7 @@ class Live extends \Piwik\Plugin public function getClientSideTranslationKeys(&$translationKeys) { $translationKeys[] = "Live_VisitorProfile"; + $translationKeys[] = "Live_ClickToViewAllActions"; $translationKeys[] = "Live_NoMoreVisits"; $translationKeys[] = "Live_ShowMap"; $translationKeys[] = "Live_HideMap"; diff --git a/plugins/Live/javascripts/visitorActions.js b/plugins/Live/javascripts/visitorActions.js new file mode 100644 index 0000000000..f462bcfb8e --- /dev/null +++ b/plugins/Live/javascripts/visitorActions.js @@ -0,0 +1,92 @@ +/** + * Piwik - free/libre analytics platform + * + * Actions list in Visitor Log and Profile + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +function initializeVisitorActions(elem) { + + var tooltipIsOpened = false; + + $('a', elem).on('focus', function () { + // see https://github.com/piwik/piwik/issues/4099 + if (tooltipIsOpened) { + elem.tooltip('close'); + } + }); + + elem.tooltip({ + items: '[title],.visitorLogIconWithDetails', + track: true, + show: false, + hide: false, + content: function() { + if ($(this).hasClass('visitorLogIconWithDetails')) { + return $('<ul>').html($('ul', $(this)).html()); + } + var title = $(this).attr('title'); + return $('<a>').text( title ).html().replace(/\n/g, '<br />'); + }, + tooltipClass: 'small', + open: function() { tooltipIsOpened = true; }, + close: function() { tooltipIsOpened = false; } + }); + + // show refresh icon for duplicate page views in a row + $("ol.visitorLog", elem).each(function () { + var prevelement; + var prevhtml; + var counter = 0, duplicateCounter = 0; + $(this).find("> li").each(function () { + counter++; + $(this).val(counter); + var current = $(this).html(); + + if (current == prevhtml) { + duplicateCounter++; + $(this).find('>div').prepend($("<span>"+(duplicateCounter+1)+"</span>").attr({'class': 'repeat icon-refresh', 'title': _pk_translate('Live_PageRefreshed')})); + prevelement.addClass('duplicate'); + + } else { + duplicateCounter = 0; + } + + prevhtml = current; + prevelement = $(this); + + var $this = $(this); + var tooltipIsOpened = false; + + $('a', $this).on('focus', function () { + // see https://github.com/piwik/piwik/issues/4099 + if (tooltipIsOpened) { + $this.tooltip('close'); + } + }); + + }); + }); + + $("ol.visitorLog > li:not(.duplicate)", elem).each(function(){ + if (!$('.icon-refresh', $(this)).length) { + return; + } + $(this).attr('origtitle', $(this).attr('title')); + $(this).attr('title', _pk_translate('Live_ClickToViewAllActions')); + $(this).click(function(e){ + e.preventDefault(); + $(this).prevUntil('li:not(.duplicate)').removeClass('duplicate').find('.icon-refresh').hide(); + var elem = $(this); + window.setTimeout(function() { + elem.attr('title', elem.attr('origtitle')); + elem.attr('origtitle', null); + }, 150); + $(this).off('click').find('.icon-refresh').hide(); + return false; + }); + }); +} + diff --git a/plugins/Live/javascripts/visitorLog.js b/plugins/Live/javascripts/visitorLog.js index 6e66583ae2..351cb1a5a6 100644 --- a/plugins/Live/javascripts/visitorLog.js +++ b/plugins/Live/javascripts/visitorLog.js @@ -38,90 +38,7 @@ init: function () { dataTablePrototype.init.call(this); - $('.visitorLogIconWithDetails>img').each(function () { - $(this).tooltip({ - items: 'img', - track: true, - show: false, - hide: false, - content: function () { - return $('<ul>').html($('ul', $(this).closest('.visitorLogIconWithDetails')).html()); - }, - tooltipClass: 'small', - open: function () { - tooltipIsOpened = true; - }, - close: function () { - tooltipIsOpened = false; - } - }); - }); - - $('.visitorLogTooltip').each(function () { - $(this).tooltip({ - track: true, - show: false, - hide: false, - tooltipClass: 'small', - content: function() { - var title = $(this).attr('title'); - return $('<a>').text( title ).html().replace(/\n/g, '<br />'); - }, - open: function () { - tooltipIsOpened = true; - }, - close: function () { - tooltipIsOpened = false; - } - }); - }); - - // show refresh icon for duplicate page views in a row - $("ol.visitorLog").each(function () { - var prevelement; - var prevhtml; - var counter = 0, duplicateCounter = 0; - $(this).find("> li").each(function () { - counter++; - $(this).val(counter); - var current = $(this).html(); - - if (current == prevhtml) { - $(this).find('>div').prepend($("<span>"+(duplicateCounter+2)+"</span>").attr({'class': 'repeat icon-refresh', 'title': _pk_translate('Live_PageRefreshed')})); - duplicateCounter++; - - } else { - duplicateCounter = 0; - } - - prevhtml = current; - prevelement = $(this); - - var $this = $(this); - var tooltipIsOpened = false; - - $('a', $this).on('focus', function () { - // see https://github.com/piwik/piwik/issues/4099 - if (tooltipIsOpened) { - $this.tooltip('close'); - } - }); - - }); - }); - - $("ol.visitorLog > li").tooltip({ - track: true, - show: false, - hide: false, - content: function() { - var title = $(this).attr('title'); - return $('<a>').text( title ).html().replace(/\n/g, '<br />'); - }, - tooltipClass: 'small', - open: function() { tooltipIsOpened = true; }, - close: function() { tooltipIsOpened = false; } - }); + initializeVisitorActions(this.$element); // launch visitor profile on visitor profile link click this.$element.on('click', '.visitor-log-visitor-profile-link', function (e) { diff --git a/plugins/Live/javascripts/visitorProfile.js b/plugins/Live/javascripts/visitorProfile.js index 148ec3b731..c3c4f71f35 100644 --- a/plugins/Live/javascripts/visitorProfile.js +++ b/plugins/Live/javascripts/visitorProfile.js @@ -137,31 +137,7 @@ } }); - var tooltipIsOpened = false; - - $('a', $element).on('focus', function () { - // see https://github.com/piwik/piwik/issues/4099 - if (tooltipIsOpened) { - $element.tooltip('close'); - } - }); - - $element.tooltip({ - items: '[title],.visitorLogIconWithDetails', - track: true, - show: false, - hide: false, - content: function() { - if ($(this).hasClass('visitorLogIconWithDetails')) { - return $('<ul>').html($('ul', $(this)).html()); - } - var title = $(this).attr('title'); - return $('<a>').text( title ).html().replace(/\n/g, '<br />'); - }, - tooltipClass: 'small', - open: function() { tooltipIsOpened = true; }, - close: function() { tooltipIsOpened = false; } - }); + initializeVisitorActions($element); }, toggleMap: function () { diff --git a/plugins/Live/lang/en.json b/plugins/Live/lang/en.json index 754a7ee13e..fe54d81c58 100644 --- a/plugins/Live/lang/en.json +++ b/plugins/Live/lang/en.json @@ -3,6 +3,7 @@ "AveragePageGenerationTime": "Each page took on average %1$s to load for this visitor.", "CalculatedOverNPageViews": "Calculated using this visitor's last %1$s page views.", "ClickToViewMoreAboutVisit": "Click to view more information about this visit", + "ClickToViewAllActions": "Click to view all actions of this group in detail", "ConvertedNGoals": "Converted %s Goals", "FirstVisit": "First visit", "GoalType": "Type", diff --git a/plugins/Live/stylesheets/live.less b/plugins/Live/stylesheets/live.less index 4264d8dda8..f2dfcc2302 100644 --- a/plugins/Live/stylesheets/live.less +++ b/plugins/Live/stylesheets/live.less @@ -113,6 +113,13 @@ ol.visitorLog > li { vertical-align: top; } + &.duplicate { + visibility: hidden; + height: 0; + margin: 0; + overflow: hidden; + } + &.more { list-style-type: none; font-weight: bold; diff --git a/plugins/Live/tests/UI/Live_spec.js b/plugins/Live/tests/UI/Live_spec.js index 334bc80d39..818d3f031f 100644 --- a/plugins/Live/tests/UI/Live_spec.js +++ b/plugins/Live/tests/UI/Live_spec.js @@ -19,6 +19,12 @@ describe("Live", function () { }, done); }); + it('should expand grouped actions', function (done) { + expect.screenshot('visitor_log_expand_actions').to.be.captureSelector('.dataTableVizVisitorLog .card.row:first-child', function (page) { + page.click('.dataTableVizVisitorLog .repeat.icon-refresh'); + }, done); + }); + it('should show visitor profile', function (done) { expect.screenshot('visitor_profile').to.be.captureSelector('.ui-dialog', function (page) { page.evaluate(function(){ diff --git a/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log.png b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log.png Binary files differindex 2c70f0955a..a204b0c706 100644 --- a/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log.png +++ b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log.png diff --git a/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log_expand_actions.png b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log_expand_actions.png Binary files differnew file mode 100644 index 0000000000..da6e5c7bba --- /dev/null +++ b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_log_expand_actions.png diff --git a/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile.png b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile.png Binary files differindex 87b795b8a1..f5514c8306 100644 --- a/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile.png +++ b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile.png diff --git a/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile_action_details.png b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile_action_details.png Binary files differindex be8b537fdc..46aec06786 100644 --- a/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile_action_details.png +++ b/plugins/Live/tests/UI/expected-ui-screenshots/Live_visitor_profile_action_details.png |