From a3c9cf6b6a3fe05b8207e703bd6ff16fd51e34f2 Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Thu, 14 May 2020 15:34:47 -0700
Subject: [PATCH] Clean up parameter inclusion logic and update demos to use
 GET where appropriate, rather than hiding from my bad design choices

Added value-select.md demo
---
 src/kutty.js                                  | 15 ++--
 www/attributes/kt-include.md                  |  2 +-
 www/attributes/kt-params.md                   |  4 +-
 www/docs.md                                   | 18 ++---
 www/examples.md                               |  1 +
 www/examples/inline-validation.md             |  8 +--
 www/examples/value-select.md                  | 68 +++++++++++++++++++
 www/js/demo.js                                |  5 +-
 www/js/kutty.js                               | 15 ++--
 www/test/0.0.1-alpha.3/src/kutty.js           | 15 ++--
 .../test/attributes/kt-push-url.js            |  4 ++
 11 files changed, 108 insertions(+), 47 deletions(-)
 create mode 100644 www/examples/value-select.md

diff --git a/src/kutty.js b/src/kutty.js
index 2268bfab..a7dc81cc 100644
--- a/src/kutty.js
+++ b/src/kutty.js
@@ -956,7 +956,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function getInputValues(elt) {
+        function getInputValues(elt, verb) {
             var processed = [];
             var values = {};
             // include the element itself
@@ -971,8 +971,10 @@ var kutty = kutty || (function () {
                 });
             }
 
-            // include the closest form
-            processInputValue(processed, values, closest(elt, 'form'));
+            // for a non-GET include the closest form
+            if (verb !== 'get') {
+                processInputValue(processed, values, closest(elt, 'form'));
+            }
             return values;
         }
 
@@ -1051,12 +1053,7 @@ var kutty = kutty || (function () {
                     return newValues;
                 }
             } else {
-                // By default GETs do not include parameters
-                if (verb === 'get') {
-                    return {};
-                } else {
-                    return inputValues;
-                }
+                return inputValues;
             }
         }
 
diff --git a/www/attributes/kt-include.md b/www/attributes/kt-include.md
index a78e0be9..5b624a22 100644
--- a/www/attributes/kt-include.md
+++ b/www/attributes/kt-include.md
@@ -24,4 +24,4 @@ the value automatically, but it demonstrates the concept.
 
 ### Notes
 
-* `kt-indicator` is inherited and can be placed on a parent element
+* `kt-include` is inherited and can be placed on a parent element
diff --git a/www/attributes/kt-params.md b/www/attributes/kt-params.md
index 953e1f93..b2d0f3f6 100644
--- a/www/attributes/kt-params.md
+++ b/www/attributes/kt-params.md
@@ -9,8 +9,8 @@ The `kt-params` attribute allows you to filter the parameters that will be submi
 
 The possible values of this attribute are:
 
+* `*` - Include all parameters (default)
 * `none` - Include no parameters
-* `*` - Include all parameters
 * `not <param-list>` - Include all except the comma separated list of parameter names
 * `<param-list>` - Include all the comma separated list of parameter names
 
@@ -24,5 +24,3 @@ and included in the URL, as per usual with a `GET`.
 ### Notes
 
 * `kt-params` is inherited and can be placed on a parent element
-* The default value for `GET`'s is `none`, to avoid polluting URLs
-* All other requests default to `*`
\ No newline at end of file
diff --git a/www/docs.md b/www/docs.md
index 2cb71d5c..8ed714f0 100644
--- a/www/docs.md
+++ b/www/docs.md
@@ -20,7 +20,7 @@ title: </> kutty - high power tools for html
   * [targets](#targets)
   * [indicators](#indicators)
   * [swapping](#swapping)
-  * [forms](#forms)
+  * [parameters](#parameters)
 * [history](#history)
 * [requests & responses](#requests)
 * [misc](#misc)
@@ -337,21 +337,21 @@ Note that out of band elements must be in the top level of the response, and not
 If you want to select a subset of the response HTML to swap into the target, you can use the [kt-select](/attributes/kt-select)
 attribute, which takes a CSS selector and selects the matching elements from the response.
 
-### <a name="forms"></a> [Forms & Input Values](#forms)
+### <a name="parameters"></a> [Parameters](#parameters)
 
-By default, an element that causes a request will include its value if it has one.  
+By default, an element that causes a request will include its value if it has one.  If the element is a form it
+will include the values of all inputs within it.
 
-Additionally, if the element is within a form, the values of all the inputs in the form will be included in the request.
+Additionally, if the element causes a non-`GET` request, the values of all the inputs of the nearest enclosing form
+will be included.
 
 If you wish to include the values of other elements, you can use the [kt-include](/attributes/kt-include) attribute
 with a CSS selector of all the elements whose values you want to include in the request.
 
-If you wish to filter out some of the parameters that will be included you can use the [kt-parameters](/attributes/kt-parameters)
-attribute to do so.  Note that by default all `GET` requests will filter out all parameters (this avoids accidentally
-polluting URLs).
+If you wish to filter out some parameters you can use the [kt-parameters](/attributes/kt-parameters) attribute.
 
-Finally, if you want to programatically modify the arguments, you can use the [configRequest.kutty](/events#configRequest.kutty) event to
-do so.
+Finally, if you want to programatically modify the parameters, you can use the [configRequest.kutty](/events#configRequest.kutty) 
+event.
 
 ## <a name="history"></a> [History Support](#history)
 
diff --git a/www/examples.md b/www/examples.md
index e8f8888b..c35df5a3 100644
--- a/www/examples.md
+++ b/www/examples.md
@@ -19,3 +19,4 @@ You can copy and paste them and then adjust them for your needs.
 | [Infinite Scroll](/examples/infinite-scroll) | Demonstrates infinite scrolling of a page
 | [Active Search](/examples/active-search) | Demonstrates the active search box pattern
 | [Progress Bar](/examples/progress-bar) | Demonstrates a job-runner like progress bar
+| [Value Select](/examples/value-select) | Demonstrates making the values of a select dependent on another select
diff --git a/www/examples/inline-validation.md b/www/examples/inline-validation.md
index 5af27f0e..bbb96f6c 100644
--- a/www/examples/inline-validation.md
+++ b/www/examples/inline-validation.md
@@ -80,8 +80,6 @@ Below is a working demo of this example.  The only email that will be accepted i
 
 <script>
 
-    server.autoRespondAfter = 2000; // longer response for more drama
-
     //=========================================================================
     // Fake Server Side Code
     //=========================================================================
@@ -95,7 +93,7 @@ Below is a working demo of this example.  The only email that will be accepted i
       return formTemplate();
     });
     
-    onPost("/contact/email", function(request, params){
+    onGet(/\/contact\/email.*/, function(request, params){
         var email = params['email'];
         if(!/\S+@\S+\.\S+/.test(email)) {
           return emailInputTemplate(email, "Please enter a valid email address");
@@ -111,7 +109,7 @@ Below is a working demo of this example.  The only email that will be accepted i
       return `<h3>Signup Form</h3><form ic-post-to="/contact">
   <div kt-target="this" kt-swap="outerHTML">
     <label>Email Address</label>
-    <input name="email" kt-post="/contact/email" kt-indicator="#ind">
+    <input name="email" kt-get="/contact/email" kt-indicator="#ind">
     <img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
   </div>
   <div class="form-group">
@@ -129,7 +127,7 @@ Below is a working demo of this example.  The only email that will be accepted i
         function emailInputTemplate(val, errorMsg) {
             return `<div kt-target="this" kt-swap="outerHTML" class="${errorMsg ? "error" : "valid"}">
   <label>Email Address</label>
-  <input name="email" kt-post="/contact/email" kt-indicator="#ind" value="${val}">
+  <input name="email" kt-get="/contact/email" kt-indicator="#ind" value="${val}">
   <img id="ind" src="/img/bars.svg" class="kutty-indicator"/>
   ${errorMsg ? ("<div class='error-message'>" + errorMsg + "</div>") : ""}
 </div>`;
diff --git a/www/examples/value-select.md b/www/examples/value-select.md
new file mode 100644
index 00000000..f252b2d0
--- /dev/null
+++ b/www/examples/value-select.md
@@ -0,0 +1,68 @@
+---
+layout: demo_layout.njk
+---
+        
+## Dependent Select
+
+
+{% include demo_ui.html.liquid %}
+
+<script>
+
+    //=========================================================================
+    // Fake Server Side Code
+    //=========================================================================
+
+    // routes
+    init("/demo", function(request, params){
+      return formTemplate();
+    });
+    
+    onGet(/models.*/, function (request, params) {
+        var make = dataStore.findMake(params['make']);
+        return modelOptionsTemplate(make['models']);
+    });
+    
+    // templates
+    function formTemplate() {
+      return `  <h3>Pick A Make/Model</h3>              
+<form>
+  <div>
+    <label >Make</label>
+    <select name="make" kt-get="/models" kt-target="#models" kt-indicator=".kutty-indicator">
+      <option value="audi">Audi</option>
+      <option value="toyota">Toyota</option>
+      <option value="bmw">BMW</option>
+    </select>
+  </div>
+  <div>
+    <label>Model</label>
+    <select id="models" name="model">
+      <option value="a1">A1</option>
+      <option value="a3">A3</option>
+      <option value="a6">A6</option>
+    </select>
+    <img class="kutty-indicator" width="20" src="/img/bars.svg">    
+  </div>
+</form>`;
+    }
+
+    function modelOptionsTemplate(make) {
+      return make.map(function(val) {
+        return "<option value='" + val + "'>" + val +"</option>";
+      }).join("\n");
+    }
+
+    var dataStore = function(){
+      var data = {
+        audi : { models : ["A1", "A4", "A6"] },
+        toyota : { models : ["Landcruiser", "Landcruiser", "Landcruiser"] },
+        bmw : { models : ["325i", "325ix", "X5"] }
+      };
+      return {
+        findMake : function(make) {
+          return data[make];
+        }
+      }
+    }()
+</script>
diff --git a/www/js/demo.js b/www/js/demo.js
index 4a9aaff3..e8d15ecb 100644
--- a/www/js/demo.js
+++ b/www/js/demo.js
@@ -125,7 +125,8 @@ function pushActivityChip(name, id, content) {
     if (content.length > 750) {
         content = content.substr(0, 750) + "...";
     }
-    document.getElementById("demo-current-request").insertAdjacentHTML("afterbegin", `<div id="${id}">${content}</div>`);
+    var contentDiv = `<div id="${id}">${content}</div>`;
+    document.getElementById("demo-current-request").insertAdjacentHTML("afterbegin", contentDiv);
     showTimelineEntry(id);
     Prism.highlightAll();
 }
@@ -158,7 +159,7 @@ function demoResponseTemplate(details){
   </div>
   <div>
   <b>Response</b>
-  <pre class="language-html"><code class="language-html">${escapeHtml(details.response)}</code> </pre>  
+  <pre class="language-html"><code class="language-html">${escapeHtml(details.xhr.response)}</code> </pre>  
   </div>
 </span>`;
 }
\ No newline at end of file
diff --git a/www/js/kutty.js b/www/js/kutty.js
index 2268bfab..a7dc81cc 100644
--- a/www/js/kutty.js
+++ b/www/js/kutty.js
@@ -956,7 +956,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function getInputValues(elt) {
+        function getInputValues(elt, verb) {
             var processed = [];
             var values = {};
             // include the element itself
@@ -971,8 +971,10 @@ var kutty = kutty || (function () {
                 });
             }
 
-            // include the closest form
-            processInputValue(processed, values, closest(elt, 'form'));
+            // for a non-GET include the closest form
+            if (verb !== 'get') {
+                processInputValue(processed, values, closest(elt, 'form'));
+            }
             return values;
         }
 
@@ -1051,12 +1053,7 @@ var kutty = kutty || (function () {
                     return newValues;
                 }
             } else {
-                // By default GETs do not include parameters
-                if (verb === 'get') {
-                    return {};
-                } else {
-                    return inputValues;
-                }
+                return inputValues;
             }
         }
 
diff --git a/www/test/0.0.1-alpha.3/src/kutty.js b/www/test/0.0.1-alpha.3/src/kutty.js
index 2268bfab..a7dc81cc 100644
--- a/www/test/0.0.1-alpha.3/src/kutty.js
+++ b/www/test/0.0.1-alpha.3/src/kutty.js
@@ -956,7 +956,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function getInputValues(elt) {
+        function getInputValues(elt, verb) {
             var processed = [];
             var values = {};
             // include the element itself
@@ -971,8 +971,10 @@ var kutty = kutty || (function () {
                 });
             }
 
-            // include the closest form
-            processInputValue(processed, values, closest(elt, 'form'));
+            // for a non-GET include the closest form
+            if (verb !== 'get') {
+                processInputValue(processed, values, closest(elt, 'form'));
+            }
             return values;
         }
 
@@ -1051,12 +1053,7 @@ var kutty = kutty || (function () {
                     return newValues;
                 }
             } else {
-                // By default GETs do not include parameters
-                if (verb === 'get') {
-                    return {};
-                } else {
-                    return inputValues;
-                }
+                return inputValues;
             }
         }
 
diff --git a/www/test/0.0.1-alpha.3/test/attributes/kt-push-url.js b/www/test/0.0.1-alpha.3/test/attributes/kt-push-url.js
index c1763e2b..a5fa2368 100644
--- a/www/test/0.0.1-alpha.3/test/attributes/kt-push-url.js
+++ b/www/test/0.0.1-alpha.3/test/attributes/kt-push-url.js
@@ -110,10 +110,14 @@ describe("kt-push-url attribute", function() {
         for (var i = 0; i < 10; i++) {
             array.push(entry);
         }
+        var start = performance.now();
         var string = JSON.stringify(array);
         localStorage.setItem(KUTTY_HISTORY_CACHE, string);
         var reReadString = localStorage.getItem(KUTTY_HISTORY_CACHE);
         var finalJson = JSON.parse(reReadString);
+        var end = performance.now();
+        var timeInMs = end - start;
+        chai.assert(timeInMs < 300, "Should take less than 300ms on most platforms");
     })
 
 });
\ No newline at end of file