docs + kt-params attribute

This commit is contained in:
carson 2020-05-09 08:16:52 -07:00
parent a0d9e8ffd8
commit dfb3b6b8ec
9 changed files with 92 additions and 10 deletions

View File

@ -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);

View File

@ -35,13 +35,13 @@
<a href="/docs">docs</a>
</div>
<div class="1 col">
<a href="/docs/attributes">attributes</a>
<a href="/attributes">attributes</a>
</div>
<div class="1 col">
<a href="/docs/events">events</a>
<a href="/events">events</a>
</div>
<div class="1 col">
<a href="/docs/headers">headers</a>
<a href="/headers">headers</a>
</div>
<div class="1 col">
<a href="/patterns">patterns</a>

View File

@ -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

24
www/attributes/kt-get.md Normal file
View File

@ -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
<div kt-get="/example">Get Some HTML</div>
```
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

View File

@ -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 <param-list>` - Include all except the comma separated list of parameter names
* `<param-list>` - Include all the comma separated list of parameter names
```html
<div kt-get="/example" kt-params="*">Get Some HTML, Including Params</div>
```
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 `*`

View File

@ -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 %}
<script>
//=========================================================================