MDL-67857 formchangechecker: support form submits that dont save

This commit is contained in:
Tim Hunt 2020-02-03 18:53:06 +00:00
parent 4e90332195
commit 007d13f147
4 changed files with 106 additions and 19 deletions

View File

@ -9,6 +9,19 @@ YUI.add('moodle-core-formchangechecker', function (Y, NAME) {
/**
* A utility to check for form changes before navigating away from a page.
*
* To initialise, call M.core_formchangechecker.init({formid: 'myform'}); or perhaps
*
* Y.use('moodle-core-formchangechecker', function() {
* M.core_formchangechecker.init({formid: 'myform'});
* });
*
* If you have some fields in your form that you don't want to have tracked, then add
* a data-formchangechecker-ignore-dirty to the field, or any parent element, and it
* will be ignored.
*
* If you have a submit button in your form that does not actually save the data,
* then add a data-formchangechecker-ignore-submit attribute to it.
*
* @class M.core.formchangechecker
* @constructor
*/
@ -55,8 +68,19 @@ Y.extend(FORMCHANGECHECKER, Y.Base, {
this.initialvaluelisteners.push(currentform.delegate('focus', this.store_initial_value, 'textarea', this));
this.initialvaluelisteners.push(currentform.delegate('focus', this.store_initial_value, 'select', this));
// We need any submit buttons on the form to set the submitted flag
Y.one(formid).on('submit', M.core_formchangechecker.set_form_submitted, this);
currentform.delegate('click', function() {
currentform.setData('ignoreSubmission', true);
}, '[data-formchangechecker-ignore-submit]');
// We need any submit buttons on the form to set the submitted flag.
Y.one(formid).on('submit', function() {
if (currentform.getData('ignoreSubmission')) {
// But not if we have been told to ignore this button.
currentform.clearData('ignoreSubmission');
return;
}
M.core_formchangechecker.set_form_submitted();
}, this);
// YUI doesn't support onbeforeunload properly so we must use the DOM to set the onbeforeunload. As
// a result, the has_changed must stay in the DOM too
@ -75,10 +99,13 @@ Y.extend(FORMCHANGECHECKER, Y.Base, {
*/
store_initial_value: function(e) {
var thisevent;
if (e.target.hasClass('ignoredirty') || e.target.ancestor('.ignoredirty')) {
// Don't warn on elements with the ignoredirty class
// Don't warn on elements we have been told to ignore.
if (e.target.ancestor('.ignoredirty', true) ||
e.target.ancestor('[data-formchangechecker-ignore-dirty]', true)) {
return;
}
if (M.core_formchangechecker.get_form_dirty_state()) {
// Detach all listen events to prevent duplicate initial value setting
while (this.initialvaluelisteners.length) {
@ -127,10 +154,12 @@ M.core_formchangechecker.stateinformation = [];
* Set the form changed state to true
*/
M.core_formchangechecker.set_form_changed = function(e) {
if (e && e.target && (e.target.hasClass('ignoredirty') || e.target.ancestor('.ignoredirty'))) {
// Don't warn on elements with the ignoredirty class
// Don't warn on elements we have been told to ignore.
if (e && e.target && (e.target.ancestor('.ignoredirty', true) ||
e.target.ancestor('[data-formchangechecker-ignore-dirty]', true))) {
return;
}
M.core_formchangechecker.stateinformation.formchanged = 1;
// Once the form has been marked as dirty, we no longer need to keep track of form elements

View File

@ -1 +1 @@
YUI.add("moodle-core-formchangechecker",function(e,t){var n="core-formchangechecker",r=function(){r.superclass.constructor.apply(this,arguments)};e.extend(r,e.Base,{initialvaluelisteners:[],initializer:function(){var t="form#"+this.get("formid"),n=e.one(t);if(!n)return;M.core_formchangechecker.stateinformation.formchanged||(M.core_formchangechecker.stateinformation.formchanged=this.get("initialdirtystate")),e.on(M.core.event.EDITOR_CONTENT_RESTORED,M.core_formchangechecker.reset_form_dirty_state,this),n.delegate("change",M.core_formchangechecker.set_form_changed,"input",this),n.delegate("change",M.core_formchangechecker.set_form_changed,"textarea",this),n.delegate("change",M.core_formchangechecker.set_form_changed,"select",this),this.initialvaluelisteners.push(n.delegate("focus",this.store_initial_value,"input",this)),this.initialvaluelisteners.push(n.delegate("focus",this.store_initial_value,"textarea",this)),this.initialvaluelisteners.push(n.delegate("focus",this.store_initial_value,"select",this)),e.one(t).on("submit",M.core_formchangechecker.set_form_submitted,this),window.onbeforeunload=M.core_formchangechecker.report_form_dirty_state},store_initial_value:function(e){var t;if(e.target.hasClass("ignoredirty")||e.target.ancestor(".ignoredirty"))return;if(M.core_formchangechecker.get_form_dirty_state()){while(this.initialvaluelisteners.length)t=this.initialvaluelisteners.shift(),t.detach();return}M.core_formchangechecker.stateinformation.focused_element={element:e.target,initial_value:e.target.get("value")}}},{NAME:n,ATTRS:{formid:{value:""},initialdirtystate:{value:!1}}}),M.core_formchangechecker=M.core_formchangechecker||{},M.core_formchangechecker.instances=M.core_formchangechecker.instances||[],M.core_formchangechecker.init=function(e){var t=new r(e);return M.core_formchangechecker.instances.push(t),t},M.core_formchangechecker.stateinformation=[],M.core_formchangechecker.set_form_changed=function(e){if(e&&e.target&&(e.target.hasClass("ignoredirty")||e.target.ancestor(".ignoredirty")))return;M.core_formchangechecker.stateinformation.formchanged=1,delete M.core_formchangechecker.stateinformation.focused_element},M.core_formchangechecker.set_form_submitted=function(){M.core_formchangechecker.stateinformation.formsubmitted=1},M.core_formchangechecker.get_form_dirty_state=function(){var e=M.core_formchangechecker.stateinformation,t;if(e.formsubmitted)return 0;if(e.formchanged)return 1;if(e.focused_element&&e.focused_element.element.get("value")!==e.focused_element.initial_value)return 1;if(typeof window.tinyMCE!="undefined")for(t in window.tinyMCE.editors)if(window.tinyMCE.editors[t].isDirty())return 1;return 0},M.core_formchangechecker.reset_form_dirty_state=function(){M.core_formchangechecker.stateinformation.formsubmitted=!1,M.core_formchangechecker.stateinformation.formchanged=!1},M.core_formchangechecker.report_form_dirty_state=function(e){if(!M.core_formchangechecker.get_form_dirty_state())return;var t=M.util.get_string("changesmadereallygoaway","moodle");if(M.cfg.behatsiterunning)return;return e&&(e.returnValue=t),t}},"@VERSION@",{requires:["base","event-focus","moodle-core-event"]});
YUI.add("moodle-core-formchangechecker",function(e,t){var n="core-formchangechecker",r=function(){r.superclass.constructor.apply(this,arguments)};e.extend(r,e.Base,{initialvaluelisteners:[],initializer:function(){var t="form#"+this.get("formid"),n=e.one(t);if(!n)return;M.core_formchangechecker.stateinformation.formchanged||(M.core_formchangechecker.stateinformation.formchanged=this.get("initialdirtystate")),e.on(M.core.event.EDITOR_CONTENT_RESTORED,M.core_formchangechecker.reset_form_dirty_state,this),n.delegate("change",M.core_formchangechecker.set_form_changed,"input",this),n.delegate("change",M.core_formchangechecker.set_form_changed,"textarea",this),n.delegate("change",M.core_formchangechecker.set_form_changed,"select",this),this.initialvaluelisteners.push(n.delegate("focus",this.store_initial_value,"input",this)),this.initialvaluelisteners.push(n.delegate("focus",this.store_initial_value,"textarea",this)),this.initialvaluelisteners.push(n.delegate("focus",this.store_initial_value,"select",this)),n.delegate("click",function(){n.setData("ignoreSubmission",!0)},"[data-formchangechecker-ignore-submit]"),e.one(t).on("submit",function(){if(n.getData("ignoreSubmission")){n.clearData("ignoreSubmission");return}M.core_formchangechecker.set_form_submitted()},this),window.onbeforeunload=M.core_formchangechecker.report_form_dirty_state},store_initial_value:function(e){var t;if(e.target.ancestor(".ignoredirty",!0)||e.target.ancestor("[data-formchangechecker-ignore-dirty]",!0))return;if(M.core_formchangechecker.get_form_dirty_state()){while(this.initialvaluelisteners.length)t=this.initialvaluelisteners.shift(),t.detach();return}M.core_formchangechecker.stateinformation.focused_element={element:e.target,initial_value:e.target.get("value")}}},{NAME:n,ATTRS:{formid:{value:""},initialdirtystate:{value:!1}}}),M.core_formchangechecker=M.core_formchangechecker||{},M.core_formchangechecker.instances=M.core_formchangechecker.instances||[],M.core_formchangechecker.init=function(e){var t=new r(e);return M.core_formchangechecker.instances.push(t),t},M.core_formchangechecker.stateinformation=[],M.core_formchangechecker.set_form_changed=function(e){if(e&&e.target&&(e.target.ancestor(".ignoredirty",!0)||e.target.ancestor("[data-formchangechecker-ignore-dirty]",!0)))return;M.core_formchangechecker.stateinformation.formchanged=1,delete M.core_formchangechecker.stateinformation.focused_element},M.core_formchangechecker.set_form_submitted=function(){M.core_formchangechecker.stateinformation.formsubmitted=1},M.core_formchangechecker.get_form_dirty_state=function(){var e=M.core_formchangechecker.stateinformation,t;if(e.formsubmitted)return 0;if(e.formchanged)return 1;if(e.focused_element&&e.focused_element.element.get("value")!==e.focused_element.initial_value)return 1;if(typeof window.tinyMCE!="undefined")for(t in window.tinyMCE.editors)if(window.tinyMCE.editors[t].isDirty())return 1;return 0},M.core_formchangechecker.reset_form_dirty_state=function(){M.core_formchangechecker.stateinformation.formsubmitted=!1,M.core_formchangechecker.stateinformation.formchanged=!1},M.core_formchangechecker.report_form_dirty_state=function(e){if(!M.core_formchangechecker.get_form_dirty_state())return;var t=M.util.get_string("changesmadereallygoaway","moodle");if(M.cfg.behatsiterunning)return;return e&&(e.returnValue=t),t}},"@VERSION@",{requires:["base","event-focus","moodle-core-event"]});

View File

@ -9,6 +9,19 @@ YUI.add('moodle-core-formchangechecker', function (Y, NAME) {
/**
* A utility to check for form changes before navigating away from a page.
*
* To initialise, call M.core_formchangechecker.init({formid: 'myform'}); or perhaps
*
* Y.use('moodle-core-formchangechecker', function() {
* M.core_formchangechecker.init({formid: 'myform'});
* });
*
* If you have some fields in your form that you don't want to have tracked, then add
* a data-formchangechecker-ignore-dirty to the field, or any parent element, and it
* will be ignored.
*
* If you have a submit button in your form that does not actually save the data,
* then add a data-formchangechecker-ignore-submit attribute to it.
*
* @class M.core.formchangechecker
* @constructor
*/
@ -55,8 +68,19 @@ Y.extend(FORMCHANGECHECKER, Y.Base, {
this.initialvaluelisteners.push(currentform.delegate('focus', this.store_initial_value, 'textarea', this));
this.initialvaluelisteners.push(currentform.delegate('focus', this.store_initial_value, 'select', this));
// We need any submit buttons on the form to set the submitted flag
Y.one(formid).on('submit', M.core_formchangechecker.set_form_submitted, this);
currentform.delegate('click', function() {
currentform.setData('ignoreSubmission', true);
}, '[data-formchangechecker-ignore-submit]');
// We need any submit buttons on the form to set the submitted flag.
Y.one(formid).on('submit', function() {
if (currentform.getData('ignoreSubmission')) {
// But not if we have been told to ignore this button.
currentform.clearData('ignoreSubmission');
return;
}
M.core_formchangechecker.set_form_submitted();
}, this);
// YUI doesn't support onbeforeunload properly so we must use the DOM to set the onbeforeunload. As
// a result, the has_changed must stay in the DOM too
@ -75,10 +99,13 @@ Y.extend(FORMCHANGECHECKER, Y.Base, {
*/
store_initial_value: function(e) {
var thisevent;
if (e.target.hasClass('ignoredirty') || e.target.ancestor('.ignoredirty')) {
// Don't warn on elements with the ignoredirty class
// Don't warn on elements we have been told to ignore.
if (e.target.ancestor('.ignoredirty', true) ||
e.target.ancestor('[data-formchangechecker-ignore-dirty]', true)) {
return;
}
if (M.core_formchangechecker.get_form_dirty_state()) {
// Detach all listen events to prevent duplicate initial value setting
while (this.initialvaluelisteners.length) {
@ -127,10 +154,12 @@ M.core_formchangechecker.stateinformation = [];
* Set the form changed state to true
*/
M.core_formchangechecker.set_form_changed = function(e) {
if (e && e.target && (e.target.hasClass('ignoredirty') || e.target.ancestor('.ignoredirty'))) {
// Don't warn on elements with the ignoredirty class
// Don't warn on elements we have been told to ignore.
if (e && e.target && (e.target.ancestor('.ignoredirty', true) ||
e.target.ancestor('[data-formchangechecker-ignore-dirty]', true))) {
return;
}
M.core_formchangechecker.stateinformation.formchanged = 1;
// Once the form has been marked as dirty, we no longer need to keep track of form elements

View File

@ -7,6 +7,19 @@
/**
* A utility to check for form changes before navigating away from a page.
*
* To initialise, call M.core_formchangechecker.init({formid: 'myform'}); or perhaps
*
* Y.use('moodle-core-formchangechecker', function() {
* M.core_formchangechecker.init({formid: 'myform'});
* });
*
* If you have some fields in your form that you don't want to have tracked, then add
* a data-formchangechecker-ignore-dirty to the field, or any parent element, and it
* will be ignored.
*
* If you have a submit button in your form that does not actually save the data,
* then add a data-formchangechecker-ignore-submit attribute to it.
*
* @class M.core.formchangechecker
* @constructor
*/
@ -53,8 +66,19 @@ Y.extend(FORMCHANGECHECKER, Y.Base, {
this.initialvaluelisteners.push(currentform.delegate('focus', this.store_initial_value, 'textarea', this));
this.initialvaluelisteners.push(currentform.delegate('focus', this.store_initial_value, 'select', this));
// We need any submit buttons on the form to set the submitted flag
Y.one(formid).on('submit', M.core_formchangechecker.set_form_submitted, this);
currentform.delegate('click', function() {
currentform.setData('ignoreSubmission', true);
}, '[data-formchangechecker-ignore-submit]');
// We need any submit buttons on the form to set the submitted flag.
Y.one(formid).on('submit', function() {
if (currentform.getData('ignoreSubmission')) {
// But not if we have been told to ignore this button.
currentform.clearData('ignoreSubmission');
return;
}
M.core_formchangechecker.set_form_submitted();
}, this);
// YUI doesn't support onbeforeunload properly so we must use the DOM to set the onbeforeunload. As
// a result, the has_changed must stay in the DOM too
@ -73,10 +97,13 @@ Y.extend(FORMCHANGECHECKER, Y.Base, {
*/
store_initial_value: function(e) {
var thisevent;
if (e.target.hasClass('ignoredirty') || e.target.ancestor('.ignoredirty')) {
// Don't warn on elements with the ignoredirty class
// Don't warn on elements we have been told to ignore.
if (e.target.ancestor('.ignoredirty', true) ||
e.target.ancestor('[data-formchangechecker-ignore-dirty]', true)) {
return;
}
if (M.core_formchangechecker.get_form_dirty_state()) {
// Detach all listen events to prevent duplicate initial value setting
while (this.initialvaluelisteners.length) {
@ -125,10 +152,12 @@ M.core_formchangechecker.stateinformation = [];
* Set the form changed state to true
*/
M.core_formchangechecker.set_form_changed = function(e) {
if (e && e.target && (e.target.hasClass('ignoredirty') || e.target.ancestor('.ignoredirty'))) {
// Don't warn on elements with the ignoredirty class
// Don't warn on elements we have been told to ignore.
if (e && e.target && (e.target.ancestor('.ignoredirty', true) ||
e.target.ancestor('[data-formchangechecker-ignore-dirty]', true))) {
return;
}
M.core_formchangechecker.stateinformation.formchanged = 1;
// Once the form has been marked as dirty, we no longer need to keep track of form elements