diff --git a/www/attributes/kt-prompt.md b/www/attributes/kt-prompt.md new file mode 100644 index 00000000..cce04cfd --- /dev/null +++ b/www/attributes/kt-prompt.md @@ -0,0 +1,21 @@ +--- +layout: layout.njk +title: kutty - kt-prompt +--- + +## `kt-prompt` + +The `kt-prompt` attribute allows you to show a prompt before issuing a request. The value of +the prompt will be included in the requst in the `X-KT-Prompt` header. + +Here is an example: + +```html + +``` + +### Notes + +* `kt-prompt` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-push-url.md b/www/attributes/kt-push-url.md new file mode 100644 index 00000000..03d3a047 --- /dev/null +++ b/www/attributes/kt-push-url.md @@ -0,0 +1,26 @@ +--- +layout: layout.njk +title: kutty - kt-push-url +--- + +## `kt-push-url` + +The `kt-push-url` attribute allows you to "push" a new entry into the browser location bar, which creates +a new history entry, allowing back-button and general history navigation. The possible values of this +attribute are `true` and `false`. + +Here is an example: + +```html +
+ Go to My Account +
+``` + +This will cause kutty to snapshot the current DOM to `localStorage` and push the URL `/account' into the browser +location bar. + +### Notes + +* `kt-push-url` is inherited and can be placed on a parent element +* see also the `X-KT-Push` response header diff --git a/www/attributes/kt-select.md b/www/attributes/kt-select.md new file mode 100644 index 00000000..8a81143c --- /dev/null +++ b/www/attributes/kt-select.md @@ -0,0 +1,26 @@ +--- +layout: layout.njk +title: kutty - kt-select +--- + +## `kt-select` + +The `kt-select` attribute allows you to select the content you want swapped from a response. The value of + this attribute is a CSS query selector of the element or elements to select from the response. + +Here is an example that selects a subset of the response content: + +```html +
+ +
+``` + +So this button will issue a `GET` to `/info` and then select the element with the id `info-detail`, +which will replace the entire button in the DOM. + +### Notes + +* `kt-select` is inherited and can be placed on a parent element diff --git a/www/attributes/kt-sse-src.md b/www/attributes/kt-sse-src.md new file mode 100644 index 00000000..661e90b6 --- /dev/null +++ b/www/attributes/kt-sse-src.md @@ -0,0 +1,24 @@ +--- +layout: layout.njk +title: kutty - kt-sse-src +--- + +## `kt-sse-src` + +The `kt-sse-src` attribute establishes a [Server Sent Event](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) +`EventSource`, allowing children of the element to register for server sent event triggers. + +```html +
+
+ ... +
+
+``` + +This example establishes an SSE connection to the `event_stream` end point which then triggers +a `GET` to the `/chatroom` url whenever the `chatter` event is seen. + +### Notes + +* `kt-sse-src` is not inherited diff --git a/www/attributes/kt-swap-oob.md b/www/attributes/kt-swap-oob.md new file mode 100644 index 00000000..c772a23d --- /dev/null +++ b/www/attributes/kt-swap-oob.md @@ -0,0 +1,30 @@ +--- +layout: layout.njk +title: kutty - kt-swap-oob +--- + +## `kt-swap-oob` + +The `kt-swap-oob` attribute allows you specify that some content in a response should be swapped into +the DOM somewhere other than the target, that is "Out of Band". This allows you to piggy back updates +to other element updates on a response. + +Consider the following response HTML: + +```html +
+ ... +
+
+ Saved! +
+ +``` + +The first div will be swapped into the target the usual manner. The second div, however, will be swapped in +as a replacement for the element with the id `alerts`, and will not end up in the target. + +### Notes + +* `kt-swap-oob` is not inherited +* `kt-swap-oob` is only supported on top level elements in the response, not children diff --git a/www/attributes/kt-target.md b/www/attributes/kt-target.md new file mode 100644 index 00000000..f12b1833 --- /dev/null +++ b/www/attributes/kt-target.md @@ -0,0 +1,27 @@ +--- +layout: layout.njk +title: kutty - kt-target +--- + +## `kt-target` + +The `kt-target` attribute allows you to target a different element than the one issuing the AJAX +request. The value of this attribute is a CSS query selector of the element to target when swapping +new content into the DOM. + +Here is an example that targets a div: + +```html +
+
+ +
+``` + +The response from the `/register` url will be appended to the `div` with the id `response-div`. + +### Notes + +* `kt-target` is inherited and can be placed on a parent element diff --git a/www/reference.md b/www/reference.md index 6cc6cc4f..cceac890 100644 --- a/www/reference.md +++ b/www/reference.md @@ -10,28 +10,28 @@ title: kutty - Attributes | [kt-boost](/attributes/kt-boost) | converts anchors and forms to use AJAX requests | [kt-classes](/attributes/kt-classes) | timed modification of classes on an element | [kt-confirm](/attributes/kt-confirm) | shows a confim() dialog before issuing a request -| [kt-delete](/attributes/kt-delete) | issue a `DELETE` to the specified URL +| [kt-delete](/attributes/kt-delete) | issues a `DELETE` to the specified URL | [kt-error-url](/attributes/kt-error-url) | a URL to send client-side errors to -| [kt-get](/attributes/kt-get) | issue a `GET` to the specified URL +| [kt-get](/attributes/kt-get) | issues a `GET` to the specified URL | [kt-history-elt](/attributes/kt-history-elt) | the element to snapshot and restore during history navigation -| [kt-include](/attributes/kt-include) | include additional data in AJAX requests +| [kt-include](/attributes/kt-include) | includes additional data in AJAX requests | [kt-indicator](/attributes/kt-indicator) | the element to put the `kutty-request` class on during the AJAX request -| [kt-patch](/attributes/kt-patch) | TODO - Description -| [kt-params](/attributes/kt-params) | filter the parameters that will be submitted with a request -| [kt-post](/attributes/kt-post) | TODO - Description -| kt-prompt | TODO - Description -| kt-push-url | TODO - Description -| [kt-put](/attributes/kt-put) | TODO - Description -| kt-select | TODO - Description -| kt-sse-src | TODO - Description -| [kt-swap](/attributes/kt-swap) | TODO - Description -| kt-swap-oob | TODO - Description -| kt-target | TODO - Description +| [kt-patch](/attributes/kt-patch) | issues a `PATCH` to the specified URL +| [kt-params](/attributes/kt-params) | filters the parameters that will be submitted with a request +| [kt-post](/attributes/kt-post) | issues a `POST` to the specified URL +| [kt-prompt](/attributes/kt-prompt) | shows a prompt before submitting a request +| [kt-push-url](/attributes/kt-push-url) | pushes the URL into the location bar, creating a new history entry +| [kt-put](/attributes/kt-put) | issues a `PUT` to the specified URL +| [kt-select](/attributes/kt-select) | selects a subset of the server response to process +| [kt-sse-src](/attributes/kt-sse-src) | establishes an [SSE](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) source for events +| [kt-swap](/attributes/kt-swap) | controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd') +| [kt-swap-oob](/attributes/kt-swap) | marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target +| [kt-target](/attributes/kt-target) | specifies the target element to be swapped | kt-trigger | TODO - Description ## CSS Class Reference -| Attribute | Description | +| Class | Description | |-----------|-------------| | kutty-request | TODO | kutty-indicator | TODO