Feat/intersection observers

.github/workflows/dotnet.yml

@@ -7,33 +7,34 @@ on:
     branches: [ main ]
 
 jobs:
-  build:
-
+  build-and-test:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Setup .NET
-      uses: actions/setup-dotnet@v2
-      with:
-        dotnet-version: 6.0.x
-    - name: Restore dependencies
-      run: dotnet restore
-    - name: Build
-      run: dotnet build --no-restore
-    - name: Test
-      run: dotnet test --no-build --verbosity normal
+      - uses: actions/checkout@v3
+
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v2
+        with:
+          dotnet-version: 6.0.x
+
+      - name: Restore dependencies
+        run: dotnet restore
+
+      - name: Build
+        run: dotnet build --no-restore
+
+      - name: Run Tests
+        run: dotnet test --no-build --verbosity normal
+
   doxygen:
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v3
+
       - name: Doxygen Action
-      # You may pin to the exact commit or the version.
-      # uses: mattnotmitt/doxygen-action@cdd5472f8e48e141b89d2633c1ae72991a21cb6a
         uses: mattnotmitt/doxygen-action@1.9.2
         with:
-          # Path to Doxyfile
           doxyfile-path: ./Doxyfile
-          # Working directory
           working-directory: .

BlazorObservers.sln

@@ -7,6 +7,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ObserverLibrary", "Observer
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ObserverExample", "ObserverExample\ObserverExample.csproj", "{5F06C015-629D-432E-93E7-C6EA2FAA5ACD}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ObserverLibraryTests", "ObserverLibraryTests\ObserverLibraryTests.csproj", "{1A3B38A4-7739-49B6-AC27-EB0D916293B3}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -21,6 +23,10 @@ Global
 		{5F06C015-629D-432E-93E7-C6EA2FAA5ACD}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{5F06C015-629D-432E-93E7-C6EA2FAA5ACD}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{5F06C015-629D-432E-93E7-C6EA2FAA5ACD}.Release|Any CPU.Build.0 = Release|Any CPU
+		{1A3B38A4-7739-49B6-AC27-EB0D916293B3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1A3B38A4-7739-49B6-AC27-EB0D916293B3}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1A3B38A4-7739-49B6-AC27-EB0D916293B3}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1A3B38A4-7739-49B6-AC27-EB0D916293B3}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

ObserverExample/ObserverExample.csproj

@@ -1,15 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <UserSecretsId>0c6478ff-04a7-4fae-a5c5-413a99777770</UserSecretsId>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.4" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.4" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.15" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.15" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

ObserverExample/Pages/IntersectionDivs.razor

@@ -0,0 +1,63 @@
+@page "/intersection"
+@inject IntersectionObserverService IntersectionObserverService
+@inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
+
+<PageTitle>Intersection</PageTitle>
+
+<h1>Intersection Observer Demo</h1>
+
+<div @ref=scrollContainer class="contents">
+	<div class="wrapper">
+		<div @ref=scrollContent class="sampleBox" style="height: 200px; background-color: rgb(@(redValue), 0, 0)">
+			<div class="label topLeft">@(percentageLabel)%</div>
+			<div class="label topRight">@(percentageLabel)%</div>
+			<div class="label bottomLeft">@(percentageLabel)%</div>
+			<div class="label bottomRight">@(percentageLabel)%</div>
+		</div>	
+	</div>
+</div>
+
+@code {
+
+	private ElementReference? scrollContainer;
+	private ElementReference? scrollContent;
+	private int redValue = 0;
+	private int percentageLabel = 0;
+
+	private IntersectionTask? taskReference;
+
+	private void OnIntersectionChange(JsIntersectionObserverEntry[] entries)
+	{
+		var entry = entries.Single();
+		percentageLabel = (int)(entry.IntersectionRatio * 100); // 0-100
+		redValue = (int)(entry.IntersectionRatio * 255); // 0-255
+		StateHasChanged();
+	}
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		if (firstRender)
+		{
+
+			// create the intersection observer task
+			if (taskReference is null && scrollContainer.HasValue && scrollContent.HasValue)
+			{
+				// create the observer
+				taskReference = await IntersectionObserverService.RegisterObserver(
+					OnIntersectionChange, 
+					new JsIntersectionObserverOptions { 
+						Root = scrollContainer.Value,
+							Threshold = Enumerable.Range(0, 101).Select(x => x / 100d) // Trigger callback at every 1% change
+					},
+					scrollContent.Value);
+			}
+		}
+	}
+
+	public async ValueTask DisposeAsync()
+	{
+		if (taskReference is not null)
+			await IntersectionObserverService.DeregisterObserver(taskReference);
+	}
+}

ObserverExample/Pages/IntersectionDivs.razor.css

@@ -0,0 +1,55 @@
+.contents {
+    position: absolute;
+    width: 300px;
+    height: 1725px;
+    overflow-y: scroll;
+    max-height: 500px;
+    border: 1px solid #ccc;
+}
+
+.wrapper {
+    position: relative;
+    top: 600px;
+}
+
+.sampleBox {
+    position: relative;
+    left: 175px;
+    width: 150px;
+    background-color: rgb(245 170 140);
+    border: 2px solid rgb(201 126 17);
+    padding: 4px;
+    margin-bottom: 6px;
+}
+
+.label {
+    font: 14px "Open Sans", "Arial", sans-serif;
+    position: absolute;
+    margin: 0;
+    color: white;
+    border: 1px solid rgb(0 0 0 / 70%);
+    width: 3em;
+    height: 18px;
+    padding: 2px;
+    text-align: center;
+}
+
+.topLeft {
+    left: 2px;
+    top: 2px;
+}
+
+.topRight {
+    right: 2px;
+    top: 2px;
+}
+
+.bottomLeft {
+    bottom: 2px;
+    left: 2px;
+}
+
+.bottomRight {
+    bottom: 2px;
+    right: 2px;
+}

ObserverExample/Shared/NavMenu.razor

@@ -14,19 +14,14 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="resize">
                 <span class="oi oi-plus" aria-hidden="true"></span> Resize
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="fetchdata">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
+            <NavLink class="nav-link" href="intersection">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Intersection divs
             </NavLink>
         </div>
     </nav>

ObserverExample/wwwroot/index.html

@@ -20,6 +20,7 @@
         <a class="dismiss">🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="index.js"></script>
 </body>
 
 </html>

ObserverLibrary/DI/DependencyInjectionExtensions.cs

@@ -4,18 +4,20 @@
 namespace BlazorObservers.ObserverLibrary.DI
 {
     /// <summary>
-    /// Contains shorthand methods to register ObserverRegistrationServices
+    /// Contains shorthand methods to register Observer services
     /// </summary>
     public static class DependencyInjectionExtensions
     {
         /// <summary>
-        /// Register a scoped ResizeObserverRegistrationService in the dependency injection
+        /// Register scoped observer services in the dependency injection
         /// </summary>
         /// <param name="services"></param>
         /// <returns></returns>
         public static IServiceCollection AddResizeObserverService(this IServiceCollection services)
         {
-            return services.AddScoped<ResizeObserverService>();
+            return services
+                .AddScoped<ResizeObserverService>()
+                .AddScoped<IntersectionObserverService>();
         }
     }
 }

ObserverLibrary/JsModels/JsDomRect.cs

@@ -0,0 +1,37 @@
+using System.Text.Json.Serialization;
+namespace BlazorObservers.ObserverLibrary.JsModels
+{
+#pragma warning disable CS1591 // Missing XML comment for publicly visible type or member
+
+    /// <summary>
+    /// Model for DomRectReadOnly javascript objects
+    /// </summary>
+    public readonly struct JsDomRect
+    {
+        [JsonPropertyName("x")]
+        public double X { get; init; }
+
+        [JsonPropertyName("y")]
+        public double Y { get; init; }
+
+        [JsonPropertyName("width")]
+        public double Width { get; init; }
+
+        [JsonPropertyName("height")]
+        public double Height { get; init; }
+
+        [JsonPropertyName("top")]
+        public double Top { get; init; }
+
+        [JsonPropertyName("right")]
+        public double Right { get; init; }
+
+        [JsonPropertyName("bottom")]
+        public double Bottom { get; init; }
+
+        [JsonPropertyName("left")]
+        public double Left { get; init; }
+    }
+
+}
+#pragma warning restore CS1591 // Missing XML comment for publicly visible type or member

ObserverLibrary/JsModels/JsIntersectionObserverEntry.cs

@@ -0,0 +1,64 @@
+using Microsoft.AspNetCore.Components;
+using System.Text.Json.Serialization;
+
+namespace BlazorObservers.ObserverLibrary.JsModels
+{
+    /// <summary>
+    /// Model for callback parameter of the IntersectionObserver
+    /// </summary>
+    public class JsIntersectionObserverEntry
+    {
+        /// <summary>
+        /// A DOMRectReadOnly object describing the bounds rectangle of the target element.
+        /// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/boundingClientRect
+        /// </summary>
+        [JsonPropertyName("boundingClientRect")]
+        public JsDomRect BoundingClientRect { get; set; }
+
+        /// <summary>
+        /// A ratio representing the percentage of the target element that is visible.
+        /// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRatio
+        /// </summary>
+        [JsonPropertyName("intersectionRatio")]
+        public double IntersectionRatio { get; set; }
+
+        /// <summary>
+        /// A DOMRectReadOnly representing the visible area of the target element.
+        /// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/intersectionRect
+        /// </summary>
+        [JsonPropertyName("intersectionRect")]
+        public JsDomRect IntersectionRect { get; set; }
+
+        /// <summary>
+        /// True if the target element is currently intersecting with the root.
+        /// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/isIntersecting
+        /// </summary>
+        [JsonPropertyName("isIntersecting")]
+        public bool IsIntersecting { get; set; }
+
+        /// <summary>
+        /// A DOMRectReadOnly representing the root's bounding box.
+        /// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/rootBounds
+        /// </summary>
+        [JsonPropertyName("rootBounds")]
+        public JsDomRect? RootBounds { get; set; }
+
+        /// <summary>
+        /// The Element whose intersection with the root has changed.
+        /// </summary>
+        public ElementReference? TargetElement { get; set; }
+
+        /// <summary>
+        /// Tracking Id to match element from JS to ElementReference in C#
+        /// </summary>
+        [JsonPropertyName("targetTrackingId")]
+        public string? TargetElementTrackingId { get; set; }
+
+        /// <summary>
+        /// A high-resolution timestamp indicating when the intersection was recorded.
+        /// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/time
+        /// </summary>
+        [JsonPropertyName("time")]
+        public double Time { get; set; }
+    }
+}