From 42f74e7175b712a716ff46987ae11ca2a159572d Mon Sep 17 00:00:00 2001
From: Jakub Onderka <jakub.onderka@gmail.com>
Date: Fri, 5 Mar 2021 20:04:23 +0100
Subject: [PATCH] new: [shortcuts] Show help when pressing ? key

---
 app/View/Elements/footer.ctp                  |  4 ++--
 .../js/keyboard-shortcuts-definition.js       | 16 ++++++++++------
 app/webroot/js/keyboard-shortcuts.js          | 19 ++++++++++---------
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/View/Elements/footer.ctp b/app/View/Elements/footer.ctp
index dacd6c010..a23c721c0 100644
--- a/app/View/Elements/footer.ctp
+++ b/app/View/Elements/footer.ctp
@@ -1,8 +1,8 @@
 <div class="footer <?php echo $debugMode;?>">
     <div id="shortcutsListContainer" class="<?php echo $debugMode == 'debugOn' ? 'hidden': ''; ?>">
-        <div id="triangle"></div>
+        <div id="triangle" title="<?= __('Show keyboard shortcuts help') ?>"></div>
         <div id="shortcutsList">
-            <span> <?php echo __('Keyboard shortcuts for this page'); ?>:</span><br>
+            <?= __('Keyboard shortcuts for this page') ?>:<br>
             <div id="shortcuts"><?php echo __('none'); ?></div>
         </div>
     </div>
diff --git a/app/webroot/js/keyboard-shortcuts-definition.js b/app/webroot/js/keyboard-shortcuts-definition.js
index bd6acbe3f..ad60c185c 100644
--- a/app/webroot/js/keyboard-shortcuts-definition.js
+++ b/app/webroot/js/keyboard-shortcuts-definition.js
@@ -1,4 +1,4 @@
-function getShortcutsDefinition() {
+function getShortcutsDefinition(controller, action) {
     var shortcuts = [
         {
             "key": "l",
@@ -13,11 +13,17 @@ function getShortcutsDefinition() {
             "action": function () {
                 document.location.href = baseurl + '/events/add';
             }
+        },
+        {
+            "key": "?",
+            "description": "Show this help",
+            "action": function () {
+                $('#triangle').click();
+            }
         }
     ];
 
-    var $body = $(document.body);
-    if ($body.data('controller') === 'events' && $body.data('action') === 'view') {
+    if (controller === 'events' && action === 'view') {
         shortcuts.push({
             "key": "t",
             "description": "Open the tag selection modal",
@@ -46,9 +52,7 @@ function getShortcutsDefinition() {
                 $('#quickFilterField').focus();
             }
         });
-    }
-
-    if ($body.data('controller') === 'events' && $body.data('action') === 'index') {
+    } else if (controller === 'events' && action === 'index') {
         shortcuts.push({
             "key": "s",
             "description": "Focus the filter events bar",
diff --git a/app/webroot/js/keyboard-shortcuts.js b/app/webroot/js/keyboard-shortcuts.js
index f2432e2a9..dc92cc733 100644
--- a/app/webroot/js/keyboard-shortcuts.js
+++ b/app/webroot/js/keyboard-shortcuts.js
@@ -21,7 +21,8 @@ let keyboardShortcutsManager = {
 	init() {
 		/* Codacy comment to notify that baseurl is a read-only global variable. */
 		/* global baseurl */
-		this.mapKeyboardShortcuts(getShortcutsDefinition());
+		var $body = $(document.body);
+		this.mapKeyboardShortcuts(getShortcutsDefinition($body.data('controller'), $body.data('action')));
 		this.setKeyboardListener();
 	},
 
@@ -43,7 +44,7 @@ let keyboardShortcutsManager = {
 	 */
 	addShortcutListToHTML() {
 		let html = "<ul>";
-		for(let shortcut of this.shortcutKeys.values()) {
+		for (let shortcut of this.shortcutKeys.values()) {
 			html += `<li><strong>${shortcut.key.toUpperCase()}</strong>: ${shortcut.description}</li>`
 		}
 		html += "</ul>"
@@ -55,7 +56,7 @@ let keyboardShortcutsManager = {
 	 * @param {} config The shortcut JSON list: [{key: string, description: string, action: string(eval-able JS code)}]
 	 */
 	mapKeyboardShortcuts(config) {
-		for(let shortcut of config) {
+		for (let shortcut of config) {
 			this.shortcutKeys.set(shortcut.key, shortcut);
 		}
 		this.addShortcutListToHTML();
@@ -68,12 +69,12 @@ let keyboardShortcutsManager = {
 	 */
 	setKeyboardListener() {
 		window.onkeyup = (keyboardEvent) => {
-			if(this.shortcutKeys.has(keyboardEvent.key)) {
+			if (this.shortcutKeys.has(keyboardEvent.key)) {
 				let activeElement = document.activeElement.tagName;
-				if(!this.ESCAPED_TAG_NAMES.includes(activeElement)) {
+				if (!this.ESCAPED_TAG_NAMES.includes(activeElement)) {
 					this.shortcutKeys.get(keyboardEvent.key).action();
 				}
-			} else if(this.NAVIGATION_KEYS.includes(keyboardEvent.key)) {
+			} else if (this.NAVIGATION_KEYS.includes(keyboardEvent.key)) {
 				window.dispatchEvent(new CustomEvent(this.EVENTS[keyboardEvent.key], {detail: keyboardEvent}));
 			}
 		}
@@ -81,8 +82,8 @@ let keyboardShortcutsManager = {
 }
 
 // Inits the keyboard shortcut manager's main routine and the click event on the keyboard shortcut triangle at the bottom of the screen.
-$(document).ready(function(){
-        keyboardShortcutsManager.init();
-        $('#triangle').click(keyboardShortcutsManager.onTriangleClick);
+$(function(){
+	keyboardShortcutsManager.init();
+	$('#triangle').click(keyboardShortcutsManager.onTriangleClick);
 });