| 1 |
efrain |
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
|
|
|
7 |
M.form = M.form || {};
|
|
|
8 |
|
|
|
9 |
if (typeof M.form.dependencyManager === 'undefined') {
|
|
|
10 |
var dependencyManager = function() {
|
|
|
11 |
dependencyManager.superclass.constructor.apply(this, arguments);
|
|
|
12 |
};
|
|
|
13 |
Y.extend(dependencyManager, Y.Base, {
|
|
|
14 |
_locks: null,
|
|
|
15 |
_hides: null,
|
|
|
16 |
_dirty: null,
|
|
|
17 |
_nameCollections: null,
|
|
|
18 |
_fileinputs: null,
|
| 11 |
efrain |
19 |
_staticElements: null,
|
|
|
20 |
_editors: null,
|
|
|
21 |
_editorNameSuffix: '[text]',
|
| 1 |
efrain |
22 |
|
|
|
23 |
initializer: function() {
|
|
|
24 |
// Setup initial values for complex properties.
|
|
|
25 |
this._locks = {};
|
|
|
26 |
this._hides = {};
|
|
|
27 |
this._dirty = {};
|
|
|
28 |
|
|
|
29 |
// Setup event handlers.
|
|
|
30 |
Y.Object.each(this.get('dependencies'), function(value, i) {
|
|
|
31 |
var elements = this.elementsByName(i);
|
|
|
32 |
elements.each(function(node) {
|
|
|
33 |
var nodeName = node.get('nodeName').toUpperCase();
|
|
|
34 |
if (nodeName == 'INPUT') {
|
|
|
35 |
if (node.getAttribute('type').match(/^(button|submit|radio|checkbox)$/)) {
|
|
|
36 |
node.on('click', this.updateEventDependencies, this);
|
|
|
37 |
} else {
|
|
|
38 |
node.on('blur', this.updateEventDependencies, this);
|
|
|
39 |
}
|
|
|
40 |
node.on('change', this.updateEventDependencies, this);
|
|
|
41 |
} else if (nodeName == 'SELECT') {
|
|
|
42 |
node.on('change', this.updateEventDependencies, this);
|
|
|
43 |
} else {
|
|
|
44 |
node.on('click', this.updateEventDependencies, this);
|
|
|
45 |
node.on('blur', this.updateEventDependencies, this);
|
|
|
46 |
node.on('change', this.updateEventDependencies, this);
|
|
|
47 |
}
|
|
|
48 |
}, this);
|
|
|
49 |
}, this);
|
|
|
50 |
|
|
|
51 |
// Handle the reset button.
|
|
|
52 |
this.get('form').get('elements').each(function(input) {
|
|
|
53 |
if (input.getAttribute('type') == 'reset') {
|
|
|
54 |
input.on('click', function() {
|
|
|
55 |
this.get('form').reset();
|
|
|
56 |
this.updateAllDependencies();
|
|
|
57 |
}, this);
|
|
|
58 |
}
|
|
|
59 |
}, this);
|
|
|
60 |
|
|
|
61 |
this.updateAllDependencies();
|
|
|
62 |
},
|
|
|
63 |
|
|
|
64 |
/**
|
|
|
65 |
* Initializes the mapping from element name to YUI NodeList
|
|
|
66 |
*/
|
|
|
67 |
initElementsByName: function() {
|
|
|
68 |
var names = {}; // Form elements with a given name.
|
|
|
69 |
var allnames = {}; // Form elements AND outer elements for groups with a given name.
|
|
|
70 |
|
|
|
71 |
// Collect element names.
|
|
|
72 |
Y.Object.each(this.get('dependencies'), function(conditions, i) {
|
|
|
73 |
names[i] = new Y.NodeList();
|
|
|
74 |
allnames[i] = new Y.NodeList();
|
|
|
75 |
for (var condition in conditions) {
|
|
|
76 |
for (var value in conditions[condition]) {
|
|
|
77 |
for (var hide in conditions[condition][value]) {
|
|
|
78 |
for (var ei in conditions[condition][value][hide]) {
|
|
|
79 |
names[conditions[condition][value][hide][ei]] = new Y.NodeList();
|
|
|
80 |
allnames[conditions[condition][value][hide][ei]] = new Y.NodeList();
|
|
|
81 |
}
|
|
|
82 |
}
|
|
|
83 |
}
|
|
|
84 |
}
|
|
|
85 |
});
|
|
|
86 |
|
|
|
87 |
// Locate elements for each name.
|
|
|
88 |
this.get('form').get('elements').each(function(node) {
|
|
|
89 |
var name = node.getAttribute('name');
|
|
|
90 |
if (({}).hasOwnProperty.call(names, name)) {
|
|
|
91 |
names[name].push(node);
|
|
|
92 |
allnames[name].push(node);
|
| 11 |
efrain |
93 |
} else if (this.isEditor(name)) {
|
|
|
94 |
// If this is an editor, we need to remove the suffix.
|
|
|
95 |
name = name.replace(this._editorNameSuffix, '');
|
|
|
96 |
if (({}).hasOwnProperty.call(names, name)) {
|
|
|
97 |
names[name].push(node);
|
|
|
98 |
allnames[name].push(node);
|
|
|
99 |
}
|
| 1 |
efrain |
100 |
}
|
| 11 |
efrain |
101 |
}, this);
|
| 1 |
efrain |
102 |
// Locate any groups with the given name.
|
|
|
103 |
this.get('form').all('.fitem').each(function(node) {
|
|
|
104 |
var name = node.getData('groupname');
|
|
|
105 |
if (name && ({}).hasOwnProperty.call(allnames, name)) {
|
|
|
106 |
allnames[name].push(node);
|
|
|
107 |
}
|
|
|
108 |
});
|
| 11 |
efrain |
109 |
// Locate any static elements for each name.
|
|
|
110 |
this.get('form').all('.form-control-static').each(function(node) {
|
|
|
111 |
var name = node.getData('name');
|
|
|
112 |
if (({}).hasOwnProperty.call(allnames, name)) {
|
|
|
113 |
names[name].push(node);
|
|
|
114 |
allnames[name].push(node);
|
|
|
115 |
}
|
|
|
116 |
});
|
| 1 |
efrain |
117 |
this._nameCollections = {names: names, allnames: allnames};
|
|
|
118 |
},
|
|
|
119 |
|
|
|
120 |
/**
|
|
|
121 |
* Gets all elements in the form by their name and returns
|
|
|
122 |
* a YUI NodeList
|
|
|
123 |
*
|
|
|
124 |
* @param {String} name The form element name.
|
|
|
125 |
* @param {Boolean} includeGroups (optional - default false) Should the outer element for groups be included?
|
|
|
126 |
* @return {Y.NodeList}
|
|
|
127 |
*/
|
|
|
128 |
elementsByName: function(name, includeGroups) {
|
|
|
129 |
if (includeGroups === undefined) {
|
|
|
130 |
includeGroups = false;
|
|
|
131 |
}
|
|
|
132 |
var collection = (includeGroups ? 'allnames' : 'names');
|
|
|
133 |
|
|
|
134 |
if (!this._nameCollections) {
|
|
|
135 |
this.initElementsByName();
|
|
|
136 |
}
|
|
|
137 |
if (!({}).hasOwnProperty.call(this._nameCollections[collection], name)) {
|
|
|
138 |
return new Y.NodeList();
|
|
|
139 |
}
|
|
|
140 |
return this._nameCollections[collection][name];
|
|
|
141 |
},
|
|
|
142 |
|
|
|
143 |
/**
|
|
|
144 |
* Checks the dependencies the form has an makes any changes to the
|
|
|
145 |
* form that are required.
|
|
|
146 |
*
|
|
|
147 |
* Changes are made by functions title _dependency{Dependencytype}
|
|
|
148 |
* and more can easily be introduced by defining further functions.
|
|
|
149 |
*
|
|
|
150 |
* @param {EventFacade | null} e The event, if any.
|
|
|
151 |
* @param {String} dependon The form element name to check dependencies against.
|
|
|
152 |
* @return {Boolean}
|
|
|
153 |
*/
|
|
|
154 |
checkDependencies: function(e, dependon) {
|
|
|
155 |
var dependencies = this.get('dependencies'),
|
|
|
156 |
tohide = {},
|
|
|
157 |
tolock = {},
|
|
|
158 |
condition, value, isHide, lock, hide,
|
|
|
159 |
checkfunction, result, elements;
|
|
|
160 |
if (!({}).hasOwnProperty.call(dependencies, dependon)) {
|
|
|
161 |
return true;
|
|
|
162 |
}
|
|
|
163 |
elements = this.elementsByName(dependon);
|
|
|
164 |
for (condition in dependencies[dependon]) {
|
|
|
165 |
for (value in dependencies[dependon][condition]) {
|
|
|
166 |
for (isHide in dependencies[dependon][condition][value]) {
|
|
|
167 |
checkfunction = '_dependency' + condition[0].toUpperCase() + condition.slice(1);
|
|
|
168 |
if (Y.Lang.isFunction(this[checkfunction])) {
|
|
|
169 |
result = this[checkfunction].apply(this, [elements, value, (isHide === "1"), e]);
|
|
|
170 |
} else {
|
|
|
171 |
result = this._dependencyDefault(elements, value, (isHide === "1"), e);
|
|
|
172 |
}
|
|
|
173 |
lock = result.lock || false;
|
|
|
174 |
hide = result.hide || false;
|
|
|
175 |
for (var ei in dependencies[dependon][condition][value][isHide]) {
|
|
|
176 |
var eltolock = dependencies[dependon][condition][value][isHide][ei];
|
|
|
177 |
if (({}).hasOwnProperty.call(tohide, eltolock)) {
|
|
|
178 |
tohide[eltolock] = tohide[eltolock] || hide;
|
|
|
179 |
} else {
|
|
|
180 |
tohide[eltolock] = hide;
|
|
|
181 |
}
|
|
|
182 |
|
|
|
183 |
if (({}).hasOwnProperty.call(tolock, eltolock)) {
|
|
|
184 |
tolock[eltolock] = tolock[eltolock] || lock;
|
|
|
185 |
} else {
|
|
|
186 |
tolock[eltolock] = lock;
|
|
|
187 |
}
|
|
|
188 |
}
|
|
|
189 |
}
|
|
|
190 |
}
|
|
|
191 |
}
|
|
|
192 |
|
|
|
193 |
for (var el in tolock) {
|
|
|
194 |
var needsupdate = false;
|
|
|
195 |
if (!({}).hasOwnProperty.call(this._locks, el)) {
|
|
|
196 |
this._locks[el] = {};
|
|
|
197 |
}
|
|
|
198 |
if (({}).hasOwnProperty.call(tolock, el) && tolock[el]) {
|
|
|
199 |
if (!({}).hasOwnProperty.call(this._locks[el], dependon) || this._locks[el][dependon]) {
|
|
|
200 |
this._locks[el][dependon] = true;
|
|
|
201 |
needsupdate = true;
|
|
|
202 |
}
|
|
|
203 |
} else if (({}).hasOwnProperty.call(this._locks[el], dependon) && this._locks[el][dependon]) {
|
|
|
204 |
delete this._locks[el][dependon];
|
|
|
205 |
needsupdate = true;
|
|
|
206 |
}
|
|
|
207 |
|
|
|
208 |
if (!({}).hasOwnProperty.call(this._hides, el)) {
|
|
|
209 |
this._hides[el] = {};
|
|
|
210 |
}
|
|
|
211 |
if (({}).hasOwnProperty.call(tohide, el) && tohide[el]) {
|
|
|
212 |
if (!({}).hasOwnProperty.call(this._hides[el], dependon) || this._hides[el][dependon]) {
|
|
|
213 |
this._hides[el][dependon] = true;
|
|
|
214 |
needsupdate = true;
|
|
|
215 |
}
|
|
|
216 |
} else if (({}).hasOwnProperty.call(this._hides[el], dependon) && this._hides[el][dependon]) {
|
|
|
217 |
delete this._hides[el][dependon];
|
|
|
218 |
needsupdate = true;
|
|
|
219 |
}
|
|
|
220 |
|
|
|
221 |
if (needsupdate) {
|
|
|
222 |
this._dirty[el] = true;
|
|
|
223 |
}
|
|
|
224 |
}
|
|
|
225 |
|
|
|
226 |
return true;
|
|
|
227 |
},
|
|
|
228 |
/**
|
|
|
229 |
* Update all dependencies in form
|
|
|
230 |
*/
|
|
|
231 |
updateAllDependencies: function() {
|
|
|
232 |
Y.Object.each(this.get('dependencies'), function(value, name) {
|
|
|
233 |
this.checkDependencies(null, name);
|
|
|
234 |
}, this);
|
|
|
235 |
|
|
|
236 |
this.updateForm();
|
|
|
237 |
},
|
|
|
238 |
/**
|
|
|
239 |
* Update dependencies associated with event
|
|
|
240 |
*
|
|
|
241 |
* @param {Event} e The event.
|
|
|
242 |
*/
|
|
|
243 |
updateEventDependencies: function(e) {
|
|
|
244 |
var el = e.target.getAttribute('name');
|
|
|
245 |
this.checkDependencies(e, el);
|
|
|
246 |
this.updateForm();
|
|
|
247 |
},
|
|
|
248 |
/**
|
|
|
249 |
* Flush pending changes to the form
|
|
|
250 |
*/
|
|
|
251 |
updateForm: function() {
|
|
|
252 |
var el;
|
|
|
253 |
for (el in this._dirty) {
|
|
|
254 |
if (({}).hasOwnProperty.call(this._locks, el)) {
|
|
|
255 |
this._disableElement(el, !Y.Object.isEmpty(this._locks[el]));
|
|
|
256 |
}
|
|
|
257 |
if (({}).hasOwnProperty.call(this._hides, el)) {
|
|
|
258 |
this._hideElement(el, !Y.Object.isEmpty(this._hides[el]));
|
|
|
259 |
}
|
|
|
260 |
}
|
|
|
261 |
|
|
|
262 |
this._dirty = {};
|
|
|
263 |
},
|
|
|
264 |
/**
|
|
|
265 |
* Disables or enables all form elements with the given name
|
|
|
266 |
*
|
|
|
267 |
* @param {String} name The form element name.
|
|
|
268 |
* @param {Boolean} disabled True to disable, false to enable.
|
|
|
269 |
*/
|
|
|
270 |
_disableElement: function(name, disabled) {
|
| 11 |
efrain |
271 |
const els = this.elementsByName(name),
|
| 1 |
efrain |
272 |
filepicker = this.isFilePicker(name),
|
| 11 |
efrain |
273 |
editors = this.get('form').all('.fitem [data-fieldtype="editor"] textarea[name="' + name + '[text]"]'),
|
|
|
274 |
staticElement = this.isStaticElement(name);
|
| 1 |
efrain |
275 |
|
|
|
276 |
els.each(function(node) {
|
| 11 |
efrain |
277 |
const fitem = node.ancestor('.fitem');
|
| 1 |
efrain |
278 |
if (disabled) {
|
|
|
279 |
node.setAttribute('disabled', 'disabled');
|
|
|
280 |
} else {
|
|
|
281 |
node.removeAttribute('disabled');
|
|
|
282 |
}
|
| 11 |
efrain |
283 |
// Enable/Disable static elements if exist.
|
|
|
284 |
if (staticElement) {
|
|
|
285 |
const disabledNonTextElements = 'INPUT,SELECT,TEXTAREA,BUTTON,A';
|
|
|
286 |
if (disabled) {
|
|
|
287 |
// Mute the text inside the current static element.
|
|
|
288 |
fitem.addClass('text-muted');
|
|
|
289 |
// Disabled non-text elements in the static if exist.
|
|
|
290 |
fitem.all(disabledNonTextElements).each(function(disabledElement) {
|
|
|
291 |
if (disabledElement.get('tagName').toUpperCase() === "A") {
|
|
|
292 |
disabledElement.addClass('disabled');
|
|
|
293 |
} else {
|
|
|
294 |
disabledElement.setAttribute('disabled', 'disabled');
|
|
|
295 |
}
|
|
|
296 |
});
|
|
|
297 |
} else {
|
|
|
298 |
// Unmute the text inside the current static element.
|
|
|
299 |
fitem.removeClass('text-muted');
|
|
|
300 |
// Enabled non-text elements in the static if exist.
|
|
|
301 |
fitem.all(disabledNonTextElements).each(function(disabledElement) {
|
|
|
302 |
if (disabledElement.get('tagName').toUpperCase() === "A") {
|
|
|
303 |
disabledElement.removeClass('disabled');
|
|
|
304 |
} else {
|
|
|
305 |
disabledElement.removeAttribute('disabled', 'disabled');
|
|
|
306 |
}
|
|
|
307 |
});
|
|
|
308 |
}
|
|
|
309 |
}
|
| 1 |
efrain |
310 |
// Extra code to disable filepicker or filemanager form elements
|
|
|
311 |
if (filepicker) {
|
|
|
312 |
if (fitem) {
|
|
|
313 |
if (disabled) {
|
|
|
314 |
fitem.addClass('disabled');
|
|
|
315 |
} else {
|
|
|
316 |
fitem.removeClass('disabled');
|
|
|
317 |
}
|
|
|
318 |
}
|
|
|
319 |
}
|
|
|
320 |
});
|
|
|
321 |
editors.each(function(editor) {
|
|
|
322 |
if (disabled) {
|
|
|
323 |
editor.setAttribute('readonly', 'readonly');
|
|
|
324 |
} else {
|
|
|
325 |
editor.removeAttribute('readonly', 'readonly');
|
|
|
326 |
}
|
|
|
327 |
editor.getDOMNode().dispatchEvent(new Event('form:editorUpdated'));
|
|
|
328 |
});
|
|
|
329 |
},
|
|
|
330 |
/**
|
|
|
331 |
* Hides or shows all form elements with the given name.
|
|
|
332 |
*
|
|
|
333 |
* @param {String} name The form element name.
|
|
|
334 |
* @param {Boolean} hidden True to hide, false to show.
|
|
|
335 |
*/
|
|
|
336 |
_hideElement: function(name, hidden) {
|
|
|
337 |
var els = this.elementsByName(name, true);
|
|
|
338 |
els.each(function(node) {
|
|
|
339 |
var e = node.ancestor('.fitem', true);
|
|
|
340 |
var label = null,
|
|
|
341 |
id = null;
|
|
|
342 |
if (e) {
|
|
|
343 |
// Cope with differences between clean and boost themes.
|
|
|
344 |
if (e.hasClass('fitem_fgroup')) {
|
|
|
345 |
// Items within groups are not wrapped in div.fitem in theme_clean, so
|
|
|
346 |
// we need to hide the input, not the div.fitem.
|
|
|
347 |
e = node;
|
|
|
348 |
}
|
|
|
349 |
|
|
|
350 |
if (hidden) {
|
|
|
351 |
e.setAttribute('hidden', 'hidden');
|
|
|
352 |
} else {
|
|
|
353 |
e.removeAttribute('hidden');
|
|
|
354 |
}
|
|
|
355 |
e.setStyles({
|
|
|
356 |
display: (hidden) ? 'none' : ''
|
|
|
357 |
});
|
|
|
358 |
|
|
|
359 |
// Hide/unhide the label as well.
|
|
|
360 |
id = node.get('id');
|
|
|
361 |
if (id) {
|
|
|
362 |
label = Y.all('label[for="' + id + '"]');
|
|
|
363 |
if (label) {
|
|
|
364 |
if (hidden) {
|
|
|
365 |
label.setAttribute('hidden', 'hidden');
|
|
|
366 |
} else {
|
|
|
367 |
label.removeAttribute('hidden');
|
|
|
368 |
}
|
|
|
369 |
label.setStyles({
|
|
|
370 |
display: (hidden) ? 'none' : ''
|
|
|
371 |
});
|
|
|
372 |
}
|
|
|
373 |
}
|
|
|
374 |
}
|
|
|
375 |
});
|
|
|
376 |
},
|
|
|
377 |
/**
|
|
|
378 |
* Is the form element inside a filepicker or filemanager?
|
|
|
379 |
*
|
|
|
380 |
* @param {String} el The form element name.
|
|
|
381 |
* @return {Boolean}
|
|
|
382 |
*/
|
|
|
383 |
isFilePicker: function(el) {
|
|
|
384 |
if (!this._fileinputs) {
|
|
|
385 |
var fileinputs = {};
|
|
|
386 |
var selector = '.fitem [data-fieldtype="filepicker"] input,.fitem [data-fieldtype="filemanager"] input';
|
|
|
387 |
// Include a selector where the filemanager input is nested in a group.
|
|
|
388 |
selector += ',.fitem [data-fieldtype="group"] input[id*="filemanager"]';
|
|
|
389 |
var els = this.get('form').all(selector);
|
|
|
390 |
els.each(function(node) {
|
|
|
391 |
fileinputs[node.getAttribute('name')] = true;
|
|
|
392 |
});
|
|
|
393 |
this._fileinputs = fileinputs;
|
|
|
394 |
}
|
|
|
395 |
|
|
|
396 |
if (({}).hasOwnProperty.call(this._fileinputs, el)) {
|
|
|
397 |
return this._fileinputs[el] || false;
|
|
|
398 |
}
|
|
|
399 |
|
|
|
400 |
return false;
|
|
|
401 |
},
|
| 11 |
efrain |
402 |
/**
|
|
|
403 |
* Checks if a form element with the given name is static.
|
|
|
404 |
*
|
|
|
405 |
* @param {string} el - The name of the form element to check.
|
|
|
406 |
* @returns {boolean} - Returns true if the form element is static, otherwise false.
|
|
|
407 |
*/
|
|
|
408 |
isStaticElement: function(el) {
|
|
|
409 |
if (!this._staticElements) {
|
|
|
410 |
const staticElements = {};
|
|
|
411 |
const els = this.get('form').all('.fitem [data-fieldtype="static"] .form-control-static');
|
|
|
412 |
els.each(function(node) {
|
|
|
413 |
if (node.getData('name') === el) {
|
|
|
414 |
staticElements[node.getData('name')] = true;
|
|
|
415 |
}
|
|
|
416 |
});
|
|
|
417 |
this._staticElements = staticElements;
|
|
|
418 |
}
|
|
|
419 |
if (({}).hasOwnProperty.call(this._staticElements, el)) {
|
|
|
420 |
return this._staticElements[el] || false;
|
|
|
421 |
}
|
|
|
422 |
return false;
|
|
|
423 |
},
|
| 1 |
efrain |
424 |
_dependencyNotchecked: function(elements, value, isHide) {
|
|
|
425 |
var lock = false;
|
|
|
426 |
elements.each(function() {
|
|
|
427 |
if (this.getAttribute('type').toLowerCase() == 'hidden' &&
|
|
|
428 |
!this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
|
|
|
429 |
// This is the hidden input that is part of an advcheckbox.
|
|
|
430 |
return;
|
|
|
431 |
}
|
|
|
432 |
if (this.getAttribute('type').toLowerCase() == 'radio' && this.get('value') != value) {
|
|
|
433 |
return;
|
|
|
434 |
}
|
|
|
435 |
lock = lock || !Y.Node.getDOMNode(this).checked;
|
|
|
436 |
});
|
|
|
437 |
return {
|
|
|
438 |
lock: lock,
|
|
|
439 |
hide: isHide ? lock : false
|
|
|
440 |
};
|
|
|
441 |
},
|
|
|
442 |
_dependencyChecked: function(elements, value, isHide) {
|
|
|
443 |
var lock = false;
|
|
|
444 |
elements.each(function() {
|
|
|
445 |
if (this.getAttribute('type').toLowerCase() == 'hidden' &&
|
|
|
446 |
!this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
|
|
|
447 |
// This is the hidden input that is part of an advcheckbox.
|
|
|
448 |
return;
|
|
|
449 |
}
|
|
|
450 |
if (this.getAttribute('type').toLowerCase() == 'radio' && this.get('value') != value) {
|
|
|
451 |
return;
|
|
|
452 |
}
|
|
|
453 |
lock = lock || Y.Node.getDOMNode(this).checked;
|
|
|
454 |
});
|
|
|
455 |
return {
|
|
|
456 |
lock: lock,
|
|
|
457 |
hide: isHide ? lock : false
|
|
|
458 |
};
|
|
|
459 |
},
|
|
|
460 |
_dependencyNoitemselected: function(elements, value, isHide) {
|
|
|
461 |
var lock = false;
|
|
|
462 |
elements.each(function() {
|
|
|
463 |
lock = lock || this.get('selectedIndex') == -1;
|
|
|
464 |
});
|
|
|
465 |
return {
|
|
|
466 |
lock: lock,
|
|
|
467 |
hide: isHide ? lock : false
|
|
|
468 |
};
|
|
|
469 |
},
|
|
|
470 |
_dependencyEq: function(elements, value, isHide) {
|
|
|
471 |
var lock = false;
|
|
|
472 |
var hiddenVal = false;
|
|
|
473 |
var options, v, selected, values;
|
|
|
474 |
elements.each(function() {
|
|
|
475 |
if (this.getAttribute('type').toLowerCase() == 'radio' && !Y.Node.getDOMNode(this).checked) {
|
|
|
476 |
return;
|
|
|
477 |
} else if (this.getAttribute('type').toLowerCase() == 'hidden' &&
|
|
|
478 |
!this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
|
|
|
479 |
// This is the hidden input that is part of an advcheckbox.
|
|
|
480 |
hiddenVal = (this.get('value') == value);
|
|
|
481 |
return;
|
|
|
482 |
} else if (this.getAttribute('type').toLowerCase() == 'checkbox' && !Y.Node.getDOMNode(this).checked) {
|
|
|
483 |
lock = lock || hiddenVal;
|
|
|
484 |
return;
|
|
|
485 |
}
|
|
|
486 |
if (this.getAttribute('class').toLowerCase() == 'filepickerhidden') {
|
|
|
487 |
// Check for filepicker status.
|
| 1441 |
ariadna |
488 |
const elementId = this.getAttribute('id');
|
|
|
489 |
if (elementId && M.form_filepicker.instances[elementId].fileadded) {
|
| 1 |
efrain |
490 |
lock = false;
|
|
|
491 |
} else {
|
|
|
492 |
lock = true;
|
|
|
493 |
}
|
|
|
494 |
} else if (this.get('nodeName').toUpperCase() === 'SELECT' && this.get('multiple') === true) {
|
|
|
495 |
// Multiple selects can have one or more value assigned. A pipe (|) is used as a value separator
|
|
|
496 |
// when multiple values have to be selected at the same time.
|
|
|
497 |
values = value.split('|');
|
|
|
498 |
selected = [];
|
|
|
499 |
options = this.get('options');
|
|
|
500 |
options.each(function() {
|
|
|
501 |
if (this.get('selected')) {
|
|
|
502 |
selected[selected.length] = this.get('value');
|
|
|
503 |
}
|
|
|
504 |
});
|
| 1441 |
ariadna |
505 |
if (values.length === 1 && values[0] === '') {
|
|
|
506 |
// Values array contains a single empty entry -> value was empty.
|
|
|
507 |
lock = selected.length === 0;
|
|
|
508 |
return;
|
|
|
509 |
}
|
|
|
510 |
if (selected.length !== values.length) {
|
| 1 |
efrain |
511 |
lock = false;
|
| 1441 |
ariadna |
512 |
return;
|
| 1 |
efrain |
513 |
}
|
| 1441 |
ariadna |
514 |
lock = true;
|
|
|
515 |
for (const i in selected) {
|
|
|
516 |
v = selected[i];
|
|
|
517 |
if (values.indexOf(v) === -1) {
|
|
|
518 |
lock = false;
|
|
|
519 |
return;
|
|
|
520 |
}
|
|
|
521 |
}
|
| 1 |
efrain |
522 |
} else {
|
|
|
523 |
lock = lock || this.get('value') == value;
|
|
|
524 |
}
|
|
|
525 |
});
|
|
|
526 |
return {
|
|
|
527 |
lock: lock,
|
|
|
528 |
hide: isHide ? lock : false
|
|
|
529 |
};
|
|
|
530 |
},
|
|
|
531 |
/**
|
|
|
532 |
* Lock the given field if the field value is in the given set of values.
|
|
|
533 |
*
|
|
|
534 |
* @param {Array} elements
|
|
|
535 |
* @param {String} values Single value or pipe (|) separated values when multiple
|
|
|
536 |
* @returns {{lock: boolean, hide: boolean}}
|
|
|
537 |
* @private
|
|
|
538 |
*/
|
|
|
539 |
_dependencyIn: function(elements, values, isHide) {
|
|
|
540 |
// A pipe (|) is used as a value separator
|
|
|
541 |
// when multiple values have to be passed on at the same time.
|
|
|
542 |
values = values.split('|');
|
|
|
543 |
var lock = false;
|
|
|
544 |
var hiddenVal = false;
|
|
|
545 |
var options, v, selected, value;
|
|
|
546 |
elements.each(function() {
|
|
|
547 |
if (this.getAttribute('type').toLowerCase() == 'radio' && !Y.Node.getDOMNode(this).checked) {
|
|
|
548 |
return;
|
|
|
549 |
} else if (this.getAttribute('type').toLowerCase() == 'hidden' &&
|
|
|
550 |
!this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
|
|
|
551 |
// This is the hidden input that is part of an advcheckbox.
|
|
|
552 |
hiddenVal = (values.indexOf(this.get('value')) > -1);
|
|
|
553 |
return;
|
|
|
554 |
} else if (this.getAttribute('type').toLowerCase() == 'checkbox' && !Y.Node.getDOMNode(this).checked) {
|
|
|
555 |
lock = lock || hiddenVal;
|
|
|
556 |
return;
|
|
|
557 |
}
|
|
|
558 |
if (this.getAttribute('class').toLowerCase() == 'filepickerhidden') {
|
|
|
559 |
// Check for filepicker status.
|
| 1441 |
ariadna |
560 |
const elementId = this.getAttribute('id');
|
|
|
561 |
if (elementId && M.form_filepicker.instances[elementId].fileadded) {
|
| 1 |
efrain |
562 |
lock = false;
|
|
|
563 |
} else {
|
|
|
564 |
lock = true;
|
|
|
565 |
}
|
|
|
566 |
} else if (this.get('nodeName').toUpperCase() === 'SELECT' && this.get('multiple') === true) {
|
|
|
567 |
// Multiple selects can have one or more value assigned.
|
|
|
568 |
selected = [];
|
|
|
569 |
options = this.get('options');
|
|
|
570 |
options.each(function() {
|
|
|
571 |
if (this.get('selected')) {
|
|
|
572 |
selected[selected.length] = this.get('value');
|
|
|
573 |
}
|
|
|
574 |
});
|
| 1441 |
ariadna |
575 |
|
|
|
576 |
// Needed to support subset resolution for empty selects, where 'no selection' is represented by ''.
|
|
|
577 |
if (selected.length == 0) {
|
|
|
578 |
selected.push('');
|
| 1 |
efrain |
579 |
}
|
| 1441 |
ariadna |
580 |
|
|
|
581 |
// Lock/hide if the selected values are a subset of the values.
|
|
|
582 |
let isSubset = selected.every(element => values.includes(element));
|
|
|
583 |
lock = isSubset;
|
|
|
584 |
return;
|
| 1 |
efrain |
585 |
} else {
|
|
|
586 |
value = this.get('value');
|
|
|
587 |
lock = lock || (values.indexOf(value) > -1);
|
|
|
588 |
}
|
|
|
589 |
});
|
|
|
590 |
return {
|
|
|
591 |
lock: lock,
|
|
|
592 |
hide: isHide ? lock : false
|
|
|
593 |
};
|
|
|
594 |
},
|
|
|
595 |
_dependencyHide: function(elements, value) {
|
|
|
596 |
return {
|
|
|
597 |
lock: false,
|
|
|
598 |
hide: true
|
|
|
599 |
};
|
|
|
600 |
},
|
|
|
601 |
_dependencyDefault: function(elements, value, isHide) {
|
|
|
602 |
var lock = false,
|
|
|
603 |
hiddenVal = false,
|
|
|
604 |
values
|
|
|
605 |
;
|
|
|
606 |
elements.each(function() {
|
|
|
607 |
var selected;
|
|
|
608 |
if (this.getAttribute('type').toLowerCase() == 'radio' && !Y.Node.getDOMNode(this).checked) {
|
|
|
609 |
return;
|
|
|
610 |
} else if (this.getAttribute('type').toLowerCase() == 'hidden' &&
|
|
|
611 |
!this.siblings('input[type=checkbox][name="' + this.get('name') + '"]').isEmpty()) {
|
|
|
612 |
// This is the hidden input that is part of an advcheckbox.
|
|
|
613 |
hiddenVal = (this.get('value') != value);
|
|
|
614 |
return;
|
|
|
615 |
} else if (this.getAttribute('type').toLowerCase() == 'checkbox' && !Y.Node.getDOMNode(this).checked) {
|
|
|
616 |
lock = lock || hiddenVal;
|
|
|
617 |
return;
|
|
|
618 |
}
|
|
|
619 |
// Check for filepicker status.
|
|
|
620 |
if (this.getAttribute('class').toLowerCase() == 'filepickerhidden') {
|
| 1441 |
ariadna |
621 |
const elementId = this.getAttribute('id');
|
|
|
622 |
if (elementId && M.form_filepicker.instances[elementId].fileadded) {
|
| 1 |
efrain |
623 |
lock = true;
|
|
|
624 |
} else {
|
|
|
625 |
lock = false;
|
|
|
626 |
}
|
|
|
627 |
} else if (this.get('nodeName').toUpperCase() === 'SELECT' && this.get('multiple') === true) {
|
|
|
628 |
// Multiple selects can have one or more value assigned. A pipe (|) is used as a value separator
|
|
|
629 |
// when multiple values have to be selected at the same time.
|
|
|
630 |
values = value.split('|');
|
|
|
631 |
selected = [];
|
|
|
632 |
this.get('options').each(function() {
|
|
|
633 |
if (this.get('selected')) {
|
|
|
634 |
selected[selected.length] = this.get('value');
|
|
|
635 |
}
|
|
|
636 |
});
|
| 1441 |
ariadna |
637 |
if (values.length === 1 && values[0] === '') {
|
|
|
638 |
// Values array contains a single empty entry -> value was empty.
|
|
|
639 |
lock = selected.length !== 0;
|
|
|
640 |
return;
|
|
|
641 |
}
|
|
|
642 |
if (selected.length !== values.length) {
|
| 1 |
efrain |
643 |
lock = true;
|
| 1441 |
ariadna |
644 |
return;
|
| 1 |
efrain |
645 |
}
|
| 1441 |
ariadna |
646 |
lock = false;
|
|
|
647 |
for (const i in selected) {
|
|
|
648 |
if (values.indexOf(selected[i]) === -1) {
|
|
|
649 |
lock = true;
|
|
|
650 |
return;
|
|
|
651 |
}
|
|
|
652 |
}
|
| 1 |
efrain |
653 |
} else {
|
|
|
654 |
lock = lock || this.get('value') != value;
|
|
|
655 |
}
|
|
|
656 |
});
|
|
|
657 |
return {
|
|
|
658 |
lock: lock,
|
|
|
659 |
hide: isHide ? lock : false
|
|
|
660 |
};
|
| 11 |
efrain |
661 |
},
|
|
|
662 |
/**
|
|
|
663 |
* Is the form element an editor?
|
|
|
664 |
*
|
|
|
665 |
* @param {String} el The form element name.
|
|
|
666 |
* @return {Boolean}
|
|
|
667 |
*/
|
|
|
668 |
isEditor: function(el) {
|
|
|
669 |
if (!this._editors) {
|
|
|
670 |
let editors = {};
|
|
|
671 |
const selector = '.fitem [data-fieldtype="editor"] textarea';
|
|
|
672 |
const els = this.get('form').all(selector);
|
|
|
673 |
els.each(function(node) {
|
|
|
674 |
editors[node.getAttribute('name')] = true;
|
|
|
675 |
});
|
|
|
676 |
this._editors = editors;
|
|
|
677 |
}
|
|
|
678 |
|
|
|
679 |
return this._editors[el] || false;
|
|
|
680 |
},
|
| 1 |
efrain |
681 |
}, {
|
|
|
682 |
NAME: 'mform-dependency-manager',
|
|
|
683 |
ATTRS: {
|
|
|
684 |
form: {
|
|
|
685 |
setter: function(value) {
|
|
|
686 |
return Y.one('#' + value);
|
|
|
687 |
},
|
|
|
688 |
value: null
|
|
|
689 |
},
|
|
|
690 |
|
|
|
691 |
dependencies: {
|
|
|
692 |
value: {}
|
|
|
693 |
}
|
|
|
694 |
}
|
|
|
695 |
});
|
|
|
696 |
|
|
|
697 |
M.form.dependencyManager = dependencyManager;
|
|
|
698 |
}
|
|
|
699 |
|
|
|
700 |
/**
|
|
|
701 |
* Stores a list of the dependencyManager for each form on the page.
|
|
|
702 |
*/
|
|
|
703 |
M.form.dependencyManagers = {};
|
|
|
704 |
|
|
|
705 |
/**
|
|
|
706 |
* Initialises a manager for a forms dependencies.
|
|
|
707 |
* This should happen once per form.
|
|
|
708 |
*
|
|
|
709 |
* @param {YUI} Y YUI3 instance
|
|
|
710 |
* @param {String} formid ID of the form
|
|
|
711 |
* @param {Array} dependencies array
|
|
|
712 |
* @return {M.form.dependencyManager}
|
|
|
713 |
*/
|
|
|
714 |
M.form.initFormDependencies = function(Y, formid, dependencies) {
|
|
|
715 |
|
|
|
716 |
// If the dependencies isn't an array or object we don't want to
|
|
|
717 |
// know about it
|
|
|
718 |
if (!Y.Lang.isArray(dependencies) && !Y.Lang.isObject(dependencies)) {
|
|
|
719 |
return false;
|
|
|
720 |
}
|
|
|
721 |
|
|
|
722 |
/**
|
|
|
723 |
* Fixes an issue with YUI's processing method of form.elements property
|
|
|
724 |
* in Internet Explorer.
|
|
|
725 |
* http://yuilibrary.com/projects/yui3/ticket/2528030
|
|
|
726 |
*/
|
|
|
727 |
Y.Node.ATTRS.elements = {
|
|
|
728 |
getter: function() {
|
|
|
729 |
return Y.all(new Y.Array(this._node.elements, 0, true));
|
|
|
730 |
}
|
|
|
731 |
};
|
|
|
732 |
|
|
|
733 |
M.form.dependencyManagers[formid] = new M.form.dependencyManager({form: formid, dependencies: dependencies});
|
|
|
734 |
return M.form.dependencyManagers[formid];
|
|
|
735 |
};
|
|
|
736 |
|
|
|
737 |
/**
|
|
|
738 |
* Update the state of a form. You need to call this after, for example, changing
|
|
|
739 |
* the state of some of the form input elements in your own code, in order that
|
|
|
740 |
* things like the disableIf state of elements can be updated.
|
|
|
741 |
*
|
|
|
742 |
* @param {String} formid ID of the form
|
|
|
743 |
*/
|
|
|
744 |
M.form.updateFormState = function(formid) {
|
|
|
745 |
if (formid in M.form.dependencyManagers) {
|
|
|
746 |
M.form.dependencyManagers[formid].updateAllDependencies();
|
|
|
747 |
}
|
|
|
748 |
};
|