summaryrefslogtreecommitdiffstatshomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--README.md2
-rw-r--r--package.json2
-rw-r--r--src/kutty.js14
-rw-r--r--test/attributes/kt-swap-oob.js12
-rw-r--r--test/core/api.js2
-rw-r--r--test/core/regressions.js16
-rw-r--r--www/attributes/kt-delete.md4
-rw-r--r--www/attributes/kt-get.md4
-rw-r--r--www/attributes/kt-patch.md8
-rw-r--r--www/attributes/kt-post.md4
-rw-r--r--www/attributes/kt-put.md8
-rw-r--r--www/attributes/kt-swap.md8
-rw-r--r--www/docs.md14
-rw-r--r--www/index.md2
14 files changed, 71 insertions, 29 deletions
diff --git a/README.md b/README.md
index 771bc1df..a1cae483 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,7 @@ Kutty is small ([~6k min.gz'd](https://unpkg.com/kutty.org/dist/)), IE11 compati
```html
<!-- Load from unpkg -->
- <script src="https://unpkg.com/kutty.org@0.0.1"></script>
+ <script src="https://unpkg.com/kutty.org@0.0.2"></script>
<!-- have a button POST a click via AJAX -->
<button kt-post="/clicked" kt-swap="outerHTML">
Click Me
diff --git a/package.json b/package.json
index 91f3a6a7..52b8305c 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"AJAX",
"HTML"
],
- "version": "0.0.1",
+ "version": "0.0.2",
"homepage": "https://kutty.org/",
"bugs": {
"url": "https://github.com/bigskysoftware/kutty/issues"
diff --git a/src/kutty.js b/src/kutty.js
index c06cabad..efa1c771 100644
--- a/src/kutty.js
+++ b/src/kutty.js
@@ -126,6 +126,16 @@ var kutty = kutty || (function () {
return data;
}
+ function toArray(arr) {
+ var returnArr = [];
+ if (arr) {
+ for (var i = 0; i < arr.length; i++) {
+ returnArr.push(arr[i]);
+ }
+ }
+ return returnArr
+ }
+
function forEach(arr, func) {
if (arr) {
for (var i = 0; i < arr.length; i++) {
@@ -318,7 +328,7 @@ var kutty = kutty || (function () {
function handleOutOfBandSwaps(fragment) {
var settleTasks = [];
- forEach(fragment.children, function (child) {
+ forEach(toArray(fragment.children), function (child) {
if (getAttributeValue(child, "kt-swap-oob") === "true") {
var target = getDocument().getElementById(child.id);
if (target) {
@@ -1299,7 +1309,7 @@ var kutty = kutty || (function () {
defaultSwapDelay:0,
defaultSettleDelay:100
},
- version: "0.0.1",
+ version: "0.0.2",
_:internalEval
}
}
diff --git a/test/attributes/kt-swap-oob.js b/test/attributes/kt-swap-oob.js
index c59eacaf..7985b19b 100644
--- a/test/attributes/kt-swap-oob.js
+++ b/test/attributes/kt-swap-oob.js
@@ -18,6 +18,18 @@ describe("kt-swap-oob attribute", function () {
byId("d1").innerHTML.should.equal("Swapped");
})
+ it('handles more than one oob swap properly', function () {
+ this.server.respondWith("GET", "/test", "Clicked<div id='d1' kt-swap-oob='true'>Swapped1</div><div id='d2' kt-swap-oob='true'>Swapped2</div>");
+ var div = make('<div kt-get="/test">click me</div>');
+ make('<div id="d1"></div>');
+ make('<div id="d2"></div>');
+ div.click();
+ this.server.respond();
+ div.innerHTML.should.equal("Clicked");
+ byId("d1").innerHTML.should.equal("Swapped1");
+ byId("d2").innerHTML.should.equal("Swapped2");
+ })
+
it('handles no id match properly', function () {
this.server.respondWith("GET", "/test", "Clicked<div id='d1' kt-swap-oob='true'>Swapped</div>");
var div = make('<div kt-get="/test">click me</div>');
diff --git a/test/core/api.js b/test/core/api.js
index 392623a1..e5f51a26 100644
--- a/test/core/api.js
+++ b/test/core/api.js
@@ -9,7 +9,7 @@ describe("Core kutty API test", function(){
});
it('version is correct', function(){
- kutty.version.should.equal("0.0.1");
+ kutty.version.should.equal("0.0.2");
});
it('onLoad is called... onLoad', function(){
diff --git a/test/core/regressions.js b/test/core/regressions.js
index 6ff675c4..45fa6778 100644
--- a/test/core/regressions.js
+++ b/test/core/regressions.js
@@ -18,5 +18,21 @@ describe("Core kutty Regression Tests", function(){
'</svg>')
});
+ it ('Handles https://github.com/bigskysoftware/kutty/issues/4 properly', function() {
+ this.server.respondWith("GET", "/index2a.php",
+ "<div id='message' kt-swap-oob='true'>I came from message oob swap I should be second</div>" +
+ "<div id='message2' kt-swap-oob='true'>I came from a message2 oob swap I should be third but I am in the wrong spot</div>" +
+ "I'm page2 content (non-swap) I should be first")
+
+ var h1 = make("<h1 kt-get='/index2a.php' kt-target='#page2' kt-trigger='click'>Kutty CLICK ME</h1>" +
+ "<div id='page2' ></div>" +
+ "<div id='message'></div>" +
+ "<div id='message2'></div>")
+ h1.click();
+ this.server.respond();
+ kutty.find("#page2").innerHTML.should.equal("I'm page2 content (non-swap) I should be first")
+ kutty.find("#message").innerHTML.should.equal("I came from message oob swap I should be second")
+ kutty.find("#message2").innerHTML.should.equal("I came from a message2 oob swap I should be third but I am in the wrong spot")
+ });
})
diff --git a/www/attributes/kt-delete.md b/www/attributes/kt-delete.md
index d3a863b2..a41a05a6 100644
--- a/www/attributes/kt-delete.md
+++ b/www/attributes/kt-delete.md
@@ -23,5 +23,5 @@ This example will cause the `button` to issue a `DELETE` to `/account` and swap
* Since most browsers do not support issuing an actual `DELETE`, the request will actually be issued
as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `DELETE`.
* 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
+* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute
+* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute
diff --git a/www/attributes/kt-get.md b/www/attributes/kt-get.md
index a44edac4..e2f5c65c 100644
--- a/www/attributes/kt-get.md
+++ b/www/attributes/kt-get.md
@@ -21,5 +21,5 @@ This example will cause the `div` to issue a `GET` to `/example` and swap the re
* 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
+* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute
+* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute
diff --git a/www/attributes/kt-patch.md b/www/attributes/kt-patch.md
index cb8874d1..7f59ddc1 100644
--- a/www/attributes/kt-patch.md
+++ b/www/attributes/kt-patch.md
@@ -5,7 +5,7 @@ title: </> kutty - kt-patch
## `kt-patch`
-The `kt-patch` attribute will cause an element to issue a `DELETE` to the specified URL and swap
+The `kt-patch` attribute will cause an element to issue a `PATCH` to the specified URL and swap
the HTML into the DOM using a swap strategy:
```html
@@ -21,7 +21,7 @@ This example will cause the `button` to issue a `PATCH` to `/account` and swap t
* `kt-patch` is not inherited
* Since most browsers do not support issuing an actual `PATCH`, the request will actually be issued
- as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `DELETE`.
+ as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `PATCH`.
* 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
+* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute
+* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute
diff --git a/www/attributes/kt-post.md b/www/attributes/kt-post.md
index 83c5f816..6a4d06ef 100644
--- a/www/attributes/kt-post.md
+++ b/www/attributes/kt-post.md
@@ -21,5 +21,5 @@ This example will cause the `button` to issue a `POST` to `/account/enable` and
* `kt-post` is not inherited
* 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
+* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute
+* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute
diff --git a/www/attributes/kt-put.md b/www/attributes/kt-put.md
index 2dd68b08..6aa310f4 100644
--- a/www/attributes/kt-put.md
+++ b/www/attributes/kt-put.md
@@ -5,7 +5,7 @@ title: </> kutty - kt-put
## `kt-put`
-The `kt-put` attribute will cause an element to issue a `DELETE` to the specified URL and swap
+The `kt-put` attribute will cause an element to issue a `PUT` to the specified URL and swap
the HTML into the DOM using a swap strategy:
```html
@@ -21,7 +21,7 @@ This example will cause the `button` to issue a `PUT` to `/account` and swap the
* `kt-put` is not inherited
* Since most browsers do not support issuing an actual `PUT`, the request will actually be issued
- as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `DELETE`.
+ as a `POST`, with the [`X-HTTP-Method-Override`](https://en.wikipedia.org/wiki/List_of_HTTP_header_fields) header set to `PUT`.
* 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
+* You can control the swap strategy by using the [kt-swap](/attributes/kt-swap) attribute
+* You can control what event triggers the request with the [kt-trigger](/attributes/kt-trigger) attribute
diff --git a/www/attributes/kt-swap.md b/www/attributes/kt-swap.md
index 49e6e1e6..577742f2 100644
--- a/www/attributes/kt-swap.md
+++ b/www/attributes/kt-swap.md
@@ -13,9 +13,9 @@ The possible values of this attribute are:
* `innerHTML` - The default, replace the inner html of the target element
* `outerHTML` - Replace the entire target element with the response
* `beforebegin` - Insert the response before the target element
-* `afterdegin` - Insert the response before the first child target element
-* `beforeend` - Insert the response after the last child of target element
-* `afterend` - Insert the response after target element
+* `afterbegin` - Insert the response before the first child of the target element
+* `beforeend` - Insert the response after the last child of the target element
+* `afterend` - Insert the response after the target element
These options are based on standard DOM naming and the
[`Element.insertAdjacentHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)
@@ -52,4 +52,4 @@ These attributes can be used to synchronize kutty with the timing of CSS transit
* `kt-swap` is inherited and can be placed on a parent element
* The default value of this attribute is `innerHTML`
* The default swap delay is 0ms
-* The default settle delay is 100ms \ No newline at end of file
+* The default settle delay is 100ms
diff --git a/www/docs.md b/www/docs.md
index 17c20345..84972594 100644
--- a/www/docs.md
+++ b/www/docs.md
@@ -67,7 +67,7 @@ This tells kutty:
Kutty extends and generalizes the core idea of HTML as a hypertext, opening up many more possibilities directly
within the language:
-* Now any element, not just anchors and forms, can issue a HTTP request
+* Now any element, not just anchors and forms, can issue an HTTP request
* Now any event, not just clicks or form submissions, can trigger requests
* Now any [HTTP verb](https://en.wikipedia.org/wiki/HTTP_Verbs), not just `GET` and `POST`, can be used
* Now any element, not just the entire window, can be the target for update by the request
@@ -91,7 +91,7 @@ It can be used via [NPM](https://www.npmjs.com/) as "`kutty.org`" or downloaded
[unpkg](https://unpkg.com/browse/kutty.org/) or your other favorite NPM-based CDN:
``` html
- <script src="https://unpkg.com/kutty.org@0.0.1"></script>
+ <script src="https://unpkg.com/kutty.org@0.0.2"></script>
```
## <a name="ajax"></a> [AJAX](#ajax)
@@ -100,9 +100,12 @@ The core feature of kutty is a set of attributes that allow you to issue AJAX re
* [kt-get](/attributes/kt-get) - Issues a `GET` request to the given URL
* [kt-post](/attributes/kt-post) - Issues a `POST` request to the given URL
-* [kt-put](/attributes/kt-put) - Issues a `PUT` request to the given URL (see [details](#kutty-request-details))
-* [kt-patch](/attributes/kt-patch) - Issues a `PATCH` request to the given URL (see [details](#kutty-request-details))
-* [kt-delete](/attributes/kt-delete) - Issues a `GET` request to the given URL (see [details](#kutty-request-details))
+* [kt-put](/attributes/kt-put) - Issues a `PUT` request to the given URL
+* [kt-patch](/attributes/kt-patch) - Issues a `PATCH` request to the given URL
+* [kt-delete](/attributes/kt-delete) - Issues a `DELETE` request to the given URL
+
+(Since most browsers only support issuing `GET` and `POST`, a request with one of the other three methods will
+actually be issued as a `POST`, with the `X-HTTP-Method-Override` header set to the desired method.)
Each of these attributes takes a URL to issue an AJAX request to. The element will issue a request of the specified
type to the given URL when the element is [triggered](#triggers):
@@ -406,6 +409,7 @@ kutty includes a number of useful headers in requests:
* `X-KT-Active-Element` - the id of the current active element
* `X-KT-Active-Element-Name` - the name of the current active element
* `X-KT-Active-Element-Value` - the value of the current active element
+* `X-HTTP-Method-Override` - the HTTP verb for non-`GET` and `POST` requests
### <a name="response-header"></a> [Response Headers](#response-headers)
diff --git a/www/index.md b/www/index.md
index 96fb67a3..f4cd1bd4 100644
--- a/www/index.md
+++ b/www/index.md
@@ -22,7 +22,7 @@ Kutty is small ([~6k min.gz'd](https://unpkg.com/kutty.org/dist/)), IE11 compati
```html
<!-- Load from unpkg -->
- <script src="https://unpkg.com/kutty.org@0.0.1"></script>
+ <script src="https://unpkg.com/kutty.org@0.0.2"></script>
<!-- have a button POST a click via AJAX -->
<button kt-post="/clicked" kt-swap="outerHTML">
Click Me
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-03 02:55:41 +0000