Show shortcut help screen when pressing `?` (#12283)

* Adds help screen for shortcuts

* Dynamically create shortcut summary by using new js method piwikHelper.registerShortcut

* Update CHANGELOG.md

12 files changed, 100 insertions, 11 deletions

diff --git a/plugins/CoreHome/CoreHome.php b/plugins/CoreHome/CoreHome.php
index d5f884bf64..33949a5032 100644
--- a/plugins/CoreHome/CoreHome.php
+++ b/plugins/CoreHome/CoreHome.php
@@ -380,5 +380,11 @@ class CoreHome extends \Piwik\Plugin
         $translationKeys[] = 'General_DoubleClickToChangePeriod';
         $translationKeys[] = 'General_Apply';
         $translationKeys[] = 'General_Period';
+        $translationKeys[] = 'CoreHome_ShortcutZenMode';
+        $translationKeys[] = 'CoreHome_ShortcutSegmentSelector';
+        $translationKeys[] = 'CoreHome_ShortcutWebsiteSelector';
+        $translationKeys[] = 'CoreHome_ShortcutCalendar';
+        $translationKeys[] = 'CoreHome_ShortcutSearch';
+        $translationKeys[] = 'CoreHome_ShortcutHelp';
     }
 }
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
index 7161883e75..47df2e68fe 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
@@ -259,7 +259,7 @@
                     }
                 };
 
-                Mousetrap.bind('f', function(event) {
+                piwikHelper.registerShortcut('f', _pk_translate('CoreHome_ShortcutSearch'), function(event) {
                     if (event.altKey) {
                         return;
                     }
diff --git a/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js b/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js
index 8974576246..56643c7804 100644
--- a/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js
+++ b/plugins/CoreHome/angularjs/siteselector/siteselector.controller.js
@@ -38,7 +38,7 @@
             '#' + piwik.helper.getQueryStringWithParametersModified(hash.substring(1), newParameters);
         };
 
-        Mousetrap.bind('w', function(event) {
+        piwikHelper.registerShortcut('w', _pk_translate('CoreHome_ShortcutWebsiteSelector'), function(event) {
             if (event.altKey) {
                 return;
             }
diff --git a/plugins/CoreHome/javascripts/calendar.js b/plugins/CoreHome/javascripts/calendar.js
index a1b89ae12d..ca52056ac0 100644
--- a/plugins/CoreHome/javascripts/calendar.js
+++ b/plugins/CoreHome/javascripts/calendar.js
@@ -77,7 +77,7 @@
         };
     };
 
-    Mousetrap.bind('d', function(event) {
+    piwikHelper.registerShortcut('d', _pk_translate('CoreHome_ShortcutCalendar'), function(event) {
         if (event.altKey) {
             return;
         }
diff --git a/plugins/CoreHome/javascripts/corehome.js b/plugins/CoreHome/javascripts/corehome.js
index b8951ed4c4..76f6554573 100755
--- a/plugins/CoreHome/javascripts/corehome.js
+++ b/plugins/CoreHome/javascripts/corehome.js
@@ -76,15 +76,41 @@
 
 
 $( document ).ready(function() {
-   $('.accessibility-skip-to-content').click(function(e){
+    $('.accessibility-skip-to-content').click(function(e){
         $('a[name="main"]').attr('tabindex', -1).focus();
         $(window).scrollTo($('a[name="main"]'));
     });
 
     $("nav .activateTopMenu").sideNav({
         closeOnClick: true,
-        edge: 'right',
+        edge: 'right'
     });
 
     $('select').material_select();
+
+    piwikHelper.registerShortcut('?', _pk_translate('CoreHome_ShortcutHelp') , function (event) {
+        // don't open if an modal is already shown
+        if (event.altKey || $('.modal.open').length) {
+            return;
+        }
+        if (event.preventDefault) {
+            event.preventDefault();
+        } else {
+            event.returnValue = false; // IE
+        }
+
+        var list = $('#shortcuthelp dl');
+        list.empty();
+
+        var keys = Object.keys(piwikHelper.shortcuts).sort();
+
+        jQuery.each(keys, function(i, key) {
+            if (piwikHelper.shortcuts.hasOwnProperty(key)) {
+                list.append($('<dt />').text(key));
+                list.append($('<dd />').text(piwikHelper.shortcuts[key]));
+            }
+        });
+
+        piwikHelper.modalConfirm('#shortcuthelp');
+    });
 });
\ No newline at end of file
diff --git a/plugins/CoreHome/javascripts/zen-mode.js b/plugins/CoreHome/javascripts/zen-mode.js
index 145e4d4e88..fe052210f9 100644
--- a/plugins/CoreHome/javascripts/zen-mode.js
+++ b/plugins/CoreHome/javascripts/zen-mode.js
@@ -14,7 +14,7 @@ $(function () {
             }
         }
 
-        Mousetrap.bind('z', function (event) {
+        piwikHelper.registerShortcut('z', _pk_translate('CoreHome_ShortcutZenMode'), function (event) {
             if (event.altKey) {
                 return;
             }
diff --git a/plugins/CoreHome/lang/en.json b/plugins/CoreHome/lang/en.json
index 1677e05d28..1880e6eadf 100644
--- a/plugins/CoreHome/lang/en.json
+++ b/plugins/CoreHome/lang/en.json
@@ -45,6 +45,13 @@
         "SharePiwikLong": "Hi! I just found a great piece of free software: Piwik!\n\nPiwik will let you track visitors to your website for free. You should definitely check it out!",
         "SharePiwikShort": "Piwik! Free\/libre web analytics. Own your data.",
         "ShareThis": "Share this",
+        "ShortcutsAvailable": "Available shortcuts",
+        "ShortcutZenMode": "for Zen mode",
+        "ShortcutSegmentSelector": "to open Segment selector",
+        "ShortcutWebsiteSelector": "to open Website selector",
+        "ShortcutCalendar": "to open calendar (d stands for Date)",
+        "ShortcutSearch": "to open the search (f stands for Find)",
+        "ShortcutHelp": "to show this help",
         "ShowJSCode": "Show the JavaScript code to insert",
         "SkipToContent": "Skip to content",
         "SubscribeAndBecomePiwikSupporter": "Proceed to a secure credit card payment page (Paypal) to become a Piwik Supporter!",
diff --git a/plugins/CoreHome/stylesheets/coreHome.less b/plugins/CoreHome/stylesheets/coreHome.less
index 8f2a0f802c..f4d17b2e84 100644
--- a/plugins/CoreHome/stylesheets/coreHome.less
+++ b/plugins/CoreHome/stylesheets/coreHome.less
@@ -230,4 +230,34 @@ a.Piwik_Popover_Error_Back {
     > div {
         margin-bottom: 2px;
     }
+}
+
+#shortcuthelp {
+
+    dl {
+        margin: 20px 20px 0 20px;
+        font-size: 15px;
+        overflow: hidden;
+    }
+
+    dt {
+        clear: both;
+        float: left;
+        width: 20px;
+        height: 20px;
+        text-align: center;
+        margin-top: 9px;
+        margin-right: 20px;
+        font-weight: bolder;
+        border: 1px solid #000;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        box-sizing: border-box;
+    }
+
+    dd {
+        float: left;
+        margin-top: 10px;
+    }
 }
\ No newline at end of file
diff --git a/plugins/CoreHome/templates/_shortcuts.twig b/plugins/CoreHome/templates/_shortcuts.twig
new file mode 100644
index 0000000000..957663b724
--- /dev/null
+++ b/plugins/CoreHome/templates/_shortcuts.twig
@@ -0,0 +1,4 @@
+<div class="ui-confirm" id="shortcuthelp">
+    <h2>{{ 'CoreHome_ShortcutsAvailable'|translate }}</h2>
+    <dl></dl>
+</div>
\ No newline at end of file
diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js
index 44ee3c4343..1206a9b569 100644
--- a/plugins/Morpheus/javascripts/piwikHelper.js
+++ b/plugins/Morpheus/javascripts/piwikHelper.js
@@ -464,14 +464,28 @@ var piwikHelper = {
      * @param {string} textareaContent
      * @return {string}
      */
-    getApiFormatTextarea: function (textareaContent)
-    {
-        if(typeof textareaContent == 'undefined') {
+    getApiFormatTextarea: function (textareaContent) {
+        if (typeof textareaContent == 'undefined') {
             return '';
         }
         return textareaContent.trim().split("\n").join(',');
-    }
+    },
+
+    shortcuts: {},
+
+    /**
+     * Register a shortcut
+     *
+     * @param {string} key key-stroke to be registered for this shortcut
+     * @param {string } description  description to be shown in summary
+     * @param callback method called when pressing the key
+     */
+    registerShortcut: function(key, description, callback) {
 
+        piwikHelper.shortcuts[key] = description;
+
+        Mousetrap.bind(key, callback);
+    }
 };
 
 String.prototype.trim = function() {
diff --git a/plugins/Morpheus/templates/layout.twig b/plugins/Morpheus/templates/layout.twig
index 0cfaeb3efa..69afb31b46 100644
--- a/plugins/Morpheus/templates/layout.twig
+++ b/plugins/Morpheus/templates/layout.twig
@@ -42,6 +42,8 @@
 
         <div piwik-popover-handler></div>
 
+        {% include "@CoreHome/_shortcuts.twig" %}
+
     {% endblock %}
 
         {% include "@CoreHome/_adblockDetect.twig" %}
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index b6f9a1a885..fb52e12548 100644
--- a/plugins/SegmentEditor/javascripts/Segmentation.js
+++ b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -7,7 +7,7 @@
 
 Segmentation = (function($) {
 
-    Mousetrap.bind('s', function (event) {
+    piwikHelper.registerShortcut('s', _pk_translate('CoreHome_ShortcutSegmentSelector'), function (event) {
         if (event.altKey) {
             return;
         }