From b58a4590b00e20ef2215ed6ce619fb8d9289db23 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Mon, 17 Feb 2025 17:55:57 +0330 Subject: [PATCH 1/2] tune persist scroll feature of BitAppShell #9925 --- .../Components/AppShell/BitAppShell.razor.cs | 11 +++++++++-- .../Components/AppShell/BitAppShell.ts | 14 +++++++++----- .../AppShell/BitAppShellJsRuntimeExtensions.cs | 9 +++++++-- .../Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts | 2 +- 4 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs index 7cf7b34b0d..1b7766cb2b 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs @@ -88,15 +88,22 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { await _js.BitAppShellInitScroll(_containerRef, _navManager.Uri); } - } + if (_locationChanged) + { + _locationChanged = false; + await _js.BitAppShellAfterRenderScroll(_navManager.Uri); + } + } + private bool _locationChanged; private void LocationChanged(object? sender, LocationChangedEventArgs args) { if (PersistScroll) { - _ = _js.BitAppShellNavigateScroll(_navManager.Uri); + _locationChanged = true; + _ = _js.BitAppShellLocationChangedScroll(_navManager.Uri); } else if (AutoGoToTop) { diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts index a6d70a1e71..fa920fa23b 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.ts @@ -6,16 +6,20 @@ namespace BitBlazorUI { public static initScroll(container: HTMLElement, url: string) { AppShell._container = container; - AppShell.navigateScroll(url); + AppShell._currentUrl = url; + AppShell._scrolls[url] = 0; AppShell.addScroll(); } - public static navigateScroll(url: string) { + public static locationChangedScroll(url: string) { + AppShell.removeScroll(); + } + + public static afterRenderScroll(url: string) { AppShell._currentUrl = url; AppShell._scrolls[url] = AppShell._scrolls[url] || 0; - AppShell.removeScroll(); AppShell._container.scrollTo({ top: AppShell._scrolls[url], behavior: 'instant' }); - setTimeout(AppShell.addScroll, 13); + AppShell.addScroll(); } public static disposeScroll() { @@ -24,7 +28,7 @@ namespace BitBlazorUI { private static addScroll() { AppShell._container.addEventListener('scroll', AppShell.onScroll); -} + } private static removeScroll() { AppShell._container.removeEventListener('scroll', AppShell.onScroll); diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellJsRuntimeExtensions.cs index 421c931563..6b9bf75064 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellJsRuntimeExtensions.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShellJsRuntimeExtensions.cs @@ -9,9 +9,14 @@ internal static ValueTask BitAppShellInitScroll(this IJSRuntime jsRuntime, Eleme return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.initScroll", container, url); } - internal static ValueTask BitAppShellNavigateScroll(this IJSRuntime jsRuntime, string url) + internal static ValueTask BitAppShellLocationChangedScroll(this IJSRuntime jsRuntime, string url) { - return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.navigateScroll", url); + return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.locationChangedScroll", url); + } + + internal static ValueTask BitAppShellAfterRenderScroll(this IJSRuntime jsRuntime, string url) + { + return jsRuntime.InvokeVoid("BitBlazorUI.AppShell.afterRenderScroll", url); } internal static ValueTask BitAppShellDisposeScroll(this IJSRuntime jsRuntime) diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts index b745ab838e..6e517543d4 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts @@ -5,7 +5,7 @@ function scrollToElement(targetElementId: string) { if (element != null) { element.scrollIntoView({ - behavior: "smooth", + behavior: "instant", block: "start", inline: "nearest" }); From fe750d018c52297dd6455cd5be5bc5f13b224cce Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Mon, 17 Feb 2025 17:57:10 +0330 Subject: [PATCH 2/2] code formatting --- .../Components/AppShell/BitAppShell.razor.cs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs index 1b7766cb2b..f2e0a8d884 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs @@ -10,9 +10,11 @@ namespace Bit.BlazorUI; public partial class BitAppShell : BitComponentBase, IAsyncDisposable { private bool _disposed; + private bool _locationChanged; private ElementReference _containerRef = default!; + [Inject] private IJSRuntime _js { get; set; } = default!; [Inject] private NavigationManager _navManager { get; set; } = default!; @@ -97,7 +99,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) } - private bool _locationChanged; + private void LocationChanged(object? sender, LocationChangedEventArgs args) { if (PersistScroll)