Add phx:navigate event. Closes #2559. Closes #2731

phoenixframework · Jul 14, 2023 · 9cc41da · 9cc41da
1 parent 95dd101
commit 9cc41da
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 5 deletions.
diff --git a/assets/js/phoenix_live_view/live_socket.js b/assets/js/phoenix_live_view/live_socket.js
@@ -684,6 +684,7 @@ export default class LiveSocket {
       let {type, id, root, scroll} = event.state || {}
       let href = window.location.href
 
+      DOM.dispatchEvent(window, "phx:navigate", {detail: {href, patch: type === "patch", pop: true}})
       this.requestDOMUpdate(() => {
         if(this.main.isConnected() && (type === "patch" && id === this.main.id)){
           this.main.pushLinkPatch(href, null, () => {
@@ -761,6 +762,7 @@ export default class LiveSocket {
     if(!this.commitPendingLink(linkRef)){ return }
 
     Browser.pushState(linkState, {type: "patch", id: this.main.id}, href)
+    DOM.dispatchEvent(window, "phx:navigate", {detail: {patch: true, href, pop: false}})
     this.registerNewLocation(window.location)
   }
 
@@ -775,6 +777,7 @@ export default class LiveSocket {
     this.withPageLoading({to: href, kind: "redirect"}, done => {
       this.replaceMain(href, flash, () => {
         Browser.pushState(linkState, {type: "redirect", id: this.main.id, scroll: scroll}, href)
+        DOM.dispatchEvent(window, "phx:navigate", {detail: {href, patch: false, pop: false}})
         this.registerNewLocation(window.location)
         done()
       })

diff --git a/guides/client/js-interop.md b/guides/client/js-interop.md
@@ -105,6 +105,15 @@ In the case of an `"element"` page loading event, the info will contain a
 `"target"` key containing the DOM element which triggered the page loading
 state.
 
+A lower level `phx:navigate` event is also triggered any time the browser's URL bar
+is programmatically changed by Phoenix or the user navigation forward or back. The
+`info.detail` will contain the following information:
+
+  - `"href"` - the location the URL bar was navigated to.
+  - `"patch"` - the boolean flag indicating this was a patch navigation.
+  - `"pop"` - the boolean flag indication this was a navigation via `popstate`
+    from a user navigation forward or back in history.
+
 ### Handling server-pushed events
 
 When the server uses `Phoenix.LiveView.push_event/3`, the event name

diff --git a/priv/static/phoenix_live_view.cjs.js b/priv/static/phoenix_live_view.cjs.js
diff --git a/priv/static/phoenix_live_view.cjs.js.map b/priv/static/phoenix_live_view.cjs.js.map
diff --git a/priv/static/phoenix_live_view.esm.js b/priv/static/phoenix_live_view.esm.js
diff --git a/priv/static/phoenix_live_view.esm.js.map b/priv/static/phoenix_live_view.esm.js.map
diff --git a/priv/static/phoenix_live_view.js b/priv/static/phoenix_live_view.js
@@ -4247,6 +4247,7 @@ within:
         }
         let { type, id, root, scroll } = event.state || {};
         let href = window.location.href;
+        dom_default.dispatchEvent(window, "phx:navigate", { detail: { href, patch: type === "patch", pop: true } });
         this.requestDOMUpdate(() => {
           if (this.main.isConnected() && (type === "patch" && id === this.main.id)) {
             this.main.pushLinkPatch(href, null, () => {
@@ -4324,6 +4325,7 @@ within:
         return;
       }
       browser_default.pushState(linkState, { type: "patch", id: this.main.id }, href);
+      dom_default.dispatchEvent(window, "phx:navigate", { detail: { patch: true, href, pop: false } });
       this.registerNewLocation(window.location);
     }
     historyRedirect(href, linkState, flash) {
@@ -4338,6 +4340,7 @@ within:
       this.withPageLoading({ to: href, kind: "redirect" }, (done) => {
         this.replaceMain(href, flash, () => {
           browser_default.pushState(linkState, { type: "redirect", id: this.main.id, scroll }, href);
+          dom_default.dispatchEvent(window, "phx:navigate", { detail: { href, patch: false, pop: false } });
           this.registerNewLocation(window.location);
           done();
         });