feat: adds a refresh button (#19261)

* feat: adds a refresh button

this commit introduces a refresh button to every page in the CoreHome module. When the user clicks the button, the data of the current page is refreshed without reloading the page.

Refs #11047

* refactor: apply CR changes

Refs #11047

6 files changed, 65 insertions, 4 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index 3c9aff2265..97ce12201e 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -192,6 +192,7 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/javascripts/numberFormatter.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/zen-mode.js";
         $jsFiles[] = "plugins/CoreHome/javascripts/noreferrer.js";
+        $jsFiles[] = "plugins/CoreHome/javascripts/refresh-button.js";
 
         $jsFiles[] = "plugins/CoreHome/angularjs/piwikApp.config.js";
 
@@ -410,5 +411,6 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'CoreHome_StartDate';
         $translationKeys[] = 'CoreHome_EndDate';
         $translationKeys[] = 'CoreHome_DataForThisReportHasBeenDisabled';
+        $translationKeys[] = 'CoreHome_ShortcutRefresh';
     }
 }
diff --git a/plugins/CoreHome/javascripts/refresh-button.js b/plugins/CoreHome/javascripts/refresh-button.js
new file mode 100644
index 0000000000..96f7176d93
--- /dev/null
+++ b/plugins/CoreHome/javascripts/refresh-button.js
@@ -0,0 +1,43 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link http://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+$(function () {
+  var iconRefresh = $('.top_controls .icon-reload');
+
+  function refresh() {
+    var Matomo = window.CoreHome.Matomo;
+    var hashParsed = window.CoreHome.MatomoUrl.hashParsed.value;
+
+    Matomo.postEvent('loadPage', hashParsed.category, hashParsed.subcategory);
+  }
+
+  function isCoreHomeModuleActive() {
+    var search = window.CoreHome.MatomoUrl.parse(window.location.search.slice(1));
+    return search.module === 'CoreHome';
+  }
+
+  if (isCoreHomeModuleActive()) {
+    iconRefresh.show();
+
+    iconRefresh.on('click', function (e) {
+      e.preventDefault();
+      refresh();
+    });
+
+    piwikHelper.registerShortcut('r', _pk_translate('CoreHome_ShortcutRefresh'), function (event) {
+      if (event.altKey) {
+        return;
+      }
+      if (event.preventDefault) {
+        event.preventDefault();
+      } else {
+        event.returnValue = false; // IE
+      }
+
+      refresh();
+    });
+  }
+});
diff --git a/plugins/CoreHome/lang/de.json b/plugins/CoreHome/lang/de.json
index bbffdaa0a8..07107b6006 100644
--- a/plugins/CoreHome/lang/de.json
+++ b/plugins/CoreHome/lang/de.json
@@ -90,6 +90,7 @@
         "ShortcutCalendar": "um den Kalender zu öffnen (d steht für Datum)",
         "ShortcutHelp": "um diese Hilfe anzuzeigen",
         "ShortcutSearch": "um diese Suche zu öffnen (f steht für Find)",
+        "ShortcutRefresh": "um die aktuelle Ansicht zu aktualisieren",
         "ShortcutSegmentSelector": "um den Segment Selektor zu öffnen",
         "ShortcutWebsiteSelector": "um den Webseiten Selektor zu öffnen",
         "ShortcutZenMode": "für Zen Modus",
@@ -127,6 +128,7 @@
         "VisitorsOverviewHelp": "Die Besucherübersicht hilft Ihnen, die Popularität Ihrer Website zu verstehen. Dazu stellt sie Diagramme bereit, die zeigen, wie viele Besuche Ihre Website über einen ausgewählten Zeitraum erhält und wie hoch das durchschnittliche Engagement für wichtige Funktionen wie Suchen und Downloads ist.",
         "WebAnalyticsReports": "Webanalytik-Berichte",
         "YouAreUsingTheLatestVersion": "Sie verwenden die aktuelle Version von Matomo!",
-        "YourDonationWillHelp": "Ihre Spende wird direkt dafür eingesetzt, neue Features und Erweiterungen für diese Open-Source Analyse-Plattform zu finanzieren. Das bedeutet, die Community wird immer von einem Tool profitieren, welches Privatsphäre beschützt und Ihnen erlaubt, die Kontrolle Ihrer Daten zu bewahren."
+        "YourDonationWillHelp": "Ihre Spende wird direkt dafür eingesetzt, neue Features und Erweiterungen für diese Open-Source Analyse-Plattform zu finanzieren. Das bedeutet, die Community wird immer von einem Tool profitieren, welches Privatsphäre beschützt und Ihnen erlaubt, die Kontrolle Ihrer Daten zu bewahren.",
+        "Refresh": "Aktualisieren"
     }
 }
diff --git a/plugins/CoreHome/lang/en.json b/plugins/CoreHome/lang/en.json
index e49bcf7889..843fc1510b 100644
--- a/plugins/CoreHome/lang/en.json
+++ b/plugins/CoreHome/lang/en.json
@@ -63,6 +63,7 @@
         "ShortcutWebsiteSelector": "to open Website selector",
         "ShortcutCalendar": "to open calendar (d stands for Date)",
         "ShortcutSearch": "to open the search (f stands for Find)",
+        "ShortcutRefresh": "to refresh the current view",
         "ShortcutHelp": "to show this help",
         "ShowJSCode": "Show the JavaScript code to insert",
         "SkipToContent": "Skip to content",
@@ -127,6 +128,7 @@
         "EngagementSubcategoryHelp2": "This can help you to optimise for frequency and high-interaction visits in addition to maximising your reach.",
         "PeriodHasOnlyRawData": "It looks like reports for this period have not been processed yet. Do you want to see what's happening now? Check out the %1$sVisits log%2$s or choose a different date period until the reports are generated.",
         "StartDate": "Start Date",
-        "EndDate": "End Date"
+        "EndDate": "End Date",
+        "Refresh": "Refresh"
     }
 }
diff --git a/plugins/CoreHome/stylesheets/layout.less b/plugins/CoreHome/stylesheets/layout.less
index 07da8e2668..572c291d45 100644
--- a/plugins/CoreHome/stylesheets/layout.less
+++ b/plugins/CoreHome/stylesheets/layout.less
@@ -122,8 +122,9 @@ nav {
     margin-left: 224px;
   }
 
-    &>.top_controls {
-      .icon-arrowup:before, .icon-arrowdown:before {
+  &>.top_controls {
+    .icon-arrowup:before, .icon-arrowdown:before,
+    .icon-reload:before {
       padding: 17px 0 0 0px;
       display: inline-block;
       cursor: pointer;
@@ -132,6 +133,15 @@ nav {
         display: none;
       }
     }
+    .icon-reload {
+      display: none;
+      margin-right: 10px;
+
+      &:before {
+        margin-right: 17px;
+        font-weight: lighter;
+      }
+    }
   }
 
   @media only screen and (min-width: 993px) {
diff --git a/plugins/CoreHome/templates/_headerMessage.twig b/plugins/CoreHome/templates/_headerMessage.twig
index 8fb6ec2e9e..b1575c3321 100644
--- a/plugins/CoreHome/templates/_headerMessage.twig
+++ b/plugins/CoreHome/templates/_headerMessage.twig
@@ -58,8 +58,10 @@
     </div>
 </div>
 
+<span class="icon icon-reload" title="{{ 'CoreHome_Refresh'|translate }}"></span>
 <span class="icon icon-arrowup"></span>
 <div style="clear:right"></div>
 {% else %}
+<span class="icon icon-reload" title="{{ 'CoreHome_Refresh'|translate }}"></span>
 <span class="icon icon-arrowup"></span>
 {% endif %}