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

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";

plugins/Live/javascripts/visitorActions.js

+/**
+ * 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;
+        });
+    });
+}
+

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) {

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 () {

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",

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;

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(){