From 9d651759bc8757773d89356ad15dba5566e003e1 Mon Sep 17 00:00:00 2001
From: Jake Mannens <jake@asger.xyz>
Date: Fri, 8 Sep 2023 02:26:32 +1000
Subject: Added framework for routing keyboard events

---
 Pages/Component/Dialog.razor | 19 ++++++++++++++++++-
 Pages/Upload.razor           |  2 --
 Pages/_Host.cshtml           |  1 +
 wwwroot/js/dialog.js         | 10 ++++++++++
 wwwroot/js/keyboard.js       | 18 ++++++++++++++++++
 5 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 wwwroot/js/keyboard.js

diff --git a/Pages/Component/Dialog.razor b/Pages/Component/Dialog.razor
index dbfec49..673ec2f 100644
--- a/Pages/Component/Dialog.razor
+++ b/Pages/Component/Dialog.razor
@@ -48,6 +48,23 @@
     public void Show() => Visible = true;
     public void Hide() => Visible = false;
 
+    protected override async void OnAfterRender(bool firstRender) {
+        if(firstRender) {
+            await jsRuntime.InvokeVoidAsync("dialogAddObjectReference", new object[] {
+                dialogDiv,
+                DotNetObjectReference.Create(this)
+            });
+        }
+    }
+
+    [JSInvokable("KeyHandler")]
+    public void KeyHandler(string key) {
+        if(key == "Escape") {
+            Hide();
+            return;
+        }
+    }
+
     private string heightStyle =>
-        $"{(height is null ? "" : $"max-height:{height};")}";
+    $"{(height is null ? "" : $"max-height:{height};")}";
 }
diff --git a/Pages/Upload.razor b/Pages/Upload.razor
index 36555da..7f7980b 100644
--- a/Pages/Upload.razor
+++ b/Pages/Upload.razor
@@ -29,7 +29,6 @@
     dropzone.ondrop = function(e) {
         e.preventDefault();
         fileUpload.files = e.dataTransfer.files;
-        console.log('lmao');
         uploadForm.submit();
     }
 
@@ -38,7 +37,6 @@
     }
 
     fileUpload.onchange = function(e) {
-        console.log('epic');
         uploadForm.submit();
     }
 </script>
diff --git a/Pages/_Host.cshtml b/Pages/_Host.cshtml
index 177e2df..69bced8 100644
--- a/Pages/_Host.cshtml
+++ b/Pages/_Host.cshtml
@@ -12,6 +12,7 @@
     <link href="/styles/global.css" rel="stylesheet" />
     <link href="/favicon.ico" rel="icon" />
     <link href="/manifest.webmanifest" rel="manifest" />
+    <script type="text/javascript" src="/js/keyboard.js"></script>
     <script type="text/javascript" src="/js/dialog.js"></script>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
diff --git a/wwwroot/js/dialog.js b/wwwroot/js/dialog.js
index 065014a..418962f 100644
--- a/wwwroot/js/dialog.js
+++ b/wwwroot/js/dialog.js
@@ -66,3 +66,13 @@ function bumpDialog(element) {
     for(var d of dialogs)
         d.style.zIndex = z++;
 }
+
+function dialogAddObjectReference(element, dialogObject) {
+    if(!window.dialogObjects)
+        window.dialogObjects = []
+
+    window.dialogObjects.push({
+        element: element,
+        dialogObject: dialogObject
+    });
+}
diff --git a/wwwroot/js/keyboard.js b/wwwroot/js/keyboard.js
new file mode 100644
index 0000000..9d06b75
--- /dev/null
+++ b/wwwroot/js/keyboard.js
@@ -0,0 +1,18 @@
+async function keyDownHandler(e) {
+    e.preventDefault();
+
+    var element = Array.from(document.querySelectorAll('div.dialog'))
+        .filter(e => e.style.visibility == 'visible')
+        .map(e => ({ element: e, zIndex: parseInt(e.style.zIndex) }))
+        .sort((a, b) => b.zIndex - a.zIndex)
+        .map(e => e.element)[0];
+
+    if(element) {
+        await window.dialogObjects
+            .find(d => d.element == element)
+            .dialogObject
+            .invokeMethodAsync('KeyHandler', e.key);
+    }
+}
+
+window.onload = () => document.onkeydown = keyDownHandler;
\ No newline at end of file
-- 
cgit v1.3