Merge pull request #7167 from JakubOnderka/keyboard-shortucts

Keyboard shortcuts
pull/7168/head
Jakub Onderka 2021-03-06 10:20:01 +01:00 committed by GitHub
commit 5d017e8130
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 17 deletions

View File

@ -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>

View File

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

View File

@ -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);
});