Skip to content

Commit dc1edbd

Browse files
gvreddy04gvreddy04
authored
Script Loader - Component + Other docs update (#543)
* Tabs demos + docs update * Script Loader - docs update
1 parent ade9e8a commit dc1edbd

File tree

18 files changed

+220
-49
lines changed

18 files changed

+220
-49
lines changed

‎BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
<ProjectReference Include="..\blazorbootstrap\BlazorBootstrap.csproj" />
2020
</ItemGroup>
2121

22+
<ItemGroup>
23+
<Folder Include="Pages\ScriptLoader\" />
24+
</ItemGroup>
25+
2226
<Target Name="EmbedDemos" BeforeTargets="PrepareForBuild">
2327
<!-- Let's embed demos sources into the assembly to show the source at runtime. -->
2428
<ItemGroup>

‎BlazorBootstrap.Demo.RCL/Pages/Index.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,11 @@
160160
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input <Badge Color="BadgeColor.Danger">New</Badge></h4>
161161
</a>
162162
</div>
163+
<div class="col-sm-4 mb-2">
164+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/script-loader">
165+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CodeSlash" class="me-2" /> Script Loader <Badge Color="BadgeColor.Danger">New</Badge></h4>
166+
</a>
167+
</div>
163168
<div class="col-sm-4 mb-2">
164169
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/sidebar">
165170
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.LayoutSidebarInset" class="me-2" /> Sidebar</h4>

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@page "/script-loader"
2+
3+
<PageTitle>@title</PageTitle>
4+
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6+
7+
<h1>Blazor Script Loader</h1>
8+
<div class="lead mb-3">
9+
Documentation and examples for using the Blazor Bootstrap Script Loader component.
10+
</div>
11+
12+
<CarbonAds />
13+
14+
<SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
15+
<div class="mb-3">
16+
In the following example, the jQuery script is loaded using the Script Loader component.
17+
</div>
18+
<Demo Type="typeof(ScriptLoader_Demo_01_Examples)" />
19+
20+
<Callout Type="CalloutType.Info" Heading="Test">
21+
To test whether the jQuery script has been loaded successfully, run <code>$('#script1')[0]</code> in the browser console.
22+
</Callout>
23+
24+
<img src="https://i.imgur.com/EWEGAZv.png" class="img-fluid" alt="Blazor Script Loader - Test whether the jQuery script has been loaded successfully" />
25+
26+
@code {
27+
private string pageUrl = "/script-loader";
28+
private string title = "Blazor ScriptLoader Component";
29+
private string description = "Documentation and examples for using the Blazor Bootstrap ScriptLoader component.";
30+
private string imageUrl = "https://i.imgur.com/sBiYPeQ.png";
31+
}

‎BlazorBootstrap.Demo.RCL/Pages/ScriptLoader/ScriptLoader_Demo_01_Examples.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<ScriptLoader Async="true"
2+
Class="mt-4"
3+
ScriptId="script1"
4+
Source="//cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" />

‎BlazorBootstrap.Demo.RCL/Pages/Tabs/TabsDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@
9595
<SectionHeading Size="HeadingSize.H2" Text="Methods: Set active tab OnAfterRender" PageUrl="@pageUrl" HashTagName="methods-set-active-tab-onafterrender" />
9696
<Demo Type="typeof(Tabs_Demo_11_Methods_Set_Active_Tab_OnAfterRender)" />
9797

98-
<SectionHeading Size="HeadingSize.H2" Text="Tab call back event: OnTabClicked" PageUrl="@pageUrl" HashTagName="tab-callback-event-on-tab-clicked" />
99-
<Demo Type="typeof(Tabs_Demo_12_Tab_Callback_Event_OnTabClicked)" />
98+
<SectionHeading Size="HeadingSize.H2" Text="Tab: OnClick" PageUrl="@pageUrl" HashTagName="tab-on-click" />
99+
<Demo Type="typeof(Tabs_Demo_12_Tab_Callback_Event_OnClick)" />
100100

101101
<SectionHeading Size="HeadingSize.H2" Text="Dynamic tabs" PageUrl="@pageUrl" HashTagName="dynamic-tabs" />
102102
<Demo Type="typeof(Tabs_Demo_13_Dynamic_Tabs)" />

BlazorBootstrap.Demo.RCL/Pages/Tabs/Tabs_Demo_12_Tab_Callback_Event_OnTabClicked.razor renamed to BlazorBootstrap.Demo.RCL/Pages/Tabs/Tabs_Demo_12_Tab_Callback_Event_OnClick.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{
44
<Tab Title="@customer.CustomerName"
55
IsActive="selectedCustomer.CustomerId == customer.CustomerId"
6-
OnTabClicked="() => OnTabClicked(customer)">
6+
OnClick="(args) => OnTabClick(args, customer)">
77
<Content>
88
<div class="mt-3">
99
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
@@ -25,5 +25,5 @@
2525

2626
protected override void OnInitialized() => selectedCustomer = customers.First();
2727

28-
private void OnTabClicked(Customer customer) => selectedCustomer = customer;
28+
private void OnTabClick(TabEventArgs args, Customer customer) => selectedCustomer = customer;
2929
}

‎BlazorBootstrap.Demo.RCL/Pages/Tabs/Tabs_Demo_13_Dynamic_Tabs.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@foreach (var customer in customers)
33
{
44
<Tab Title="@customer.CustomerName"
5-
OnTabClicked="() => OnTabClicked(customer)">
5+
OnClick="(args) => OnTabClick(args, customer)">
66
<Content>
77
<div class="mt-3">
88
This is the placeholder content for the <b>@customer.CustomerName</b> tab.
@@ -37,5 +37,5 @@
3737
tabs.InitializeRecentTab(showTab: true);
3838
}
3939

40-
private void OnTabClicked(Customer customer) => selectedCustomer = customer;
40+
private void OnTabClick(TabEventArgs args, Customer customer) => selectedCustomer = customer;
4141
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,4 @@
33
<ScriptLoader Async="true"
44
Class="@classNames"
55
ScriptId="_carbonads_js"
6-
Source="//cdn.carbonads.com/carbon.js?serve=CWYICKQU&placement=docsblazorbootstrapcom"
7-
Type="text/javascript" />
6+
Source="//cdn.carbonads.com/carbon.js?serve=CWYICKQU&placement=docsblazorbootstrapcom" />

‎BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,11 @@ private IEnumerable<NavItem> GetNavItems()
6464
new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
6565
new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
6666
new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
67-
new (){ Id = "519", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
68-
new (){ Id = "520", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
69-
new (){ Id = "521", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
70-
new (){ Id = "522", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
67+
new (){ Id = "519", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
68+
new (){ Id = "520", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
69+
new (){ Id = "521", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
70+
new (){ Id = "522", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
71+
new (){ Id = "523", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
7172

7273
new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
7374
new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },

‎blazorbootstrap/Components/ScriptLoader/ScriptLoader.razor.cs‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,28 @@
22

33
public partial class ScriptLoader : BlazorBootstrapComponentBase
44
{
5+
#region Fields and Constants
6+
7+
private const string type = "text/javascript";
8+
9+
#endregion
10+
511
#region Methods
612

713
protected override async Task OnAfterRenderAsync(bool firstRender)
814
{
9-
await JS.InvokeVoidAsync("window.blazorBootstrap.scriptLoader.load", ElementId, Async, ScriptId, Source, Type);
15+
if (firstRender)
16+
await JS.InvokeVoidAsync("window.blazorBootstrap.scriptLoader.load", ElementId, Async, ScriptId, Source, type);
17+
18+
await base.OnAfterRenderAsync(firstRender);
19+
}
20+
21+
protected override void OnParametersSet()
22+
{
23+
if (string.IsNullOrWhiteSpace(Source))
24+
throw new ArgumentNullException(nameof(Source));
25+
26+
base.OnParametersSet();
1027
}
1128

1229
#endregion
@@ -33,13 +50,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
3350
/// directly within a document.
3451
/// </summary>
3552
[Parameter]
36-
public string? Source { get; set; }
37-
38-
/// <summary>
39-
/// This parameter indicates the type of script represented.
40-
/// </summary>
41-
[Parameter]
42-
public string? Type { get; set; }
53+
[EditorRequired]
54+
public string? Source { get; set; } = default!;
4355

4456
#endregion
4557
}

0 commit comments

Comments
 (0)