Added global keyboard shortcuts

2 files changed, 36 insertions, 2 deletions

diff --git a/wwwroot/js/keyboard.js b/wwwroot/js/keyboard.js
index 9d06b75..e3854f9 100644
--- a/wwwroot/js/keyboard.js
+++ b/wwwroot/js/keyboard.js
@@ -1,5 +1,25 @@
 async function keyDownHandler(e) {
-    e.preventDefault();
+    function isDialogChild(e) {
+        while (e = e.parentElement)
+            if (e.tagName == 'DIV' && e.classList.contains('dialog'))
+                return true;
+        return false;
+    }
+
+    var tag = document.activeElement.tagName;
+    if((tag == 'INPUT' || (tag == 'TEXTAREA' && e.ctrlKey)) && e.key == 'Enter') {
+        var element = document.activeElement;
+        while(element = element.parentElement) {
+            if(element.tagName == 'FORM') {
+                element.submit();
+                e.preventDefault();
+                return;
+            }
+        }
+    }
+
+    if((tag == 'INPUT' || tag == 'TEXTAREA') && e.key != 'Escape')
+        return;
 
     var element = Array.from(document.querySelectorAll('div.dialog'))
         .filter(e => e.style.visibility == 'visible')
@@ -12,6 +32,19 @@ async function keyDownHandler(e) {
             .find(d => d.element == element)
             .dialogObject
             .invokeMethodAsync('KeyHandler', e.key);
+        e.preventDefault();
+        return;
+    }
+
+    var button = Array.from(document.getElementsByTagName('button'))
+        .filter(b => typeof(b.dataset.keyboardShortcut) == 'string')
+        .filter(b => !isDialogChild(b))
+        .find(b => b.dataset.keyboardShortcut == e.key);
+
+    if(button) {
+        button.click();
+        e.preventDefault();
+        return;
     }
 }
 
diff --git a/wwwroot/styles/global.css b/wwwroot/styles/global.css
index 6c1df53..ebcda47 100644
--- a/wwwroot/styles/global.css
+++ b/wwwroot/styles/global.css
@@ -75,11 +75,12 @@ code {
 }
 
 button, input[type=submit] {
-    color:         white;
     background:    var(--col-button-pri);
     border-radius: 10px;
     border:        none;
     box-sizing:    border-box;
+    color:         white;
+    cursor:        pointer;
     height:        30px;
     margin:        10px 5px 0 5px;
     padding:       0 9px 0 9px;