itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-28 13:31:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
carson 2021-01-03 11:16:53 -07:00
commit ca1790792d
8 changed files with 80 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/ext/class-tools.js
View File

@ -69,7 +69,7 @@
htmx.defineExtension('class-tools', {
onEvent: function (name, evt) {
if (name === "htmx:processedNode") {
if (name === "htmx:afterProcessNode") {
var elt = evt.detail.elt;
maybeProcessClasses(elt);
if (elt.querySelectorAll) {

4
src/ext/preload.js
View File

@ -6,8 +6,8 @@ htmx.defineExtension("preload", {
onEvent: function(name, event) {
// Only take actions on "htmx:processedNode"
if (name !== "htmx:processedNode") {
// Only take actions on "htmx:afterProcessNode"
if (name !== "htmx:afterProcessNode") {
return;
}

2
src/ext/remove-me.js
View File

@ -10,7 +10,7 @@
htmx.defineExtension('remove-me', {
onEvent: function (name, evt) {
if (name === "htmx:processedNode") {
if (name === "htmx:afterProcessNode") {
var elt = evt.detail.elt;
if (elt.getAttribute) {
maybeRemoveMe(elt);

5
src/htmx.js
View File

@ -1250,6 +1250,7 @@ return (function () {
var nodeData = getInternalData(elt);
if (!nodeData.initialized) {
nodeData.initialized = true;
triggerEvent(elt, "htmx:beforeProcessNode")
if (elt.value) {
nodeData.lastValue = elt.value;
@ -1271,7 +1272,7 @@ return (function () {
if (wsInfo) {
processWebSocketInfo(elt, nodeData, wsInfo);
}
triggerEvent(elt, "htmx:processedNode");
triggerEvent(elt, "htmx:afterProcessNode");
}
}
@ -1305,7 +1306,7 @@ return (function () {
}
function ignoreEventForLogging(eventName) {
return eventName === "htmx:processedNode"
return eventName === "htmx:afterProcessNode"
}
function withExtensions(elt, toDo) {

54
test/core/events.js
View File

@ -292,5 +292,59 @@ describe("Core htmx Events", function() {
}
});
it("htmx:beforeProcessNode is called when replacing outerHTML", function () {
var called = false;
var handler = htmx.on("htmx:beforeProcessNode", function (evt) {
called = true;
});
try {
this.server.respondWith("POST", "/test", function (xhr) {
xhr.respond(200, {}, "<button>Bar</button>");
});
var div = make("<button hx-post='/test' hx-swap='outerHTML'>Foo</button>");
div.click();
this.server.respond();
should.equal(called, true);
} finally {
htmx.off("htmx:beforeProcessNode", handler);
}
});
it("htmx:beforeProcessNode allows htmx attribute tweaking", function () {
var called = false;
var handler = htmx.on("htmx:beforeProcessNode", function (evt) {
evt.target.setAttribute("hx-post", "/success")
called = true;
});
try {
this.server.respondWith("POST", "/success", function (xhr) {
xhr.respond(200, {}, "<button>Bar</button>");
});
var div = make("<button hx-post='/fail' hx-swap='outerHTML'>Foo</button>");
div.click();
this.server.respond();
should.equal(called, true);
} finally {
htmx.off("htmx:beforeProcessNode", handler);
}
});
it("htmx:afterProcessNode is called after replacing outerHTML", function () {
var called = false;
var handler = htmx.on("htmx:afterProcessNode", function (evt) {
called = true;
});
try {
this.server.respondWith("POST", "/test", function (xhr) {
xhr.respond(200, {}, "<button>Bar</button>");
});
var div = make("<button hx-post='/test' hx-swap='outerHTML'>Foo</button>");
div.click();
this.server.respond();
should.equal(called, true);
} finally {
htmx.off("htmx:afterProcessNode", handler);
}
});
});

16
www/events.md
View File

@ -20,6 +20,14 @@ has been swapped or settled yet, only that the request has finished.
* `detail.target` - the target of the request
* `detail.requestConfig` - the configuration of the AJAX request
### <a name="htmx:afterProcessNode"></a> Event - [`htmx:afterProcessNode`](#htmx:afterProcessNode)
This event is triggered after htmx has initialized a DOM node. It can be useful for extensions to build additional features onto a node.
##### Details
* `detail.elt` - the element that dispatched the request
### <a name="htmx:afterRequest"></a> Event - [`htmx:afterRequest`](#htmx:afterRequest)
This event is triggered after an AJAX request has finished either in the case of a successful request (although
@ -66,6 +74,14 @@ This event is triggered before any response processing occurs. If the event is
* `detail.target` - the target of the request
* `detail.requestConfig` - the configuration of the AJAX request
### <a name="htmx:beforeProcessNode"></a> Event - [`htmx:beforeProcessNode`](#htmx:beforeProcessNode)
This event is triggered before htmx initializes a DOM node and has processed all of its `hx-` attributes. This gives extensions and other external code the ability to modify the contents of a DOM node before it is processed.
##### Details
* `detail.elt` - the element that dispatched the request
### <a name="htmx:beforeRequest"></a> Event - [`htmx:beforeRequest`](#htmx:beforeRequest)
This event is triggered before an AJAX request is issued. If the event is cancelled, no request will occur.

2
www/reference.md
View File

@ -104,10 +104,12 @@ title: </> htmx - Attributes
| Event | Description |
|-------|-------------|
| [`htmx:afterOnLoad`](/events#htmx:afterOnLoad) | triggered after an AJAX request has completed processing a successful response
| [`htmx:afterProcessNode`](/events#htmx:afterProcessNode) | triggered after htmx has initialized a node
| [`htmx:afterRequest`](/events#htmx:afterRequest) | triggered after an AJAX request has completed
| [`htmx:afterSettle`](/events#htmx:afterSettle) | triggered after the DOM has settled
| [`htmx:afterSwap`](/events#htmx:afterSwap) | triggered after new content has been swapped in
| [`htmx:beforeOnLoad`](/events#htmx:beforeOnLoad) | triggered before any response processing occurs
| [`htmx:beforeProcessNode`](/events#htmx:afterProcessNode) | triggered before htmx initializes a node
| [`htmx:beforeRequest`](/events#htmx:beforeRequest) | triggered before an AJAX request is made
| [`htmx:beforeSwap`](/events#htmx:beforeSwap) | triggered before a swap is done
| [`htmx:configRequest`](/events#htmx:configRequest) | triggered before the request, allows you to customize parameters, headers

2
www/test/1.1.0/src/ext/class-tools.js
View File

@ -69,7 +69,7 @@
htmx.defineExtension('class-tools', {
onEvent: function (name, evt) {
if (name === "htmx:processedNode") {
if (name === "htmx:afterProcessNode") {
var elt = evt.detail.elt;
maybeProcessClasses(elt);
if (elt.querySelectorAll) {