Add turbolinks 5 support

README.md

@@ -2,6 +2,8 @@
 
 > A lightweight plugin to prevent losing data when editing forms. No dependencies.
 
+It supports [Trix editor](https://trix-editor.org) and [Turbolinks 5](https://github.com/turbolinks/turbolinks).
+
 ## Install
 
 You can get it via `npm`:
@@ -25,7 +27,7 @@ let form = document.querySelector('#form')
 new DirtyForm(form)
 ```
 
-### Stimulus
+### Stimulus example
 
 ```html
 <%= form_with url: posts_path, html: { data: { controller: 'dirty-form' } } do |form| %>

dist/dirty-form.js

@@ -150,9 +150,27 @@ function () {
   }, {
     key: "setFormHandlers",
     value: function setFormHandlers() {
+      var _this2 = this;
+
+      // Handle submit
       window.addEventListener('submit', this.handleSubmit.bind(this));
-      this.form.addEventListener('submit', this.handleSubmit.bind(this));
-      window.onbeforeunload = this.handleUnload.bind(this);
+      this.form.addEventListener('submit', this.handleSubmit.bind(this)); // Handle leaving page
+
+      window.onbeforeunload = function () {
+        if (_this2.isDirty) {
+          return 'You have unsaved changes!';
+        }
+      };
+
+      if (typeof Turbolinks !== 'undefined') {
+        document.addEventListener('turbolinks:before-visit', function (event) {
+          if (_this2.isDirty && !confirm('You have unsaved changes!')) {
+            event.preventDefault();
+          } else {
+            _this2.isDirty = false;
+          }
+        });
+      }
     }
   }, {
     key: "checkValue",
@@ -168,13 +186,6 @@ function () {
     value: function handleSubmit() {
       this.isDirty = false;
     }
-  }, {
-    key: "handleUnload",
-    value: function handleUnload() {
-      if (this.isDirty) {
-        return 'You have unsaved changes!';
-      }
-    }
   }]);
 
   return DirtyForm;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dirty-form",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "A lightweight plugin to prevent losing data when editing forms. No dependencies.",
   "main": "dist/dirty-form.js",
   "files": [

src/dirty-form.js

@@ -32,9 +32,25 @@ class DirtyForm {
   }
 
   setFormHandlers() {
+    // Handle submit
     window.addEventListener('submit', this.handleSubmit.bind(this));
     this.form.addEventListener('submit', this.handleSubmit.bind(this));
-    window.onbeforeunload = this.handleUnload.bind(this);
+
+    // Handle leaving page
+    window.onbeforeunload = () => {
+      if (this.isDirty) {
+        return 'You have unsaved changes!';
+      }
+    };
+    if (typeof Turbolinks !== 'undefined') {
+      document.addEventListener('turbolinks:before-visit', (event) => {
+        if (this.isDirty && !confirm('You have unsaved changes!')) {
+          event.preventDefault()
+        } else {
+          this.isDirty = false;
+        }
+      });
+    }
   }
 
   checkValue(event) {
@@ -47,12 +63,6 @@ class DirtyForm {
   handleSubmit() {
     this.isDirty = false;
   }
-
-  handleUnload() {
-    if (this.isDirty) {
-      return 'You have unsaved changes!';
-    }
-  }
 }
 
 module.exports = DirtyForm;