itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2026-04-21 07:57:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

include-vals extension + docs cleanup

Browse Source
This commit is contained in:
carson
2020-05-26 10:19:39 -07:00
parent ec6ec68a1e
commit 7b7f00baa0
7 changed files with 112 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/ext/include-vals.js Normal file
View File

@@ -0,0 +1,24 @@
(function(){
function mergeObjects(obj1, obj2) {
for (var key in obj2) {
if (obj2.hasOwnProperty(key)) {
obj1[key] = obj2[key];
}
}
return obj1;
}
htmx.defineExtension('include-vals', {
onEvent: function (name, evt) {
if (name === "configRequest.htmx") {
var includeValsElt = htmx.closest(evt.detail.elt, "[include-vals],[data-include-vals]");
if (includeValsElt) {
var includeVals = includeValsElt.getAttribute("include-vals") || includeValsElt.getAttribute("data-include-vals");
var valuesToInclude = eval("({" + includeVals + "})");
mergeObjects(evt.detail.parameters, valuesToInclude);
}
}
}
});
})();

5
src/htmx.js
View File

@@ -1448,11 +1448,10 @@ return (function () {
}
}
} else {
triggerErrorEvent(elt, 'responseError.htmx', eventDetail);
triggerErrorEvent(elt, 'responseError.htmx', mergeObjects({error: "Response Status Error Code " + this.status + " from " + path}, eventDetail));
}
} catch (e) {
eventDetail['exception'] = e;
triggerErrorEvent(elt, 'onLoadError.htmx', eventDetail);
triggerErrorEvent(elt, 'onLoadError.htmx', mergeObjects({error:e}, eventDetail));
throw e;
} finally {
removeRequestIndicatorClasses(elt);

23
test/ext/include-vals.js Normal file
View File

@@ -0,0 +1,23 @@
describe("include-vals extension", function() {
beforeEach(function () {
this.server = makeServer();
clearWorkArea();
});
afterEach(function () {
this.server.restore();
clearWorkArea();
});
it('Includes values properly', function () {
var params = {};
this.server.respondWith("POST", "/test", function (xhr) {
params = getParameters(xhr);
xhr.respond(200, {}, "clicked");
});
var btn = make('<button hx-post="/test" hx-ext="include-vals" include-vals="foo:\'bar\'">Click Me!</button>')
btn.click();
this.server.respond();
params['foo'].should.equal("bar");
});
});

3
test/index.html
View File

@@ -112,6 +112,9 @@
<script src="../src/ext/remove-me.js"></script>
<script src="ext/remove-me.js"></script>
<script src="../src/ext/include-vals.js"></script>
<script src="ext/include-vals.js"></script>
<!-- events last so they don't screw up other tests -->
<script src="core/events.js"></script>

6
www/docs.md
View File

@@ -514,9 +514,9 @@ defined in javascript](/extensions#defining) and then used via the [`hx-ext`](/a
If you are interested in adding your own extension to htmx, please [see the extension docs](/extensions)
### Official Extensions
### Included Extensions
Htmx offers some officially supported extensions that are tested against the htmx code base, including:
Htmx includes some extensions that are tested against the htmx code base. Here are a few:
| Extension | Description
|-----------|-------------
@@ -526,7 +526,7 @@ Htmx offers some officially supported extensions that are tested against the htm
| [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies)
| [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements
See the [Extensions](/extensions#list) for a complete list.
See the [extensions page](/extensions#included) for a complete list.
## <a name="events"></a> [Events & Logging](#events)

65
www/extensions.md
View File

@@ -7,7 +7,35 @@ title: </> htmx - high power tools for html
Htmx has an extension mechanism for defining and using extensions to the default behavior in a simple and obvious manner.
There is a registry of officially supported (i.e. tested) extensions [here](/official-extensions).
## <a name="using"></a>[Using Extensions](#using)
To use an extension you use the [hx-ext](/attributes/hx-ext) attribute:
```html
<button hx-post="/example" hx-ext="debug">This Button Uses The Debug Extension</button>
```
Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire swath of the dom,
and on the `body` tag for it to apply to all htmx requests.
## <a name="included"></a> [Included Extensions](#included)
The following extensions that are tested and distributed with htmx:
<div class="info-table">
| Extension | Description
|-----------|-------------
| [`json-enc`](/extensions/json-enc) | use JSON encoding in the body of requests, rather than the default `x-www-form-urlencoded`
| [`morphdom-swap`](/extensions/morphdom-swap) | an extension for using the [morphdom](https://github.com/patrick-steele-idem/morphdom) library as the swapping mechanism in htmx.
| [`client-side-templates`](/extensions/client-side-templates) | support for client side template processing of JSON responses
| [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx
| [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies)
| [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements
| [`remove-me`](/extensions/remove-me) | allows you to remove an element after a given amount of time
| [`include-vals`](/extensions/include-vals) | allows you to include additional values in a request
</div>
## <a name="defining"></a>[Defining an Extensions](#defining)
@@ -31,37 +59,8 @@ Extensions can override the following default extension fields:
{
onEvent : function(name, evt) {return true;},
transformResponse : function(text, xhr, elt) {return text;},
handleSwap : function(swapStyle, target, fragment) {return false;},
isInlineSwap : function(swapStyle) {return false;},
handleSwap : function(swapStyle, target, fragment, settleInfo) {return false;},
encodeParameters : function(xhr, parameters, elt) {return null;}
}
```
## <a name="using"></a>[Using An Extension](#using)
To use an extension you use the [hx-ext](/attributes/hx-ext) attribute. To use our extension defined above you
would say:
```html
<button hx-post="/example" hx-ext="my-ext">This Button Uses My Extension</button>
```
Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire swath of the dom,
and on the `body` tag for it to apply to all htmx requests.
## <a name="list"></a> [Extensions Reference](#list)
The following extensions that are tested and distributed with htmx:
<div class="info-table">
| Extension | Description
|-----------|-------------
| [`json-enc`](/extensions/json-enc) | use JSON encoding in the body of requests, rather than the default `x-www-form-urlencoded`
| [`morphdom-swap`](/extensions/morphdom-swap) | an extension for using the [morphdom](https://github.com/patrick-steele-idem/morphdom) library as the swapping mechanism in htmx.
| [`client-side-templates`](/extensions/client-side-templates) | support for client side template processing of JSON responses
| [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx
| [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies)
| [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements
| [`remove-me`](/extensions/remove-me) | allows you to remove an element after a given amount of time
</div>
```

25
www/extensions/include-vals.md Normal file
View File

@@ -0,0 +1,25 @@
---
layout: layout.njk
title: </> htmx - high power tools for html
---
## The `include-vals` Extension
The `include-vals` extension allows you to programatically include values in a request with
a `include-vals` attribute. The value of this attribute is one or more name/value pairs, which
will be evaluated as the fields in a javascript object literal.
### Usage
```html
<div hx-ext="include-vals">
<!-- Removes this div after 1 second -->
<div hx-get="/test" include-vals="included:true, computed: computeValue()">
Will Include Additional Values
</div>
</div>
```
### Source
<https://unpkg.com/htmx.org/ext/remove-me.js>