From c0d262a478fb6053aad9adc20e5dead5bb4b0fe4 Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Sat, 23 May 2020 12:28:41 -0700
Subject: [PATCH] clean up delete row demo and add fade

---
 www/examples/delete-row.md | 69 +++++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 27 deletions(-)

diff --git a/www/examples/delete-row.md b/www/examples/delete-row.md
index 09434ac6..fdabbcd6 100644
--- a/www/examples/delete-row.md
+++ b/www/examples/delete-row.md
@@ -4,30 +4,8 @@ layout: demo_layout.njk
 
 ## Delete Row
 
-This example shows how to implement a delete button that removes a table row upon completion.
-
-Each row has a button with a `hx-delete` attribute containing the url on which to issue a DELETE request to delete the row from the server.
-This request should respond with empty content.
-
-```html
-<tr>
-  <td>Angie MacDowell</td>
-  <td>angie@macdowell.org</td>
-  <td>Active</td>
-  <td>
-    <button class="btn btn-danger" hx-delete="/contact/1">
-      Delete
-    </button>
-  </td>
-</tr>
-```
-
-In order to tell where to put this empty content, the table body has an `hx-target` attribute set to `closest tr` . This will target the row containing the button which triggred the action, replacing it by... nothing.
-
-It also has a `hx-swap` attribute set to `outerHTML 1s` in order to replace the row itself, with a 1 second delay allowing for a CSS3 transition to fade the row out.
-During this one second delay, the class "kutty-swapping" is added to `tr` element about to be replaced.
-
-Finally, the body also has a `hx-confirm` attribute so that a confirmation popup is shown before triggering the action for real.
+This example shows how to implement a delete button that removes a table row upon completion.  First let's look at the
+table body:
 
 ```html
 <table class="table delete-row-example">
@@ -45,6 +23,45 @@ Finally, the body also has a `hx-confirm` attribute so that a confirmation popup
 </table>
 ```
 
+The table body has a [`hx-confirm`](/attributes/hx-confirm) attribute to confirm the delete action.  It also
+set the target to be the `closest tr` that is, the closest table row, for all the buttons ([`hx-target`](/attributes/hx-target) 
+is inherited from parents in the DOM.)  The swap specification in [`hx-swap`](/attributes/hx-swap) says to swap the
+entire target out and to wait 1 second after receiving a response.  This last bit is so that we can use the following
+CSS:
+
+```css
+tr.htmx-swapping td {
+  opacity: 0;
+  transition: opacity 1s ease-out;
+}
+```
+
+To fade the row out before it is swapped/removed.
+
+Each row has a button with a [`hx-delete`](/attributes/hx-delete) attribute containing the url on which to issue a `DELETE` 
+request to delete the row from the server. This request responds with empty content, indicating that the row should
+be replaced with nothing.
+
+```html
+<tr>
+  <td>Angie MacDowell</td>
+  <td>angie@macdowell.org</td>
+  <td>Active</td>
+  <td>
+    <button class="btn btn-danger" hx-delete="/contact/1">
+      Delete
+    </button>
+  </td>
+</tr>
+```
+
+<style>
+tr.htmx-swapping td {
+  opacity: 0;
+  transition: opacity 1s ease-out;
+}
+</style>
+
 {% include demo_ui.html.liquid %}
 
 <script>
@@ -122,6 +139,4 @@ Finally, the body also has a `hx-confirm` attribute so that a confirmation popup
 </table>`;
     }
 
-</script>
-
-
+</script>
\ No newline at end of file