MDL-47628 Availability: Restrict by selected grouping button
[moodle.git] / availability / yui / src / form / js / form.js
1 /**
2  * Provides interface for users to edit availability settings on the
3  * module/section editing form.
4  *
5  * The system works using this JavaScript plus form.js files inside each
6  * condition plugin.
7  *
8  * The overall concept is that data is held in a textarea in the form in JSON
9  * format. This JavaScript converts the textarea into a set of controls
10  * generated here and by the relevant plugins.
11  *
12  * (Almost) all data is held directly by the state of the HTML controls, and
13  * can be updated to the form field by calling the 'update' method, which
14  * this code and the plugins call if any HTML control changes.
15  *
16  * @module moodle-core_availability-form
17  */
18 M.core_availability = M.core_availability || {};
20 /**
21  * Core static functions for availability settings in editing form.
22  *
23  * @class M.core_availability.form
24  * @static
25  */
26 M.core_availability.form = {
27     /**
28      * Object containing installed plugins. They are indexed by plugin name.
29      *
30      * @property plugins
31      * @type Object
32      */
33     plugins : {},
35     /**
36      * Availability field (textarea).
37      *
38      * @property field
39      * @type Y.Node
40      */
41     field : null,
43     /**
44      * Main div that replaces the availability field.
45      *
46      * @property mainDiv
47      * @type Y.Node
48      */
49     mainDiv : null,
51     /**
52      * Object that represents the root of the tree.
53      *
54      * @property rootList
55      * @type M.core_availability.List
56      */
57     rootList : null,
59     /**
60      * Counter used when creating anything that needs an id.
61      *
62      * @property idCounter
63      * @type Number
64      */
65     idCounter : 0,
67     /**
68      * The 'Restrict by group' button if present.
69      *
70      * @property restrictByGroup
71      * @type Y.Node
72      */
73     restrictByGroup : null,
75     /**
76      * Called to initialise the system when the page loads. This method will
77      * also call the init method for each plugin.
78      *
79      * @method init
80      */
81     init : function(pluginParams) {
82         // Init all plugins.
83         for(var plugin in pluginParams) {
84             var params = pluginParams[plugin];
85             var pluginClass = M[params[0]].form;
86             pluginClass.init.apply(pluginClass, params);
87         }
89         // Get the availability field, hide it, and replace with the main div.
90         this.field = Y.one('#id_availabilityconditionsjson');
91         this.field.setAttribute('aria-hidden', 'true');
92         // The fcontainer class here is inappropriate, but is necessary
93         // because otherwise it is impossible to make Behat work correctly on
94         // these controls as Behat incorrectly decides they're a moodleform
95         // textarea. IMO Behat should not know about moodleforms at all and
96         // should look purely at HTML elements on the page, but until it is
97         // fixed to do this or fixed in some other way to only detect moodleform
98         // elements that specifically match what those elements should look like,
99         // then there is no good solution.
100         this.mainDiv = Y.Node.create('<div class="availability-field fcontainer"></div>');
101         this.field.insert(this.mainDiv, 'after');
103         // Get top-level tree as JSON.
104         var value = this.field.get('value');
105         var data = null;
106         if (value !== '') {
107             try {
108                 data = Y.JSON.parse(value);
109             } catch(x) {
110                 // If the JSON data is not valid, treat it as empty.
111                 this.field.set('value', '');
112             }
113         }
114         this.rootList = new M.core_availability.List(data, true);
115         this.mainDiv.appendChild(this.rootList.node);
117         // Update JSON value after loading (to reflect any changes that need
118         // to be made to make it valid).
119         this.update();
120         this.rootList.renumber();
122         // Mark main area as dynamically updated.
123         this.mainDiv.setAttribute('aria-live', 'polite');
125         // Listen for form submission - to avoid having our made-up fields
126         // submitted, we need to disable them all before submit.
127         this.field.ancestor('form').on('submit', function() {
128             this.mainDiv.all('input,textarea,select').set('disabled', true);
129         }, this);
131         // If the form has group mode and/or grouping options, there is a
132         // 'add restriction' button there.
133         this.restrictByGroup = Y.one('#restrictbygroup');
134         if (this.restrictByGroup) {
135             this.restrictByGroup.on('click', this.addRestrictByGroup, this);
136             var groupmode = Y.one('#id_groupmode');
137             var groupingid = Y.one('#id_groupingid');
138             if (groupmode) {
139                 groupmode.on('change', this.updateRestrictByGroup, this);
140             }
141             if (groupingid) {
142                 groupingid.on('change', this.updateRestrictByGroup, this);
143             }
144             this.updateRestrictByGroup();
145         }
146     },
148     /**
149      * Called at any time to update the hidden field value.
150      *
151      * This should be called whenever any value changes in the form settings.
152      *
153      * @method update
154      */
155     update : function() {
156         // Convert tree to value.
157         var jsValue = this.rootList.getValue();
159         // Store any errors (for form reporting) in 'errors' value if present.
160         var errors = [];
161         this.rootList.fillErrors(errors);
162         if (errors.length !== 0) {
163             jsValue.errors = errors;
164         }
166         // Set into hidden form field, JS-encoded.
167         this.field.set('value', Y.JSON.stringify(jsValue));
169         // Also update the restrict by group button if present.
170         this.updateRestrictByGroup();
171     },
173     /**
174      * Updates the status of the 'restrict by group' button (enables or disables
175      * it) based on current availability restrictions and group/grouping settings.
176      */
177     updateRestrictByGroup : function() {
178         if (!this.restrictByGroup) {
179             return;
180         }
182         // If the root list is anything other than the default 'and' type, disable.
183         if (this.rootList.getValue().op !== '&') {
184             this.restrictByGroup.set('disabled', true);
185             return;
186         }
188         // If there's already a group restriction, disable it.
189         var alreadyGot = this.rootList.hasItemOfType('group') ||
190                 this.rootList.hasItemOfType('grouping');
191         if (alreadyGot) {
192             this.restrictByGroup.set('disabled', true);
193             return;
194         }
196         // If the groupmode and grouping id aren't set, disable it.
197         var groupmode = Y.one('#id_groupmode');
198         var groupingid = Y.one('#id_groupingid');
199         if ((!groupmode || Number(groupmode.get('value')) === 0) &&
200                 (!groupingid || Number(groupingid.get('value')) === 0)) {
201             this.restrictByGroup.set('disabled', true);
202             return;
203         }
205         this.restrictByGroup.set('disabled', false);
206     },
208     /**
209      * Called when the user clicks on the 'restrict by group' button. This is
210      * a special case that adds a group or grouping restriction.
211      *
212      * By default this restriction is not shown which makes it similar to the
213      *
214      * @param e Button click event
215      */
216     addRestrictByGroup : function(e) {
217         // If you don't prevent default, it submits the form for some reason.
218         e.preventDefault();
220         // Add the condition.
221         var groupingid = Y.one('#id_groupingid');
222         var newChild;
223         if (groupingid && Number(groupingid.get('value')) !== 0) {
224             // Add a grouping restriction if one is specified.
225             newChild = new M.core_availability.Item(
226                     {type : 'grouping', id : Number(groupingid.get('value'))}, true);
227         } else {
228             // Otherwise just add a group restriction.
229             newChild = new M.core_availability.Item({type : 'group'}, true);
230         }
232         // Refresh HTML.
233         this.rootList.addChild(newChild);
234         this.update();
235         this.rootList.renumber();
236         this.rootList.updateHtml();
237     }
238 };
241 /**
242  * Base object for plugins. Plugins should use Y.Object to extend this class.
243  *
244  * @class M.core_availability.plugin
245  * @static
246  */
247 M.core_availability.plugin = {
248     /**
249      * True if users are allowed to add items of this plugin at the moment.
250      *
251      * @property allowAdd
252      * @type Boolean
253      */
254     allowAdd : false,
256     /**
257      * Called (from PHP) to initialise the plugin. Should usually not be
258      * overridden by child plugin.
259      *
260      * @method init
261      * @param {String} component Component name e.g. 'availability_date'
262      */
263     init : function(component, allowAdd, params) {
264         var name = component.replace(/^availability_/, '');
265         this.allowAdd = allowAdd;
266         M.core_availability.form.plugins[name] = this;
267         this.initInner.apply(this, params);
268     },
270     /**
271      * Init method for plugin to override. (Default does nothing.)
272      *
273      * This method will receive any parameters defined in frontend.php
274      * get_javascript_init_params.
275      *
276      * @method initInner
277      * @protected
278      */
279     initInner : function() {
280     },
282     /**
283      * Gets a YUI node representing the controls for this plugin on the form.
284      *
285      * Must be implemented by sub-object; default throws an exception.
286      *
287      * @method getNode
288      * @return {Y.Node} YUI node
289      */
290     getNode : function() {
291         throw 'getNode not implemented';
292     },
294     /**
295      * Fills in the value from this plugin's controls into a value object,
296      * which will later be converted to JSON and stored in the form field.
297      *
298      * Must be implemented by sub-object; default throws an exception.
299      *
300      * @method fillValue
301      * @param {Object} value Value object (to be written to)
302      * @param {Y.Node} node YUI node (same one returned from getNode)
303      */
304     fillValue : function() {
305         throw 'fillValue not implemented';
306     },
308     /**
309      * Fills in any errors from this plugin's controls. If there are any
310      * errors, push them into the supplied array.
311      *
312      * Errors are Moodle language strings in format component:string, e.g.
313      * 'availability_date:error_date_past_end_of_world'.
314      *
315      * The default implementation does nothing.
316      *
317      * @method fillErrors
318      * @param {Array} errors Array of errors (push new errors here)
319      * @param {Y.Node} node YUI node (same one returned from getNode)
320      */
321     fillErrors : function() {
322     },
324     /**
325      * Focuses the first thing in the plugin after it has been added.
326      *
327      * The default implementation uses a simple algorithm to identify the
328      * first focusable input/select and then focuses it.
329      */
330     focusAfterAdd : function(node) {
331         var target = node.one('input:not([disabled]),select:not([disabled])');
332         target.focus();
333     }
334 };
337 /**
338  * Maintains a list of children and settings for how they are combined.
339  *
340  * @class M.core_availability.List
341  * @constructor
342  * @param {Object} json Decoded JSON value
343  * @param {Boolean} [false] root True if this is root level list
344  * @param {Boolean} [false] root True if parent is root level list
345  */
346 M.core_availability.List = function(json, root, parentRoot) {
347     // Set default value for children. (You can't do this in the prototype
348     // definition, or it ends up sharing the same array between all of them.)
349     this.children = [];
351     if (root !== undefined) {
352         this.root = root;
353     }
354     var strings = M.str.availability;
355     // Create DIV structure (without kids).
356     this.node = Y.Node.create('<div class="availability-list"><h3 class="accesshide"></h3>' +
357             '<div class="availability-inner">' +
358             '<div class="availability-header">' + strings.listheader_sign_before +
359             ' <label><span class="accesshide">' + strings.label_sign +
360             ' </span><select class="availability-neg" title="' + strings.label_sign + '">' +
361             '<option value="">' + strings.listheader_sign_pos + '</option>' +
362             '<option value="!">' + strings.listheader_sign_neg + '</option></select></label> ' +
363             '<span class="availability-single">' + strings.listheader_single + '</span>' +
364             '<span class="availability-multi">' + strings.listheader_multi_before +
365             ' <label><span class="accesshide">' + strings.label_multi + ' </span>' +
366             '<select class="availability-op" title="' + strings.label_multi + '"><option value="&">' +
367             strings.listheader_multi_and + '</option>' +
368             '<option value="|">' + strings.listheader_multi_or + '</option></select></label> ' +
369             strings.listheader_multi_after + '</span></div>' +
370             '<div class="availability-children"></div>' +
371             '<div class="availability-none">' + M.str.moodle.none + '</div>' +
372             '<div class="availability-button"></div></div></div>');
373     if (!root) {
374         this.node.addClass('availability-childlist');
375     }
376     this.inner = this.node.one('> .availability-inner');
378     var shown = true;
379     if (root) {
380         // If it's the root, add an eye icon as first thing in header.
381         if (json && json.show !== undefined) {
382             shown = json.show;
383         }
384         this.eyeIcon = new M.core_availability.EyeIcon(false, shown);
385         this.node.one('.availability-header').get('firstChild').insert(
386                 this.eyeIcon.span, 'before');
387     } else if (parentRoot) {
388         // When the parent is root, add an eye icon before the main list div.
389         if (json && json.showc !== undefined) {
390             shown = json.showc;
391         }
392         this.eyeIcon = new M.core_availability.EyeIcon(false, shown);
393         this.inner.insert(this.eyeIcon.span, 'before');
394     }
396     if (!root) {
397         // If it's not the root, add a delete button to the 'none' option.
398         // You can only delete lists when they have no children so this will
399         // automatically appear at the correct time.
400         var deleteIcon = new M.core_availability.DeleteIcon(this);
401         var noneNode = this.node.one('.availability-none');
402         noneNode.appendChild(document.createTextNode(' '));
403         noneNode.appendChild(deleteIcon.span);
405         // Also if it's not the root, none is actually invalid, so add a label.
406         noneNode.appendChild(Y.Node.create('<span class="label label-warning">' +
407                 M.str.availability.invalid + '</span>'));
408     }
410     // Create the button and add it.
411     var button = Y.Node.create('<button type="button" class="btn btn-default">' +
412             M.str.availability.addrestriction + '</button>');
413     button.on("click", function() { this.clickAdd(); }, this);
414     this.node.one('div.availability-button').appendChild(button);
416     if (json) {
417         // Set operator from JSON data.
418         switch (json.op) {
419             case '&' :
420             case '|' :
421                 this.node.one('.availability-neg').set('value', '');
422                 break;
423             case '!&' :
424             case '!|' :
425                 this.node.one('.availability-neg').set('value', '!');
426                 break;
427         }
428         switch (json.op) {
429             case '&' :
430             case '!&' :
431                 this.node.one('.availability-op').set('value', '&');
432                 break;
433             case '|' :
434             case '!|' :
435                 this.node.one('.availability-op').set('value', '|');
436                 break;
437         }
439         // Construct children.
440         for (var i = 0; i < json.c.length; i++) {
441             var child = json.c[i];
442             if (this.root && json && json.showc !== undefined) {
443                 child.showc = json.showc[i];
444             }
445             var newItem;
446             if (child.type !== undefined) {
447                 // Plugin type.
448                 newItem = new M.core_availability.Item(child, this.root);
449             } else {
450                 // List type.
451                 newItem = new M.core_availability.List(child, false, this.root);
452             }
453             this.addChild(newItem);
454         }
455     }
457     // Add update listeners to the dropdowns.
458     this.node.one('.availability-neg').on('change', function() {
459         // Update hidden field and HTML.
460         M.core_availability.form.update();
461         this.updateHtml();
462     }, this);
463     this.node.one('.availability-op').on('change', function() {
464         // Update hidden field.
465         M.core_availability.form.update();
466         this.updateHtml();
467     }, this);
469     // Update HTML to hide unnecessary parts.
470     this.updateHtml();
471 };
473 /**
474  * Adds a child to the end of the list (in HTML and stored data).
475  *
476  * @method addChild
477  * @private
478  * @param {M.core_availability.Item|M.core_availability.List} newItem Child to add
479  */
480 M.core_availability.List.prototype.addChild = function(newItem) {
481     if (this.children.length > 0) {
482         // Create connecting label (text will be filled in later by updateHtml).
483         this.inner.one('.availability-children').appendChild(Y.Node.create(
484                 '<div class="availability-connector">' +
485                 '<span class="label"></span>' +
486                 '</div>'));
487     }
488     // Add item to array and to HTML.
489     this.children.push(newItem);
490     this.inner.one('.availability-children').appendChild(newItem.node);
491 };
493 /**
494  * Focuses something after a new list is added.
495  *
496  * @method focusAfterAdd
497  */
498 M.core_availability.List.prototype.focusAfterAdd = function() {
499     this.inner.one('button').focus();
500 };
502 /**
503  * Checks whether this list uses the individual show icons or the single one.
504  *
505  * (Basically, AND and the equivalent NOT OR list can have individual show icons
506  * so that you hide the activity entirely if a user fails one condition, but
507  * may display it with information about the condition if they fail a different
508  * one. That isn't possible with OR and NOT AND because for those types, there
509  * is not really a concept of which single condition caused the user to fail
510  * it.)
511  *
512  * Method can only be called on the root list.
513  *
514  * @method isIndividualShowIcons
515  * @return {Boolean} True if using the individual icons
516  */
517 M.core_availability.List.prototype.isIndividualShowIcons = function() {
518     if (!this.root) {
519         throw 'Can only call this on root list';
520     }
521     var neg = this.node.one('.availability-neg').get('value') === '!';
522     var isor = this.node.one('.availability-op').get('value') === '|';
523     return (!neg && !isor) || (neg && isor);
524 };
526 /**
527  * Renumbers the list and all children.
528  *
529  * @method renumber
530  * @param {String} parentNumber Number to use in heading for this list
531  */
532 M.core_availability.List.prototype.renumber = function(parentNumber) {
533     // Update heading for list.
534     var headingParams = { count: this.children.length };
535     var prefix;
536     if (parentNumber === undefined) {
537         headingParams.number = '';
538         prefix = '';
539     } else {
540         headingParams.number = parentNumber + ':';
541         prefix = parentNumber + '.';
542     }
543     var heading = M.util.get_string('setheading', 'availability', headingParams);
544     this.node.one('> h3').set('innerHTML', heading);
546     // Do children.
547     for (var i = 0; i < this.children.length; i++) {
548         var child = this.children[i];
549         child.renumber(prefix + (i + 1));
550     }
551 };
553 /**
554  * Updates HTML for the list based on the current values, for example showing
555  * the 'None' text if there are no children.
556  *
557  * @method updateHtml
558  */
559 M.core_availability.List.prototype.updateHtml = function() {
560     // Control children appearing or not appearing.
561     if (this.children.length > 0) {
562         this.inner.one('> .availability-children').removeAttribute('aria-hidden');
563         this.inner.one('> .availability-none').setAttribute('aria-hidden', 'true');
564         this.inner.one('> .availability-header').removeAttribute('aria-hidden');
565         if (this.children.length > 1) {
566             this.inner.one('.availability-single').setAttribute('aria-hidden', 'true');
567             this.inner.one('.availability-multi').removeAttribute('aria-hidden');
568         } else {
569             this.inner.one('.availability-single').removeAttribute('aria-hidden');
570             this.inner.one('.availability-multi').setAttribute('aria-hidden', 'true');
571         }
572     } else {
573         this.inner.one('> .availability-children').setAttribute('aria-hidden', 'true');
574         this.inner.one('> .availability-none').removeAttribute('aria-hidden');
575         this.inner.one('> .availability-header').setAttribute('aria-hidden', 'true');
576     }
578     // For root list, control eye icons.
579     if (this.root) {
580         var showEyes = this.isIndividualShowIcons();
582         // Individual icons.
583         for (var i = 0; i < this.children.length; i++) {
584             var child = this.children[i];
585             if (showEyes) {
586                 child.eyeIcon.span.removeAttribute('aria-hidden');
587             } else {
588                 child.eyeIcon.span.setAttribute('aria-hidden', 'true');
589             }
590         }
592         // Single icon is the inverse.
593         if (showEyes) {
594             this.eyeIcon.span.setAttribute('aria-hidden', 'true');
595         } else {
596             this.eyeIcon.span.removeAttribute('aria-hidden');
597         }
598     }
600     // Update connector text.
601     var connectorText;
602     if (this.inner.one('.availability-op').get('value') === '&') {
603         connectorText = M.str.availability.and;
604     } else {
605         connectorText = M.str.availability.or;
606     }
607     this.inner.all('> .availability-children > .availability-connector span.label').each(function(span) {
608         span.set('innerHTML', connectorText);
609     });
610 };
612 /**
613  * Deletes a descendant item (Item or List). Called when the user clicks a
614  * delete icon.
615  *
616  * This is a recursive function.
617  *
618  * @method deleteDescendant
619  * @param {M.core_availability.Item|M.core_availability.List} descendant Item to delete
620  * @return {Boolean} True if it was deleted
621  */
622 M.core_availability.List.prototype.deleteDescendant = function(descendant) {
623     // Loop through children.
624     for (var i = 0; i < this.children.length; i++) {
625         var child = this.children[i];
626         if (child === descendant) {
627             // Remove from internal array.
628             this.children.splice(i, 1);
629             var target = child.node;
630             // Remove one of the connector nodes around target (if any left).
631             if (this.children.length > 0) {
632                 if (target.previous('.availability-connector')) {
633                     target.previous('.availability-connector').remove();
634                 } else {
635                     target.next('.availability-connector').remove();
636                 }
637             }
638             // Remove target itself.
639             this.inner.one('> .availability-children').removeChild(target);
640             // Update the form and the list HTML.
641             M.core_availability.form.update();
642             this.updateHtml();
643             // Focus add button for this list.
644             this.inner.one('> .availability-button').one('button').focus();
645             return true;
646         } else if (child instanceof M.core_availability.List) {
647             // Recursive call.
648             var found = child.deleteDescendant(descendant);
649             if (found) {
650                 return true;
651             }
652         }
653     }
655     return false;
656 };
658 /**
659  * Shows the 'add restriction' dialogue box.
660  *
661  * @method clickAdd
662  */
663 M.core_availability.List.prototype.clickAdd = function() {
664     var content = Y.Node.create('<div>' +
665             '<ul class="list-unstyled"></ul>' +
666             '<div class="availability-buttons mdl-align">' +
667             '<button type="button" class="btn btn-default">' + M.str.moodle.cancel +
668             '</button></div></div>');
669     var cancel = content.one('button');
671     // Make a list of all the dialog options.
672     var dialogRef = { dialog: null };
673     var ul = content.one('ul');
674     var li, id, button, label;
675     for (var type in M.core_availability.form.plugins) {
676         // Plugins might decide not to display their add button.
677         if (!M.core_availability.form.plugins[type].allowAdd) {
678             continue;
679         }
680         // Add entry for plugin.
681         li = Y.Node.create('<li class="clearfix"></li>');
682         id = 'availability_addrestriction_' + type;
683         var pluginStrings = M.str['availability_' + type];
684         button = Y.Node.create('<button type="button" class="btn btn-default"' +
685                 'id="' + id + '">' + pluginStrings.title + '</button>');
686         button.on('click', this.getAddHandler(type, dialogRef), this);
687         li.appendChild(button);
688         label = Y.Node.create('<label for="' + id + '">' +
689                 pluginStrings.description + '</label>');
690         li.appendChild(label);
691         ul.appendChild(li);
692     }
693     // Extra entry for lists.
694     li = Y.Node.create('<li class="clearfix"></li>');
695     id = 'availability_addrestriction_list_';
696     button = Y.Node.create('<button type="button" class="btn btn-default"' +
697             'id="' + id + '">' + M.str.availability.condition_group + '</button>');
698     button.on('click', this.getAddHandler(null, dialogRef), this);
699     li.appendChild(button);
700     label = Y.Node.create('<label for="' + id + '">' +
701             M.str.availability.condition_group_info + '</label>');
702     li.appendChild(label);
703     ul.appendChild(li);
705     var config = {
706         headerContent : M.str.availability.addrestriction,
707         bodyContent : content,
708         additionalBaseClass : 'availability-dialogue',
709         draggable : true,
710         modal : true,
711         closeButton : false,
712         width : '450px'
713     };
714     dialogRef.dialog = new M.core.dialogue(config);
715     dialogRef.dialog.show();
716     cancel.on('click', function() {
717         dialogRef.dialog.destroy();
718         // Focus the button they clicked originally.
719         this.inner.one('> .availability-button').one('button').focus();
720     }, this);
721 };
723 /**
724  * Gets an add handler function used by the dialogue to add a particular item.
725  *
726  * @method getAddHandler
727  * @param {String|Null} type Type name of plugin or null to add lists
728  * @param {Object} dialogRef Reference to object that contains dialog
729  * @param {M.core.dialogue} dialogRef.dialog Dialog object
730  * @return {Function} Add handler function to call when adding that thing
731  */
732 M.core_availability.List.prototype.getAddHandler = function(type, dialogRef) {
733     return function() {
734         if (type) {
735             // Create an Item object to represent the child.
736             newItem = new M.core_availability.Item({ type: type, creating: true }, this.root);
737         } else {
738             // Create a new List object to represent the child.
739             newItem = new M.core_availability.List({ c: [], showc: true }, false, this.root);
740         }
741         // Add to list.
742         this.addChild(newItem);
743         // Update the form and list HTML.
744         M.core_availability.form.update();
745         M.core_availability.form.rootList.renumber();
746         this.updateHtml();
747         // Hide dialog.
748         dialogRef.dialog.destroy();
749         newItem.focusAfterAdd();
750     };
751 };
753 /**
754  * Gets the value of the list ready to convert to JSON and fill form field.
755  *
756  * @method getValue
757  * @return {Object} Value of list suitable for use in JSON
758  */
759 M.core_availability.List.prototype.getValue = function() {
760     // Work out operator from selects.
761     var value = {};
762     value.op = this.node.one('.availability-neg').get('value') +
763             this.node.one('.availability-op').get('value');
765     // Work out children from list.
766     value.c = [];
767     var i;
768     for (i = 0; i < this.children.length; i++) {
769         value.c.push(this.children[i].getValue());
770     }
772     // Work out show/showc for root level.
773     if (this.root) {
774         if (this.isIndividualShowIcons()) {
775             value.showc = [];
776             for (i = 0; i < this.children.length; i++) {
777                 value.showc.push(!this.children[i].eyeIcon.isHidden());
778             }
779         } else {
780             value.show = !this.eyeIcon.isHidden();
781         }
782     }
783     return value;
784 };
786 /**
787  * Checks whether this list has any errors (incorrect user input). If so,
788  * an error string identifier in the form langfile:langstring should be pushed
789  * into the errors array.
790  *
791  * @method fillErrors
792  * @param {Array} errors Array of errors so far
793  */
794 M.core_availability.List.prototype.fillErrors = function(errors) {
795     // List with no items is an error (except root).
796     if (this.children.length === 0 && !this.root) {
797         errors.push('availability:error_list_nochildren');
798     }
799     // Pass to children.
800     for (var i = 0; i < this.children.length; i++) {
801         this.children[i].fillErrors(errors);
802     }
803 };
805 /**
806  * Checks whether the list contains any items of the given type name.
807  *
808  * @method hasItemOfType
809  * @param {String} pluginType Required plugin type (name)
810  * @return {Boolean} True if there is one
811  */
812 M.core_availability.List.prototype.hasItemOfType = function(pluginType) {
813     // Check each item.
814     for (var i = 0; i < this.children.length; i++) {
815         var child = this.children[i];
816         if (child instanceof M.core_availability.List) {
817             // Recursive call.
818             if (child.hasItemOfType(pluginType)) {
819                 return true;
820             }
821         } else {
822             if (child.pluginType === pluginType) {
823                 return true;
824             }
825         }
826     }
827     return false;
828 };
830 /**
831  * Eye icon for this list (null if none).
832  *
833  * @property eyeIcon
834  * @type M.core_availability.EyeIcon
835  */
836 M.core_availability.List.prototype.eyeIcon = null;
838 /**
839  * True if list is special root level list.
840  *
841  * @property root
842  * @type Boolean
843  */
844 M.core_availability.List.prototype.root = false;
846 /**
847  * Array containing children (Lists or Items).
848  *
849  * @property children
850  * @type M.core_availability.List[]|M.core_availability.Item[]
851  */
852 M.core_availability.List.prototype.children = null;
854 /**
855  * HTML outer node for list.
856  *
857  * @property node
858  * @type Y.Node
859  */
860 M.core_availability.List.prototype.node = null;
862 /**
863  * HTML node for inner div that actually is the displayed list.
864  *
865  * @property node
866  * @type Y.Node
867  */
868 M.core_availability.List.prototype.inner = null;
871 /**
872  * Represents a single condition.
873  *
874  * @class M.core_availability.Item
875  * @constructor
876  * @param {Object} json Decoded JSON value
877  * @param {Boolean} root True if this item is a child of the root list.
878  */
879 M.core_availability.Item = function(json, root) {
880     this.pluginType = json.type;
881     if (M.core_availability.form.plugins[json.type] === undefined) {
882         // Handle undefined plugins.
883         this.plugin = null;
884         this.pluginNode = Y.Node.create('<div class="availability-warning">' +
885                 M.str.availability.missingplugin + '</div>');
886     } else {
887         // Plugin is known.
888         this.plugin = M.core_availability.form.plugins[json.type];
889         this.pluginNode = this.plugin.getNode(json);
891         // Add a class with the plugin Frankenstyle name to make CSS easier in plugin.
892         this.pluginNode.addClass('availability_' + json.type);
893     }
895     this.node = Y.Node.create('<div class="availability-item"><h3 class="accesshide"></h3></div>');
897     // Add eye icon if required. This icon is added for root items, but may be
898     // hidden depending on the selected list operator.
899     if (root) {
900         var shown = true;
901         if(json.showc !== undefined) {
902             shown = json.showc;
903         }
904         this.eyeIcon = new M.core_availability.EyeIcon(true, shown);
905         this.node.appendChild(this.eyeIcon.span);
906     }
908     // Add plugin controls.
909     this.pluginNode.addClass('availability-plugincontrols');
910     this.node.appendChild(this.pluginNode);
912     // Add delete button for node.
913     var deleteIcon = new M.core_availability.DeleteIcon(this);
914     this.node.appendChild(deleteIcon.span);
916     // Add the invalid marker (empty).
917     this.node.appendChild(document.createTextNode(' '));
918     this.node.appendChild(Y.Node.create('<span class="label label-warning"/>'));
919 };
921 /**
922  * Obtains the value of this condition, which will be serialized into JSON
923  * format and stored in the form.
924  *
925  * @method getValue
926  * @return {Object} JavaScript object containing value of this item
927  */
928 M.core_availability.Item.prototype.getValue = function() {
929     value = { 'type' : this.pluginType };
930     if (this.plugin) {
931         this.plugin.fillValue(value, this.pluginNode);
932     }
933     return value;
934 };
936 /**
937  * Checks whether this condition has any errors (incorrect user input). If so,
938  * an error string identifier in the form langfile:langstring should be pushed
939  * into the errors array.
940  *
941  * @method fillErrors
942  * @param {Array} errors Array of errors so far
943  */
944 M.core_availability.Item.prototype.fillErrors = function(errors) {
945     var before = errors.length;
946     if (this.plugin) {
947         // Pass to plugin.
948         this.plugin.fillErrors(errors, this.pluginNode);
949     } else {
950         // Unknown plugin is an error
951         errors.push('core_availability:item_unknowntype');
952     }
953     // If any errors were added, add the marker to this item.
954     var errorLabel = this.node.one('> .label-warning');
955     if (errors.length !== before && !errorLabel.get('firstChild')) {
956         errorLabel.appendChild(document.createTextNode(M.str.availability.invalid));
957     } else if (errors.length === before && errorLabel.get('firstChild')) {
958         errorLabel.get('firstChild').remove();
959     }
960 };
962 /**
963  * Renumbers the item.
964  *
965  * @method renumber
966  * @param {String} number Number to use in heading for this item
967  */
968 M.core_availability.Item.prototype.renumber = function(number) {
969     // Update heading for item.
970     var headingParams = { number: number };
971     if (this.plugin) {
972         headingParams.type = M.str['availability_' + this.pluginType].title;
973     } else {
974         headingParams.type = '[' + this.pluginType + ']';
975     }
976     headingParams.number = number + ':';
977     var heading = M.util.get_string('itemheading', 'availability', headingParams);
978     this.node.one('> h3').set('innerHTML', heading);
979 };
981 /**
982  * Focuses something after a new item is added.
983  *
984  * @method focusAfterAdd
985  */
986 M.core_availability.Item.prototype.focusAfterAdd = function() {
987     this.plugin.focusAfterAdd(this.pluginNode);
988 };
990 /**
991  * Name of plugin.
992  *
993  * @property pluginType
994  * @type String
995  */
996 M.core_availability.Item.prototype.pluginType = null;
998 /**
999  * Object representing plugin form controls.
1000  *
1001  * @property plugin
1002  * @type Object
1003  */
1004 M.core_availability.Item.prototype.plugin = null;
1006 /**
1007  * Eye icon for item.
1008  *
1009  * @property eyeIcon
1010  * @type M.core_availability.EyeIcon
1011  */
1012 M.core_availability.Item.prototype.eyeIcon = null;
1014 /**
1015  * HTML node for item.
1016  *
1017  * @property node
1018  * @type Y.Node
1019  */
1020 M.core_availability.Item.prototype.node = null;
1022 /**
1023  * Inner part of node that is owned by plugin.
1024  *
1025  * @property pluginNode
1026  * @type Y.Node
1027  */
1028 M.core_availability.Item.prototype.pluginNode = null;
1031 /**
1032  * Eye icon (to control show/hide of the activity if the user fails a condition).
1033  *
1034  * There are individual eye icons (show/hide control for a single condition) and
1035  * 'all' eye icons (show/hide control that applies to the entire item, whatever
1036  * reason it fails for). This is necessary because the individual conditions
1037  * don't make sense for OR and AND NOT lists.
1038  *
1039  * @class M.core_availability.EyeIcon
1040  * @constructor
1041  * @param {Boolean} individual True if the icon is controlling a single condition
1042  * @param {Boolean} shown True if icon is initially in shown state
1043  */
1044 M.core_availability.EyeIcon = function(individual, shown) {
1045     this.individual = individual;
1046     this.span = Y.Node.create('<a class="availability-eye" href="#" role="button">');
1047     var icon = Y.Node.create('<img />');
1048     this.span.appendChild(icon);
1050     // Set up button text and icon.
1051     var suffix = individual ? '_individual' : '_all';
1052     var setHidden = function() {
1053         icon.set('src', M.util.image_url('i/show', 'core'));
1054         icon.set('alt', M.str.availability['hidden' + suffix]);
1055         this.span.set('title', M.str.availability['hidden' + suffix] + ' \u2022 ' +
1056                 M.str.availability.show_verb);
1057     };
1058     var setShown = function() {
1059         icon.set('src', M.util.image_url('i/hide', 'core'));
1060         icon.set('alt', M.str.availability['shown' + suffix]);
1061         this.span.set('title', M.str.availability['shown' + suffix] + ' \u2022 ' +
1062                 M.str.availability.hide_verb);
1063     };
1064     if(shown) {
1065         setShown.call(this);
1066     } else {
1067         setHidden.call(this);
1068     }
1070     // Update when button is clicked.
1071     var click = function(e) {
1072         e.preventDefault();
1073         if (this.isHidden()) {
1074             setShown.call(this);
1075         } else {
1076             setHidden.call(this);
1077         }
1078         M.core_availability.form.update();
1079     };
1080     this.span.on('click', click, this);
1081     this.span.on('key', click, 'up:32', this);
1082     this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
1083 };
1085 /**
1086  * True if this eye icon is an individual one (see above).
1087  *
1088  * @property individual
1089  * @type Boolean
1090  */
1091 M.core_availability.EyeIcon.prototype.individual = false;
1093 /**
1094  * YUI node for the span that contains this icon.
1095  *
1096  * @property span
1097  * @type Y.Node
1098  */
1099 M.core_availability.EyeIcon.prototype.span = null;
1101 /**
1102  * Checks the current state of the icon.
1103  *
1104  * @method isHidden
1105  * @return {Boolean} True if this icon is set to 'hidden'
1106  */
1107 M.core_availability.EyeIcon.prototype.isHidden = function() {
1108     var suffix = this.individual ? '_individual' : '_all';
1109     var compare = M.str.availability['hidden' + suffix];
1110     return this.span.one('img').get('alt') === compare;
1111 };
1114 /**
1115  * Delete icon (to delete an Item or List).
1116  *
1117  * @class M.core_availability.DeleteIcon
1118  * @constructor
1119  * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
1120  */
1121 M.core_availability.DeleteIcon = function(toDelete) {
1122     this.span = Y.Node.create('<a class="availability-delete" href="#" title="' +
1123             M.str.moodle['delete'] + '" role="button">');
1124     var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
1125             '" alt="' + M.str.moodle['delete'] + '" />');
1126     this.span.appendChild(img);
1127     var click = function(e) {
1128         e.preventDefault();
1129         M.core_availability.form.rootList.deleteDescendant(toDelete);
1130         M.core_availability.form.rootList.renumber();
1131     };
1132     this.span.on('click', click, this);
1133     this.span.on('key', click, 'up:32', this);
1134     this.span.on('key', function(e) { e.preventDefault(); }, 'down:32', this);
1135 };
1137 /**
1138  * YUI node for the span that contains this icon.
1139  *
1140  * @property span
1141  * @type Y.Node
1142  */
1143 M.core_availability.DeleteIcon.prototype.span = null;