From 6255f7c74687934e6701ddd98f5e3a84de78c451 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Fri, 8 Sep 2023 03:05:42 +1000
Subject: Added global keyboard shortcuts

---
 Pages/TagDefinitions.razor |  2 +-
 Pages/ViewMedia.razor      | 33 +++++++++++++++------------------
 wwwroot/js/keyboard.js     | 35 ++++++++++++++++++++++++++++++++++-
 wwwroot/styles/global.css  |  3 ++-
 4 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/Pages/TagDefinitions.razor b/Pages/TagDefinitions.razor
index 95253b7..1a29b40 100644
--- a/Pages/TagDefinitions.razor
+++ b/Pages/TagDefinitions.razor
@@ -8,7 +8,7 @@
 
 <div style="padding:var(--size-default-gap);">
     <ButtonContainer>
-        <button @onclick=PromptTagCreate>Create</button>
+        <button @onclick=PromptTagCreate data-keyboard-shortcut="c"><u>C</u>reate</button>
     </ButtonContainer>
 
     <TabContainer @ref=tabContainer>
diff --git a/Pages/ViewMedia.razor b/Pages/ViewMedia.razor
index e8914a0..7823c75 100644
--- a/Pages/ViewMedia.razor
+++ b/Pages/ViewMedia.razor
@@ -4,7 +4,6 @@
 @inject IDbContextFactory<HBContext> dbFactory
 @inject ITagService tagService
 @inject IMediaService mediaService
-@implements IDisposable
 
 <PageTitle>@title</PageTitle>
 
@@ -30,7 +29,7 @@
                         <table id="edit-metadata">
                             <tr>
                                 <td>Title:</td>
-                                <td><input type="text" @bind=shortDescription/></td>
+                                <td><input type="text" @bind=shortDescription @ref=shortDescriptionInput/></td>
                             </tr>
                             <tr>
                                 <td>Description:</td>
@@ -83,19 +82,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"><u>D</u>elete</button>
+                <button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">Add <u>T</u>ag</button>
+                <button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">View <u>O</u>CR</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"><u>E</u>dit Info</button>
                 }
                 @if(media.IsIngest) {
-                    <button @onclick=@(() => SetIngest(false))>Mark Tagging Complete</button>
+                    <button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">Mark Tagging <u>C</u>omplete</button>
                 } else {
-                    <button class="secondary" @onclick=@(() => SetIngest(true))>Mark Tagging Incomplete</button>
+                    <button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">Mark Tagging In<u>c</u>omplete</button>
                 }
             </ButtonContainer>
         </div>
@@ -143,14 +142,18 @@
     private Dialog          ocrDialog;
     private TagSelectDialog tagDialog;
 
-    private HBContext db;
+    private ElementReference shortDescriptionInput;
 
-    protected override void OnInitialized() {
-        db = dbFactory.CreateDbContext();
+    protected override void OnInitialized() =>
         LoadMedia();
+
+    protected override async void OnAfterRender(bool firstRender) {
+        if(infoEditMode)
+            await shortDescriptionInput.FocusAsync();
     }
 
     private void LoadMedia() {
+        using var db = dbFactory.CreateDbContext();
         media = db.Media
             .Include(m => m.Tags)
             .ThenInclude(t => t.TagDefinition)
@@ -170,7 +173,6 @@
 
     private async void SetIngest(bool ingest) {
         mediaService.SetIngest(media, ingest);
-        db.Entry(media).State = EntityState.Detached;
         LoadMedia();
 
         if(ingest)
@@ -191,11 +193,8 @@
 
     private void ApplyInfoEdit(bool apply) {
         if(apply) {
-            if(string.IsNullOrEmpty(shortDescription)) shortDescription = null;
-            if(string.IsNullOrEmpty(longDescription))  longDescription  = null;
-            media.ShortDescription = shortDescription;
-            media.LongDescription  = longDescription;
             mediaService.SetDescription(media, shortDescription, longDescription);
+            LoadMedia();
         }
 
         infoEditMode = false;
@@ -205,6 +204,4 @@
         mediaService.Delete(media);
         await jsRuntime.InvokeVoidAsync("history.back");
     }
-
-    public void Dispose() => db.Dispose();
 }
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;
-- 
cgit v1.3