Make the component more flexible and move css in its own file

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor

@@ -1,63 +1,24 @@
 @inject IJSRuntime JSRuntime
 
-<div class="progress-container">
+<div class="progress-container" @ref="progressContainer">
     <svg class="progress-circle" viewBox="0 0 36 36">
         <circle class="progress-bg" cx="18" cy="18" r="15.91549431" />
         <circle class="progress-bar" id="progressBar" cx="18" cy="18" r="15.91549431" />
     </svg>
 </div>
 
-<style>
-.progress-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1000;
-    opacity: 0;
-    transition: opacity 0.5s;
-}
-
-.progress-container.visible {
-    opacity: 1;
-}
-
-@@keyframes fadeOut {
-    to {
-        opacity: 0;
-    }
-}
-
-.progress-circle {
-    width: 50px;
-    height: 50px;
-}
-
-.progress-bg {
-    fill: none;
-    stroke: #f3f3f3;
-    stroke-width: 4;
-}
-
-.progress-bar {
-    fill: none;
-    stroke: #4caf50;
-    stroke-width: 4;
-    stroke-linecap: round;
-    transform-origin: center;
-    transform: rotate(-90deg);
-    stroke-dasharray: 100, 100;
-    stroke-dashoffset: 100;
-}
+@code {
+	[Parameter]
+	public string ContainerCssSelector { get; set; }
 
-</style>
+	private ElementReference progressContainer;
 
-@code {
 	protected override async Task OnAfterRenderAsync(bool firstRender)
 	{
 		if (firstRender)
 		{
 			await using var _ = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Features/ShowBlogPost/Components/ReadingIndicator.razor.js");
-			await JSRuntime.InvokeVoidAsync("initCircularReadingProgress");
+			await JSRuntime.InvokeVoidAsync("initCircularReadingProgress", ContainerCssSelector, progressContainer);
 		}
 	}
 }

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css

@@ -0,0 +1,40 @@
+.progress-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.progress-container.visible {
+    opacity: 1;
+}
+
+@keyframes fadeOut {
+     to {
+         opacity: 0;
+     }
+ }
+
+.progress-circle {
+    width: 50px;
+    height: 50px;
+}
+
+.progress-bg {
+    fill: none;
+    stroke: #f3f3f3;
+    stroke-width: 4;
+}
+
+.progress-bar {
+    fill: none;
+    stroke: #4caf50;
+    stroke-width: 4;
+    stroke-linecap: round;
+    transform-origin: center;
+    transform: rotate(-90deg);
+    stroke-dasharray: 100, 100;
+    stroke-dashoffset: 100;
+}

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.js

@@ -1,8 +1,8 @@
 let progressTimeout;
 let rafId;
 
-function getContentHeight() {
-    const content = document.querySelector(".blog-inner-content");
+function getContentHeight(className) {
+    const content = document.querySelector(className);
     if (!content) {
         return 0;
     }
@@ -22,14 +22,13 @@ function hideProgressIndicator(progressContainer) {
     }, 500);
 }
 
-window.initCircularReadingProgress = () => {
+window.initCircularReadingProgress = (parentContainer, progressContainer) => {
     const progressBar = document.getElementById('progressBar');
-    const progressContainer = progressBar.closest(".progress-container");
 
     const onScroll = () => {
         clearTimeout(progressTimeout);
 
-        const contentHeight = getContentHeight();
+        const contentHeight = getContentHeight(parentContainer);
         const windowHeight = document.documentElement.clientHeight;
         const scrollAmount = document.documentElement.scrollTop;
         const maxScrollAmount = contentHeight - windowHeight;

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor

@@ -54,7 +54,7 @@ else
 		</div>
 	</div>
 
-	<ReadingIndicator />
+	<ReadingIndicator ContainerCssSelector=".blog-inner-content"/>
 }
 
 @code {