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

support closest syntax in hx-indicator

Browse Source
This commit is contained in:
carson 2021-01-03 08:04:26 -07:00
parent e5b2273c09
commit 6939290b8f
3 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/htmx.js
View File

@ -1482,7 +1482,12 @@ return (function () {
function mutateRequestIndicatorClasses(elt, action) {
var indicator = getClosestAttributeValue(elt, 'hx-indicator');
if (indicator) {
var indicators = getDocument().querySelectorAll(indicator);
var indicators;
if (indicator.indexOf("closest ") === 0) {
indicators = [closest(elt, indicator.substr(8))];
} else {
indicators = getDocument().querySelectorAll(indicator);
}
} else {
indicators = [elt];
}

13
test/attributes/hx-indicator.js
View File

@ -49,4 +49,17 @@ describe("hx-indicator attribute", function(){
a1.classList.contains("htmx-request").should.equal(false);
a2.classList.contains("htmx-request").should.equal(false);
});
it('allows closest syntax in hx-indicator', function()
{
this.server.respondWith("GET", "/test", "Clicked!");
var div = make('<div id="d1"><button id="b1" hx-get="/test" hx-indicator="closest div">Click Me!</button></div>')
var btn = byId("b1");
btn.click();
btn.classList.contains("htmx-request").should.equal(false);
div.classList.contains("htmx-request").should.equal(true);
this.server.respond();
btn.classList.contains("htmx-request").should.equal(false);
div.classList.contains("htmx-request").should.equal(false);
});
})

3
www/attributes/hx-indicator.md
View File

@ -9,7 +9,8 @@ The `hx-indicator` attribute allows you to specify the element that will have th
added to it for the duration of the request. This can be used to show spinners or progress indicators
while the request is in flight.
The value of this attribute is a CSS query selector of the element or elements to apply the class to.
The value of this attribute is a CSS query selector of the element or elements to apply the class to,
or the keyword `closest`, followed by a CSS selector, which will find the closest matching parent (e.g. `closest tr`);
Here is an example with a spinner adjacent to the button: