Documentation update, make kt-indicator usable out of the box, standardize class names

www/examples/click-to-edit.md

@@ -0,0 +1,105 @@
+---
+layout: demo_layout.njk
+---
+        
+## Kutty Pattern: Click To Edit
+
+The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh.
+
+* This pattern starts with a UI that shows the details of a contact.  The div has a button that will get the editing UI for the contact from `/contacts/1/edit`
+
+```html
+<div kt-target="this" kt-swap="outerHTML">
+    <div><label>First Name</label>: Joe</div>
+    <div><label>Last Name</label>: Blow</div>
+    <div><label>Email</label>: joe@blow.com</div>
+    <button kt-get="/contact/1/edit" class="btn btn-primary">
+    Click To Edit
+    </button>
+</div>
+```
+
+* This returns a form that can be used to edit the contact
+
+```html
+<form kt-put="/contact/1" kt-target="this" kt-swap="outerHTML">
+  <div>
+    <label>First Name</label>
+    <input type="text" name="firstName" value="Joe">
+  </div>
+  <div class="form-group">
+    <label>Last Name</label>
+    <input type="text" name="lastName" value="Blow">
+  </div>
+  <div class="form-group">
+    <label>Email address</label>
+    <input type="email" name="email" value="joe@blow.com">
+  </div>
+  <button class="btn">Submit</button>
+  <button class="btn" kt-get="/contact/1">Cancel</button>
+</form> 
+```
+
+* The form issues a `PUT` back to `/contacts/1`, following the usual REST-ful pattern.
+
+{% include demo_ui.html.liquid %}
+
+<script>
+    //=========================================================================
+    // Fake Server Side Code
+    //=========================================================================
+
+    // data
+    var contact = {
+        "firstName" : "Joe",
+        "lastName" : "Blow",
+        "email" : "joe@blow.com"
+    };
+
+    // routes
+    init("/contact/1", function(request){
+        return displayTemplate(contact);
+    });
+
+    onGet("/contact/1/edit", function(request){
+        return formTemplate(contact);
+    });
+
+    onPut("/contact/1", function (req, params) {
+        contact.firstName = params['firstName'];
+        contact.lastName = params['lastName'];
+        contact.email = params['email'];
+        return displayTemplate(contact);
+    });
+
+    // templates
+    function formTemplate(contact) {
+return `<form kt-put="/contact/1" kt-target="this" kt-swap="outerHTML">
+  <div>
+    <label>First Name</label>
+    <input type="text" name="firstName" value="${contact.firstName}">
+  </div>
+  <div class="form-group">
+    <label>Last Name</label>
+    <input type="text" name="lastName" value="${contact.lastName}">
+  </div>
+  <div class="form-group">
+    <label>Email address</label>
+    <input type="email" name="email" value="${contact.email}">
+  </div>
+  <button class="btn">Submit</button>
+  <button class="btn" kt-get="/contact/1">Cancel</button>
+</form>`
+    }
+
+    function displayTemplate(contact) {
+        return `<div kt-target="this" kt-swap="outerHTML">
+    <div><label>First Name</label>: ${contact.firstName}</div>
+    <div><label>Last Name</label>: ${contact.lastName}</div>
+    <div><label>Email</label>: ${contact.email}</div>
+    <button kt-get="/contact/1/edit" class="btn btn-primary">
+    Click To Edit
+    </button>
+</div>`;
+    }
+</script>