From fe893f248aceb22d89713ccf3c511b6c5b106c7f Mon Sep 17 00:00:00 2001 From: Ben Pate Date: Wed, 30 Dec 2020 12:11:16 -0700 Subject: [PATCH 1/4] Add event htmx:beforeProcessNode --- src/htmx.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/htmx.js b/src/htmx.js index dc415cff..c9beb5f1 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -1018,6 +1018,7 @@ return (function () { } function processNode(elt) { + triggerEvent(elt, "htmx:beforeProcessNode") initNode(elt); forEach(findElementsToProcess(elt), function(child) { initNode(child) }); } From ecce4f19d4792f324f5fffc4cd80daeee45cce78 Mon Sep 17 00:00:00 2001 From: Ben Pate Date: Sun, 3 Jan 2021 10:33:03 -0700 Subject: [PATCH 2/4] Rename htmx:processedNode => htmx:afterProcessNode Have done search/replace and have renamed all instances in /src files, along with current tests. Have left /dist and /www untouched. --- src/ext/class-tools.js | 2 +- src/ext/preload.js | 4 ++-- src/ext/remove-me.js | 2 +- src/htmx.js | 6 +++--- www/test/1.1.0/src/ext/class-tools.js | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ext/class-tools.js b/src/ext/class-tools.js index 60c36b50..08f34b48 100644 --- a/src/ext/class-tools.js +++ b/src/ext/class-tools.js @@ -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) { diff --git a/src/ext/preload.js b/src/ext/preload.js index 4350f10d..46355d2f 100644 --- a/src/ext/preload.js +++ b/src/ext/preload.js @@ -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; } diff --git a/src/ext/remove-me.js b/src/ext/remove-me.js index 49a24e5b..8dc3429f 100644 --- a/src/ext/remove-me.js +++ b/src/ext/remove-me.js @@ -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); diff --git a/src/htmx.js b/src/htmx.js index c0e63a9d..304905bb 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -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,13 +1272,12 @@ return (function () { if (wsInfo) { processWebSocketInfo(elt, nodeData, wsInfo); } - triggerEvent(elt, "htmx:processedNode"); + triggerEvent(elt, "htmx:afterProcessNode"); } } function processNode(elt) { elt = resolveTarget(elt); - triggerEvent(elt, "htmx:beforeProcessNode") initNode(elt); forEach(findElementsToProcess(elt), function(child) { initNode(child) }); } @@ -1306,7 +1306,7 @@ return (function () { } function ignoreEventForLogging(eventName) { - return eventName === "htmx:processedNode" + return eventName === "htmx:afterProcessNode" } function withExtensions(elt, toDo) { diff --git a/www/test/1.1.0/src/ext/class-tools.js b/www/test/1.1.0/src/ext/class-tools.js index 60c36b50..08f34b48 100644 --- a/www/test/1.1.0/src/ext/class-tools.js +++ b/www/test/1.1.0/src/ext/class-tools.js @@ -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) { From b4d5e9e2a0f1e5712a067cdeae463de8a2bf1c3a Mon Sep 17 00:00:00 2001 From: Ben Pate Date: Sun, 3 Jan 2021 10:33:31 -0700 Subject: [PATCH 3/4] Test cases - added test cases for htmx:beforeProcessNode and htmx:afterProcessNode --- test/core/events.js | 54 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/test/core/events.js b/test/core/events.js index 63816fdb..a029c82d 100644 --- a/test/core/events.js +++ b/test/core/events.js @@ -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, {}, ""); + }); + var div = make(""); + 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, {}, ""); + }); + var div = make(""); + 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, {}, ""); + }); + var div = make(""); + div.click(); + this.server.respond(); + should.equal(called, true); + } finally { + htmx.off("htmx:afterProcessNode", handler); + } + }); }); From 20b172267773485324a17704a1e768c885e83d56 Mon Sep 17 00:00:00 2001 From: Ben Pate Date: Sun, 3 Jan 2021 10:45:09 -0700 Subject: [PATCH 4/4] Documentation - add entries in the event list and detail for htmx:beforeProcessNode and htmx:afterProcessNode --- www/events.md | 16 ++++++++++++++++ www/reference.md | 2 ++ 2 files changed, 18 insertions(+) diff --git a/www/events.md b/www/events.md index f6baf199..ec35e04e 100644 --- a/www/events.md +++ b/www/events.md @@ -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 +### 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 + ### 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 +### 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 + ### Event - [`htmx:beforeRequest`](#htmx:beforeRequest) This event is triggered before an AJAX request is issued. If the event is cancelled, no request will occur. diff --git a/www/reference.md b/www/reference.md index 19bbb8aa..7e8ecea5 100644 --- a/www/reference.md +++ b/www/reference.md @@ -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