Initial commitwasm-initial

1 files changed, 70 insertions, 0 deletions

diff --git a/Server.Client/Pages/Component/Dialog.razor b/Server.Client/Pages/Component/Dialog.razor
new file mode 100644
index 0000000..673ec2f
--- /dev/null
+++ b/Server.Client/Pages/Component/Dialog.razor
@@ -0,0 +1,70 @@
+@inject IJSRuntime jsRuntime
+@implements IDialog
+
+<div
+    class="dialog"
+    onmousedown="dialogMouseDown(event)"
+    style="opacity:0;visibility:hidden;@(heightStyle)"
+    @ref=dialogDiv>
+    @if(Title is not null) {
+        <div class="titlebar" onmousedown="dialogTitleMouseDown(event)">
+            <p class="title">@Title</p>
+            <hr/>
+        </div>
+    }
+    <div class="content">
+        @ChildContent
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public int HeightPixels  { set => height = $"{value}px"; }
+    [Parameter]
+    public int HeightPercent { set => height = $"{value}%"; }
+
+    public bool Visible {
+        get => visible;
+        set {
+            visible = value;
+            jsRuntime.InvokeVoidAsync(
+                "setDialogVisibility",
+                new object?[] { dialogDiv, value });
+        }
+    }
+
+    private bool visible = false;
+
+    private string? height;
+
+    private ElementReference dialogDiv;
+
+    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};")}";
+}