From dfb3b6b8ec16063c518b1114b31372169f858c06 Mon Sep 17 00:00:00 2001 From: carson Date: Sat, 9 May 2020 08:16:52 -0700 Subject: [PATCH] docs + `kt-params` attribute --- src/kutty.js | 40 ++++++++++++++++--- .../{demo_ui.liquid => demo_ui.html.liquid} | 0 www/_includes/layout.njk | 6 +-- www/{docs => }/attributes.md | 3 +- www/attributes/kt-get.md | 24 +++++++++++ www/attributes/kt-params.md | 27 +++++++++++++ www/{docs => }/events.md | 0 www/{docs => }/headers.md | 0 www/patterns/click-to-edit.md | 2 +- 9 files changed, 92 insertions(+), 10 deletions(-) rename www/_includes/{demo_ui.liquid => demo_ui.html.liquid} (100%) rename www/{docs => }/attributes.md (85%) create mode 100644 www/attributes/kt-get.md create mode 100644 www/attributes/kt-params.md rename www/{docs => }/events.md (100%) rename www/{docs => }/headers.md (100%) diff --git a/src/kutty.js b/src/kutty.js index dc4b8688..1e18a7d0 100644 --- a/src/kutty.js +++ b/src/kutty.js @@ -812,6 +812,36 @@ var kutty = kutty || (function () { } } + function filterValues(inputValues, elt, verb) { + var paramsValue = getClosestAttributeValue(elt, "kt-params"); + if (paramsValue) { + if (paramsValue === "none") { + return {}; + } else if (paramsValue === "*") { + return inputValues; + } else if(paramsValue.indexOf("not ") === 0) { + forEach(paramsValue.substr(4).split(","), function (value) { + value = value.trim(); + delete inputValues[value]; + }); + return inputValues; + } else { + var newValues = {} + forEach(paramsValue.split(","), function (value) { + newValues[value] = inputValues[value]; + }); + return newValues; + } + } else { + // By default GET does not include parameters + if (verb === 'get') { + return {}; + } else { + return inputValues; + } + } + } + function issueAjaxRequest(elt, verb, path, eventTarget) { var eltData = getInternalData(elt); if (eltData.requestInFlight) { @@ -836,16 +866,16 @@ var kutty = kutty || (function () { var xhr = new XMLHttpRequest(); - var inputValues = getInputValues(elt); + var inputValues = getInputValues(elt, verb); + var inputValues = filterValues(inputValues, elt, verb); + if(!triggerEvent(elt, 'values.kutty', {values: inputValues, target:target})) return endRequestLock(); // request type var requestURL; if (verb === 'get') { - var includeQueryParams = getClosestAttributeValue("kt-get-params") === "true"; - // TODO allow get parameter filtering - requestURL = path + (includeQueryParams ? "?" + urlEncode(inputValues) : ""); - xhr.open('GET', requestURL, true); + var noValues = Object.keys(inputValues).length === 0; + xhr.open('GET', path + (noValues ? "" : "?" + urlEncode(inputValues)), true); } else { requestURL = path; xhr.open('POST', requestURL, true); diff --git a/www/_includes/demo_ui.liquid b/www/_includes/demo_ui.html.liquid similarity index 100% rename from www/_includes/demo_ui.liquid rename to www/_includes/demo_ui.html.liquid diff --git a/www/_includes/layout.njk b/www/_includes/layout.njk index 6b46d373..7f61c952 100644 --- a/www/_includes/layout.njk +++ b/www/_includes/layout.njk @@ -35,13 +35,13 @@ docs
- attributes + attributes
- events + events
- headers + headers
patterns diff --git a/www/docs/attributes.md b/www/attributes.md similarity index 85% rename from www/docs/attributes.md rename to www/attributes.md index 609321d4..ac602f53 100644 --- a/www/docs/attributes.md +++ b/www/attributes.md @@ -12,11 +12,12 @@ title: kutty - Attributes | kt-confirm | TODO - Description | kt-delete | TODO - Description | kt-error-url | TODO - Description -| kt-get | TODO - Description +| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL | kt-history-element | TODO - Description | kt-include | TODO - Description | kt-indicator | TODO - Description | kt-patch | TODO - Description +| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request | kt-post | TODO - Description | kt-prompt | TODO - Description | kt-push-url | TODO - Description diff --git a/www/attributes/kt-get.md b/www/attributes/kt-get.md new file mode 100644 index 00000000..045c8379 --- /dev/null +++ b/www/attributes/kt-get.md @@ -0,0 +1,24 @@ +--- +layout: layout.njk +title: kutty - kt-get +--- + +## `kt-get` + +The `kt-get` attribute will cause an element to issue a `GET` to the specified URL and swap +the HTML into the DOM using a swap strategy: + +```html +
Get Some HTML
+``` + +This example will cause the `div` to issue a `GET` to `/example` and swap the returned HTML into + the `innerHTML` of the `div`. + +### Notes + +* By default `kt-get` does not include any parameters. You can use the [kt-params](/attributes/kt-params) + attribute to change this +* You can control the target of the swap using the [kt-target](/attributes/kt-target) attribute +* You can control the swap strategy by using the [kt-swa](/attributes/kt-swap) attribute +* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute \ No newline at end of file diff --git a/www/attributes/kt-params.md b/www/attributes/kt-params.md new file mode 100644 index 00000000..3738ac93 --- /dev/null +++ b/www/attributes/kt-params.md @@ -0,0 +1,27 @@ +--- +layout: layout.njk +title: kutty - kt-params +--- + +## `kt-params` + +The `kt-params` attribute allows you to filter the parameters that will be submitted with an AJAX request. + +The possible values of this attribute are: + +* `none` - Include no parameters +* `*` - Include all parameters +* `not ` - Include all except the comma separated list of parameter names +* `` - Include all the comma separated list of parameter names + +```html +
Get Some HTML, Including Params
+``` + +This div will include all the parameters that a `POST` would, but they will be URL encoded +and included in the URL, as per usual with a `GET`. + +### Notes + +* The default value for all `GET`'s is `none`, to avoid polluting URLs +* All other requests default to `*` \ No newline at end of file diff --git a/www/docs/events.md b/www/events.md similarity index 100% rename from www/docs/events.md rename to www/events.md diff --git a/www/docs/headers.md b/www/headers.md similarity index 100% rename from www/docs/headers.md rename to www/headers.md diff --git a/www/patterns/click-to-edit.md b/www/patterns/click-to-edit.md index ff554178..eac96d35 100644 --- a/www/patterns/click-to-edit.md +++ b/www/patterns/click-to-edit.md @@ -42,7 +42,7 @@ The click to edit pattern provides a way to offer inline editing of all or part * The form issues a `PUT` back to `/contacts/1`, following the usual REST-ful pattern. -{% include demo_ui %} +{% include demo_ui.html.liquid %}