diff --git a/src/htmx.js b/src/htmx.js index e7613d151..a889ebdf2 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -1796,6 +1796,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 @@ -1804,7 +1828,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 = {} } @@ -4695,8 +4719,6 @@ var htmx = (function() { swapSpec.ignoreTitle = ignoreTitle } - target.classList.add(htmx.config.swappingClass) - // optional transition API promise callbacks let settleResolve = null let settleReject = null @@ -4783,12 +4805,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)) diff --git a/test/core/api.js b/test/core/api.js index a65cbd562..ec1a6d579 100644 --- a/test/core/api.js +++ b/test/core/api.js @@ -382,6 +382,17 @@ describe('Core htmx API test', function() { output.innerHTML.should.be.equal('
Swapped!
') }) + it('swap works with a swap delay', function(done) { + var div = make("
") + 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('') htmx.swap('#output', '

Swapped!

', { swapStyle: 'innerHTML' }, { select: '#select-me' })