Merge pull request #122 from bencroker/patch-8

Allowed `hx-push-url` to accept a string

src/htmx.js

@@ -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});
                                         }

test/attributes/hx-push-url.js

@@ -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 () {

www/attributes/hx-push-url.md

@@ -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