diff --git a/README.md b/README.md index 8e7fbb5..e9bef50 100644 --- a/README.md +++ b/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| %> diff --git a/dist/dirty-form.js b/dist/dirty-form.js index bf61ce7..0f44937 100644 --- a/dist/dirty-form.js +++ b/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; diff --git a/dist/dirty-form.min.js b/dist/dirty-form.min.js index 75736c6..d2b1a08 100644 --- a/dist/dirty-form.min.js +++ b/dist/dirty-form.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DirtyForm=t():e.DirtyForm=t()}(this,function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){function n(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t { + 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;