("head::after");
9 |
10 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
11 |
12 | builder.Services.AddConfettiService();
13 |
14 | await builder.Build().RunAsync();
15 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WasmSample/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/launchsettings.json",
3 | "iisSettings": {
4 | "windowsAuthentication": false,
5 | "anonymousAuthentication": true,
6 | "iisExpress": {
7 | "applicationUrl": "http://localhost:30084",
8 | "sslPort": 44386
9 | }
10 | },
11 | "profiles": {
12 | "http": {
13 | "commandName": "Project",
14 | "dotnetRunMessages": true,
15 | "launchBrowser": true,
16 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
17 | "applicationUrl": "http://localhost:5269",
18 | "environmentVariables": {
19 | "ASPNETCORE_ENVIRONMENT": "Development"
20 | }
21 | },
22 | "https": {
23 | "commandName": "Project",
24 | "dotnetRunMessages": true,
25 | "launchBrowser": true,
26 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
27 | "applicationUrl": "https://localhost:7081;http://localhost:5269",
28 | "environmentVariables": {
29 | "ASPNETCORE_ENVIRONMENT": "Development"
30 | }
31 | },
32 | "IIS Express": {
33 | "commandName": "IISExpress",
34 | "launchBrowser": true,
35 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
36 | "environmentVariables": {
37 | "ASPNETCORE_ENVIRONMENT": "Development"
38 | }
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WasmSample/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using System.Net.Http
2 | @using System.Net.Http.Json
3 | @using Microsoft.AspNetCore.Components.Forms
4 | @using Microsoft.AspNetCore.Components.Routing
5 | @using Microsoft.AspNetCore.Components.Web
6 | @using Microsoft.AspNetCore.Components.Web.Virtualization
7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http
8 | @using Microsoft.JSInterop
9 | @using KristofferStrube.Blazor.Confetti.WasmSample
10 | @using KristofferStrube.Blazor.Confetti.WasmSample.Layout
11 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WasmSample/wwwroot/404.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Blazor Confetti
6 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WasmSample/wwwroot/css/app.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
3 | }
4 |
5 | h1:focus {
6 | outline: none;
7 | }
8 |
9 | a, .btn-link {
10 | color: #0071c1;
11 | }
12 |
13 | .btn-primary {
14 | color: #fff;
15 | background-color: #1b6ec2;
16 | border-color: #1861ac;
17 | }
18 |
19 | .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
20 | box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
21 | }
22 |
23 | .content {
24 | padding-top: 1.1rem;
25 | }
26 |
27 | .valid.modified:not([type=checkbox]) {
28 | outline: 1px solid #26b050;
29 | }
30 |
31 | .invalid {
32 | outline: 1px solid red;
33 | }
34 |
35 | .validation-message {
36 | color: red;
37 | }
38 |
39 | #blazor-error-ui {
40 | background: lightyellow;
41 | bottom: 0;
42 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
43 | display: none;
44 | left: 0;
45 | padding: 0.6rem 1.25rem 0.7rem 1.25rem;
46 | position: fixed;
47 | width: 100%;
48 | z-index: 1000;
49 | }
50 |
51 | #blazor-error-ui .dismiss {
52 | cursor: pointer;
53 | position: absolute;
54 | right: 0.75rem;
55 | top: 0.5rem;
56 | }
57 |
58 | .blazor-error-boundary {
59 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
60 | padding: 1rem 1rem 1rem 3.7rem;
61 | color: white;
62 | }
63 |
64 | .blazor-error-boundary::after {
65 | content: "An error has occurred."
66 | }
67 |
68 | .loading-progress {
69 | position: relative;
70 | display: block;
71 | width: 8rem;
72 | height: 8rem;
73 | margin: 20vh auto 1rem auto;
74 | }
75 |
76 | .loading-progress circle {
77 | fill: none;
78 | stroke: #e0e0e0;
79 | stroke-width: 0.6rem;
80 | transform-origin: 50% 50%;
81 | transform: rotate(-90deg);
82 | }
83 |
84 | .loading-progress circle:last-child {
85 | stroke: #1b6ec2;
86 | stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
87 | transition: stroke-dasharray 0.05s ease-in-out;
88 | }
89 |
90 | .loading-progress-text {
91 | position: absolute;
92 | text-align: center;
93 | font-weight: bold;
94 | inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
95 | }
96 |
97 | .loading-progress-text:after {
98 | content: var(--blazor-load-percentage-text, "Loading");
99 | }
100 |
101 | code {
102 | color: #c02d76;
103 | }
104 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WasmSample/wwwroot/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KristofferStrube/Blazor.Confetti/cb2562c8411705a6e5784132e47e5962df788e2d/samples/KristofferStrube.Blazor.Confetti.WasmSample/wwwroot/favicon.png
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WasmSample/wwwroot/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KristofferStrube/Blazor.Confetti/cb2562c8411705a6e5784132e47e5962df788e2d/samples/KristofferStrube.Blazor.Confetti.WasmSample/wwwroot/icon-192.png
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WasmSample/wwwroot/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Blazor Confetti
8 |
9 |
51 |
52 |
55 |
56 |
59 | An unhandled error has occurred.
60 |
Reload
61 |
🗙
62 |
5 |
8 |
9 |
10 |
15 |
16 |
17 | @Body
18 |
19 |
20 |
25 | An unhandled error has occurred.
26 |
Reload
27 |
🗙
28 |
Counter
5 |
6 | Counter
7 |
8 | Current count: @currentCount
9 |
10 | Confetti from bottom of page
11 | Confetti with custom colors and size
14 | Slow confetti
17 | Heart confetti from top
20 | Hands clapping from bottom
23 | Stars from top
26 |
27 | Confetti from this button
28 |
29 | @code {
30 | private ElementReference button;
31 |
32 | [Inject]
33 | public required ConfettiService ConfettiService { get; set; }
34 |
35 | private int currentCount = 0;
36 |
37 | private void FromBottom()
38 | {
39 | ConfettiService.Activate(new() { Mode = ConfettiOriginMode.FromBottomCenter });
40 | currentCount++;
41 | }
42 |
43 | private void WithCustomColors()
44 | {
45 | ConfettiService.Activate(new()
46 | {
47 | Mode = ConfettiOriginMode.FromBottomCenter,
48 | Colors = ["silver", "gold", "#B87333"],
49 | Size = 10,
50 | SizeVariation = 5
51 | });
52 | currentCount++;
53 | }
54 |
55 | private void Slowly()
56 | {
57 | ConfettiService.Activate(new() { Mode = ConfettiOriginMode.FromBottomCenter, Milliseconds = 3000, VariationInMilliseconds = 500 });
58 | currentCount++;
59 | }
60 |
61 | private void Heart()
62 | {
63 | ConfettiService.Activate(new()
64 | {
65 | Type = ConfettiType.Heart,
66 | Size = 30,
67 | SizeVariation = 30,
68 | Mode = ConfettiOriginMode.FromTopCurtain,
69 | Milliseconds = 3000,
70 | VariationInMilliseconds = 500,
71 | Pieces = 50
72 | });
73 | currentCount++;
74 | }
75 |
76 | private void Clapping()
77 | {
78 | ConfettiService.Activate(new()
79 | {
80 | Type = ConfettiType.HandsClapping,
81 | Size = 200,
82 | SizeVariation = 0,
83 | Mode = ConfettiOriginMode.FromBottomCenter,
84 | Milliseconds = 2000,
85 | VariationInMilliseconds = 0,
86 | Pieces = 5
87 | });
88 | currentCount++;
89 | }
90 |
91 | private void Stars()
92 | {
93 | ConfettiService.Activate(new()
94 | {
95 | Type = ConfettiType.Star,
96 | Size = 30,
97 | SizeVariation = 30,
98 | Mode = ConfettiOriginMode.FromTopCurtain,
99 | Milliseconds = 2000,
100 | VariationInMilliseconds = 500,
101 | Pieces = 100
102 | });
103 | currentCount++;
104 | }
105 |
106 | private void FromButton()
107 | {
108 | ConfettiService.Activate(new() { Mode = ConfettiOriginMode.FromElement, Origin = button });
109 | currentCount++;
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/Components/Pages/Error.razor:
--------------------------------------------------------------------------------
1 | @page "/Error"
2 | @using System.Diagnostics
3 |
4 | Error
5 |
6 | Error.
7 | An error occurred while processing your request.
8 |
9 | @if (ShowRequestId)
10 | {
11 |
12 | Request ID: @RequestId
13 |
14 | }
15 |
16 | Development Mode
17 |
18 | Swapping to Development environment will display more detailed information about the error that occurred.
19 |
20 |
21 | The Development environment shouldn't be enabled for deployed applications.
22 | It can result in displaying sensitive information from exceptions to end users.
23 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development
24 | and restarting the app.
25 |
26 |
27 | @code{
28 | [CascadingParameter]
29 | private HttpContext? HttpContext { get; set; }
30 |
31 | private string? RequestId { get; set; }
32 | private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
33 |
34 | protected override void OnInitialized() =>
35 | RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
36 | }
37 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/Components/Pages/Home.razor:
--------------------------------------------------------------------------------
1 | @page "/"
2 |
3 | Home
4 |
5 | Hello, world!
6 |
7 | Welcome to this demo app. Try out the new counter demo with some more power.
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/Components/Routes.razor:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/Components/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using System.Net.Http
2 | @using System.Net.Http.Json
3 | @using Microsoft.AspNetCore.Components.Forms
4 | @using Microsoft.AspNetCore.Components.Routing
5 | @using Microsoft.AspNetCore.Components.Web
6 | @using static Microsoft.AspNetCore.Components.Web.RenderMode
7 | @using Microsoft.AspNetCore.Components.Web.Virtualization
8 | @using Microsoft.JSInterop
9 | @using KristofferStrube.Blazor.Confetti.WebAppSample
10 | @using KristofferStrube.Blazor.Confetti.WebAppSample.Components
11 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/KristofferStrube.Blazor.Confetti.WebAppSample.csproj:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | net8.0
5 | enable
6 | enable
7 |
8 |
9 |
10 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/Program.cs:
--------------------------------------------------------------------------------
1 | using KristofferStrube.Blazor.Confetti;
2 | using KristofferStrube.Blazor.Confetti.WebAppSample.Components;
3 |
4 | WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
5 |
6 | // Add services to the container.
7 | builder.Services
8 | .AddRazorComponents()
9 | .AddInteractiveServerComponents();
10 |
11 | builder.Services.AddConfettiService();
12 |
13 | WebApplication app = builder.Build();
14 |
15 | // Configure the HTTP request pipeline.
16 | if (!app.Environment.IsDevelopment())
17 | {
18 | app.UseExceptionHandler("/Error", createScopeForErrors: true);
19 | // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
20 | app.UseHsts();
21 | }
22 |
23 | app.UseHttpsRedirection();
24 |
25 | app.UseStaticFiles();
26 | app.UseAntiforgery();
27 |
28 | app.MapRazorComponents()
29 | .AddInteractiveServerRenderMode();
30 |
31 | app.Run();
32 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/Properties/launchSettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "http://json.schemastore.org/launchsettings.json",
3 | "iisSettings": {
4 | "windowsAuthentication": false,
5 | "anonymousAuthentication": true,
6 | "iisExpress": {
7 | "applicationUrl": "http://localhost:23347",
8 | "sslPort": 44377
9 | }
10 | },
11 | "profiles": {
12 | "http": {
13 | "commandName": "Project",
14 | "dotnetRunMessages": true,
15 | "launchBrowser": true,
16 | "applicationUrl": "http://localhost:5258",
17 | "environmentVariables": {
18 | "ASPNETCORE_ENVIRONMENT": "Development"
19 | }
20 | },
21 | "https": {
22 | "commandName": "Project",
23 | "dotnetRunMessages": true,
24 | "launchBrowser": true,
25 | "applicationUrl": "https://localhost:7212;http://localhost:5258",
26 | "environmentVariables": {
27 | "ASPNETCORE_ENVIRONMENT": "Development"
28 | }
29 | },
30 | "IIS Express": {
31 | "commandName": "IISExpress",
32 | "launchBrowser": true,
33 | "environmentVariables": {
34 | "ASPNETCORE_ENVIRONMENT": "Development"
35 | }
36 | }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/appsettings.Development.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft.AspNetCore": "Warning"
6 | }
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/appsettings.json:
--------------------------------------------------------------------------------
1 | {
2 | "Logging": {
3 | "LogLevel": {
4 | "Default": "Information",
5 | "Microsoft.AspNetCore": "Warning"
6 | }
7 | },
8 | "AllowedHosts": "*"
9 | }
10 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/wwwroot/app.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
3 | }
4 |
5 | a, .btn-link {
6 | color: #006bb7;
7 | }
8 |
9 | .btn-primary {
10 | color: #fff;
11 | background-color: #1b6ec2;
12 | border-color: #1861ac;
13 | }
14 |
15 | .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
16 | box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
17 | }
18 |
19 | .content {
20 | padding-top: 1.1rem;
21 | }
22 |
23 | h1:focus {
24 | outline: none;
25 | }
26 |
27 | .valid.modified:not([type=checkbox]) {
28 | outline: 1px solid #26b050;
29 | }
30 |
31 | .invalid {
32 | outline: 1px solid #e50000;
33 | }
34 |
35 | .validation-message {
36 | color: #e50000;
37 | }
38 |
39 | .blazor-error-boundary {
40 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
41 | padding: 1rem 1rem 1rem 3.7rem;
42 | color: white;
43 | }
44 |
45 | .blazor-error-boundary::after {
46 | content: "An error has occurred."
47 | }
48 |
49 | .darker-border-checkbox.form-check-input {
50 | border-color: #929292;
51 | }
52 |
--------------------------------------------------------------------------------
/samples/KristofferStrube.Blazor.Confetti.WebAppSample/wwwroot/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KristofferStrube/Blazor.Confetti/cb2562c8411705a6e5784132e47e5962df788e2d/samples/KristofferStrube.Blazor.Confetti.WebAppSample/wwwroot/favicon.png
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/Confetti.razor:
--------------------------------------------------------------------------------
1 | @using KristofferStrube.Blazor.DOM.Extensions
2 | @using Microsoft.JSInterop
3 | @implements IDisposable
4 |
5 |
6 | @foreach (var confettiPiece in confettiPieces)
7 | {
8 |
11 |
12 |
27 |
28 |
32 |
33 |
37 |
38 |
41 |
42 |
45 |
46 |
49 |
50 |
53 |
54 |
57 |
58 |
59 |
60 |
69 |
70 |
74 |
75 |
79 |
80 |
84 |
85 |
100 |
101 |
116 |
117 |
132 |
133 |
148 |
149 |
153 |
154 |
158 |
159 |
163 |
164 |
168 |
169 |
173 |
174 |
178 |
179 |
182 |
183 |
186 |
187 |
190 |
191 |
195 |
196 |
199 |
200 |
203 |
204 |
207 |
208 |
211 |
212 |
215 |
216 |
219 |
220 |
223 |
224 |
227 |
228 |
231 |
232 |
235 |
236 |
239 |
240 |
243 |
244 |
247 |
248 |
251 |
252 |
255 |
256 |
259 |
260 |
263 |
264 |
267 |
268 |
271 |
272 |
275 |
276 |
277 |
278 |
299 |
300 |
303 |
304 |
307 |
308 |
311 |
312 |
315 |
316 |
319 |
320 |
323 |
324 |
325 |
326 | @code {
327 | private double width;
328 | private double height;
329 | private bool playing = false;
330 |
331 | [Inject]
332 | public required IJSRuntime JSRuntime { get; set; }
333 |
334 | [Inject]
335 | public required ConfettiService ConfettiService { get; set; }
336 |
337 | List confettiPieces = new();
338 |
339 | protected override async Task OnAfterRenderAsync(bool firstRender)
340 | {
341 | if (!firstRender) return;
342 |
343 | ConfettiService.Activated += HandleActivated;
344 |
345 | IJSObjectReference windowReference = await JSRuntime.InvokeAsync("window.valueOf");
346 |
347 | var helper = await JSRuntime.GetHelperAsync();
348 | width = await helper.InvokeAsync("getAttribute", windowReference, "innerWidth");
349 | height = await helper.InvokeAsync("getAttribute", windowReference, "innerHeight");
350 | }
351 |
352 | public record ClientRect(double x, double y, double width, double height);
353 |
354 | public async void HandleActivated(object? sender, ConfettiOptions options)
355 | {
356 | (double X, double Y)? originPosition = null;
357 | if (options.Origin is {} origin)
358 | {
359 | var helper = await JSRuntime.GetHelperAsync();
360 | var jSInstance = await helper.InvokeAsync("getJSReference", origin);
361 | var client = await jSInstance.InvokeAsync("getBoundingClientRect");
362 | originPosition = (X: client.x + client.width / 2, Y: client.y + client.height / 2);
363 | }
364 |
365 | var newPieces = Enumerable
366 | .Range(0, options.Pieces)
367 | .Select(i =>
368 | new ConfettiPiece(
369 | options.Type,
370 | options.Colors[Random.Shared.Next(options.Colors.Length)],
371 | options.Size + (int)((Random.Shared.NextDouble() * 2 - 1) * options.SizeVariation),
372 | options.Milliseconds + (int)((Random.Shared.NextDouble() * 2 - 1) * options.VariationInMilliseconds),
373 | options.Mode switch
374 | {
375 | ConfettiOriginMode.FromBottomCenter => FromBottomCenterPositions(),
376 | ConfettiOriginMode.FromTopCurtain => FromTopCurtainPositions(),
377 | ConfettiOriginMode.FromElement when originPosition is not null => FromElementPositions(originPosition.Value),
378 | _ => FromBottomCenterPositions()
379 | }
380 | )
381 | ).ToList();
382 |
383 | lock (confettiPieces)
384 | {
385 | confettiPieces.AddRange(newPieces);
386 | }
387 |
388 | StateHasChanged();
389 | await Task.Delay(options.Milliseconds + options.VariationInMilliseconds + 100);
390 | lock (confettiPieces)
391 | {
392 | confettiPieces = confettiPieces.Where(p => !newPieces.Contains(p)).ToList();
393 | }
394 | StateHasChanged();
395 |
396 |
397 | }
398 |
399 | private (double X, double Y)[] FromBottomCenterPositions()
400 | {
401 | var x = Random.Shared.NextDouble() - 0.5;
402 | var y = Random.Shared.NextDouble();
403 | var end = Random.Shared.NextDouble();
404 | return [(width / 2, height), (width / 2 + x * width / 3 * 2, height / 2 - y * height / 2), (width / 2 + x * width / 3 * 4, height + end * height / 3)];
405 | }
406 |
407 | private (double X, double Y)[] FromTopCurtainPositions()
408 | {
409 | var x = Random.Shared.NextDouble() * width;
410 | return [(x, 0), (x, height)];
411 | }
412 |
413 | private (double X, double Y)[] FromElementPositions((double x, double y) originPosition)
414 | {
415 | var x = Random.Shared.NextDouble() - 0.5;
416 | var y = Random.Shared.NextDouble();
417 | var end = Random.Shared.NextDouble();
418 | return [originPosition, (originPosition.x + x * width / 3 * 2, height / 2 - y * height / 2), (originPosition.x + x * width / 3 * 4, height + end * height / 3)];
419 | }
420 |
421 | public void Dispose()
422 | {
423 | ConfettiService.Activated -= HandleActivated;
424 | }
425 | }
426 |
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/ConfettiAnimator.razor:
--------------------------------------------------------------------------------
1 | @using KristofferStrube.Blazor.SVGAnimation
2 | @using Microsoft.JSInterop
3 |
4 |
5 | @if (ConfettiPiece.Type is ConfettiType.SkewedRectangle)
6 | {
7 |
12 |
13 |
17 |
18 |
20 |
21 |
23 |
24 | }
25 | else if (ConfettiPiece.Type is ConfettiType.HandsClapping)
26 | {
27 |
28 |
29 |
32 |
40 |
42 |
43 |
45 |
46 |
48 |
49 |
51 |
53 |
55 |
64 |
66 |
67 |
69 |
70 |
72 |
73 |
75 |
76 |
78 |
79 | }
80 | else if (ConfettiPiece.Type is ConfettiType.Star)
81 | {
82 |
83 |
84 |
87 |
92 | }
93 |
100 |
101 | @code {
102 | private ElementReference animateReference { get; set; }
103 | private SVGAnimationElement? animationElement;
104 | private bool visible = false;
105 |
106 | [Inject]
107 | public required IJSRuntime JSRuntime { get; set; }
108 |
109 | [Parameter, EditorRequired]
110 | public required ConfettiPiece ConfettiPiece { get; set; }
111 |
112 | protected override async Task OnAfterRenderAsync(bool firstRender)
113 | {
114 | if (!firstRender) return;
115 |
116 | try
117 | {
118 | animationElement = await SVGAnimationElement.CreateAsync(JSRuntime, animateReference);
119 |
120 | await animationElement.BeginElementAsync();
121 | await animationElement.EndElementAtAsync(ConfettiPiece.Milliseconds);
122 | visible = true;
123 | StateHasChanged();
124 | }
125 | catch (Exception e)
126 | {
127 | #if DEBUG
128 | Console.WriteLine(e);
129 | #endif
130 | }
131 | }
132 |
133 | private string SmoothPath((double X, double Y)[] points)
134 | {
135 | // Parameter for smoothness of path in interval [0, 0.5]
136 | double smoothness = 1.0 / 3.0;
137 |
138 | var result = "";
139 | if (points.Length >= 2)
140 | {
141 | result = $"M {points[0].X.AsString()} {points[0].Y.AsString()} ";
142 | for (int i = 1; i < points.Length - 1; i++)
143 | {
144 | result += $"S {(points[i - 1].X * smoothness / 2 + points[i].X - points[i + 1].X * smoothness / 2).AsString()} {(points[i - 1].Y * smoothness / 2 + points[i].Y - points[i + 1].Y * smoothness / 2).AsString()} {points[i].X.AsString()} {points[i].Y.AsString()} ";
145 | }
146 | result += $"S {(points[^2].X * smoothness + points[^1].X * (1 - smoothness)).AsString()} {(points[^2].Y * smoothness + points[^1].Y * (1 - smoothness)).AsString()} {points[^1].X.AsString()} {points[^1].Y.AsString()} ";
147 | }
148 | return result;
149 | }
150 | }
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/ConfettiOptions.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.AspNetCore.Components;
2 |
3 | namespace KristofferStrube.Blazor.Confetti;
4 |
5 | public class ConfettiOptions : EventArgs
6 | {
7 | ///
8 | /// The number of pieces of confetti to generate. The default is 300 .
9 | ///
10 | public int Pieces { get; set; } = 300;
11 |
12 | ///
13 | /// The width of each confetti piece. The default is 10 .
14 | ///
15 | public int Size { get; set; } = 10;
16 |
17 | ///
18 | /// The amount that the size can vary. The default is 10 .
19 | ///
20 | public int SizeVariation { get; set; } = 1;
21 |
22 | ///
23 | /// The type of confetti there will be used.
24 | ///
25 | public ConfettiType Type { get; set; } = ConfettiType.SkewedRectangle;
26 |
27 | ///
28 | /// The time that the average confetti piece will be animated for. The default is 1000 milliseconds.
29 | ///
30 | public int Milliseconds { get; set; } = 1000;
31 |
32 | ///
33 | /// How much the animation time of each confetti piece can vary.
34 | ///
35 | public int VariationInMilliseconds { get; set; } = 200;
36 |
37 | ///
38 | /// The color of the confetti pieces. The default colors are "#F4F" , "#44F" , "#4F4" , "#F44" , and "#9F0" .
39 | ///
40 | public string[] Colors { get; set; } = ["#F4F", "#44F", "#4F4", "#F44", "#9F0"];
41 |
42 | ///
43 | /// How the confetti should be rendered. The default is
45 | public ConfettiOriginMode Mode { get; set; } = ConfettiOriginMode.FromBottomCenter;
46 |
47 | ///
48 | /// From where the animation should start if the
50 | public ElementReference? Origin { get; set; }
51 | }
52 |
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/ConfettiOriginMode.cs:
--------------------------------------------------------------------------------
1 | namespace KristofferStrube.Blazor.Confetti;
2 |
3 | public enum ConfettiOriginMode
4 | {
5 | FromBottomCenter,
6 | FromTopCurtain,
7 | FromElement,
8 | }
9 |
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/ConfettiPiece.cs:
--------------------------------------------------------------------------------
1 | namespace KristofferStrube.Blazor.Confetti;
2 |
3 | public record struct ConfettiPiece(ConfettiType Type, string Color, int Size, int Milliseconds, (double X, double Y)[] Positions);
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/ConfettiService.cs:
--------------------------------------------------------------------------------
1 | namespace KristofferStrube.Blazor.Confetti;
2 |
3 | public class ConfettiService
4 | {
5 | public event ActivatedEventHandler? Activated;
6 |
7 | public void Activate(ConfettiOptions options)
8 | {
9 | Activated?.Invoke(this, options);
10 | }
11 |
12 | public delegate void ActivatedEventHandler(object sender, ConfettiOptions e);
13 | }
14 |
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/ConfettiType.cs:
--------------------------------------------------------------------------------
1 | namespace KristofferStrube.Blazor.Confetti;
2 |
3 | public enum ConfettiType
4 | {
5 | SkewedRectangle,
6 | Heart,
7 | Star,
8 | HandsClapping
9 | }
10 |
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/DoubleExtensions.cs:
--------------------------------------------------------------------------------
1 | using System.Globalization;
2 |
3 | namespace KristofferStrube.Blazor.Confetti;
4 |
5 | internal static class DoubleExtensions
6 | {
7 | internal static string AsString(this double d)
8 | {
9 | return d.ToString(CultureInfo.InvariantCulture);
10 | }
11 | }
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/IServiceExtensions.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.Extensions.DependencyInjection;
2 |
3 | namespace KristofferStrube.Blazor.Confetti;
4 |
5 | public static class IServiceExtensions
6 | {
7 | public static IServiceCollection AddConfettiService(this IServiceCollection serviceCollection)
8 | {
9 | return serviceCollection.AddScoped();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/KristofferStrube.Blazor.Confetti/KristofferStrube.Blazor.Confetti.csproj:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | net8.0
5 | enable
6 | enable
7 | Blazor Confetti
8 | Confetti component for Blazor.
9 | KristofferStrube.Blazor.Confetti
10 | Blazor;Confetti;SVG;Animation;SVGAnimation;JSInterop
11 | https://github.com/KristofferStrube/Blazor.Confetti
12 | git
13 | MIT
14 | 0.2.1
15 | Kristoffer Strube
16 | README.md
17 | icon.png
18 | true
19 |
20 |
21 |
22 |
23 | True
24 | \
25 |
26 |
27 | True
28 | \
29 |
30 |
31 |
32 |
33 |
35 |
36 |
37 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
-green?logo=github)
13 |
14 |