moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-08 18:36:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-54778 form: Fix lots of issues with form dependencies

Browse source 
The original issue here was that each loop of the named values did not
check for prototypal properties. As a result, if there were input fields
with names such as 'sort', 'valueOf', 'constructor', etc. these would
return their prototypal functions instead of a falsy value, and be treated
as though they are array - hence the 'Cannot push to Function' type error.

Following on from this I discovered that the data stores were being created
as arrays, but used as objects. This can also cause issues with some form
input names -- e.g. if they are numeric.

These two issues were resolved together by correctly storing them in
objects, and checking that those objects had real properties
(hasOwnProperty). This itself has to use the prototypal function to cater
for the potential of a field name called 'hasOwnProperty'.

I also found that the instance value stores were being initialised in the
prototype (and therefore shared), which meant that there were numerous
issues if two forms were present on the same page, or one form replaced an
existing one (e.g. forms initialised in JS).

In addition, it also became apparant that several values were being used
outside of scope, or in the wrong scope. This caused further issues when
creating multiple forms on a page.
This commit is contained in:
Andrew Nicols 2016-06-07 13:26:42 +08:00
parent 49619ce243
commit badbaa64e3
1 changed files with 530 additions and 501 deletions
Download patch file Download diff file Expand all files Collapse all files

333
lib/form/form.js
View file

@ -6,56 +6,28 @@
// Namespace for the form bits and bobs // Namespace for the form bits and bobs
M.form = M.form || {}; M.form = M.form || {};
/** if (typeof M.form.dependencyManager === 'undefined') {
* Stores a list of the dependencyManager for each form on the page. var dependencyManager = function() {
*/
M.form.dependencyManagers = {};
/**
* Initialises a manager for a forms dependencies.
* This should happen once per form.
*/
M.form.initFormDependencies = function(Y, formid, dependencies) {
// If the dependencies isn't an array or object we don't want to
// know about it
if (!Y.Lang.isArray(dependencies) && !Y.Lang.isObject(dependencies)) {
return false;
}
/**
* Fixes an issue with YUI's processing method of form.elements property
* in Internet Explorer.
* http://yuilibrary.com/projects/yui3/ticket/2528030
*/
Y.Node.ATTRS.elements = {
getter: function() {
return Y.all(new Y.Array(this._node.elements, 0, true));
}
};
// Define the dependency manager if it hasn't already been defined.
M.form.dependencyManager = M.form.dependencyManager || (function(){
var dependencyManager = function(config) {
dependencyManager.superclass.constructor.apply(this, arguments); dependencyManager.superclass.constructor.apply(this, arguments);
}; };
dependencyManager.prototype = { Y.extend(dependencyManager, Y.Base, {
_form : null, _locks: null,
_locks : [], _hides: null,
_hides : [], _dirty: null,
_dirty : [], _nameCollections: null,
_nameCollections : null, _fileinputs: null,
_fileinputs : null,
initializer : function(config) { initializer: function() {
var i = 0, nodeName; // Setup initial values for complex properties.
this._form = Y.one('#'+formid); this._locks = {};
for (i in dependencies) { this._hides = {};
this._dirty = {};
// Setup event handlers.
Y.Object.each(this.get('dependencies'), function(value, i) {
var elements = this.elementsByName(i); var elements = this.elementsByName(i);
if (elements.size() == 0) {
continue;
}
elements.each(function(node){ elements.each(function(node){
nodeName = node.get('nodeName').toUpperCase(); var nodeName = node.get('nodeName').toUpperCase();
if (nodeName == 'INPUT') { if (nodeName == 'INPUT') {
if (node.getAttribute('type').match(/^(button|submit|radio|checkbox)$/)) { if (node.getAttribute('type').match(/^(button|submit|radio|checkbox)$/)) {
node.on('click', this.updateEventDependencies, this); node.on('click', this.updateEventDependencies, this);
@ -71,43 +43,49 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
node.on('change', this.updateEventDependencies, this); node.on('change', this.updateEventDependencies, this);
} }
}, this); }, this);
} }, this);
this._form.get('elements').each(function(input){
if (input.getAttribute('type')=='reset') { // Handle the reset button.
this.get('form').get('elements').each(function(input){
if (input.getAttribute('type') == 'reset') {
input.on('click', function(){ input.on('click', function(){
this._form.reset(); this.get('form').reset();
this.updateAllDependencies(); this.updateAllDependencies();
}, this); }, this);
} }
}, this); }, this);
return this.updateAllDependencies(); this.updateAllDependencies();
}, },
/** /**
* Initializes the mapping from element name to YUI NodeList * Initializes the mapping from element name to YUI NodeList
*/ */
initElementsByName : function() { initElementsByName: function() {
var names = []; var names = {};
// Collect element names
for (var i in dependencies) { // Collect element names.
Y.Object.each(this.get('dependencies'), function(conditions, i) {
names[i] = new Y.NodeList(); names[i] = new Y.NodeList();
for (var condition in dependencies[i]) { for (var condition in conditions) {
for (var value in dependencies[i][condition]) { for (var value in conditions[condition]) {
for (var ei in dependencies[i][condition][value]) { for (var ei in conditions[condition][value]) {
names[dependencies[i][condition][value][ei]] = new Y.NodeList(); names[conditions[condition][value][ei]] = new Y.NodeList();
} }
} }
} }
} });
// Locate elements for each name
this._form.get('elements').each(function(node){ // Locate elements for each name.
this.get('form').get('elements').each(function(node){
var name = node.getAttribute('name'); var name = node.getAttribute('name');
if (names[name]) { if (({}).hasOwnProperty.call(names, name)) {
names[name].push(node); names[name].push(node);
} }
}); });
this._nameCollections = names; this._nameCollections = names;
}, },
/** /**
* Gets all elements in the form by their name and returns * Gets all elements in the form by their name and returns
* a YUI NodeList * a YUI NodeList
@ -115,15 +93,16 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
* @param {string} name The form element name. * @param {string} name The form element name.
* @return {Y.NodeList} * @return {Y.NodeList}
*/ */
elementsByName : function(name) { elementsByName: function(name) {
if (!this._nameCollections) { if (!this._nameCollections) {
this.initElementsByName(); this.initElementsByName();
} }
if (!this._nameCollections[name]) { if (!({}).hasOwnProperty.call(this._nameCollections, name)) {
return new Y.NodeList(); return new Y.NodeList();
} }
return this._nameCollections[name]; return this._nameCollections[name];
}, },
/** /**
* Checks the dependencies the form has an makes any changes to the * Checks the dependencies the form has an makes any changes to the
* form that are required. * form that are required.
@ -134,12 +113,13 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
* @param {EventFacade | null} e The event, if any. * @param {EventFacade | null} e The event, if any.
* @param {string} name The form element name to check dependencies against. * @param {string} name The form element name to check dependencies against.
*/ */
checkDependencies : function(e, dependon) { checkDependencies: function(e, dependon) {
var tohide = [], var dependencies = this.get('dependencies'),
tolock = [], tohide = {},
tolock = {},
condition, value, lock, hide, condition, value, lock, hide,
checkfunction, result, elements; checkfunction, result, elements;
if (!dependencies[dependon]) { if (!({}).hasOwnProperty.call(dependencies, dependon)) {
return true; return true;
} }
elements = this.elementsByName(dependon); elements = this.elementsByName(dependon);
@ -155,46 +135,64 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
hide = result.hide || false; hide = result.hide || false;
for (var ei in dependencies[dependon][condition][value]) { for (var ei in dependencies[dependon][condition][value]) {
var eltolock = dependencies[dependon][condition][value][ei]; var eltolock = dependencies[dependon][condition][value][ei];
if (({}).hasOwnProperty.call(tohide, eltolock)) {
tohide[eltolock] = tohide[eltolock] || hide; tohide[eltolock] = tohide[eltolock] || hide;
} else {
tohide[eltolock] = hide;
}
if (({}).hasOwnProperty.call(tolock, eltolock)) {
tolock[eltolock] = tolock[eltolock] || lock; tolock[eltolock] = tolock[eltolock] || lock;
} else {
tolock[eltolock] = lock;
} }
} }
} }
}
for (var el in tolock) { for (var el in tolock) {
var needsupdate = false; var needsupdate = false;
if (tolock[el]) { if (!({}).hasOwnProperty.call(this._locks, el)) {
this._locks[el] = this._locks[el] || []; this._locks[el] = {};
if (!this._locks[el][dependon]) { }
if (({}).hasOwnProperty.call(tolock, el) && tolock[el]) {
if (!({}).hasOwnProperty.call(this._locks[el], dependon) || this._locks[el][dependon]) {
this._locks[el][dependon] = true; this._locks[el][dependon] = true;
needsupdate = true; needsupdate = true;
} }
} else if (this._locks[el] && this._locks[el][dependon]) { } else if (({}).hasOwnProperty.call(this._locks[el], dependon) && this._locks[el][dependon]) {
delete this._locks[el][dependon]; delete this._locks[el][dependon];
needsupdate = true; needsupdate = true;
} }
if (tohide[el]) {
this._hides[el] = this._hides[el] || []; if (!({}).hasOwnProperty.call(this._hides, el)) {
if (!this._hides[el][dependon]) { this._hides[el] = {};
}
if (({}).hasOwnProperty.call(tohide, el) && tohide[el]) {
if (!({}).hasOwnProperty.call(this._hides[el], dependon) || this._hides[el][dependon]) {
this._hides[el][dependon] = true; this._hides[el][dependon] = true;
needsupdate = true; needsupdate = true;
} }
} else if (this._hides[el] && this._hides[el][dependon]) { } else if (({}).hasOwnProperty.call(this._hides[el], dependon) && this._hides[el][dependon]) {
delete this._hides[el][dependon]; delete this._hides[el][dependon];
needsupdate = true; needsupdate = true;
} }
if (needsupdate) { if (needsupdate) {
this._dirty[el] = true; this._dirty[el] = true;
} }
} }
return true; return true;
}, },
/** /**
* Update all dependencies in form * Update all dependencies in form
*/ */
updateAllDependencies : function() { updateAllDependencies: function() {
for (var el in dependencies) { Y.Object.each(this.get('dependencies'), function(value, name) {
this.checkDependencies(null, el); this.checkDependencies(null, name);
} }, this);
this.updateForm(); this.updateForm();
}, },
/** /**
@ -202,7 +200,7 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
* *
* @param {Event} e The event. * @param {Event} e The event.
*/ */
updateEventDependencies : function(e) { updateEventDependencies: function(e) {
var el = e.target.getAttribute('name'); var el = e.target.getAttribute('name');
this.checkDependencies(e, el); this.checkDependencies(e, el);
this.updateForm(); this.updateForm();
@ -210,18 +208,18 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
/** /**
* Flush pending changes to the form * Flush pending changes to the form
*/ */
updateForm : function() { updateForm: function() {
for (var el in this._dirty) { var el;
if (this._locks[el]) { for (el in this._dirty) {
var locked = !this._isObjectEmpty(this._locks[el]); if (({}).hasOwnProperty.call(this._locks, el)) {
this._disableElement(el, locked); this._disableElement(el, !Y.Object.isEmpty(this._locks[el]));
} }
if (this._hides[el]) { if (({}).hasOwnProperty.call(this._hides, el)) {
var hidden = !this._isObjectEmpty(this._hides[el]); this._hideElement(el, !Y.Object.isEmpty(this._hides[el]));
this._hideElement(el, hidden);
} }
} }
this._dirty = [];
this._dirty = {};
}, },
/** /**
* Disables or enables all form elements with the given name * Disables or enables all form elements with the given name
@ -229,7 +227,7 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
* @param {string} name The form element name. * @param {string} name The form element name.
* @param {boolean} disabled True to disable, false to enable. * @param {boolean} disabled True to disable, false to enable.
*/ */
_disableElement : function(name, disabled) { _disableElement: function(name, disabled) {
var els = this.elementsByName(name); var els = this.elementsByName(name);
var filepicker = this.isFilePicker(name); var filepicker = this.isFilePicker(name);
els.each(function(node){ els.each(function(node){
@ -250,7 +248,7 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
} }
} }
} }
}) });
}, },
/** /**
* Hides or shows all form elements with the given name. * Hides or shows all form elements with the given name.
@ -258,14 +256,14 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
* @param {string} name The form element name. * @param {string} name The form element name.
* @param {boolean} disabled True to hide, false to show. * @param {boolean} disabled True to hide, false to show.
*/ */
_hideElement : function(name, hidden) { _hideElement: function(name, hidden) {
var els = this.elementsByName(name); var els = this.elementsByName(name);
els.each(function(node){ els.each(function(node){
var e = node.ancestor('.fitem'); var e = node.ancestor('.fitem');
if (e) { if (e) {
e.setStyles({ e.setStyles({
display : (hidden)?'none':'' display: (hidden)?'none':''
}) });
} }
}); });
}, },
@ -275,31 +273,23 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
* @param {string} el The form element name. * @param {string} el The form element name.
* @return {boolean} * @return {boolean}
*/ */
isFilePicker : function(el) { isFilePicker: function(el) {
if (!this._fileinputs) { if (!this._fileinputs) {
var fileinputs = []; var fileinputs = {};
var els = this._form.all('.fitem.fitem_ffilepicker input,.fitem.fitem_ffilemanager input'); var els = this.get('form').all('.fitem.fitem_ffilepicker input,.fitem.fitem_ffilemanager input');
els.each(function(node){ els.each(function(node){
fileinputs[node.getAttribute('name')] = true; fileinputs[node.getAttribute('name')] = true;
}); });
this._fileinputs = fileinputs; this._fileinputs = fileinputs;
} }
if (({}).hasOwnProperty.call(this._fileinputs, el)) {
return this._fileinputs[el] || false; return this._fileinputs[el] || false;
},
/**
* Check if the object is empty
*
* @param {object} obj
* @return {boolean}
*/
_isObjectEmpty : function(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
} }
return true;
return false;
}, },
_dependency_notchecked : function(elements, value) { _dependency_notchecked: function(elements, value) {
var lock = false; var lock = false;
elements.each(function(){ elements.each(function(){
if (this.getAttribute('type').toLowerCase()=='hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) { if (this.getAttribute('type').toLowerCase()=='hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
@ -312,11 +302,11 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
lock = lock || !Y.Node.getDOMNode(this).checked; lock = lock || !Y.Node.getDOMNode(this).checked;
}); });
return { return {
lock : lock, lock: lock,
hide : false hide: false
} };
}, },
_dependency_checked : function(elements, value) { _dependency_checked: function(elements, value) {
var lock = false; var lock = false;
elements.each(function(){ elements.each(function(){
if (this.getAttribute('type').toLowerCase()=='hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) { if (this.getAttribute('type').toLowerCase()=='hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
@ -329,21 +319,21 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
lock = lock || Y.Node.getDOMNode(this).checked; lock = lock || Y.Node.getDOMNode(this).checked;
}); });
return { return {
lock : lock, lock: lock,
hide : false hide: false
} };
}, },
_dependency_noitemselected : function(elements, value) { _dependency_noitemselected: function(elements, value) {
var lock = false; var lock = false;
elements.each(function(){ elements.each(function(){
lock = lock || this.get('selectedIndex') == -1; lock = lock || this.get('selectedIndex') == -1;
}); });
return { return {
lock : lock, lock: lock,
hide : false hide: false
} };
}, },
_dependency_eq : function(elements, value) { _dependency_eq: function(elements, value) {
var lock = false; var lock = false;
var hidden_val = false; var hidden_val = false;
var options, v, selected, values; var options, v, selected, values;
@ -395,9 +385,9 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
} }
}); });
return { return {
lock : lock, lock: lock,
hide : false hide: false
} };
}, },
/** /**
* Lock the given field if the field value is in the given set of values. * Lock the given field if the field value is in the given set of values.
@ -407,7 +397,7 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
* @returns {{lock: boolean, hide: boolean}} * @returns {{lock: boolean, hide: boolean}}
* @private * @private
*/ */
_dependency_in : function(elements, values) { _dependency_in: function(elements, values) {
// A pipe (|) is used as a value separator // A pipe (|) is used as a value separator
// when multiple values have to be passed on at the same time. // when multiple values have to be passed on at the same time.
values = values.split('|'); values = values.split('|');
@ -461,20 +451,23 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
} }
}); });
return { return {
lock : lock, lock: lock,
hide : false hide: false
} };
}, },
_dependency_hide : function(elements, value) { _dependency_hide: function(elements, value) {
return { return {
lock : false, lock: false,
hide : true hide: true
} };
}, },
_dependency_default : function(elements, value, ev) { _dependency_default: function(elements, value, ev) {
var lock = false; var lock = false,
var hidden_val = false; hidden_val = false,
values
;
elements.each(function(){ elements.each(function(){
var selected;
if (this.getAttribute('type').toLowerCase()=='radio' && !Y.Node.getDOMNode(this).checked) { if (this.getAttribute('type').toLowerCase()=='radio' && !Y.Node.getDOMNode(this).checked) {
return; return;
} else if (this.getAttribute('type').toLowerCase() == 'hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) { } else if (this.getAttribute('type').toLowerCase() == 'hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
@ -497,17 +490,14 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
// Multiple selects can have one or more value assigned. A pipe (|) is used as a value separator // Multiple selects can have one or more value assigned. A pipe (|) is used as a value separator
// when multiple values have to be selected at the same time. // when multiple values have to be selected at the same time.
values = value.split('|'); values = value.split('|');
selected = []; this.get('options').each(function() {
options = this.get('options');
options.each(function() {
if (this.get('selected')) { if (this.get('selected')) {
selected[selected.length] = this.get('value'); selected[selected.length] = this.get('value');
} }
}); });
if (selected.length > 0 && selected.length === values.length) { if (selected.length > 0 && selected.length === values.length) {
for (var i in selected) { for (var i in selected) {
v = selected[i]; if (values.indexOf(selected[i]) > -1) {
if (values.indexOf(v) > -1) {
lock = false; lock = false;
} else { } else {
lock = true; lock = true;
@ -522,19 +512,58 @@ M.form.initFormDependencies = function(Y, formid, dependencies) {
} }
}); });
return { return {
lock : lock, lock: lock,
hide : false hide: false
}
}
}; };
Y.extend(dependencyManager, Y.Base, dependencyManager.prototype, { }
NAME : 'mform-dependency-manager' }, {
NAME: 'mform-dependency-manager',
ATTRS: {
form: {
setter: function(value) {
return Y.one('#' + value);
},
value: null
},
dependencies: {
value: {}
}
}
}); });
return dependencyManager; M.form.dependencyManager = dependencyManager;
})(); }
M.form.dependencyManagers[formid] = new M.form.dependencyManager(); /**
* Stores a list of the dependencyManager for each form on the page.
*/
M.form.dependencyManagers = {};
/**
* Initialises a manager for a forms dependencies.
* This should happen once per form.
*/
M.form.initFormDependencies = function(Y, formid, dependencies) {
// If the dependencies isn't an array or object we don't want to
// know about it
if (!Y.Lang.isArray(dependencies) && !Y.Lang.isObject(dependencies)) {
return false;
}
/**
* Fixes an issue with YUI's processing method of form.elements property
* in Internet Explorer.
* http://yuilibrary.com/projects/yui3/ticket/2528030
*/
Y.Node.ATTRS.elements = {
getter: function() {
return Y.all(new Y.Array(this._node.elements, 0, true));
}
};
M.form.dependencyManagers[formid] = new M.form.dependencyManager({form: formid, dependencies: dependencies});
return M.form.dependencyManagers[formid]; return M.form.dependencyManagers[formid];
}; };