Added event for scrolling.

KristofferStrube · May 26, 2024 · 9aaac8c · 9aaac8c
1 parent 2c77cd7
commit 9aaac8c
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 10 deletions.
diff --git a/samples/KristofferStrube.Blazor.Window.WasmExample/Pages/Events.razor b/samples/KristofferStrube.Blazor.Window.WasmExample/Pages/Events.razor
@@ -8,23 +8,38 @@
 
 <h2>Events</h2>
 
-<p>
-    There are exposed many events that we can listen for on the <code>Window</code>.
-</p>
-
-<p>Try resizing the window. <small>On mobile you can resize the window by changing the browser window to landscape mode.</small></p>
+<div style="height:130vh;">
+    <p>
+        There are exposed many events that we can listen for on the <code>Window</code>.
+    </p>
 
-@if (lastResizeTime is not null)
-{
     <p>
-        The window was resized at the time: <span class="badge bg-primary">@Math.Round((decimal)lastResizeTime, 0)</span>
+        Try resizing the window or scrolling in the window.
+        <br />
+        <small>On mobile you can resize the window by changing the browser window to landscape mode.</small>
     </p>
-}
+
+    @if (lastResizeTime is not null)
+    {
+        <p>
+            The window was resized at the time: <span class="badge bg-primary">@Math.Round((decimal)lastResizeTime, 0)</span>
+        </p>
+    }
+
+    @if (lastScrollTime is not null)
+    {
+        <p>
+            The window wiewport was scrolled at the time: <span class="badge bg-primary">@Math.Round((decimal)lastScrollTime, 0)</span>
+        </p>
+    }
+</div>
 
 @code {
     Window? window;
     EventListener<Event>? resizeEventListener;
+    EventListener<Event>? scrollEventListener;
     double? lastResizeTime;
+    double? lastScrollTime;
 
     protected override async Task OnInitializedAsync()
     {
@@ -34,7 +49,13 @@
             lastResizeTime = await e.GetTimeStampAsync();
             StateHasChanged();
         });
+        scrollEventListener = await EventListener<Event>.CreateAsync(JSRuntime, async e =>
+        {
+            lastScrollTime = await e.GetTimeStampAsync();
+            StateHasChanged();
+        });
         await window.AddOnResizeEventListenerAsync(resizeEventListener);
+        await window.AddOnScrollEventListenerAsync(scrollEventListener);
     }
 
     public async ValueTask DisposeAsync()
@@ -43,6 +64,14 @@
         {
             await window.RemoveOnResizeEventListenerAsync(resizeEventListener);
             await resizeEventListener.DisposeAsync();
+        }
+        if (scrollEventListener is not null && window is not null)
+        {
+            await window.RemoveOnScrollEventListenerAsync(scrollEventListener);
+            await scrollEventListener.DisposeAsync();
+        }
+        if (window is not null)
+        {
             await window.DisposeAsync();
         }
     }

diff --git a/src/KristofferStrube.Blazor.Window/IGlobalEventHandlers.cs b/src/KristofferStrube.Blazor.Window/IGlobalEventHandlers.cs
@@ -9,7 +9,7 @@ namespace KristofferStrube.Blazor.Window;
 public interface IGlobalEventHandlers
 {
     /// <summary>
-    /// Adds an <see cref="EventListener{TEvent}"/> for when an object receives a message.
+    /// Adds an <see cref="EventListener{TEvent}"/> for when the viewport is resized.
     /// </summary>
     /// <param name="callback">Callback that will be invoked when the event is dispatched.</param>
     /// <param name="options"><inheritdoc cref="EventTarget.AddEventListenerAsync{TEvent}(string, EventListener{TEvent}?, AddEventListenerOptions?)" path="/param[@name='options']"/></param>
@@ -21,4 +21,32 @@ public interface IGlobalEventHandlers
     /// <param name="callback">The callback <see cref="EventListener{TEvent}"/> that you want to stop listening to events.</param>
     /// <param name="options"><inheritdoc cref="EventTarget.RemoveEventListenerAsync{TEvent}(string, EventListener{TEvent}?, EventListenerOptions?)" path="/param[@name='options']"/></param>
     public Task RemoveOnResizeEventListenerAsync(EventListener<Event> callback, EventListenerOptions? options = null);
+
+    /// <summary>
+    /// Adds an <see cref="EventListener{TEvent}"/> for when the viewport is scrolled.
+    /// </summary>
+    /// <param name="callback">Callback that will be invoked when the event is dispatched.</param>
+    /// <param name="options"><inheritdoc cref="EventTarget.AddEventListenerAsync{TEvent}(string, EventListener{TEvent}?, AddEventListenerOptions?)" path="/param[@name='options']"/></param>
+    public Task AddOnScrollEventListenerAsync(EventListener<Event> callback, AddEventListenerOptions? options = null);
+
+    /// <summary>
+    /// Removes the event listener from the event listener list if it has been parsed to <see cref="AddOnScrollEventListenerAsync"/> previously.
+    /// </summary>
+    /// <param name="callback">The callback <see cref="EventListener{TEvent}"/> that you want to stop listening to events.</param>
+    /// <param name="options"><inheritdoc cref="EventTarget.RemoveEventListenerAsync{TEvent}(string, EventListener{TEvent}?, EventListenerOptions?)" path="/param[@name='options']"/></param>
+    public Task RemoveOnScrollEventListenerAsync(EventListener<Event> callback, EventListenerOptions? options = null);
+
+    /// <summary>
+    /// Adds an <see cref="EventListener{TEvent}"/> for when the viewport has been scrolled, the scroll sequence has ended, and any scroll offset changes have been applied.
+    /// </summary>
+    /// <param name="callback">Callback that will be invoked when the event is dispatched.</param>
+    /// <param name="options"><inheritdoc cref="EventTarget.AddEventListenerAsync{TEvent}(string, EventListener{TEvent}?, AddEventListenerOptions?)" path="/param[@name='options']"/></param>
+    public Task AddOnScrollEndEventListenerAsync(EventListener<Event> callback, AddEventListenerOptions? options = null);
+
+    /// <summary>
+    /// Removes the event listener from the event listener list if it has been parsed to <see cref="AddOnScrollEndEventListenerAsync"/> previously.
+    /// </summary>
+    /// <param name="callback">The callback <see cref="EventListener{TEvent}"/> that you want to stop listening to events.</param>
+    /// <param name="options"><inheritdoc cref="EventTarget.RemoveEventListenerAsync{TEvent}(string, EventListener{TEvent}?, EventListenerOptions?)" path="/param[@name='options']"/></param>
+    public Task RemoveOnScrollEndEventListenerAsync(EventListener<Event> callback, EventListenerOptions? options = null);
 }
diff --git a/src/KristofferStrube.Blazor.Window/Window.cs b/src/KristofferStrube.Blazor.Window/Window.cs
@@ -164,4 +164,28 @@ public async Task RemoveOnResizeEventListenerAsync(EventListener<Event> callback
     {
         await RemoveEventListenerAsync("resize", callback, options);
     }
+
+    /// <inheritdoc/>
+    public async Task AddOnScrollEventListenerAsync(EventListener<Event> callback, AddEventListenerOptions? options = null)
+    {
+        await AddEventListenerAsync("scroll", callback, options);
+    }
+
+    /// <inheritdoc/>
+    public async Task RemoveOnScrollEventListenerAsync(EventListener<Event> callback, EventListenerOptions? options = null)
+    {
+        await RemoveEventListenerAsync("scroll", callback, options);
+    }
+
+    /// <inheritdoc/>
+    public async Task AddOnScrollEndEventListenerAsync(EventListener<Event> callback, AddEventListenerOptions? options = null)
+    {
+        await AddEventListenerAsync("scrollend", callback, options);
+    }
+
+    /// <inheritdoc/>
+    public async Task RemoveOnScrollEndEventListenerAsync(EventListener<Event> callback, EventListenerOptions? options = null)
+    {
+        await RemoveEventListenerAsync("scrollend", callback, options);
+    }
 }