From f3d17951b6b11c70e317bc681a6864053b381eb2 Mon Sep 17 00:00:00 2001
From: "ts.Igov" <ts.igov@outlook.com>
Date: Wed, 26 Jul 2023 16:22:08 +0300
Subject: [PATCH] Changed the intersection observer to deal with prerendering

---
 .gitignore                                  |  1 +
 src/Byteology.Website/Layout/Slide.razor    | 34 +++++++++----------
 src/Byteology.Website/Layout/Slide.razor.cs | 36 +++++++++++++++++++++
 3 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/.gitignore b/.gitignore
index 09266bf..2a702f4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 bin
 obj
+release
 .vs
 .idea
 **.DotSettings
diff --git a/src/Byteology.Website/Layout/Slide.razor b/src/Byteology.Website/Layout/Slide.razor
index 73384aa..a79ec6b 100644
--- a/src/Byteology.Website/Layout/Slide.razor
+++ b/src/Byteology.Website/Layout/Slide.razor
@@ -1,24 +1,20 @@
-@using Ljbc1994.Blazor.IntersectionObserver.Components
+<b-slide @ref="_slide" class="@(_isIntersecting || _state.Prerendering ? "active" : "")">
 
-<IntersectionObserve>
-    <b-slide @ref="context.Ref.Current" class="@(context.IsIntersecting || _state.Prerendering ? "active" : "")">
+    <b-chevron class="@(_state.Prerendering ? "prerendered" : "")">
+        <ChevronIcon/>
+    </b-chevron>
 
-        <b-chevron class="@(_state.Prerendering ? "prerendered" : "")">
+    @ChildContent
+
+    @if (IncludeFooter)
+    {
+        <PrivacyFooter/>
+    }
+    else
+    {
+        <b-chevron class="@(_state.Prerendering? "prerendered" : "")">
             <ChevronIcon/>
         </b-chevron>
+    }
 
-        @ChildContent
-
-        @if (IncludeFooter)
-        {
-            <PrivacyFooter/>
-        }
-        else
-        {
-            <b-chevron class="@(_state.Prerendering? "prerendered" : "")">
-                <ChevronIcon/>
-            </b-chevron>
-        }
-
-    </b-slide>
-</IntersectionObserve>
+</b-slide>
diff --git a/src/Byteology.Website/Layout/Slide.razor.cs b/src/Byteology.Website/Layout/Slide.razor.cs
index 9a9b3ab..205b6a6 100644
--- a/src/Byteology.Website/Layout/Slide.razor.cs
+++ b/src/Byteology.Website/Layout/Slide.razor.cs
@@ -1,7 +1,23 @@
 namespace Byteology.Website.Layout;
 
+using Ljbc1994.Blazor.IntersectionObserver;
+using Ljbc1994.Blazor.IntersectionObserver.API;
+using Microsoft.JSInterop;
+
 public partial class Slide : ComponentBase
 {
+	private ElementReference _slide;
+
+	private bool _isIntersecting;
+
+	private IIntersectionObserverService _observer { get; set; } = default!;
+
+	[Inject]
+	private IJSRuntime _jsRuntime { get; set; } = default!;
+
+	[Inject]
+	private NavigationManager _navManager { get; set; } = default!;
+
 	[Inject]
 	private LayoutStateContainer _state { get; set; } = default!;
 
@@ -10,4 +26,24 @@ public partial class Slide : ComponentBase
 
 	[Parameter]
 	public RenderFragment? ChildContent { get; set; }
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		await base.OnAfterRenderAsync(firstRender);
+
+		if (firstRender)
+			await setupObserver();
+	}
+
+	public async Task setupObserver()
+	{
+		_observer = new IntersectionObserverService(_jsRuntime, _navManager);
+		await _observer.Observe(_slide, (entries) =>
+		{
+			IntersectionObserverEntry? entry = entries.FirstOrDefault();
+			_isIntersecting = entry?.IsIntersecting ?? false;
+			StateHasChanged();
+		});
+	}
+
 }