Skip to content

Commit 82546db

Browse files
TelroshanTelroshan
authored
Inherit list-keyword in hx-include / hx-indicator (#1766)
Inherit keyword in hx-include / hx-indicator
1 parent 4184d1f commit 82546db

File tree

3 files changed

+158
-0
lines changed

3 files changed

+158
-0
lines changed

‎src/htmx.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1347,6 +1347,16 @@ var htmx = (function() {
13471347
return [findThisElement(elt, attrName)]
13481348
} else {
13491349
const result = querySelectorAllExt(elt, attrTarget)
1350+
// find `inherit` whole word in value, make sure it's surrounded by commas or is at the start/end of string
1351+
const shouldInherit = /(^|,)(\s*)inherit(\s*)($|,)/.test(attrTarget)
1352+
if (shouldInherit) {
1353+
const eltToInheritFrom = asElement(getClosestMatch(elt, function(parent) {
1354+
return parent !== elt && hasAttribute(asElement(parent), attrName)
1355+
}))
1356+
if (eltToInheritFrom) {
1357+
result.push(...findAttributeTargets(eltToInheritFrom, attrName))
1358+
}
1359+
}
13501360
if (result.length === 0) {
13511361
logError('The selector "' + attrTarget + '" on ' + attrName + ' returned no matches!')
13521362
return [DUMMY_ELT]

‎test/attributes/hx-include.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -434,4 +434,88 @@ describe('hx-include attribute', function() {
434434
this.server.respond()
435435
btn.innerHTML.should.equal('Clicked!')
436436
})
437+
438+
it('`inherit` can be used to expand parent hx-include', function() {
439+
this.server.respondWith('POST', '/include', function(xhr) {
440+
var params = getParameters(xhr)
441+
params.i1.should.equal('test1')
442+
params.i2.should.equal('test2')
443+
xhr.respond(200, {}, 'Clicked!')
444+
})
445+
make('<div hx-include="#i1">' +
446+
' <button id="btn" hx-include="inherit, #i2" hx-post="/include"></button>' +
447+
'</div>' +
448+
'<input id="i1" name="i1" value="test1"/>' +
449+
'<input id="i2" name="i2" value="test2"/>')
450+
var btn = byId('btn')
451+
btn.click()
452+
this.server.respond()
453+
btn.innerHTML.should.equal('Clicked!')
454+
})
455+
456+
it('`inherit` can be used to expand multiple parents hx-include', function() {
457+
this.server.respondWith('POST', '/include', function(xhr) {
458+
var params = getParameters(xhr)
459+
params.i1.should.equal('test1')
460+
params.i2.should.equal('test2')
461+
params.i3.should.equal('test3')
462+
xhr.respond(200, {}, 'Clicked!')
463+
})
464+
make('<div hx-include="#i1">' +
465+
' <div hx-include="inherit, #i2">' +
466+
' <button id="btn" hx-include="inherit, #i3" hx-post="/include"></button>' +
467+
' </div>' +
468+
'</div>' +
469+
'<input id="i1" name="i1" value="test1"/>' +
470+
'<input id="i2" name="i2" value="test2"/>' +
471+
'<input id="i3" name="i3" value="test3"/>')
472+
var btn = byId('btn')
473+
btn.click()
474+
this.server.respond()
475+
btn.innerHTML.should.equal('Clicked!')
476+
})
477+
478+
it('`inherit` chain breaks properly', function() {
479+
this.server.respondWith('POST', '/include', function(xhr) {
480+
var params = getParameters(xhr)
481+
should.not.exist(params.i1)
482+
params.i2.should.equal('test2')
483+
params.i3.should.equal('test3')
484+
xhr.respond(200, {}, 'Clicked!')
485+
})
486+
make('<div hx-include="#i1">' +
487+
' <div hx-include="#i2">' +
488+
' <button id="btn" hx-include="inherit, #i3" hx-post="/include"></button>' +
489+
' </div>' +
490+
'</div>' +
491+
'<input id="i1" name="i1" value="test1"/>' +
492+
'<input id="i2" name="i2" value="test2"/>' +
493+
'<input id="i3" name="i3" value="test3"/>')
494+
var btn = byId('btn')
495+
btn.click()
496+
this.server.respond()
497+
btn.innerHTML.should.equal('Clicked!')
498+
})
499+
500+
it('`inherit` syntax regex properly catches keyword', function() {
501+
this.server.respondWith('POST', '/include', function(xhr) {
502+
var params = getParameters(xhr)
503+
params.i1.should.equal('test1')
504+
params.i2.should.equal('test2')
505+
params.i3.should.equal('test3')
506+
xhr.respond(200, {}, 'Clicked!')
507+
})
508+
make('<div hx-include="#i1">' +
509+
' <div hx-include="#i2, inherit,.nonexistent-class">' +
510+
' <button id="btn" hx-include="customtag,inherit , #i3" hx-post="/include"></button>' +
511+
' </div>' +
512+
'</div>' +
513+
'<input id="i1" name="i1" value="test1"/>' +
514+
'<input id="i2" name="i2" value="test2"/>' +
515+
'<input id="i3" name="i3" value="test3"/>')
516+
var btn = byId('btn')
517+
btn.click()
518+
this.server.respond()
519+
btn.innerHTML.should.equal('Clicked!')
520+
})
437521
})

‎test/attributes/hx-indicator.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,68 @@ describe('hx-indicator attribute', function() {
123123
b2.classList.contains('htmx-request').should.equal(false)
124124
a1.classList.contains('htmx-request').should.equal(false)
125125
})
126+
127+
it('`inherit` can be used to expand parent hx-indicator', function() {
128+
this.server.respondWith('GET', '/test', 'Clicked!')
129+
make('<div hx-indicator="#a1">' +
130+
' <button id="btn" hx-get="/test" hx-indicator="inherit, #a2">Click Me!</button>' +
131+
'</div>')
132+
var btn = byId('btn')
133+
var a1 = make('<a id="a1"></a>')
134+
var a2 = make('<a id="a2"></a>')
135+
btn.click()
136+
btn.classList.contains('htmx-request').should.equal(false)
137+
a1.classList.contains('htmx-request').should.equal(true)
138+
a2.classList.contains('htmx-request').should.equal(true)
139+
this.server.respond()
140+
btn.classList.contains('htmx-request').should.equal(false)
141+
a1.classList.contains('htmx-request').should.equal(false)
142+
a2.classList.contains('htmx-request').should.equal(false)
143+
})
144+
145+
it('`inherit` can be used to expand multiple parents hx-indicator', function() {
146+
this.server.respondWith('GET', '/test', 'Clicked!')
147+
make('<div hx-indicator="#a1">' +
148+
' <div hx-indicator="inherit, #a2">' +
149+
' <button id="btn" hx-get="/test" hx-indicator="inherit, #a3">Click Me!</button>' +
150+
' </div>' +
151+
'</div>')
152+
var btn = byId('btn')
153+
var a1 = make('<a id="a1"></a>')
154+
var a2 = make('<a id="a2"></a>')
155+
var a3 = make('<a id="a3"></a>')
156+
btn.click()
157+
btn.classList.contains('htmx-request').should.equal(false)
158+
a1.classList.contains('htmx-request').should.equal(true)
159+
a2.classList.contains('htmx-request').should.equal(true)
160+
a3.classList.contains('htmx-request').should.equal(true)
161+
this.server.respond()
162+
btn.classList.contains('htmx-request').should.equal(false)
163+
a1.classList.contains('htmx-request').should.equal(false)
164+
a2.classList.contains('htmx-request').should.equal(false)
165+
a3.classList.contains('htmx-request').should.equal(false)
166+
})
167+
168+
it('`inherit` chain breaks properly', function() {
169+
this.server.respondWith('GET', '/test', 'Clicked!')
170+
make('<div hx-indicator="#a1">' +
171+
' <div hx-indicator="#a2">' +
172+
' <button id="btn" hx-get="/test" hx-indicator="inherit, #a3">Click Me!</button>' +
173+
' </div>' +
174+
'</div>')
175+
var btn = byId('btn')
176+
var a1 = make('<a id="a1"></a>')
177+
var a2 = make('<a id="a2"></a>')
178+
var a3 = make('<a id="a3"></a>')
179+
btn.click()
180+
btn.classList.contains('htmx-request').should.equal(false)
181+
a1.classList.contains('htmx-request').should.equal(false)
182+
a2.classList.contains('htmx-request').should.equal(true)
183+
a3.classList.contains('htmx-request').should.equal(true)
184+
this.server.respond()
185+
btn.classList.contains('htmx-request').should.equal(false)
186+
a1.classList.contains('htmx-request').should.equal(false)
187+
a2.classList.contains('htmx-request').should.equal(false)
188+
a3.classList.contains('htmx-request').should.equal(false)
189+
})
126190
})

0 commit comments

Comments
 (0)