Merge pull request #67 from danheron/bug/headcontent-overwritten

Set head content with javascript

Heron.MudCalendar.UnitTests.Viewer/Shared/MainLayout.razor

@@ -1,7 +1,17 @@
 @inherits LayoutComponentBase
 
+<HeadContent>
+    <meta name="description" content="@_description" />
+</HeadContent>
+
 <MudThemeProvider/>
 <MudDialogProvider/>
 <MudSnackbarProvider/>
 
 @Body
+
+@code {
+
+    private string _description = "Description set by code";
+
+}

Heron.MudCalendar/Components/MudCalendar.razor

@@ -1,32 +1,18 @@
 @namespace Heron.MudCalendar
 @inherits MudComponentBase
 @using CategoryTypes = Heron.MudCalendar.Attributes.CategoryTypes
+@using Microsoft.JSInterop
+@inject IJSRuntime JsRuntime
 
 @Render
 
 @code {
 
-    /// <summary>
-    /// Renders the html page head element.
-    /// </summary>
-    protected virtual RenderFragment RenderHead =>
-        @<HeadContent>
-            @RenderHeaderContent
-        </HeadContent>;
-
-    /// <summary>
-    /// Renders the contents of the head element.
-    /// </summary>
-    protected virtual RenderFragment RenderHeaderContent =>
-        @<link href="_content/Heron.MudCalendar/Heron.MudCalendar.min.css" rel="stylesheet"/>;
-
     /// <summary>
     /// Renders the component.
     /// </summary>
     protected virtual RenderFragment Render => __builder =>
     {
-        RenderHead(__builder);
-
         <CascadingValue IsFixed="false" Value="this">
             <div class="@Classname" style="@Styles">
 

Heron.MudCalendar/Components/MudCalendar.razor.cs

@@ -1,3 +1,4 @@
+using Heron.MudCalendar.Services;
 using Microsoft.AspNetCore.Components;
 using MudBlazor.Utilities;
 using MudBlazor;
@@ -8,6 +9,8 @@ namespace Heron.MudCalendar;
 
 public partial class MudCalendar : MudComponentBase
 {
+    private JsService? _jsService;
+
     /// <summary>
     /// The higher the number, the heavier the drop-shadow. 0 for no shadow.
     /// </summary>
@@ -255,6 +258,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             //await DateRangeChanged.InvokeAsync(new CalendarDateRange(CurrentDay, View));
             await ChangeDateRange();
+
+            await SetLinks();
         }
     }
 
@@ -305,6 +310,17 @@ protected virtual Task OnPreviousClicked()
         return ChangeDateRange();
     }
 
+    private async Task SetLinks()
+    {
+        // Check if link is already set
+        _jsService ??= new JsService(JsRuntime);
+        var head = await _jsService.GetHeadContent();
+        if (!string.IsNullOrEmpty(head) && head.Contains("Heron.MudCalendar.min.css")) return;
+
+        // Add link
+        await _jsService.AddLink("_content/Heron.MudCalendar/Heron.MudCalendar.min.css", "stylesheet");
+    }
+
     private Task DatePickerDateChanged(DateTime? dateTime)
     {
         PickerDate = dateTime;

Heron.MudCalendar/Services/JsService.cs

@@ -1,3 +1,4 @@
+using System.Runtime.InteropServices;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 
@@ -18,6 +19,18 @@ public async Task Scroll(ElementReference element, int top)
         var module = await _moduleTask.Value;
         await module.InvokeVoidAsync("scroll", element, top);
     }
+
+    public async Task<string> GetHeadContent()
+    {
+        var module = await _moduleTask.Value;
+        return await module.InvokeAsync<string>("getHeadContent");
+    }
+
+    public async Task AddLink(string href, string rel)
+    {
+        var module = await _moduleTask.Value;
+        await module.InvokeVoidAsync("addLink", href, rel);
+    }
 
     public async ValueTask DisposeAsync()
     {

Heron.MudCalendar/wwwroot/Heron.MudCalendar.js

@@ -1,3 +1,14 @@
 export function scroll(element, top) {
     element.scrollTo(0, top);
+}
+
+export function getHeadContent() {
+    return document.head.innerHTML;
+}
+
+export function addLink(href, rel) {
+    const link = document.createElement("link");
+    link.href = href;
+    link.rel = rel;
+    document.head.appendChild(link);
 }