itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 05:51:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

swap into all elements matching the out-of-band css selector

Browse Source
This commit is contained in:
msladecek 2021-11-13 12:08:27 +01:00
parent 244b5de9a1
commit 038821cca8
3 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/htmx.js
View File

@ -512,15 +512,22 @@ return (function () {
swapStyle = oobValue;
}
var target = getDocument().querySelector(selector);
if (target) {
var fragment;
fragment = getDocument().createDocumentFragment();
fragment.appendChild(oobElement); // pulls the child out of the existing fragment
if (!isInlineSwap(swapStyle, target)) {
fragment = oobElement; // if this is not an inline swap, we use the content of the node, not the node itself
}
swap(swapStyle, target, target, fragment, settleInfo);
var targets = getDocument().querySelectorAll(selector);
if (targets) {
forEach(
targets,
function (target) {
var fragment;
var oobElementClone = oobElement.cloneNode(true);
fragment = getDocument().createDocumentFragment();
fragment.appendChild(oobElementClone);
if (!isInlineSwap(swapStyle, target)) {
fragment = oobElementClone; // if this is not an inline swap, we use the content of the node, not the node itself
}
swap(swapStyle, target, target, fragment, settleInfo);
}
);
oobElement.parentNode.removeChild(oobElement);
} else {
oobElement.parentNode.removeChild(oobElement);
triggerErrorEvent(getDocument().body, "htmx:oobErrorNoTarget", {content: oobElement})

26
test/attributes/hx-swap-oob.js
View File

@ -92,5 +92,31 @@ describe("hx-swap-oob attribute", function () {
byId("d1").innerHTML.should.equal("Swapped");
})
it('swaps into all targets that match the selector (innerHTML)', function () {
this.server.respondWith("GET", "/test", "<div>Clicked</div><div class='target' hx-swap-oob='innerHTML:.target'>Swapped</div>");
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1">No swap</div>');
make('<div id="d2" class="target">Not swapped</div>');
make('<div id="d3" class="target">Not swapped</div>');
div.click();
this.server.respond();
byId("d1").innerHTML.should.equal("No swap");
byId("d2").innerHTML.should.equal("Swapped");
byId("d3").innerHTML.should.equal("Swapped");
})
it('swaps into all targets that match the selector (outerHTML)', function () {
var oobSwapContent = '<div class="new-target" hx-swap-oob="outerHTML:.target">Swapped</div>';
this.server.respondWith("GET", "/test", "<div>Clicked</div>" + oobSwapContent);
var div = make('<div hx-get="/test">click me</div>');
make('<div id="d1"><div>No swap</div></div>');
make('<div id="d2"><div class="target">Not swapped</div></div>');
make('<div id="d3"><div class="target">Not swapped</div></div>');
div.click();
this.server.respond();
byId("d1").innerHTML.should.equal("<div>No swap</div>");
byId("d2").innerHTML.should.equal(oobSwapContent);
byId("d3").innerHTML.should.equal(oobSwapContent);
})
});

2
www/attributes/hx-swap-oob.md
View File

@ -32,7 +32,7 @@ If the value is `true` or `outerHTML` (which are equivalent) the element will be
If a swap value is given, that swap strategy will be used.
If a selector is given, the first element matching that selector will be swapped. If not, the element with an ID matching the new content will be swapped.
If a selector is given, all elements matched by that that selector will be swapped. If not, the element with an ID matching the new content will be swapped.
### Notes