diff --git a/README.md b/README.md index e9bef50..6da991e 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,14 @@ let form = document.querySelector('#form') new DirtyForm(form) ``` +If you want to customize the message: + +```javascript +new DirtyForm(form, { + message: 'You have unsaved changes. Are you sure you want to leave?', +}) +``` + ### Stimulus example ```html diff --git a/dist/dirty-form.js b/dist/dirty-form.js index 0f44937..3d41460 100644 --- a/dist/dirty-form.js +++ b/dist/dirty-form.js @@ -116,12 +116,15 @@ var DirtyForm = /*#__PURE__*/ function () { function DirtyForm(form) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + _classCallCheck(this, DirtyForm); this.form = form; this.isDirty = false; this.initialValues = {}; this.fields = [].concat(_toConsumableArray(this.form.elements), _toConsumableArray(this.form.querySelectorAll('trix-editor'))); + this.message = options['message'] || 'You have unsaved changes!'; this.setupFields(); this.setFormHandlers(); } @@ -158,13 +161,13 @@ function () { window.onbeforeunload = function () { if (_this2.isDirty) { - return 'You have unsaved changes!'; + return _this2.message; } }; if (typeof Turbolinks !== 'undefined') { document.addEventListener('turbolinks:before-visit', function (event) { - if (_this2.isDirty && !confirm('You have unsaved changes!')) { + if (_this2.isDirty && !confirm(_this2.message)) { event.preventDefault(); } else { _this2.isDirty = false; diff --git a/dist/dirty-form.min.js b/dist/dirty-form.min.js index d2b1a08..129aaae 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);t1&&void 0!==arguments[1]?arguments[1]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.form=t,this.isDirty=!1,this.initialValues={},this.fields=[].concat(n(this.form.elements),n(this.form.querySelectorAll("trix-editor"))),this.message=r.message||"You have unsaved changes!",this.setupFields(),this.setFormHandlers()}var t,i,o;return t=e,(i=[{key:"setupFields",value:function(){var e=this;this.fields.forEach(function(t){t.name&&"submit"!=t.type&&"button"!=t.type&&"hidden"!=t.type&&(e.initialValues[t.name]=t.value,"TRIX-EDITOR"==t.nodeName?t.addEventListener("trix-change",e.checkValue.bind(e)):(t.addEventListener("change",e.checkValue.bind(e)),t.addEventListener("input",e.checkValue.bind(e))))})}},{key:"setFormHandlers",value:function(){var e=this;window.addEventListener("submit",this.handleSubmit.bind(this)),this.form.addEventListener("submit",this.handleSubmit.bind(this)),window.onbeforeunload=function(){if(e.isDirty)return e.message},"undefined"!=typeof Turbolinks&&document.addEventListener("turbolinks:before-visit",function(t){e.isDirty&&!confirm(e.message)?t.preventDefault():e.isDirty=!1})}},{key:"checkValue",value:function(e){var t=e.target;this.initialValues[t.name]!=t.value&&(this.isDirty=!0)}},{key:"handleSubmit",value:function(){this.isDirty=!1}}])&&r(t.prototype,i),o&&r(t,o),e}();e.exports=i}])}); \ No newline at end of file diff --git a/package.json b/package.json index b666392..d2a6002 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dirty-form", - "version": "0.3.0", + "version": "0.4.0", "description": "A lightweight plugin to prevent losing data when editing forms. No dependencies.", "main": "dist/dirty-form.js", "files": [ diff --git a/src/dirty-form.js b/src/dirty-form.js index cf40b80..3ffdfe3 100644 --- a/src/dirty-form.js +++ b/src/dirty-form.js @@ -1,5 +1,5 @@ class DirtyForm { - constructor(form) { + constructor(form, options = {}) { this.form = form; this.isDirty = false; this.initialValues = {}; @@ -7,6 +7,7 @@ class DirtyForm { ...this.form.elements, ...this.form.querySelectorAll('trix-editor') ] + this.message = options['message'] || 'You have unsaved changes!'; this.setupFields(); this.setFormHandlers(); @@ -39,12 +40,12 @@ class DirtyForm { // Handle leaving page window.onbeforeunload = () => { if (this.isDirty) { - return 'You have unsaved changes!'; + return this.message; } }; if (typeof Turbolinks !== 'undefined') { document.addEventListener('turbolinks:before-visit', (event) => { - if (this.isDirty && !confirm('You have unsaved changes!')) { + if (this.isDirty && !confirm(this.message)) { event.preventDefault() } else { this.isDirty = false;