Scroll to top when navigating (#179)

ThomasBleijendaal · Aug 16, 2022 · af3acf6 · af3acf6
1 parent 801783e
commit af3acf6
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/src/RapidCMS.UI/Components/Editors/BasePicker.cs b/src/RapidCMS.UI/Components/Editors/BasePicker.cs
@@ -3,6 +3,8 @@
 using System.Linq;
 using System.Threading;
 using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using RapidCMS.Core.Abstractions.Data;
 using RapidCMS.Core.Models.Data;
 
@@ -14,14 +16,18 @@ public abstract class BasePicker : BaseDataEditor
         protected int _currentPage = 1;
         protected int? _maxPage;
 
-        protected string _group = Guid.NewGuid().ToString().Replace("-", "");
+        protected string _group = Guid.NewGuid().ToString("n");
+        protected string ElementId => $"picker-{_group}";
 
         protected IEnumerable<IElement>? _options;
         protected List<IElement> _selectedElements = new();
         protected CancellationTokenSource _cts = new();
 
         protected virtual bool IsMultiple { get; set; }
 
+        [Inject]
+        private IJSRuntime JsRuntime { get; set; } = null!;
+
         private IRelationDataCollection RelationDataCollection
             => DataCollection as IRelationDataCollection 
                 ?? throw new InvalidOperationException("Incorrect DataCollection assigned to Entity/iesPicker");
@@ -64,6 +70,8 @@ protected async Task PageChangedAsync(int page)
             _currentPage = page;
 
             await UpdateOptionsAsync();
+
+            await JsRuntime.InvokeVoidAsync("RapidCMS.scrollToTop", ElementId);
         }
 
         protected async Task ResetViewAsync()

diff --git a/src/RapidCMS.UI/Components/Editors/EntitiesPicker.razor b/src/RapidCMS.UI/Components/Editors/EntitiesPicker.razor
@@ -5,7 +5,7 @@
 {
     var index = 0;
 
-    <div class="form-control form-control-select-list @(CssHelper.GetDisplayModifier(DisplayType)) @(CssHelper.GetValidationClass(State))">
+    <div class="form-control form-control-select-list @(CssHelper.GetDisplayModifier(DisplayType)) @(CssHelper.GetValidationClass(State))" id=@ElementId>
         <SearchBar OnResetView="ResetViewAsync" OnSearch="SearchAsync" />
 
         @foreach (var option in _options)

diff --git a/src/RapidCMS.UI/Components/Editors/EntityPicker.razor b/src/RapidCMS.UI/Components/Editors/EntityPicker.razor
@@ -5,7 +5,7 @@
 {
     var index = 0;
 
-    <div class="form-control form-control-select-list @(CssHelper.GetDisplayModifier(DisplayType)) @(CssHelper.GetValidationClass(State))">
+    <div class="form-control form-control-select-list @(CssHelper.GetDisplayModifier(DisplayType)) @(CssHelper.GetValidationClass(State))" id=@ElementId>
         <SearchBar OnResetView="ResetViewAsync" OnSearch="SearchAsync" />
 
         @foreach (var option in _options)

diff --git a/src/RapidCMS.UI/wwwroot/js/interop.js b/src/RapidCMS.UI/wwwroot/js/interop.js
@@ -1,3 +1,5 @@
 window['RapidCMS'] = {
-    // reserved for future use
+    scrollToTop: function (id) {
+        document.getElementById(id).scroll(0, 0);
+    }
 };