Merge pull request #122 from bencroker/patch-8

Allowed `hx-push-url` to accept a string
This commit is contained in:
chg20 2020-06-28 22:17:24 -07:00 committed by GitHub
commit 2fbe230853
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 4 deletions

View File

@ -1123,10 +1123,16 @@ return (function () {
}
function shouldPush(elt) {
return getClosestAttributeValue(elt, "hx-push-url") === "true" ||
var pushUrl = getClosestAttributeValue(elt, "hx-push-url");
return (pushUrl && pushUrl !== "false") ||
(elt.tagName === "A" && getInternalData(elt).boosted);
}
function getPushUrl(elt) {
var pushUrl = getClosestAttributeValue(elt, "hx-push-url");
return (pushUrl === "true" || pushUrl === "false") ? null : pushUrl;
}
function addRequestIndicatorClasses(elt) {
mutateRequestIndicatorClasses(elt, "add");
}
@ -1560,7 +1566,7 @@ return (function () {
});
// push URL and save new page
if (shouldSaveHistory) {
var pathToPush = pushedUrl || finalPathForGet || path;
var pathToPush = pushedUrl || getPushUrl(elt) || finalPathForGet || path;
pushUrlIntoHistory(pathToPush);
triggerEvent(getDocument().body, 'pushedIntoHistory.htmx', {path:pathToPush});
}

View File

@ -13,7 +13,7 @@ describe("hx-push-url attribute", function() {
localStorage.removeItem(HTMX_HISTORY_CACHE_NAME);
});
it("navigation should push an element into the cache ", function () {
it("navigation should push an element into the cache when true", function () {
this.server.respondWith("GET", "/test", "second");
getWorkArea().innerHTML.should.be.equal("");
var div = make('<div hx-push-url="true" hx-get="/test">first</div>');
@ -22,6 +22,19 @@ describe("hx-push-url attribute", function() {
getWorkArea().textContent.should.equal("second")
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME));
cache.length.should.equal(1);
cache[0].url.should.equal("/test");
});
it("navigation should push an element into the cache when string", function () {
this.server.respondWith("GET", "/test", "second");
getWorkArea().innerHTML.should.be.equal("");
var div = make('<div hx-push-url="/abc123" hx-get="/test">first</div>');
div.click();
this.server.respond();
getWorkArea().textContent.should.equal("second")
var cache = JSON.parse(localStorage.getItem(HTMX_HISTORY_CACHE_NAME));
cache.length.should.equal(1);
cache[0].url.should.equal("/abc123");
});
it("restore should return old value", function () {

View File

@ -7,7 +7,7 @@ title: </> htmx - hx-push-url
The `hx-push-url` attribute allows you to "push" a new entry into the browser location bar, which creates
a new history entry, allowing back-button and general history navigation. The possible values of this
attribute are `true` and `false`.
attribute are `true`, `false` or a custom string.
Here is an example:
@ -20,6 +20,14 @@ Here is an example:
This will cause htmx to snapshot the current DOM to `localStorage` and push the URL `/account' into the browser
location bar.
```html
<div hx-get="/account" hx-push-url="/account/home">
Go to My Account
</div>
```
This will push the URL `/account/home' into the browser location bar.
### Notes
* `hx-push-url` is inherited and can be placed on a parent element