From fd7feab818635f4348c7a8adcec5a6e2f3563f26 Mon Sep 17 00:00:00 2001
From: Egil Hansen <egil@assimilated.dk>
Date: Wed, 8 May 2024 17:26:50 +0000
Subject: [PATCH] feat(sample): using a service to push out of bound toast
 messages

---
 .../Examples/OutOfBandOutlets/Index.razor     | 10 +++--
 .../OutOfBandHtmxLayout.razor                 |  5 ++-
 .../OutOfBandMainLayout.razor                 |  6 ++-
 .../OutOfBandOutlets/ToastOutlet.razor        | 39 +++++++++++++++++++
 .../Examples/OutOfBandOutlets/ToastService.cs | 18 +++++++++
 samples/HtmxorExamples/Program.cs             |  2 +
 6 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastOutlet.razor
 create mode 100644 samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastService.cs

diff --git a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/Index.razor b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/Index.razor
index e68d9d0..8c62300 100644
--- a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/Index.razor
+++ b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/Index.razor
@@ -2,6 +2,7 @@
 @attribute [HtmxLayout(typeof(OutOfBandHtmxLayout), Priority = 1)]
 @layout OutOfBandMainLayout
 @page "/examples/out-of-band-outlets"
+@inject ToastService toasts
 @code {
     [SupplyParameterFromForm]
     private int CurrentCount { get; set; } = 0;
@@ -9,6 +10,7 @@
     private void IncrementCount(HtmxEventArgs args)
     {
         CurrentCount++;
+        toasts.AddToast($"Counter is now {CurrentCount}");
     }
 }
 <PageTitle>Htmxor - Examples - Out of Band Outlets</PageTitle>
@@ -16,9 +18,9 @@
 <p>This is an example of a counter updating and a element in the header also updating out of bounds.</p>
 
 <div id="counter" class="border p-3 d-inline-block text-center">
-    <HtmxPartial>
-        <SectionContent SectionName="toast">
-            <span id="toasts" hx-swap-oob=@SwapStyles.OuterHTML class="text-warning">
+    <HtmxFragment>
+        <SectionContent SectionName="message">
+            <span id="message" hx-swap-oob=@SwapStyles.OuterHTML class="text-warning">
                 The count is @(CurrentCount % 2 == 0 ? "even" : "odd")!
             </span>
         </SectionContent>
@@ -33,5 +35,5 @@
                 @onput="IncrementCount">
             Click me
         </button>
-    </HtmxPartial>
+    </HtmxFragment>
 </div>
diff --git a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandHtmxLayout.razor b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandHtmxLayout.razor
index e646a1c..ebcec26 100644
--- a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandHtmxLayout.razor
+++ b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandHtmxLayout.razor
@@ -1,3 +1,6 @@
 @inherits HtmxLayoutComponentBase
-<SectionOutlet SectionName="toast" />
+<SectionOutlet SectionName="message" />
+
 @Body
+
+<ToastOutlet />
diff --git a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandMainLayout.razor b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandMainLayout.razor
index 6843358..5a05432 100644
--- a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandMainLayout.razor
+++ b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/OutOfBandMainLayout.razor
@@ -1,8 +1,12 @@
 @inherits LayoutComponentBase
 <header class="container p-3 bg-secondary text-white shadow">
     This header contains content that can be updated out of bounds:
-    <SectionOutlet SectionName="toast" />
+    <SectionOutlet SectionName="message" />
 </header>
+
 <main class="container p-3">
     @Body
 </main>
+
+<ToastOutlet />
+
diff --git a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastOutlet.razor b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastOutlet.razor
new file mode 100644
index 0000000..f90a27d
--- /dev/null
+++ b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastOutlet.razor
@@ -0,0 +1,39 @@
+@inherits ConditionalComponentBase
+@inject ToastService ToastService
+@code {
+    protected override void OnInitialized() => ToastService.OnMessagesChanged = StateHasChanged;
+}
+<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3">
+    <HtmxFragment>
+        @if (ToastService.Messages.Count > 0)
+        {
+            <div hx-swap-oob="@SwapStyles.AfterBegin:#toast-container">
+                @foreach (var msg in ToastService.Messages)
+                {
+                    <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
+                        <div class="d-flex">
+                            <div class="toast-body">
+                                @msg
+                            </div>
+                            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                        </div>
+                    </div>
+                }
+            </div>
+        }
+    </HtmxFragment>
+</div>
+<script>
+    document.body.addEventListener('htmx:oobAfterSwap', function (evt) {
+        const toasts = evt.detail.target.querySelectorAll(".toast");
+        for (let i = 0; i < toasts.length; i++) {
+            const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toasts[i])
+            if (!toastBootstrap.isShown()) {
+                toastBootstrap.show();
+                toasts[i].addEventListener('hidden.bs.toast', () => {
+                    toasts[i].remove();
+                });
+            }
+        }
+    });
+</script>
diff --git a/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastService.cs b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastService.cs
new file mode 100644
index 0000000..d1c824f
--- /dev/null
+++ b/samples/HtmxorExamples/Components/Pages/Examples/OutOfBandOutlets/ToastService.cs
@@ -0,0 +1,18 @@
+namespace HtmxorExamples.Components.Pages.Examples.OutOfBandOutlets;
+
+public sealed class ToastService
+{
+	private List<string>? messages;
+
+	internal Action? OnMessagesChanged { get; set; }
+
+	public IReadOnlyList<string> Messages
+		=> messages as IReadOnlyList<string> ?? Array.Empty<string>();
+
+	public void AddToast(string message)
+	{
+		messages ??= new();
+		messages.Add(message);
+		OnMessagesChanged?.Invoke();
+	}
+}
diff --git a/samples/HtmxorExamples/Program.cs b/samples/HtmxorExamples/Program.cs
index 1634400..4131227 100644
--- a/samples/HtmxorExamples/Program.cs
+++ b/samples/HtmxorExamples/Program.cs
@@ -1,8 +1,10 @@
 using HtmxorExamples.Components;
+using HtmxorExamples.Components.Pages.Examples.OutOfBandOutlets;
 
 var builder = WebApplication.CreateBuilder(args);
 
 // Add services to the container.
+builder.Services.AddScoped<ToastService>();
 builder.Services.AddRazorComponents().AddHtmx(options =>
 {
 	// Enabled to support out of band updates