diff --git a/src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor b/src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor index 3ec72eb..27c222e 100644 --- a/src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor +++ b/src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor @@ -2,11 +2,23 @@ @using System.Collections.Generic @using System.Linq @using System.Text.Json +@using Microsoft.JSInterop @using RolemasterDb.App.Domain @using RolemasterDb.App.Features +@implements IAsyncDisposable +@inject IJSRuntime JSRuntime -
-
+
+
@if (Model is not null) @@ -359,12 +371,76 @@ { WriteIndented = true }; + private IJSObjectReference? jsModule; + private bool isBackdropPointerDown; - private async Task HandleBackdropClicked() + protected override async Task OnAfterRenderAsync(bool firstRender) { + if (!firstRender) + { + return; + } + + jsModule = await JSRuntime.InvokeAsync( + "import", + "./Components/Shared/CriticalCellEditorDialog.razor.js"); + + await jsModule.InvokeVoidAsync("lockBackgroundScroll"); + } + + public async ValueTask DisposeAsync() + { + if (jsModule is null) + { + return; + } + + try + { + await jsModule.InvokeVoidAsync("unlockBackgroundScroll"); + await jsModule.DisposeAsync(); + } + catch (JSDisconnectedException) + { + } + } + + private void HandleBackdropPointerDown() + { + isBackdropPointerDown = true; + } + + private async Task HandleBackdropPointerUp() + { + if (!isBackdropPointerDown) + { + return; + } + + isBackdropPointerDown = false; await OnClose.InvokeAsync(); } + private void HandleBackdropPointerCancel() + { + isBackdropPointerDown = false; + } + + private void HandleDialogPointerDown() + { + isBackdropPointerDown = false; + } + + private void HandleDialogPointerUp() + { + isBackdropPointerDown = false; + } + + private void HandleDialogPointerCancel() + { + isBackdropPointerDown = false; + } + private async Task HandleSubmitAsync(EditContext _) { await OnSave.InvokeAsync(); diff --git a/src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor.js b/src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor.js new file mode 100644 index 0000000..2f4ddb2 --- /dev/null +++ b/src/RolemasterDb.App/Components/Shared/CriticalCellEditorDialog.razor.js @@ -0,0 +1,26 @@ +const scrollLockClassName = "critical-editor-scroll-locked"; +let scrollLockCount = 0; + +export function lockBackgroundScroll() { + scrollLockCount++; + if (scrollLockCount !== 1) { + return; + } + + document.documentElement.classList.add(scrollLockClassName); + document.body.classList.add(scrollLockClassName); +} + +export function unlockBackgroundScroll() { + if (scrollLockCount === 0) { + return; + } + + scrollLockCount--; + if (scrollLockCount !== 0) { + return; + } + + document.documentElement.classList.remove(scrollLockClassName); + document.body.classList.remove(scrollLockClassName); +} diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css index 461cf26..56c1b9b 100644 --- a/src/RolemasterDb.App/wwwroot/app.css +++ b/src/RolemasterDb.App/wwwroot/app.css @@ -26,6 +26,15 @@ body { margin: 0; } +html.critical-editor-scroll-locked, +body.critical-editor-scroll-locked { + overflow: hidden; +} + +body.critical-editor-scroll-locked { + overscroll-behavior: none; +} + h1, h2, h3,