Merge pull request #7117 from JakubOnderka/keyboard-shortcuts

chg: [UI] Simplify keyboard-shortcuts.js
pull/7060/head
Jakub Onderka 2021-03-03 08:09:58 +01:00 committed by GitHub
commit 26a286f4da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 68 additions and 88 deletions

View File

@ -526,4 +526,3 @@
</ul>
</div>
</div>
<input type="hidden" class="keyboardShortcutsConfig" value="/shortcuts/global_menu.json" />

View File

@ -127,6 +127,5 @@
echo $this->Html->css('distribution-graph');
echo $this->Html->script('network-distribution-graph');
?>
<input type="hidden" class="keyboardShortcutsConfig" value="/shortcuts/event_index.json" />
<?php
if (!$ajax) echo $this->element('/genericElements/SideMenu/side_menu', array('menuList' => 'event-collection', 'menuItem' => 'index'));

View File

@ -580,4 +580,3 @@ $(function () {
});
});
</script>
<input type="hidden" value="/shortcuts/event_view.json" class="keyboardShortcutsConfig" />

View File

@ -33,7 +33,7 @@
));
?>
</head>
<body>
<body data-controller="<?= h($this->params['controller']) ?>" data-action="<?= h($this->params['action']) ?>">
<div id="popover_form" class="ajax_popover_form"></div>
<div id="popover_form_large" class="ajax_popover_form ajax_popover_form_large"></div>
<div id="popover_form_x_large" class="ajax_popover_form ajax_popover_form_x_large"></div>
@ -71,7 +71,8 @@
'bootstrap-datepicker',
'bootstrap-colorpicker',
'misp',
'keyboard-shortcuts'
'keyboard-shortcuts-definition',
'keyboard-shortcuts',
)
));
echo $this->element('footer');

View File

@ -0,0 +1,61 @@
function getShortcutsDefinition() {
var shortcuts = [
{
"key": "l",
"description": "Go to event list",
"action": function () {
document.location.href = baseurl + '/events/index';
}
},
{
"key": "e",
"description": "Go to add event page",
"action": function () {
document.location.href = baseurl + '/events/add';
}
}
];
var $body = $(document.body);
if ($body.data('controller') === 'events' && $body.data('action') === 'view') {
shortcuts.push({
"key": "t",
"description": "Open the tag selection modal",
"action": function () {
$('.addTagButton').first().click();
}
});
shortcuts.push({
"key": "f",
"description": "Open the freetext import modal",
"action": function () {
$('#freetext-button').click();
}
});
shortcuts.push({
"key": "a",
"description": "Add an attribute",
"action": function () {
$('#create-button').click();
}
});
shortcuts.push({
"key": "s",
"description": "Focus the filter attribute bar",
"action": function () {
$('#quickFilterField').focus();
}
});
}
if ($body.data('controller') === 'events' && $body.data('action') === 'index') {
shortcuts.push({
"key": "s",
"description": "Focus the filter events bar",
"action": function () {
$('#quickFilterField').focus();
}
});
}
return shortcuts;
}

View File

@ -21,13 +21,7 @@ let keyboardShortcutsManager = {
init() {
/* Codacy comment to notify that baseurl is a read-only global variable. */
/* global baseurl */
let shortcutURIs = [];
for(let keyboardShortcutElement of $('.keyboardShortcutsConfig')) {
shortcutURIs.push(keyboardShortcutElement.value);
this.ajaxGet(baseurl + keyboardShortcutElement.value).then((response) => {
this.mapKeyboardShortcuts(JSON.parse(response));
});
}
this.mapKeyboardShortcuts(getShortcutsDefinition());
this.setKeyboardListener();
},
@ -61,7 +55,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.shortcuts) {
for(let shortcut of config) {
this.shortcutKeys.set(shortcut.key, shortcut);
}
this.addShortcutListToHTML();
@ -76,39 +70,14 @@ let keyboardShortcutsManager = {
window.onkeyup = (keyboardEvent) => {
if(this.shortcutKeys.has(keyboardEvent.key)) {
let activeElement = document.activeElement.tagName;
if( !this.ESCAPED_TAG_NAMES.includes(activeElement)) {
eval(this.shortcutKeys.get(keyboardEvent.key).action);
if(!this.ESCAPED_TAG_NAMES.includes(activeElement)) {
this.shortcutKeys.get(keyboardEvent.key).action();
}
} else if(this.NAVIGATION_KEYS.includes(keyboardEvent.key)) {
window.dispatchEvent(new CustomEvent(this.EVENTS[keyboardEvent.key], {detail: keyboardEvent}));
}
}
},
/**
* Queries the given URL with a GET request and returns a Promise
* that resolves when the response arrives.
* @param string url The URL to fetch.
*/
ajaxGet(url) {
return new Promise(function(resolve, reject) {
let req = new XMLHttpRequest();
req.open("GET", url);
req.onload = function() {
if (req.status === 200) {
resolve(req.response);
} else {
reject(new Error(req.statusText));
}
};
req.onerror = function() {
reject(new Error("Network error"));
};
req.send();
});
}
}
// Inits the keyboard shortcut manager's main routine and the click event on the keyboard shortcut triangle at the bottom of the screen.

View File

@ -1,9 +0,0 @@
{
"shortcuts": [
{
"key": "s",
"description": "Focus the filter events bar",
"action": "$('#quickFilterField').focus()"
}
]
}

View File

@ -1,24 +0,0 @@
{
"shortcuts": [
{
"key": "t",
"description": "Open the tag selection modal",
"action": "$('.addTagButton').first().click()"
},
{
"key": "f",
"description": "Open the freetext import modal",
"action": "$('#freetext-button').click()"
},
{
"key": "a",
"description": "Add an attribute",
"action": "$('#create-button').click()"
},
{
"key": "s",
"description": "Focus the filter attribute bar",
"action": "$('#quickFilterField').focus()"
}
]
}

View File

@ -1,15 +0,0 @@
{
"shortcuts": [
{
"key": "l",
"description": "Go to event list",
"action": "document.location.href = baseurl + '/events/index'"
},
{
"key": "e",
"description": "Go to add event page",
"action": "document.location.href = baseurl + '/events/add'"
}
]
}