feat: ConfirmNavigationController - Support for Hotwire/Turbo and Tur…

…bolinks navigation events
Sub-Xaero · Mar 2, 2021 · f698920 · f698920
1 parent f9be6e8
commit f698920
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 18 deletions.
diff --git a/dist/confirm_navigation_controller.d.ts b/dist/confirm_navigation_controller.d.ts
@@ -1,10 +1,14 @@
 import { BaseController } from "./base_controller";
 export declare class ConfirmNavigationController extends BaseController {
     static values: {
-        message: StringConstructor;
+        _message: StringConstructor;
     };
-    readonly messageValue: string;
+    readonly _messageValue: string;
+    readonly hasMessageValue: boolean;
+    get _message(): string;
+    initialize(): void;
     connect(): void;
-    handlePopstate(event: PopStateEvent): boolean;
+    handlePopstate(_event: PopStateEvent): boolean;
+    handleTurboNavigation(event: Event): void;
 }
 //# sourceMappingURL=confirm_navigation_controller.d.ts.map
diff --git a/dist/confirm_navigation_controller.d.ts.map b/dist/confirm_navigation_controller.d.ts.map
diff --git a/dist/stimulus-library.js b/dist/stimulus-library.js
diff --git a/dist/stimulus-library.js.map b/dist/stimulus-library.js.map
diff --git a/dist/stimulus-library.modern.js b/dist/stimulus-library.modern.js
diff --git a/dist/stimulus-library.modern.js.map b/dist/stimulus-library.modern.js.map
diff --git a/dist/stimulus-library.module.js b/dist/stimulus-library.module.js
diff --git a/dist/stimulus-library.module.js.map b/dist/stimulus-library.module.js.map
diff --git a/dist/stimulus-library.umd.js b/dist/stimulus-library.umd.js
diff --git a/dist/stimulus-library.umd.js.map b/dist/stimulus-library.umd.js.map
diff --git a/src/confirm_navigation_controller.ts b/src/confirm_navigation_controller.ts
@@ -2,23 +2,39 @@ import {BaseController} from "./base_controller";
 
 export class ConfirmNavigationController extends BaseController {
 
-  static values = {message: String};
+  static values = {_message: String};
 
-  declare readonly messageValue: string;
+  declare readonly _messageValue: string;
+  declare readonly hasMessageValue: boolean;
+
+  get _message(): string {
+    return this.hasMessageValue ? this._messageValue : "Do you want to leave this page? Changes you made may not be saved";
+  }
+
+  initialize() {
+    this.handlePopstate = this.handlePopstate.bind(this);
+    this.handleTurboNavigation = this.handleTurboNavigation.bind(this);
+  }
 
   connect() {
-    let confirmMessage = this.messageValue;
-    window.onbeforeunload = () => (confirmMessage == null ? true : confirmMessage);
+    window.onbeforeunload = () => this._message;
     window.addEventListener("popstate", this.handlePopstate);
     window.addEventListener("submit", () => {
       window.removeEventListener("popstate", this.handlePopstate);
       window.onbeforeunload = null;
     });
-    // TODO: Turbo navigation events
+    window.addEventListener("turbolinks:before-visit", this.handleTurboNavigation);
+    window.addEventListener("turbo:before-visit", this.handleTurboNavigation);
   }
 
-  handlePopstate(event: PopStateEvent) {
+  handlePopstate(_event: PopStateEvent) {
     return false;
   }
 
+  handleTurboNavigation(event: Event) {
+    if (!confirm(this._message)) {
+      event.preventDefault();
+    }
+  }
+
 }