Added global keyboard shortcuts

3 files changed, 30 insertions, 8 deletions

diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index e8914a0..26b7988 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -83,19 +83,19 @@
         </div>
         <div id="button-container">
             <ButtonContainer>
-                <button @onclick=@(() => deleteDialog.Show()) class="warning">Delete</button>
-                <button @onclick=@(() => tagDialog.Show()) class="secondary">Add Tag</button>
-                <button @onclick=@(() => ocrDialog.Show()) class="secondary">View OCR</button>
+                <button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d">Delete</button>
+                <button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add Tag</button>
+                <button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View OCR</button>
                 @if(infoEditMode) {
                     <button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">Cancel</button>
                     <button @onclick=@(() => ApplyInfoEdit(true))>Apply</button>
                 } else {
-                    <button @onclick=@(() => InfoEditMode = true) class="secondary">Edit Info</button>
+                    <button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e">Edit Info</button>
                 }
                 @if(media.IsIngest) {
-                    <button @onclick=@(() => SetIngest(false))>Mark Tagging Complete</button>
+                    <button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging Complete</button>
                 } else {
-                    <button class="secondary" @onclick=@(() => SetIngest(true))>Mark Tagging Incomplete</button>
+                    <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging Incomplete</button>
                 }
             </ButtonContainer>
         </div>
diff --git a/wwwroot/js/keyboard.js b/wwwroot/js/keyboard.js
index 9d06b75..5669637 100644
--- a/wwwroot/js/keyboard.js
+++ b/wwwroot/js/keyboard.js
@@ -1,5 +1,13 @@
 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;
+    }
+
+    if(document.activeElement.tagName == 'INPUT')
+        return;
 
     var element = Array.from(document.querySelectorAll('div.dialog'))
         .filter(e => e.style.visibility == 'visible')
@@ -12,6 +20,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;