'))
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME))
cache.length.should.equal(3)
cache[0].url.should.equal('url3')
@@ -210,7 +210,7 @@ describe('hx-push-url attribute', function() {
}
try {
localStorage.removeItem('htmx-history-cache')
- htmx._('saveToHistoryCache')('/dummy', make("
" + bigContent + "
"), 'Foo', 0)
+ htmx._('saveToHistoryCache')('/dummy', make('
' + bigContent + '
'), 'Foo', 0)
should.equal(localStorage.getItem('htmx-history-cache'), null)
} finally {
// clear history cache afterwards
diff --git a/test/attributes/hx-trigger.js b/test/attributes/hx-trigger.js
index a7003bf0..bc968be1 100644
--- a/test/attributes/hx-trigger.js
+++ b/test/attributes/hx-trigger.js
@@ -892,10 +892,10 @@ describe('hx-trigger attribute', function() {
var div = make('
foo
')
div.innerHTML.should.equal('foo')
this.server.respond()
- div.innerHTML.should.equal('Requests: 1');
- div.click();
+ div.innerHTML.should.equal('Requests: 1')
+ div.click()
this.server.respond()
- div.innerHTML.should.equal('Requests: 2');
+ div.innerHTML.should.equal('Requests: 2')
})
it('revealed doesnt cause other events to trigger', function() {
diff --git a/test/core/api.js b/test/core/api.js
index 0dbe268d..a65cbd56 100644
--- a/test/core/api.js
+++ b/test/core/api.js
@@ -375,4 +375,32 @@ describe('Core htmx API test', function() {
htmx.trigger(div, 'myEvent')
myEventCalled.should.equal(true)
})
+
+ it('swaps content properly (basic)', function() {
+ var output = make('
')
+ htmx.swap('#output', '
Swapped!
', { swapStyle: 'innerHTML' })
+ output.innerHTML.should.be.equal('
Swapped!
')
+ })
+
+ it('swaps content properly (with select)', function() {
+ var output = make('
')
+ htmx.swap('#output', '
', { swapStyle: 'innerHTML' }, { select: '#select-me' })
+ output.innerHTML.should.be.equal('
Swapped!
')
+ })
+
+ it('swaps content properly (with oob)', function() {
+ var output = make('
')
+ var oobDiv = make('
')
+ htmx.swap('#output', '
OOB Swapped!
Swapped!
', { swapStyle: 'innerHTML' })
+ output.innerHTML.should.be.equal('
Swapped!
')
+ oobDiv.innerHTML.should.be.equal('OOB Swapped!')
+ })
+
+ it('swaps content properly (with select oob)', function() {
+ var output = make('
')
+ var oobDiv = make('
')
+ htmx.swap('#output', '
OOB Swapped!
Swapped!
', { swapStyle: 'innerHTML' }, { selectOOB: '#oob:innerHTML' })
+ output.innerHTML.should.be.equal('
Swapped!
')
+ oobDiv.innerHTML.should.be.equal('OOB Swapped!')
+ })
})
diff --git a/test/core/extension-swap.js b/test/core/extension-swap.js
index bd55cd56..9c6a1884 100644
--- a/test/core/extension-swap.js
+++ b/test/core/extension-swap.js
@@ -1,62 +1,59 @@
-describe("default extensions behavior", function() {
+describe('default extensions behavior', function() {
+ var loadCalls, afterSwapCalls, afterSettleCalls
- var loadCalls, afterSwapCalls, afterSettleCalls;
+ beforeEach(function() {
+ loadCalls = []
+ this.server = makeServer()
+ clearWorkArea()
- beforeEach(function () {
- loadCalls = [];
- this.server = makeServer();
- clearWorkArea();
+ htmx.defineExtension('ext-testswap', {
+ onEvent: function(name, evt) {
+ if (name === 'htmx:load') {
+ loadCalls.push(evt.detail.elt)
+ }
+ },
+ handleSwap: function(swapStyle, target, fragment, settleInfo) {
+ // simple outerHTML replacement for tests
+ var parentEl = target.parentElement
+ parentEl.removeChild(target)
+ const arr = []
+ for (const child of fragment.childNodes) {
+ arr.push(parentEl.appendChild(child))
+ }
+ return arr // return the newly added elements
+ }
+ })
+ })
- htmx.defineExtension("ext-testswap", {
- onEvent : function(name, evt) {
- if (name === "htmx:load") {
- loadCalls.push(evt.detail.elt);
- }
- },
- handleSwap: function (swapStyle, target, fragment, settleInfo) {
- // simple outerHTML replacement for tests
- var parentEl = target.parentElement;
- parentEl.removeChild(target);
- let arr = [];
- for (const child of fragment.childNodes) {
- arr.push(parentEl.appendChild(child));
- }
- return arr; // return the newly added elements
- }
- });
+ afterEach(function() {
+ this.server.restore()
+ clearWorkArea()
+ htmx.removeExtension('ext-testswap')
+ })
- });
+ it('handleSwap: afterSwap and afterSettle triggered if extension defined on parent', function() {
+ this.server.respondWith('GET', '/test', '
')
+ var div = make('
')
+ var btn = div.firstChild
+ btn.click()
+ this.server.respond()
+ loadCalls.length.should.equal(1)
+ loadCalls[0].textContent.should.equal('Clicked!') // the new button is loaded
+ })
- afterEach(function () {
- this.server.restore();
- clearWorkArea();
- htmx.removeExtension("ext-testswap");
- });
+ it('handleSwap: new content is handled by htmx', function() {
+ this.server.respondWith('GET', '/test', '
')
+ this.server.respondWith('GET', '/test-inner', 'Loaded!')
+ make('
').querySelector('button').click()
- it('handleSwap: afterSwap and afterSettle triggered if extension defined on parent', function () {
- this.server.respondWith("GET", "/test", '
');
- var div = make('
');
- var btn = div.firstChild;
- btn.click()
- this.server.respond();
- loadCalls.length.should.equal(1);
- loadCalls[0].textContent.should.equal('Clicked!'); // the new button is loaded
- });
+ this.server.respond() // call /test via button trigger=click
+ var btn = byId('test-ext-testswap')
+ btn.textContent.should.equal('Clicked!')
+ loadCalls.length.should.equal(1)
+ loadCalls[0].textContent.should.equal('Clicked!') // the new button is loaded
- it('handleSwap: new content is handled by htmx', function() {
- this.server.respondWith("GET", "/test", '
');
- this.server.respondWith("GET", "/test-inner", 'Loaded!');
- make('
').querySelector('button').click();
-
- this.server.respond(); // call /test via button trigger=click
- var btn = byId('test-ext-testswap');
- btn.textContent.should.equal('Clicked!');
- loadCalls.length.should.equal(1);
- loadCalls[0].textContent.should.equal('Clicked!'); // the new button is loaded
-
- this.server.respond(); // call /test-inner via span trigger=load
- btn.textContent.should.equal("Clicked!Loaded!");
- loadCalls.length.should.equal(1); // text should not trigger event
- });
-
-});
+ this.server.respond() // call /test-inner via span trigger=load
+ btn.textContent.should.equal('Clicked!Loaded!')
+ loadCalls.length.should.equal(1) // text should not trigger event
+ })
+})
diff --git a/www/content/api.md b/www/content/api.md
index 136a38d4..37c425ef 100644
--- a/www/content/api.md
+++ b/www/content/api.md
@@ -448,6 +448,37 @@ Removes the given extension from htmx
htmx.removeExtension("my-extension");
```
+### Method - `htmx.swap()` {#swap}
+
+Performs swapping (and settling) of HTML content
+
+##### Parameters
+
+* `target` - the HTML element or string selector of swap target
+* `content` - string representation of content to be swapped
+* `swapSpec` - swapping specification, representing parameters from `hx-swap`
+ * `swapStyle` (required) - swapping style (`innerHTML`, `outerHTML`, `beforebegin` etc)
+ * `swapDelay`, `settleDelay` (number) - delays before swapping and settling respectively
+ * `transition` (bool) - whether to use HTML transitions for swap
+ * `ignoreTitle` (bool) - disables page title updates
+ * `head` (string) - specifies `head` tag handling strategy (`merge` or `append`). Leave empty to disable head handling
+ * `scroll`, `scrollTarget`, `show`, `showTarget`, `focusScroll` - specifies scroll handling after swap
+* `swapOptions` - additional *optional* parameters for swapping
+ * `select` - selector for the content to be swapped (equivalent of `hx-select`)
+ * `selectOOB` - selector for the content to be swapped out-of-band (equivalent of `hx-select-oob`)
+ * `eventInfo` - an object to be attached to `htmx:afterSwap` and `htmx:afterSettle` elements
+ * `anchor` - an anchor element that triggered scroll, will be scrolled into view on settle. Provides simple alternative to full scroll handling
+ * `contextElement` - DOM element that serves as context to swapping operation. Currently used to find extensions enabled for specific element
+ * `afterSwapCallback`, `afterSettleCallback` - callback functions called after swap and settle respectively. Take no arguments
+
+
+##### Example
+
+```js
+ // swap #output element inner HTML with div element with "Swapped!" text
+ htmx.swap("#output", "
Swapped!
", {swapStyle: 'innerHTML'});
+```
+
### Method - `htmx.takeClass()` {#takeClass}
Takes the given class from its siblings, so that among its siblings, only the given element will have the class.
diff --git a/www/content/reference.md b/www/content/reference.md
index 07515358..5ce51eec 100644
--- a/www/content/reference.md
+++ b/www/content/reference.md
@@ -202,6 +202,7 @@ The table below lists all other attributes available in htmx.
| [`htmx.remove()`](@/api.md#remove) | Removes the given element
| [`htmx.removeClass()`](@/api.md#removeClass) | Removes a class from the given element
| [`htmx.removeExtension()`](@/api.md#removeExtension) | Removes an htmx [extension](@/extensions/_index.md)
+| [`htmx.swap()`](@/api.md#swap) | Performs swapping (and settling) of HTML content
| [`htmx.takeClass()`](@/api.md#takeClass) | Takes a class from other elements for the given element
| [`htmx.toggleClass()`](@/api.md#toggleClass) | Toggles a class from the given element
| [`htmx.trigger()`](@/api.md#trigger) | Triggers an event on an element