improve on scrolling function used

NielsPilgaard · Aug 18, 2024 · 11413df · 11413df
1 parent d6ff7d5
commit 11413df
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/src/web/Jordnaer/Extensions/JsRuntimeExtensions.cs b/src/web/Jordnaer/Extensions/JsRuntimeExtensions.cs
@@ -10,7 +10,13 @@ public static async Task GoBackAsync(this IJSRuntime jsRuntime)
 
 	public static async Task NavigateTo(this IJSRuntime jsRuntime, string newUrl)
 		=> await jsRuntime.InvokeVoidAsyncWithErrorHandling("utilities.updatePathAndQueryString", newUrl);
-
+	public static async ValueTask<bool> ScrollToBottomOfElement(this IJSRuntime jsRuntime, string selector) => await jsRuntime.InvokeVoidAsyncWithErrorHandling(
+													"scrollFunctions.scrollToBottomOfElement",
+													selector);
+	public static async Task<bool> HideElement(this IJSRuntime jsRuntime, string selector)
+		=> await jsRuntime.InvokeVoidAsyncWithErrorHandling(
+													"utilities.hideElement",
+													selector);
 	public static async ValueTask<GeoLocation?> GetGeolocation(this IJSRuntime jsRuntime)
 	{
 		var (success, geoLocation) = await jsRuntime.InvokeAsyncWithErrorHandling<GeoLocation>("utilities.getGeolocation");

diff --git a/src/web/Jordnaer/Features/Chat/ChatMessageList.razor b/src/web/Jordnaer/Features/Chat/ChatMessageList.razor
@@ -33,8 +33,9 @@
             <MudText Typo="Typo.h5">@ActiveChat.GetDisplayName(CurrentUser.Id!)</MudText>
         </MudAppBar>
     }
-
-    <MudList Class="chat-message-list" Padding="false" ReadOnly Dense T="RenderFragment">
+
+    @*The elements below cannot be readonly/disabled, as it disabled the tooltips *@
+    <MudList Class="chat-message-list" Padding="false" Dense T="RenderFragment">
         <MudSpacer />
         <MudVirtualize Items="ActiveChat?.Messages" Context="message" OverscanCount="8" ItemSize="80">
 
@@ -96,8 +97,8 @@
                       AdornmentIcon="@Icons.Material.Filled.Send"
                       AdornmentColor="@(string.IsNullOrWhiteSpace(_messageInput.Value) ? Color.Default : Color.Primary)"
                       OnAdornmentClick="SendMessage"
-                      Class="mt-3"
-                      Lines="3"
+                      Class="mt-3 p-1"
+                      Lines="2"
                       IconSize="Size.Large"
                       Style="@($"background: {JordnaerTheme.CustomTheme.PaletteLight.BackgroundGray}")" />
     </MudList>
@@ -162,7 +163,7 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        await ScrollToBottom();
+	    await JsRuntime.ScrollToBottomOfElement(".chat-message-window");
     }
 
     private void MarkMessageIfSuccessfullySentByCurrentUser()
@@ -182,8 +183,6 @@
         LastMessageWasSentSuccessfullyByCurrentUser = lastMessage.SenderId == CurrentUser.Id;
     }
 
-    private async ValueTask ScrollToBottom() => await JsRuntime.InvokeVoidAsyncWithErrorHandling("scrollFunctions.scrollToBottomOfElement", ".chat-message-window");
-
     private async Task BackToList()
     {
         ActiveChat = null;
@@ -222,7 +221,7 @@
         }
 
         await _messageInput.FocusAsync();
-        await ScrollToBottom();
+        await JsRuntime.ScrollToBottomOfElement(".chat-message-window");
     }
 
     // TODO: Add MudScrollToTop that shows when user is scrolled up in the chat window

diff --git a/src/web/Jordnaer/wwwroot/js/scroll.js b/src/web/Jordnaer/wwwroot/js/scroll.js
@@ -21,8 +21,17 @@ window.scrollFunctions = {
     scrollToBottomOfElement: function (selector) {
         const element = document.querySelector(selector);
 
-        if (!element) return;
+        if (!element) {
+            return;
+        }
 
-        element.scrollTop = element.scrollHeight;
+        // Ensure the element is fully rendered before scrolling
+        setTimeout(function () {
+            element.scrollTo({
+                top: element.scrollHeight,
+                left: 0,
+                behavior: 'instant' //  'auto', 'instant' or 'smooth' (default is 'auto')
+            });
+        }, 50); // Adjust the delay as needed
     }
 };