Merge remote-tracking branch 'origin/master'

# Conflicts:
#	www/examples/infinite-scroll.md

5 files changed, 142 insertions, 2 deletions

diff --git a/www/css/site.scss b/www/css/site.scss
index c7111b52..12575c35 100644
--- a/www/css/site.scss
+++ b/www/css/site.scss
@@ -260,4 +260,9 @@ th {
 
 pre {
     overflow: auto;
+}
+
+table.delete-row-example .kutty-swapping {
+  opacity: 0;
+  transition: visibility 0s 1s, opacity 1s linear;
 }
\ No newline at end of file
diff --git a/www/examples.md b/www/examples.md
index 0e48a897..67c6390f 100644
--- a/www/examples.md
+++ b/www/examples.md
@@ -14,6 +14,7 @@ You can copy and paste them and then adjust them for your needs.
 | [Click To Edit](/examples/click-to-edit) | Demonstrates inline editing of a data object
 | [Bulk Update](/examples/bulk-update) | Demonstrates bulk updating of multiple rows of data
 | [Click To Load](/examples/click-to-load) | Demonstrates clicking to load more rows in a table
+| [Delete Row](/examples/delete-row) | Demonstrates row deletion in a table
 | [Lazy Loading](/examples/lazy-load) | Demonstrates how to lazy load content
 | [Inline Validation](/examples/inline-validation) | Demonstrates how to do inline field validation
 | [Infinite Scroll](/examples/infinite-scroll) | Demonstrates infinite scrolling of a page
diff --git a/www/examples/delete-row.md b/www/examples/delete-row.md
new file mode 100644
index 00000000..b556ac85
--- /dev/null
+++ b/www/examples/delete-row.md
@@ -0,0 +1,127 @@
+---
+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 `kt-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" kt-delete="/contact/1">
+      Delete
+    </button>
+  </td>
+</tr>
+```
+
+In order to tell where to put this empty content, the table body has an `kt-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 `kt-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 `kt-confirm` attribute so that a confirmation popup is shown before triggering the action for real.
+
+```html
+<table class="table delete-row-example">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Status</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody kt-confirm="Are you sure?" kt-target="closest tr" kt-swap="outerHTML swap:1s">
+    ...
+  </tbody>
+</table>
+```
+
+{% include demo_ui.html.liquid %}
+
+<script>
+    //=========================================================================
+    // Fake Server Side Code
+    //=========================================================================
+
+    // data
+    var contacts = [
+      {
+        name: "Joe Smith",
+        email: "joe@smith.org",
+        status: "Active",
+      },
+      {
+        name: "Angie MacDowell",
+        email: "angie@macdowell.org",
+        status: "Active",
+      },
+      {
+        name: "Fuqua Tarkenton",
+        email: "fuqua@tarkenton.org",
+        status: "Active",
+      },
+      {
+        name: "Kim Yee",
+        email: "kim@yee.org",
+        status: "Inactive",
+      },
+    ];
+
+    // routes
+    init("/demo", function(request, params){
+      return tableTemplate(contacts);
+    });
+
+    onDelete(/\/contact\/\d+/, function(request, params){
+      return "";
+    });
+
+    // templates
+    function rowTemplate(contact, i) {
+      return `<tr>
+      <td>${contact["name"]}</td>
+      <td>${contact["email"]}</td>
+      <td>${contact["status"]}</td>
+      <td>
+        <button class="btn btn-danger" kt-delete="/contact/${i}">
+          Delete
+        </button>
+      </td>
+    </tr>`;
+    }
+
+    function tableTemplate(contacts) {
+      var rows = "";
+
+      for (var i = 0; i < contacts.length; i++) {
+        rows += rowTemplate(contacts[i], i, "");
+      }
+
+      return `
+<table class="table delete-row-example">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Status</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody kt-confirm="Are you sure?" kt-target="closest tr" kt-swap="outerHTML swap:1s">
+    ${rows}
+  </tbody>
+</table>`;
+    }
+
+</script>
+
+
diff --git a/www/examples/infinite-scroll.md b/www/examples/infinite-scroll.md
index 2b71e080..0dd2cb97 100644
--- a/www/examples/infinite-scroll.md
+++ b/www/examples/infinite-scroll.md
@@ -6,7 +6,7 @@ layout: demo_layout.njk
 
 The infinite scroll pattern provides a way to load content dynamically on user scrolling action.
 
-Let's focus on the final row:
+Let's focus on the final row (or the last element of your content):
 
 ```html
 <tr hx-get="/contacts/?page=2"
@@ -18,7 +18,7 @@ Let's focus on the final row:
 </tr>
 ```
 
-This row (or the last element of your content) contains a listener which, when scrolled into view, will trigger a request. The result is then appended after it.
+This last element contains a listener which, when scrolled into view, will trigger a request. The result is then appended after it.
 The last element of the results will itself contain the listener to load the *next* page of results, and so on.
 
 {% include demo_ui.html.liquid %}
diff --git a/www/js/demo.js b/www/js/demo.js
index e8d15ecb..a51fa3e6 100644
--- a/www/js/demo.js
+++ b/www/js/demo.js
@@ -88,6 +88,13 @@ function onPost(path, response) {
     });
 }
 
+function onDelete(path, response) {
+    server.respondWith("DELETE", path, function(request){
+        let body = response(request, params(request));
+        request.respond(200, {}, body);
+    });
+}
+
 //====================================
 // Activites
 //====================================