From 19b436773dd66bfb2e83ef60e355a15e219b9d7d Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Sat, 26 Dec 2020 22:58:17 +0100 Subject: [PATCH 1/8] Update path-deps.js By catering for a new custom event called `htmx:refreshPath`, we should be able to support the triggering of the refresh of a specific path --- src/ext/path-deps.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js index e1264e79..b247197b 100644 --- a/src/ext/path-deps.js +++ b/src/ext/path-deps.js @@ -15,20 +15,26 @@ return false; } + function refreshPath(path) { + var eltsWithDeps = htmx.findAll("[path-deps]"); + for (var i = 0; i < eltsWithDeps.length; i++) { + var elt = eltsWithDeps[i]; + if (dependsOn(elt.getAttribute('path-deps'), path)) { + htmx.trigger(elt, "path-deps"); + } + } + } + htmx.defineExtension('path-deps', { onEvent: function (name, evt) { if (name === "htmx:afterRequest") { var config = evt.detail.requestConfig; // mutating call if (config.verb !== "get") { - var eltsWithDeps = htmx.findAll("[path-deps]"); - for (var i = 0; i < eltsWithDeps.length; i++) { - var elt = eltsWithDeps[i]; - if (dependsOn(elt.getAttribute('path-deps'), config.path)) { - htmx.trigger(elt, "path-deps"); - } - } + refreshPath(config.path); } + } else if (name === "htmx:refreshPath") { + refreshPath(evt.path); } } }); From d105d7bce724041d9549ba1c83d5a27a75281d15 Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Sat, 26 Dec 2020 23:17:34 +0100 Subject: [PATCH 2/8] Update path-deps.js --- src/ext/path-deps.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js index b247197b..3d9de760 100644 --- a/src/ext/path-deps.js +++ b/src/ext/path-deps.js @@ -35,6 +35,9 @@ } } else if (name === "htmx:refreshPath") { refreshPath(evt.path); + } else if (name === "htmx:refreshElement") { + var elt = evt.detail.elt; + htmx.trigger(elt, "path-deps"); } } }); From a8b7f0171b2eabc4d523892753e71cd60f029707 Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Sat, 26 Dec 2020 23:20:34 +0100 Subject: [PATCH 3/8] Update path-deps.js --- src/ext/path-deps.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js index 3d9de760..4e2ba16e 100644 --- a/src/ext/path-deps.js +++ b/src/ext/path-deps.js @@ -35,7 +35,7 @@ } } else if (name === "htmx:refreshPath") { refreshPath(evt.path); - } else if (name === "htmx:refreshElement") { + } else if (name === "htmx:refresh") { var elt = evt.detail.elt; htmx.trigger(elt, "path-deps"); } From ac830eb42bc7800869266296904d57ee19761ccc Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Sat, 26 Dec 2020 23:22:23 +0100 Subject: [PATCH 4/8] Update path-deps.js --- src/ext/path-deps.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js index 4e2ba16e..7a98b0f5 100644 --- a/src/ext/path-deps.js +++ b/src/ext/path-deps.js @@ -35,10 +35,7 @@ } } else if (name === "htmx:refreshPath") { refreshPath(evt.path); - } else if (name === "htmx:refresh") { - var elt = evt.detail.elt; - htmx.trigger(elt, "path-deps"); - } + } } }); })(); From 44af39083dd92bce5d174ac1dc954a191b5df633 Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Sat, 26 Dec 2020 23:28:44 +0100 Subject: [PATCH 5/8] Update path-deps.js --- src/ext/path-deps.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js index 7a98b0f5..cd5c0142 100644 --- a/src/ext/path-deps.js +++ b/src/ext/path-deps.js @@ -34,7 +34,7 @@ refreshPath(config.path); } } else if (name === "htmx:refreshPath") { - refreshPath(evt.path); + refreshPath(evt.detail.path); } } }); From 53ba918f0914450d75af60da1ac049e6d9c12865 Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Sun, 27 Dec 2020 11:38:15 +0100 Subject: [PATCH 6/8] Update path-deps.js --- src/ext/path-deps.js | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/ext/path-deps.js b/src/ext/path-deps.js index cd5c0142..36d83d5a 100644 --- a/src/ext/path-deps.js +++ b/src/ext/path-deps.js @@ -1,4 +1,9 @@ -(function(){ +(function(undefined){ + 'use strict'; + + // Save a reference to the global object (window in the browser) + var _root = this; + function dependsOn(pathSpec, url) { var dependencyPath = pathSpec.split("/"); var urlPath = url.split("/"); @@ -23,7 +28,7 @@ htmx.trigger(elt, "path-deps"); } } - } + } htmx.defineExtension('path-deps', { onEvent: function (name, evt) { @@ -33,9 +38,21 @@ if (config.verb !== "get") { refreshPath(config.path); } - } else if (name === "htmx:refreshPath") { - refreshPath(evt.detail.path); } } }); -})(); + + /** + * ******************** + * Expose functionality + * ******************** + */ + + _root.PathDeps = { + + PathDeps.refresh: function(path) { + refreshPath(path); + } + }; + +}).call(this); From b46e8ab10f1e267bb635ee7afa4fc016229537d7 Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Wed, 30 Dec 2020 14:49:21 +0100 Subject: [PATCH 7/8] Added tests --- test/ext/path-deps.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/test/ext/path-deps.js b/test/ext/path-deps.js index 8dea9f70..315bd0b4 100644 --- a/test/ext/path-deps.js +++ b/test/ext/path-deps.js @@ -138,5 +138,24 @@ describe("path-deps extension", function() { div.innerHTML.should.equal("Deps fired!"); }); + it('path-deps api basic refresh case works', function () { + this.server.respondWith("GET", "/test", "Path deps fired!"); + var div = make('
FOO
') + PathDeps.refresh("/test"); + this.server.respond(); + div.innerHTML.should.equal("Path deps fired!"); + }); -}); \ No newline at end of file + it('path-deps api parent path case works', function () { + this.server.respondWith("GET", "/test1", "Path deps 1 fired!"); + this.server.respondWith("GET", "/test2", "Path deps 2 fired!"); + var div = make('
FOO
') + var div2 = make('
BAR
') + PathDeps.refresh("/test/child"); + this.server.respond(); + div.innerHTML.should.equal("Path deps 1 fired!"); + this.server.respond(); + div2.innerHTML.should.equal("Path deps 2 fired!"); + }); + +}); From d529108045c72f533cc24ae986ad02c816c18e51 Mon Sep 17 00:00:00 2001 From: Johan Vosloo Date: Wed, 30 Dec 2020 15:00:24 +0100 Subject: [PATCH 8/8] Added documentation --- www/extensions/path-deps.md | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/www/extensions/path-deps.md b/www/extensions/path-deps.md index dbaebd91..65fb2916 100644 --- a/www/extensions/path-deps.md +++ b/www/extensions/path-deps.md @@ -5,14 +5,14 @@ title: htmx - high power tools for html ## The `path-deps` Extension -This extension supports expressing inter-element dependencies based on paths, inspired by the +This extension supports expressing inter-element dependencies based on paths, inspired by the [intercooler.js dependencies mechanism.](http://intercoolerjs.org/docs.html#dependencies). When this extension is installed an element can express a dependency on another path by using the `path-deps` property and then setting `hx-trigger` to `path-deps`: ```html -
...
``` @@ -22,8 +22,8 @@ request like a `POST`) to `/foo/bar` or any sub-paths of that path. You can use a `*` to match any path component: ```html -
...
``` @@ -39,6 +39,23 @@ You can use a `*` to match any path component: ``` +#### Javascript API + +### Method - [`PathDeps.refresh()`](#refresh) + +This method manually triggers a refresh for the given path. + +##### Parameters + +* `path` - the path to refresh + +##### Example + +```js + // Trigger a refresh on all elements with the path-deps attribute '/path/to/refresh', including elements with a parent path, e.g. '/path' + PathDeps.refresh('/path/to/refresh'); +``` + #### Source