weekly release 2.6dev
[moodle.git] / lib / form / form.js
CommitLineData
c7e3e61c
SH
1/**
2 * This file contains JS functionality required by mforms and is included automatically
3 * when required.
4 */
5
6// Namespace for the form bits and bobs
7M.form = M.form || {};
8
bef9ab0a
TH
9/**
10 * Stores a list of the dependencyManager for each form on the page.
11 */
12M.form.dependencyManagers = {};
13
c7e3e61c
SH
14/**
15 * Initialises a manager for a forms dependencies.
16 * This should happen once per form.
17 */
18M.form.initFormDependencies = function(Y, formid, dependencies) {
19
20 // If the dependencies isn't an array or object we don't want to
21 // know about it
22 if (!Y.Lang.isArray(dependencies) && !Y.Lang.isObject(dependencies)) {
23 return false;
24 }
25
26 /**
27 * Fixes an issue with YUI's processing method of form.elements property
28 * in Internet Explorer.
29 * http://yuilibrary.com/projects/yui3/ticket/2528030
30 */
31 Y.Node.ATTRS.elements = {
32 getter: function() {
33 return Y.all(new Y.Array(this._node.elements, 0, true));
34 }
35 };
36
37 // Define the dependency manager if it hasn't already been defined.
38 M.form.dependencyManager = M.form.dependencyManager || (function(){
39 var dependencyManager = function(config) {
40 dependencyManager.superclass.constructor.apply(this, arguments);
d3067516 41 };
c7e3e61c
SH
42 dependencyManager.prototype = {
43 _form : null,
44 _depElements : [],
45 _nameCollections : [],
46 initializer : function(config) {
47 var i = 0, nodeName;
48 this._form = Y.one('#'+formid);
49 for (i in dependencies) {
50 this._depElements[i] = this.elementsByName(i);
51 if (this._depElements[i].size() == 0) {
52 continue;
53 }
54 this._depElements[i].each(function(node){
55 nodeName = node.get('nodeName').toUpperCase();
56 if (nodeName == 'INPUT') {
57 if (node.getAttribute('type').match(/^(button|submit|radio|checkbox)$/)) {
58 node.on('click', this.checkDependencies, this);
59 } else {
60 node.on('blur', this.checkDependencies, this);
61 }
62 node.on('change', this.checkDependencies, this);
63 } else if (nodeName == 'SELECT') {
64 node.on('change', this.checkDependencies, this);
65 } else {
66 node.on('click', this.checkDependencies, this);
67 node.on('blur', this.checkDependencies, this);
68 node.on('change', this.checkDependencies, this);
69 }
70 }, this);
71 }
5e60ed9b
SH
72 this._form.get('elements').each(function(input){
73 if (input.getAttribute('type')=='reset') {
74 input.on('click', function(){
75 this._form.reset();
76 this.checkDependencies();
77 }, this);
78 }
c7e3e61c
SH
79 }, this);
80
81 return this.checkDependencies(null);
82 },
83 /**
bef9ab0a 84 * Gets all elements in the form by their name and returns
c7e3e61c
SH
85 * a YUI NodeList
86 * @return Y.NodeList
87 */
88 elementsByName : function(name) {
89 if (!this._nameCollections[name]) {
90 var elements = [];
91 this._form.get('elements').each(function(){
92 if (this.getAttribute('name') == name) {
93 elements.push(this);
94 }
d3067516 95 });
c7e3e61c
SH
96 this._nameCollections[name] = new Y.NodeList(elements);
97 }
98 return this._nameCollections[name];
99 },
100 /**
101 * Checks the dependencies the form has an makes any changes to the
102 * form that are required.
d3067516 103 *
c7e3e61c
SH
104 * Changes are made by functions title _dependency_{dependencytype}
105 * and more can easily be introduced by defining further functions.
106 */
107 checkDependencies : function(e) {
108 var tolock = [],
109 tohide = [],
110 dependon, condition, value,
111 lock, hide, checkfunction, result;
112 for (dependon in dependencies) {
113 if (this._depElements[dependon].size() == 0) {
114 continue;
115 }
116 for (condition in dependencies[dependon]) {
117 for (value in dependencies[dependon][condition]) {
118 lock = false;
119 hide = false;
120 checkfunction = '_dependency_'+condition;
121 if (Y.Lang.isFunction(this[checkfunction])) {
e2620b9d 122 result = this[checkfunction].apply(this, [this._depElements[dependon], value, e]);
c7e3e61c 123 } else {
e2620b9d 124 result = this._dependency_default(this._depElements[dependon], value, e);
c7e3e61c
SH
125 }
126 lock = result.lock || false;
127 hide = result.hide || false;
128 for (var ei in dependencies[dependon][condition][value]) {
129 var eltolock = dependencies[dependon][condition][value][ei];
130 if (hide) {
131 tohide[eltolock] = true;
132 }
133 if (tolock[eltolock] != null) {
134 tolock[eltolock] = lock || tolock[eltolock];
135 } else {
136 tolock[eltolock] = lock;
137 }
138 }
139 }
140 }
141 }
142 for (var el in tolock) {
143 this._disableElement(el, tolock[el]);
144 if (tohide.propertyIsEnumerable(el)) {
145 this._hideElement(el, tohide[el]);
146 }
147 }
148 return true;
149 },
150 /**
151 * Disabled all form elements with the given name
152 */
153 _disableElement : function(name, disabled) {
154 var els = this.elementsByName(name);
4b72f9eb 155 var form = this;
c7e3e61c
SH
156 els.each(function(){
157 if (disabled) {
158 this.setAttribute('disabled', 'disabled');
159 } else {
160 this.removeAttribute('disabled');
161 }
4b72f9eb 162
c81f3328
MG
163 // Extra code to disable filepicker or filemanager form elements
164 var fitem = this.ancestor('.fitem');
165 if (fitem && (fitem.hasClass('fitem_ffilemanager') || fitem.hasClass('fitem_ffilepicker'))) {
166 if (disabled){
167 fitem.addClass('disabled');
168 } else {
169 fitem.removeClass('disabled');
170 }
4b72f9eb 171 }
c7e3e61c
SH
172 })
173 },
174 /**
175 * Hides all elements with the given name.
176 */
177 _hideElement : function(name, hidden) {
178 var els = this.elementsByName(name);
179 els.each(function(){
180 var e = els.ancestor('.fitem');
181 if (e) {
182 e.setStyles({
183 display : (hidden)?'none':''
184 })
185 }
186 });
187 },
188 _dependency_notchecked : function(elements, value) {
189 var lock = false;
190 elements.each(function(){
8f6384a9
TH
191 if (this.getAttribute('type').toLowerCase()=='hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
192 // This is the hidden input that is part of an advcheckbox.
193 return;
194 }
c1422316 195 if (this.getAttribute('type').toLowerCase()=='radio' && this.get('value') != value) {
e2620b9d
SH
196 return;
197 }
198 lock = lock || !Y.Node.getDOMNode(this).checked;
c7e3e61c
SH
199 });
200 return {
201 lock : lock,
202 hide : false
203 }
204 },
205 _dependency_checked : function(elements, value) {
206 var lock = false;
207 elements.each(function(){
8f6384a9
TH
208 if (this.getAttribute('type').toLowerCase()=='hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
209 // This is the hidden input that is part of an advcheckbox.
210 return;
211 }
c1422316 212 if (this.getAttribute('type').toLowerCase()=='radio' && this.get('value') != value) {
e2620b9d
SH
213 return;
214 }
215 lock = lock || Y.Node.getDOMNode(this).checked;
c7e3e61c
SH
216 });
217 return {
218 lock : lock,
219 hide : false
220 }
221 },
222 _dependency_noitemselected : function(elements, value) {
223 var lock = false;
224 elements.each(function(){
225 lock = lock || this.get('selectedIndex') == -1;
226 });
227 return {
228 lock : lock,
229 hide : false
230 }
231 },
232 _dependency_eq : function(elements, value) {
233 var lock = false;
8f6384a9 234 var hidden_val = false;
58f3865f 235 var options, v, selected, values;
c7e3e61c 236 elements.each(function(){
e2620b9d
SH
237 if (this.getAttribute('type').toLowerCase()=='radio' && !Y.Node.getDOMNode(this).checked) {
238 return;
8f6384a9
TH
239 } else if (this.getAttribute('type').toLowerCase() == 'hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
240 // This is the hidden input that is part of an advcheckbox.
241 hidden_val = (this.get('value') == value);
242 return;
c1422316 243 } else if (this.getAttribute('type').toLowerCase() == 'checkbox' && !Y.Node.getDOMNode(this).checked) {
8f6384a9 244 lock = lock || hidden_val;
c1422316 245 return;
e2620b9d 246 }
63d5c4ac 247 if (this.getAttribute('class').toLowerCase() == 'filepickerhidden') {
58f3865f 248 // Check for filepicker status.
63d5c4ac
RT
249 var elementname = this.getAttribute('name');
250 if (elementname && M.form_filepicker.instances[elementname].fileadded) {
251 lock = false;
252 } else {
253 lock = true;
254 }
58f3865f
FM
255 } else if (this.get('nodeName').toUpperCase() === 'SELECT' && this.get('multiple') === true) {
256 // Multiple selects can have one or more value assigned. A pipe (|) is used as a value separator
257 // when multiple values have to be selected at the same time.
258 values = value.split('|');
259 selected = [];
260 options = this.get('options');
261 options.each(function() {
262 if (this.get('selected')) {
263 selected[selected.length] = this.get('value');
264 }
265 });
266 if (selected.length > 0 && selected.length === values.length) {
267 for (var i in selected) {
268 v = selected[i];
269 if (values.indexOf(v) > -1) {
270 lock = true;
271 } else {
272 lock = false;
273 return;
274 }
275 }
276 } else {
277 lock = false;
278 }
63d5c4ac
RT
279 } else {
280 lock = lock || this.get('value') == value;
281 }
c7e3e61c
SH
282 });
283 return {
284 lock : lock,
285 hide : false
286 }
287 },
288 _dependency_hide : function(elements, value) {
289 return {
290 lock : false,
291 hide : true
292 }
293 },
e2620b9d 294 _dependency_default : function(elements, value, ev) {
c7e3e61c 295 var lock = false;
8f6384a9 296 var hidden_val = false;
c7e3e61c 297 elements.each(function(){
e2620b9d
SH
298 if (this.getAttribute('type').toLowerCase()=='radio' && !Y.Node.getDOMNode(this).checked) {
299 return;
8f6384a9
TH
300 } else if (this.getAttribute('type').toLowerCase() == 'hidden' && !this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
301 // This is the hidden input that is part of an advcheckbox.
302 hidden_val = (this.get('value') != value);
303 return;
c1422316 304 } else if (this.getAttribute('type').toLowerCase() == 'checkbox' && !Y.Node.getDOMNode(this).checked) {
8f6384a9 305 lock = lock || hidden_val;
c1422316 306 return;
e2620b9d 307 }
63d5c4ac
RT
308 //check for filepicker status
309 if (this.getAttribute('class').toLowerCase() == 'filepickerhidden') {
310 var elementname = this.getAttribute('name');
311 if (elementname && M.form_filepicker.instances[elementname].fileadded) {
312 lock = true;
313 } else {
314 lock = false;
315 }
58f3865f
FM
316 } else if (this.get('nodeName').toUpperCase() === 'SELECT' && this.get('multiple') === true) {
317 // Multiple selects can have one or more value assigned. A pipe (|) is used as a value separator
318 // when multiple values have to be selected at the same time.
319 values = value.split('|');
320 selected = [];
321 options = this.get('options');
322 options.each(function() {
323 if (this.get('selected')) {
324 selected[selected.length] = this.get('value');
325 }
326 });
327 if (selected.length > 0 && selected.length === values.length) {
328 for (var i in selected) {
329 v = selected[i];
330 if (values.indexOf(v) > -1) {
331 lock = false;
332 } else {
333 lock = true;
334 return;
335 }
336 }
337 } else {
338 lock = true;
339 }
63d5c4ac
RT
340 } else {
341 lock = lock || this.get('value') != value;
342 }
c7e3e61c
SH
343 });
344 return {
345 lock : lock,
346 hide : false
347 }
348 }
d3067516 349 };
c7e3e61c
SH
350 Y.extend(dependencyManager, Y.Base, dependencyManager.prototype, {
351 NAME : 'mform-dependency-manager'
352 });
d3067516 353
c7e3e61c
SH
354 return dependencyManager;
355 })();
356
bef9ab0a
TH
357 M.form.dependencyManagers[formid] = new M.form.dependencyManager();
358 return M.form.dependencyManagers[formid];
359};
360
361/**
362 * Update the state of a form. You need to call this after, for example, changing
363 * the state of some of the form input elements in your own code, in order that
364 * things like the disableIf state of elements can be updated.
365 */
366M.form.updateFormState = function(formid) {
367 if (formid in M.form.dependencyManagers) {
368 M.form.dependencyManagers[formid].checkDependencies(null);
369 }
370};