itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-26 20:40:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(swap): apply swap delay in swap function instead of handleAjaxResponse (#2845)

Browse Source 
* fix(swap): apply swap delay in swap function instead of handleAjaxResponse

* add swap delay test
This commit is contained in:
Jeremiah Johnson 2025-06-02 11:19:11 -06:00 committed by GitHub
parent 6d238f3d61
commit 4184d1fd0c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/htmx.js
View File

@ -1850,6 +1850,30 @@ var htmx = (function() {
return oobElts.length > 0
}
/**
* Apply swapping class and then execute the swap with optional delay
* @param {string|Element} target
* @param {string} content
* @param {HtmxSwapSpecification} swapSpec
* @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
swapOptions = {}
}
target = resolveTarget(target)
target.classList.add(htmx.config.swappingClass)
const localSwap = function() {
runSwap(target, content, swapSpec, swapOptions)
}
if (swapSpec?.swapDelay && swapSpec.swapDelay > 0) {
getWindow().setTimeout(localSwap, swapSpec.swapDelay)
} else {
localSwap()
}
}
/**
* Implements complete swapping pipeline, including: focus and selection preservation,
* title updates, scroll, OOB swapping, normal swapping and settling
@ -1858,7 +1882,7 @@ var htmx = (function() {
* @param {HtmxSwapSpecification} swapSpec
* @param {SwapOptions} [swapOptions]
*/
function swap(target, content, swapSpec, swapOptions) {
function runSwap(target, content, swapSpec, swapOptions) {
if (!swapOptions) {
swapOptions = {}
}
@ -4790,8 +4814,6 @@ var htmx = (function() {
swapSpec.ignoreTitle = ignoreTitle
}
target.classList.add(htmx.config.swappingClass)
// optional transition API promise callbacks
let settleResolve = null
let settleReject = null
@ -4878,12 +4900,7 @@ var htmx = (function() {
})
}
}
if (swapSpec.swapDelay > 0) {
getWindow().setTimeout(doSwap, swapSpec.swapDelay)
} else {
doSwap()
}
doSwap()
}
if (isError) {
triggerErrorEvent(elt, 'htmx:responseError', mergeObjects({ error: 'Response Status Error Code ' + xhr.status + ' from ' + responseInfo.pathInfo.requestPath }, responseInfo))

11
test/core/api.js
View File

@ -483,6 +483,17 @@ describe('Core htmx API test', function() {
output.innerHTML.should.be.equal('<div>Swapped!</div>')
})
it('swap works with a swap delay', function(done) {
var div = make("<div hx-get='/test'></div>")
div.innerText.should.equal('')
htmx.swap(div, 'jsswapped', { swapDelay: 10 })
div.innerText.should.equal('')
setTimeout(function() {
div.innerText.should.equal('jsswapped')
done()
}, 30)
})
it('swaps content properly (with select)', function() {
var output = make('<output id="output"/>')
htmx.swap('#output', '<div><p id="select-me">Swapped!</p></div>', { swapStyle: 'innerHTML' }, { select: '#select-me' })