Script Loader updates + other docs update (#544)

* Script Loader component updates.

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Pages/Grid/Grid_Demo_16_Save_And_Load_Grid_Settings.razor

@@ -54,11 +54,11 @@
     {
         var settingsJson = await JS.InvokeAsync<string>("window.localStorage.getItem", "grid-settings");
         if (string.IsNullOrWhiteSpace(settingsJson))
-            return null;
+            return null!;
 
         var settings = JsonSerializer.Deserialize<GridSettings>(settingsJson);
         if (settings is null)
-            return null;
+            return null!;
 
         return settings;
     }

BlazorBootstrap.Demo.RCL/Pages/Index.razor

@@ -24,7 +24,7 @@
                 <span class="px-1"></span>
                 <a href="https://www.nuget.org/packages/Blazor.Bootstrap/"><img alt="Nuget" src="https://img.shields.io/nuget/dt/Blazor.Bootstrap"></a>
             </p>
-            <CarbonAds ClassNames="d-flex justify-content-center" />
+            <CarbonAds Class="d-flex justify-content-center mt-5" />
         </div>
     </div>
 </div>

BlazorBootstrap.Demo.RCL/Pages/Offcanvas/Offcanvas_Demo_04_Static_Backdrop.razor

@@ -7,7 +7,7 @@
         <p>Vestibulum sed aliquam urna. Ut ullamcorper erat vitae velit mattis commodo. Phasellus dignissim rhoncus dapibus. Quisque congue egestas tellus id finibus. Suspendisse nibh felis, mattis et finibus vel, tempor in lectus. Nullam eget eros dui. Mauris eget vestibulum nibh. Nullam mattis malesuada lorem vel condimentum. Mauris id odio ac est feugiat condimentum.</p>
     </BodyTemplate>
     <FooterTemplate>
-        <Button Color="ButtonColor.Secondary" @onclick="() => offcanvas?.HideAsync()">Close</Button>
+        <Button Color="ButtonColor.Secondary" @onclick="() => offcanvas.HideAsync()">Close</Button>
     </FooterTemplate>
 </Offcanvas>
 

BlazorBootstrap.Demo.RCL/Pages/ScriptLoader/ScriptLoaderDocumentation.razor

@@ -11,9 +11,9 @@
 
 <CarbonAds />
 
-    <SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
+<SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
 <div class="mb-3">
-    In the following example, the jQuery script is loaded using the Script Loader component. 
+    In the following example, the jQuery script is loaded using the Script Loader component.
 </div>
 <Demo Type="typeof(ScriptLoader_Demo_01_Examples)" />
 
@@ -23,6 +23,34 @@
 
 <img src="https://i.imgur.com/EWEGAZv.png" class="img-fluid" alt="Blazor Script Loader - Test whether the jQuery script has been loaded successfully" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Events" PageUrl="@pageUrl" HashTagName="events" />
+<div class="mb-3">
+    Blazor Bootstrap Script Loader component exposes two events.
+    <table class="table">
+        <thead>
+            <tr>
+                <th scope="col">Event Name</th>
+                <th scope="col">Description</th>
+            </tr>
+        </thead>
+        <tbody class="table-group-divider">
+            <tr>
+                <th scope="row"><code>OnError</code></th>
+                <td>An event that is fired when a script loading error occurs.</td>
+            </tr>
+            <tr>
+                <th scope="row"><code>OnLoad</code></th>
+                <td>An event that is fired when a script has been successfully loaded.</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<div>
+    In the following example, an incorrect script source is specified. 
+    This is why the <code>OnError</code> callback event is called, and the message is updated with the error message.
+</div>
+<Demo Type="typeof(ScriptLoader_Demo_02_Events)" />
+
 @code {
     private string pageUrl = "/script-loader";
     private string title = "Blazor ScriptLoader Component";

BlazorBootstrap.Demo.RCL/Pages/ScriptLoader/ScriptLoader_Demo_02_Events.razor

@@ -0,0 +1,14 @@
+<ScriptLoader Async="true"
+              Class="mt-4"
+              OnLoad="OnScriptLoad"
+              OnError="OnScriptError"
+              ScriptId="script2"
+              Source="//cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min1.js"/>
+
+<div class="text-danger">@message</div>
+
+@code {
+    string? message;
+    private void OnScriptLoad() => message = "Script loaded successfully.";
+    private void OnScriptError(string errorMessage) => message = errorMessage;
+}

BlazorBootstrap.Demo.RCL/Shared/Components/CarbonAds.razor

@@ -1,6 +1,6 @@
 @namespace BlazorBootstrap.Demo.RCL
 
 <ScriptLoader Async="true"
-              Class="@classNames"
+              Class="@Class"
               ScriptId="_carbonads_js"
               Source="//cdn.carbonads.com/carbon.js?serve=CWYICKQU&placement=docsblazorbootstrapcom" />

BlazorBootstrap.Demo.RCL/Shared/Components/CarbonAds.razor.cs

@@ -2,20 +2,10 @@
 
 public partial class CarbonAds : ComponentBase
 {
-    #region Fields and Constants
-
-    private string? classNames;
-
-    #endregion
-
     #region Properties, Indexers
 
     [Parameter]
-    public string? ClassNames
-    {
-        get => classNames;
-        set => classNames = $"mt-5 {value ?? ""}".Trim();
-    }
+    public string? Class { get; set; }
 
     #endregion
 }

blazorbootstrap/Components/ScriptLoader/ScriptLoader.razor.cs

@@ -1,21 +1,33 @@
 namespace BlazorBootstrap;
 
+/// <summary>
+/// A component for loading scripts dynamically in a Blazor application.
+/// </summary>
 public partial class ScriptLoader : BlazorBootstrapComponentBase
 {
     #region Fields and Constants
 
+    /// <summary>
+    /// The default content type for scripts.
+    /// </summary>
     private const string type = "text/javascript";
 
+    /// <summary>
+    /// A reference to this component instance for use in JavaScript calls.
+    /// </summary>
+    private DotNetObjectReference<ScriptLoader> objRef = default!;
+
     #endregion
 
     #region Methods
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    protected override async Task OnInitializedAsync()
     {
-        if (firstRender)
-            await JS.InvokeVoidAsync("window.blazorBootstrap.scriptLoader.load", ElementId, Async, ScriptId, Source, type);
+        objRef ??= DotNetObjectReference.Create(this);
+
+        ExecuteAfterRender(async () => { await JS.InvokeVoidAsync("window.blazorBootstrap.scriptLoader.initialize", ElementId, Async, ScriptId, Source, type, objRef); });
 
-        await base.OnAfterRenderAsync(firstRender);
+        await base.OnInitializedAsync();
     }
 
     protected override void OnParametersSet()
@@ -26,6 +38,27 @@ protected override void OnParametersSet()
         base.OnParametersSet();
     }
 
+    /// <summary>
+    /// Handles a script error event from JavaScript.
+    /// </summary>
+    /// <param name="errorMessage">The error message.</param>
+    [JSInvokable]
+    public void OnErrorJS(string errorMessage)
+    {
+        if (OnError.HasDelegate)
+            OnError.InvokeAsync(errorMessage);
+    }
+
+    /// <summary>
+    /// Handles a script load event from JavaScript.
+    /// </summary>
+    [JSInvokable]
+    public void OnLoadJS()
+    {
+        if (OnLoad.HasDelegate)
+            OnLoad.InvokeAsync();
+    }
+
     #endregion
 
     #region Properties, Indexers
@@ -34,20 +67,31 @@ protected override void OnParametersSet()
     protected override bool ShouldAutoGenerateId => true;
 
     /// <summary>
-    /// Gets or sets the async.
+    /// Gets or sets a value indicating whether the script should be loaded asynchronously.
     /// </summary>
     [Parameter]
     public bool Async { get; set; }
 
     /// <summary>
-    /// Gets or set the script id.
+    /// An event that is fired when a script loading error occurs.
+    /// </summary>
+    [Parameter]
+    public EventCallback<string> OnError { get; set; }
+
+    /// <summary>
+    /// An event that is fired when a script has been successfully loaded.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnLoad { get; set; }
+
+    /// <summary>
+    /// Gets or sets the ID of the script element.
     /// </summary>
     [Parameter]
     public string? ScriptId { get; set; }
 
     /// <summary>
-    /// This parameter specifies the URI of an external script; this can be used as an alternative to embedding a script
-    /// directly within a document.
+    /// Specifies the URI of the external script to load.
     /// </summary>
     [Parameter]
     [EditorRequired]

blazorbootstrap/Components/Tabs/Tabs.razor.cs

@@ -211,7 +211,7 @@ private async Task ShowTabAsync(Tab tab)
         await JS.InvokeVoidAsync("window.blazorBootstrap.tabs.show", tab.ElementId);
 
         if (tab?.OnClick.HasDelegate ?? false)
-            await tab.OnClick.InvokeAsync(new TabEventArgs(tab.Name, tab.Title));
+            await tab.OnClick.InvokeAsync(new TabEventArgs(tab!.Name, tab.Title));
     }
 
     #endregion

blazorbootstrap/wwwroot/blazor.bootstrap.js

@@ -562,10 +562,10 @@ window.blazorBootstrap = {
         }
     },
     scriptLoader: {
-        load: (elementId, async, scriptId, source, type) => {
+        initialize: (elementId, async, scriptId, source, type, dotNetHelper) => {
             let scriptLoaderEl = document.getElementById(elementId);
 
-            if (source.length == 0) {
+            if (source.length === 0) {
                 console.error(`Invalid src url.`);
                 return;
             }
@@ -583,9 +583,13 @@ window.blazorBootstrap = {
             if (type != null)
                 scriptEl.type = type;
 
-            scriptEl.onerror = function () {
-                console.error(`An error occurred while loading the script: ${source}`);
-            }
+            scriptEl.addEventListener("error", (event) => {
+                dotNetHelper.invokeMethodAsync('OnErrorJS', `An error occurred while loading the script: ${source}`);
+            });
+
+            scriptEl.addEventListener("load", (event) => {
+                dotNetHelper.invokeMethodAsync('OnLoadJS');
+            });
 
             if (scriptLoaderEl != null)
                 scriptLoaderEl.appendChild(scriptEl);