From 8826e92517515dc30e2aa9a1b7e28ab49ea0bd95 Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Sat, 25 Sep 2021 17:17:35 -0600
Subject: [PATCH] sweet alert example

---
 www/examples.md         |  1 +
 www/examples/confirm.md | 62 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 www/examples/confirm.md

diff --git a/www/examples.md b/www/examples.md
index be1c31a8..09c86364 100644
--- a/www/examples.md
+++ b/www/examples.md
@@ -37,3 +37,4 @@ You can copy and paste them and then adjust them for your needs.
 | [Keyboard Shortcuts](/examples/keyboard-shortcuts) | Demonstrates how to create keyboard shortcuts for htmx enabled elements
 | [Sortable](/examples/sortable) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering
 | [Updating Other Content](/examples/update-other-content) | Demonstrates how to update content beyond just the target elements
+| [Confirm](/examples/confirm) | Demonstrates how to implement a custom confirmation dialog with htmx
diff --git a/www/examples/confirm.md b/www/examples/confirm.md
new file mode 100644
index 00000000..c5bc9372
--- /dev/null
+++ b/www/examples/confirm.md
@@ -0,0 +1,62 @@
+---
+layout: demo_layout.njk
+---
+        
+## A Customized Confirmation UI
+
+htmx supports the [`hx-confirm`](/attributes/hx-confirm) attribute to provide a simple mechanism for confirming a user action.  This uses the default `confirm()` function in javascript which, while trusty, may not be consistent with your applications UX.
+
+In this example we will see how to use [sweetalert2](https://sweetalert2.github.io) to implement a custom confirmation dialog.
+
+```html
+<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<button hx-trigger='confirmed'
+        hx-get="/confirmed"
+        _="on click
+             call Swal.fire({title: 'Confirm', text:'Do you want to continue?'})
+             if result.isConfirmed trigger confirmed">
+  Click Me
+</button>
+```
+
+The technique here is to make the button issue a request on the `confirmed` event, rather than a click.
+
+We then add some hyperscript to invoke Sweet Alert 2 on a click, asking for confirmation.  If the user confirms
+the dialog, we trigger the `confirmed` event, which then triggers the htmx request.
+
+Note that we are taking advantage of the fact that hyperscript is (async-transparent)[https://hyperscript.org/docs/#async]
+and automatically resolves the Promise returned by `Swal.fire()`.
+
+A VanillaJS implementation is left as an exercise for the reader.  :)
+
+{% include demo_ui.html.liquid %}
+
+<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+<script>
+
+    //=========================================================================
+    // Fake Server Side Code
+    //=========================================================================
+
+    // routes
+    init("/demo", function(request, params){
+      return initialUI();
+    });
+    
+    onGet("/confirmed", function (request, params) {
+        return "Confirmed"
+    });
+    
+    // templates
+    function initialUI() {
+      return `<button hx-trigger='confirmed'
+                      hx-get="/confirmed"
+                      _="on click
+                           call Swal.fire({title: 'Confirm', text:'Do you want to continue?'})
+                           if result.isConfirmed trigger confirmed">
+                Click Me
+              </button>`;
+    }
+
+</script>