cfc60b5de4
This is the reason why this feature was implemented in the first place: it's easy to open the editor, make some changes, close it, and continue without realizing the changes have not been saved. In the rest of the forms, this functionality is quite lacking. For starters, some forms warn if there are unsaved changes, while some forms don't, which is highly inconsistent and disorients users. Furthermore, we were having problems with this feature after upgrading Turbolinks, particularly in forms using CKEditor. In these cases, a lot of hacking needs to be done in order to make this feature work properly, since CKEditor adds some formatting automatically, and if this is done after the form is serialized, we'll get some unexpected behavior. On the other hand, comparing the value of a textarea against its `defaultValue` property will work on every edge case, including using the browser's back button or reloading the page. Finally, users are used to the way web forms work, and aren't used to be asked for confirmation when they change their mind and decide to leave the page without saving the changes. Asking them for confirmation will be annoying in most cases. Besides that, if they accidentally leave the page, they can use the browser's back button and they'll recover the unsaved changes. It's true this won't happen it they accidentally close the browser's window, but our WatchFormChanges functionality didn't work in this case either. Using the "beforeunload" event adds more problems than it solves, since it doesn't support custom messages (or, to be more precise, modern browsers ignore custom messages), and it doesn't get along with turbolinks. Co-Authored-By: Senén Rodero Rodríguez <senenrodero@gmail.com>
23 lines
639 B
JavaScript
23 lines
639 B
JavaScript
(function() {
|
|
"use strict";
|
|
App.LegislationDraftVersions = {
|
|
msg: function() {
|
|
return $("[data-markdown-changes-message]").data("markdown-changes-message");
|
|
},
|
|
hasChanged: function() {
|
|
return $(".markdown-editor textarea").is(function() {
|
|
return this.value !== this.defaultValue;
|
|
});
|
|
},
|
|
checkChanges: function() {
|
|
if (App.LegislationDraftVersions.hasChanged()) {
|
|
return confirm(App.LegislationDraftVersions.msg());
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
};
|
|
|
|
$(document).on("turbolinks:before-visit", App.LegislationDraftVersions.checkChanges);
|
|
}).call(this);
|