MDL-64506 templates: Move BS2 btns' to BS4 btns'
[moodle.git] / availability / yui / src / form / js / form.js
CommitLineData
d3db4b03 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 */
18M.core_availability = M.core_availability || {};
19
20/**
21 * Core static functions for availability settings in editing form.
22 *
23 * @class M.core_availability.form
24 * @static
25 */
26M.core_availability.form = {
27 /**
28 * Object containing installed plugins. They are indexed by plugin name.
29 *
30 * @property plugins
31 * @type Object
32 */
5bb4f444 33 plugins: {},
d3db4b03 34
35 /**
36 * Availability field (textarea).
37 *
38 * @property field
39 * @type Y.Node
40 */
5bb4f444 41 field: null,
d3db4b03 42
43 /**
44 * Main div that replaces the availability field.
45 *
46 * @property mainDiv
47 * @type Y.Node
48 */
5bb4f444 49 mainDiv: null,
d3db4b03 50
51 /**
52 * Object that represents the root of the tree.
53 *
54 * @property rootList
55 * @type M.core_availability.List
56 */
5bb4f444 57 rootList: null,
d3db4b03 58
59 /**
60 * Counter used when creating anything that needs an id.
61 *
62 * @property idCounter
63 * @type Number
64 */
5bb4f444 65 idCounter: 0,
d3db4b03 66
a4c31832 67 /**
68 * The 'Restrict by group' button if present.
69 *
70 * @property restrictByGroup
71 * @type Y.Node
72 */
5bb4f444 73 restrictByGroup: null,
a4c31832 74
d3db4b03 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 */
5bb4f444 81 init: function(pluginParams) {
d3db4b03 82 // Init all plugins.
5bb4f444 83 for (var plugin in pluginParams) {
d3db4b03 84 var params = pluginParams[plugin];
85 var pluginClass = M[params[0]].form;
86 pluginClass.init.apply(pluginClass, params);
87 }
88
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');
102
103 // Get top-level tree as JSON.
104 var value = this.field.get('value');
2a848ab9 105 var data = null;
106 if (value !== '') {
107 try {
108 data = Y.JSON.parse(value);
5bb4f444 109 } catch (x) {
2a848ab9 110 // If the JSON data is not valid, treat it as empty.
111 this.field.set('value', '');
112 }
d3db4b03 113 }
2a848ab9 114 this.rootList = new M.core_availability.List(data, true);
d3db4b03 115 this.mainDiv.appendChild(this.rootList.node);
116
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();
121
122 // Mark main area as dynamically updated.
123 this.mainDiv.setAttribute('aria-live', 'polite');
124
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);
a4c31832 130
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 }
d3db4b03 146 },
147
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 */
5bb4f444 155 update: function() {
d3db4b03 156 // Convert tree to value.
157 var jsValue = this.rootList.getValue();
158
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 }
165
166 // Set into hidden form field, JS-encoded.
167 this.field.set('value', Y.JSON.stringify(jsValue));
a4c31832 168
169 // Also update the restrict by group button if present.
170 this.updateRestrictByGroup();
171 },
172
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 */
5bb4f444 177 updateRestrictByGroup: function() {
a4c31832 178 if (!this.restrictByGroup) {
179 return;
180 }
181
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 }
187
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 }
195
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 }
204
205 this.restrictByGroup.set('disabled', false);
206 },
207
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 */
5bb4f444 216 addRestrictByGroup: function(e) {
a4c31832 217 // If you don't prevent default, it submits the form for some reason.
218 e.preventDefault();
219
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(
5bb4f444 226 {type: 'grouping', id: Number(groupingid.get('value'))}, true);
a4c31832 227 } else {
228 // Otherwise just add a group restriction.
5bb4f444 229 newChild = new M.core_availability.Item({type: 'group'}, true);
a4c31832 230 }
231
232 // Refresh HTML.
233 this.rootList.addChild(newChild);
234 this.update();
235 this.rootList.renumber();
236 this.rootList.updateHtml();
d3db4b03 237 }
238};
239
240
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 */
247M.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 */
5bb4f444 254 allowAdd: false,
d3db4b03 255
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 */
5bb4f444 263 init: function(component, allowAdd, params) {
d3db4b03 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 },
269
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 */
5bb4f444 279 initInner: function() {
bc8b6dc6 280 // Can be overriden.
d3db4b03 281 },
282
283 /**
284 * Gets a YUI node representing the controls for this plugin on the form.
285 *
286 * Must be implemented by sub-object; default throws an exception.
287 *
288 * @method getNode
289 * @return {Y.Node} YUI node
290 */
5bb4f444 291 getNode: function() {
d3db4b03 292 throw 'getNode not implemented';
293 },
294
295 /**
296 * Fills in the value from this plugin's controls into a value object,
297 * which will later be converted to JSON and stored in the form field.
298 *
299 * Must be implemented by sub-object; default throws an exception.
300 *
301 * @method fillValue
302 * @param {Object} value Value object (to be written to)
303 * @param {Y.Node} node YUI node (same one returned from getNode)
304 */
5bb4f444 305 fillValue: function() {
d3db4b03 306 throw 'fillValue not implemented';
307 },
308
309 /**
310 * Fills in any errors from this plugin's controls. If there are any
311 * errors, push them into the supplied array.
312 *
313 * Errors are Moodle language strings in format component:string, e.g.
314 * 'availability_date:error_date_past_end_of_world'.
315 *
316 * The default implementation does nothing.
317 *
318 * @method fillErrors
319 * @param {Array} errors Array of errors (push new errors here)
320 * @param {Y.Node} node YUI node (same one returned from getNode)
321 */
5bb4f444 322 fillErrors: function() {
bc8b6dc6 323 // Can be overriden.
d3db4b03 324 },
325
326 /**
327 * Focuses the first thing in the plugin after it has been added.
328 *
329 * The default implementation uses a simple algorithm to identify the
330 * first focusable input/select and then focuses it.
331 */
5bb4f444 332 focusAfterAdd: function(node) {
d3db4b03 333 var target = node.one('input:not([disabled]),select:not([disabled])');
334 target.focus();
335 }
336};
337
338
339/**
340 * Maintains a list of children and settings for how they are combined.
341 *
342 * @class M.core_availability.List
343 * @constructor
344 * @param {Object} json Decoded JSON value
345 * @param {Boolean} [false] root True if this is root level list
346 * @param {Boolean} [false] root True if parent is root level list
347 */
348M.core_availability.List = function(json, root, parentRoot) {
349 // Set default value for children. (You can't do this in the prototype
350 // definition, or it ends up sharing the same array between all of them.)
351 this.children = [];
352
353 if (root !== undefined) {
354 this.root = root;
355 }
d3db4b03 356 // Create DIV structure (without kids).
357 this.node = Y.Node.create('<div class="availability-list"><h3 class="accesshide"></h3>' +
358 '<div class="availability-inner">' +
95d7c77b 359 '<div class="availability-header m-b-1"><span>' +
560a43f2 360 M.util.get_string('listheader_sign_before', 'availability') + '</span>' +
64e7aa4d 361 ' <label><span class="accesshide">' + M.util.get_string('label_sign', 'availability') +
560a43f2
DW
362 ' </span><select class="availability-neg custom-select m-x-1"' +
363 ' title="' + M.util.get_string('label_sign', 'availability') + '">' +
64e7aa4d
AN
364 '<option value="">' + M.util.get_string('listheader_sign_pos', 'availability') + '</option>' +
365 '<option value="!">' + M.util.get_string('listheader_sign_neg', 'availability') + '</option></select></label> ' +
366 '<span class="availability-single">' + M.util.get_string('listheader_single', 'availability') + '</span>' +
367 '<span class="availability-multi">' + M.util.get_string('listheader_multi_before', 'availability') +
368 ' <label><span class="accesshide">' + M.util.get_string('label_multi', 'availability') + ' </span>' +
560a43f2
DW
369 '<select class="availability-op custom-select m-x-1"' +
370 ' title="' + M.util.get_string('label_multi', 'availability') + '"><option value="&">' +
64e7aa4d
AN
371 M.util.get_string('listheader_multi_and', 'availability') + '</option>' +
372 '<option value="|">' + M.util.get_string('listheader_multi_or', 'availability') + '</option></select></label> ' +
373 M.util.get_string('listheader_multi_after', 'availability') + '</span></div>' +
d3db4b03 374 '<div class="availability-children"></div>' +
560a43f2
DW
375 '<div class="availability-none"><span class="p-x-1">' + M.util.get_string('none', 'moodle') + '</span></div>' +
376 '<div class="clearfix m-t-1"></div>' +
377 '<div class="availability-button"></div></div><div class="clearfix"></div></div>');
d3db4b03 378 if (!root) {
95d7c77b 379 this.node.addClass('availability-childlist d-sm-flex align-items-center');
d3db4b03 380 }
381 this.inner = this.node.one('> .availability-inner');
382
383 var shown = true;
384 if (root) {
385 // If it's the root, add an eye icon as first thing in header.
386 if (json && json.show !== undefined) {
387 shown = json.show;
388 }
389 this.eyeIcon = new M.core_availability.EyeIcon(false, shown);
390 this.node.one('.availability-header').get('firstChild').insert(
391 this.eyeIcon.span, 'before');
392 } else if (parentRoot) {
393 // When the parent is root, add an eye icon before the main list div.
394 if (json && json.showc !== undefined) {
395 shown = json.showc;
396 }
397 this.eyeIcon = new M.core_availability.EyeIcon(false, shown);
398 this.inner.insert(this.eyeIcon.span, 'before');
399 }
400
401 if (!root) {
402 // If it's not the root, add a delete button to the 'none' option.
403 // You can only delete lists when they have no children so this will
404 // automatically appear at the correct time.
405 var deleteIcon = new M.core_availability.DeleteIcon(this);
406 var noneNode = this.node.one('.availability-none');
407 noneNode.appendChild(document.createTextNode(' '));
408 noneNode.appendChild(deleteIcon.span);
409
410 // Also if it's not the root, none is actually invalid, so add a label.
560a43f2 411 noneNode.appendChild(Y.Node.create('<span class="m-t-1 label label-warning">' +
64e7aa4d 412 M.util.get_string('invalid', 'availability') + '</span>'));
d3db4b03 413 }
414
415 // Create the button and add it.
29551c4b 416 var button = Y.Node.create('<button type="button" class="btn btn-secondary m-t-1">' +
64e7aa4d 417 M.util.get_string('addrestriction', 'availability') + '</button>');
bc8b6dc6
DP
418 button.on("click", function() {
419 this.clickAdd();
420 }, this);
d3db4b03 421 this.node.one('div.availability-button').appendChild(button);
422
423 if (json) {
424 // Set operator from JSON data.
425 switch (json.op) {
426 case '&' :
427 case '|' :
428 this.node.one('.availability-neg').set('value', '');
429 break;
430 case '!&' :
431 case '!|' :
432 this.node.one('.availability-neg').set('value', '!');
433 break;
434 }
435 switch (json.op) {
436 case '&' :
437 case '!&' :
438 this.node.one('.availability-op').set('value', '&');
439 break;
440 case '|' :
441 case '!|' :
442 this.node.one('.availability-op').set('value', '|');
443 break;
444 }
445
446 // Construct children.
447 for (var i = 0; i < json.c.length; i++) {
448 var child = json.c[i];
449 if (this.root && json && json.showc !== undefined) {
450 child.showc = json.showc[i];
451 }
452 var newItem;
453 if (child.type !== undefined) {
454 // Plugin type.
455 newItem = new M.core_availability.Item(child, this.root);
456 } else {
457 // List type.
458 newItem = new M.core_availability.List(child, false, this.root);
459 }
460 this.addChild(newItem);
461 }
462 }
463
464 // Add update listeners to the dropdowns.
465 this.node.one('.availability-neg').on('change', function() {
466 // Update hidden field and HTML.
467 M.core_availability.form.update();
468 this.updateHtml();
469 }, this);
470 this.node.one('.availability-op').on('change', function() {
471 // Update hidden field.
472 M.core_availability.form.update();
473 this.updateHtml();
474 }, this);
475
476 // Update HTML to hide unnecessary parts.
477 this.updateHtml();
478};
479
480/**
481 * Adds a child to the end of the list (in HTML and stored data).
482 *
483 * @method addChild
484 * @private
485 * @param {M.core_availability.Item|M.core_availability.List} newItem Child to add
486 */
487M.core_availability.List.prototype.addChild = function(newItem) {
488 if (this.children.length > 0) {
489 // Create connecting label (text will be filled in later by updateHtml).
490 this.inner.one('.availability-children').appendChild(Y.Node.create(
491 '<div class="availability-connector">' +
492 '<span class="label"></span>' +
493 '</div>'));
494 }
495 // Add item to array and to HTML.
496 this.children.push(newItem);
497 this.inner.one('.availability-children').appendChild(newItem.node);
498};
499
500/**
501 * Focuses something after a new list is added.
502 *
503 * @method focusAfterAdd
504 */
505M.core_availability.List.prototype.focusAfterAdd = function() {
506 this.inner.one('button').focus();
507};
508
509/**
510 * Checks whether this list uses the individual show icons or the single one.
511 *
512 * (Basically, AND and the equivalent NOT OR list can have individual show icons
513 * so that you hide the activity entirely if a user fails one condition, but
514 * may display it with information about the condition if they fail a different
515 * one. That isn't possible with OR and NOT AND because for those types, there
516 * is not really a concept of which single condition caused the user to fail
517 * it.)
518 *
519 * Method can only be called on the root list.
520 *
521 * @method isIndividualShowIcons
522 * @return {Boolean} True if using the individual icons
523 */
524M.core_availability.List.prototype.isIndividualShowIcons = function() {
525 if (!this.root) {
526 throw 'Can only call this on root list';
527 }
528 var neg = this.node.one('.availability-neg').get('value') === '!';
529 var isor = this.node.one('.availability-op').get('value') === '|';
530 return (!neg && !isor) || (neg && isor);
531};
532
533/**
534 * Renumbers the list and all children.
535 *
536 * @method renumber
537 * @param {String} parentNumber Number to use in heading for this list
538 */
539M.core_availability.List.prototype.renumber = function(parentNumber) {
540 // Update heading for list.
5bb4f444 541 var headingParams = {count: this.children.length};
d3db4b03 542 var prefix;
543 if (parentNumber === undefined) {
544 headingParams.number = '';
545 prefix = '';
546 } else {
547 headingParams.number = parentNumber + ':';
548 prefix = parentNumber + '.';
549 }
550 var heading = M.util.get_string('setheading', 'availability', headingParams);
551 this.node.one('> h3').set('innerHTML', heading);
552
553 // Do children.
554 for (var i = 0; i < this.children.length; i++) {
555 var child = this.children[i];
556 child.renumber(prefix + (i + 1));
557 }
558};
559
560/**
561 * Updates HTML for the list based on the current values, for example showing
562 * the 'None' text if there are no children.
563 *
564 * @method updateHtml
565 */
566M.core_availability.List.prototype.updateHtml = function() {
567 // Control children appearing or not appearing.
568 if (this.children.length > 0) {
569 this.inner.one('> .availability-children').removeAttribute('aria-hidden');
570 this.inner.one('> .availability-none').setAttribute('aria-hidden', 'true');
571 this.inner.one('> .availability-header').removeAttribute('aria-hidden');
572 if (this.children.length > 1) {
573 this.inner.one('.availability-single').setAttribute('aria-hidden', 'true');
574 this.inner.one('.availability-multi').removeAttribute('aria-hidden');
575 } else {
576 this.inner.one('.availability-single').removeAttribute('aria-hidden');
577 this.inner.one('.availability-multi').setAttribute('aria-hidden', 'true');
578 }
579 } else {
580 this.inner.one('> .availability-children').setAttribute('aria-hidden', 'true');
581 this.inner.one('> .availability-none').removeAttribute('aria-hidden');
582 this.inner.one('> .availability-header').setAttribute('aria-hidden', 'true');
583 }
584
585 // For root list, control eye icons.
586 if (this.root) {
587 var showEyes = this.isIndividualShowIcons();
588
589 // Individual icons.
590 for (var i = 0; i < this.children.length; i++) {
591 var child = this.children[i];
592 if (showEyes) {
593 child.eyeIcon.span.removeAttribute('aria-hidden');
594 } else {
595 child.eyeIcon.span.setAttribute('aria-hidden', 'true');
596 }
597 }
598
599 // Single icon is the inverse.
600 if (showEyes) {
601 this.eyeIcon.span.setAttribute('aria-hidden', 'true');
602 } else {
603 this.eyeIcon.span.removeAttribute('aria-hidden');
604 }
605 }
606
607 // Update connector text.
608 var connectorText;
609 if (this.inner.one('.availability-op').get('value') === '&') {
64e7aa4d 610 connectorText = M.util.get_string('and', 'availability');
d3db4b03 611 } else {
64e7aa4d 612 connectorText = M.util.get_string('or', 'availability');
d3db4b03 613 }
1282c474 614 this.inner.all('> .availability-children > .availability-connector span.label').each(function(span) {
d3db4b03 615 span.set('innerHTML', connectorText);
616 });
617};
618
619/**
620 * Deletes a descendant item (Item or List). Called when the user clicks a
621 * delete icon.
622 *
623 * This is a recursive function.
624 *
625 * @method deleteDescendant
626 * @param {M.core_availability.Item|M.core_availability.List} descendant Item to delete
627 * @return {Boolean} True if it was deleted
628 */
629M.core_availability.List.prototype.deleteDescendant = function(descendant) {
630 // Loop through children.
631 for (var i = 0; i < this.children.length; i++) {
632 var child = this.children[i];
633 if (child === descendant) {
634 // Remove from internal array.
635 this.children.splice(i, 1);
636 var target = child.node;
637 // Remove one of the connector nodes around target (if any left).
638 if (this.children.length > 0) {
639 if (target.previous('.availability-connector')) {
640 target.previous('.availability-connector').remove();
641 } else {
642 target.next('.availability-connector').remove();
643 }
644 }
645 // Remove target itself.
646 this.inner.one('> .availability-children').removeChild(target);
647 // Update the form and the list HTML.
648 M.core_availability.form.update();
649 this.updateHtml();
650 // Focus add button for this list.
651 this.inner.one('> .availability-button').one('button').focus();
652 return true;
653 } else if (child instanceof M.core_availability.List) {
654 // Recursive call.
655 var found = child.deleteDescendant(descendant);
656 if (found) {
657 return true;
658 }
659 }
660 }
661
662 return false;
663};
664
665/**
666 * Shows the 'add restriction' dialogue box.
667 *
668 * @method clickAdd
669 */
670M.core_availability.List.prototype.clickAdd = function() {
671 var content = Y.Node.create('<div>' +
560a43f2 672 '<ul class="list-unstyled container-fluid"></ul>' +
f67dd628 673 '<div class="availability-buttons mdl-align">' +
29551c4b 674 '<button type="button" class="btn btn-secondary">' + M.util.get_string('cancel', 'moodle') +
d3db4b03 675 '</button></div></div>');
676 var cancel = content.one('button');
677
678 // Make a list of all the dialog options.
5bb4f444 679 var dialogRef = {dialog: null};
d3db4b03 680 var ul = content.one('ul');
681 var li, id, button, label;
682 for (var type in M.core_availability.form.plugins) {
683 // Plugins might decide not to display their add button.
684 if (!M.core_availability.form.plugins[type].allowAdd) {
685 continue;
686 }
687 // Add entry for plugin.
560a43f2 688 li = Y.Node.create('<li class="clearfix row"></li>');
d3db4b03 689 id = 'availability_addrestriction_' + type;
29551c4b 690 button = Y.Node.create('<div class="col-6"><button type="button" class="btn btn-secondary w-100"' +
95d7c77b 691 'id="' + id + '">' + M.util.get_string('title', 'availability_' + type) + '</button></div>');
d3db4b03 692 button.on('click', this.getAddHandler(type, dialogRef), this);
693 li.appendChild(button);
95d7c77b
BB
694 label = Y.Node.create('<div class="col-6"><label for="' + id + '">' +
695 M.util.get_string('description', 'availability_' + type) + '</label></div>');
d3db4b03 696 li.appendChild(label);
697 ul.appendChild(li);
698 }
699 // Extra entry for lists.
560a43f2 700 li = Y.Node.create('<li class="clearfix row"></li>');
d3db4b03 701 id = 'availability_addrestriction_list_';
29551c4b 702 button = Y.Node.create('<div class="col-6"><button type="button" class="btn btn-secondary w-100"' +
95d7c77b 703 'id="' + id + '">' + M.util.get_string('condition_group', 'availability') + '</button></div>');
d3db4b03 704 button.on('click', this.getAddHandler(null, dialogRef), this);
705 li.appendChild(button);
95d7c77b
BB
706 label = Y.Node.create('<div class="col-6"><label for="' + id + '">' +
707 M.util.get_string('condition_group_info', 'availability') + '</label></div>');
d3db4b03 708 li.appendChild(label);
709 ul.appendChild(li);
710
711 var config = {
5bb4f444
DP
712 headerContent: M.util.get_string('addrestriction', 'availability'),
713 bodyContent: content,
714 additionalBaseClass: 'availability-dialogue',
715 draggable: true,
716 modal: true,
717 closeButton: false,
718 width: '450px'
d3db4b03 719 };
720 dialogRef.dialog = new M.core.dialogue(config);
721 dialogRef.dialog.show();
722 cancel.on('click', function() {
723 dialogRef.dialog.destroy();
724 // Focus the button they clicked originally.
725 this.inner.one('> .availability-button').one('button').focus();
726 }, this);
727};
728
729/**
730 * Gets an add handler function used by the dialogue to add a particular item.
731 *
732 * @method getAddHandler
733 * @param {String|Null} type Type name of plugin or null to add lists
734 * @param {Object} dialogRef Reference to object that contains dialog
735 * @param {M.core.dialogue} dialogRef.dialog Dialog object
736 * @return {Function} Add handler function to call when adding that thing
737 */
738M.core_availability.List.prototype.getAddHandler = function(type, dialogRef) {
739 return function() {
557f44d9 740 var newItem;
d3db4b03 741 if (type) {
742 // Create an Item object to represent the child.
5bb4f444 743 newItem = new M.core_availability.Item({type: type, creating: true}, this.root);
d3db4b03 744 } else {
745 // Create a new List object to represent the child.
5bb4f444 746 newItem = new M.core_availability.List({c: [], showc: true}, false, this.root);
d3db4b03 747 }
748 // Add to list.
749 this.addChild(newItem);
750 // Update the form and list HTML.
751 M.core_availability.form.update();
752 M.core_availability.form.rootList.renumber();
753 this.updateHtml();
754 // Hide dialog.
755 dialogRef.dialog.destroy();
756 newItem.focusAfterAdd();
757 };
758};
759
760/**
761 * Gets the value of the list ready to convert to JSON and fill form field.
762 *
763 * @method getValue
764 * @return {Object} Value of list suitable for use in JSON
765 */
766M.core_availability.List.prototype.getValue = function() {
767 // Work out operator from selects.
768 var value = {};
769 value.op = this.node.one('.availability-neg').get('value') +
770 this.node.one('.availability-op').get('value');
771
772 // Work out children from list.
773 value.c = [];
774 var i;
775 for (i = 0; i < this.children.length; i++) {
776 value.c.push(this.children[i].getValue());
777 }
778
779 // Work out show/showc for root level.
780 if (this.root) {
781 if (this.isIndividualShowIcons()) {
782 value.showc = [];
783 for (i = 0; i < this.children.length; i++) {
784 value.showc.push(!this.children[i].eyeIcon.isHidden());
785 }
786 } else {
787 value.show = !this.eyeIcon.isHidden();
788 }
789 }
790 return value;
791};
792
793/**
794 * Checks whether this list has any errors (incorrect user input). If so,
795 * an error string identifier in the form langfile:langstring should be pushed
796 * into the errors array.
797 *
798 * @method fillErrors
799 * @param {Array} errors Array of errors so far
800 */
801M.core_availability.List.prototype.fillErrors = function(errors) {
802 // List with no items is an error (except root).
803 if (this.children.length === 0 && !this.root) {
804 errors.push('availability:error_list_nochildren');
805 }
806 // Pass to children.
807 for (var i = 0; i < this.children.length; i++) {
808 this.children[i].fillErrors(errors);
809 }
810};
811
a4c31832 812/**
813 * Checks whether the list contains any items of the given type name.
814 *
815 * @method hasItemOfType
816 * @param {String} pluginType Required plugin type (name)
817 * @return {Boolean} True if there is one
818 */
819M.core_availability.List.prototype.hasItemOfType = function(pluginType) {
820 // Check each item.
821 for (var i = 0; i < this.children.length; i++) {
822 var child = this.children[i];
823 if (child instanceof M.core_availability.List) {
824 // Recursive call.
825 if (child.hasItemOfType(pluginType)) {
826 return true;
827 }
828 } else {
829 if (child.pluginType === pluginType) {
830 return true;
831 }
832 }
833 }
834 return false;
835};
836
d3db4b03 837/**
838 * Eye icon for this list (null if none).
839 *
840 * @property eyeIcon
841 * @type M.core_availability.EyeIcon
842 */
843M.core_availability.List.prototype.eyeIcon = null;
844
845/**
846 * True if list is special root level list.
847 *
848 * @property root
849 * @type Boolean
850 */
851M.core_availability.List.prototype.root = false;
852
853/**
854 * Array containing children (Lists or Items).
855 *
856 * @property children
857 * @type M.core_availability.List[]|M.core_availability.Item[]
858 */
859M.core_availability.List.prototype.children = null;
860
861/**
862 * HTML outer node for list.
863 *
864 * @property node
865 * @type Y.Node
866 */
867M.core_availability.List.prototype.node = null;
868
869/**
870 * HTML node for inner div that actually is the displayed list.
871 *
872 * @property node
873 * @type Y.Node
874 */
875M.core_availability.List.prototype.inner = null;
876
877
878/**
879 * Represents a single condition.
880 *
881 * @class M.core_availability.Item
882 * @constructor
883 * @param {Object} json Decoded JSON value
884 * @param {Boolean} root True if this item is a child of the root list.
885 */
886M.core_availability.Item = function(json, root) {
887 this.pluginType = json.type;
888 if (M.core_availability.form.plugins[json.type] === undefined) {
889 // Handle undefined plugins.
890 this.plugin = null;
891 this.pluginNode = Y.Node.create('<div class="availability-warning">' +
64e7aa4d 892 M.util.get_string('missingplugin', 'availability') + '</div>');
d3db4b03 893 } else {
894 // Plugin is known.
895 this.plugin = M.core_availability.form.plugins[json.type];
896 this.pluginNode = this.plugin.getNode(json);
897
898 // Add a class with the plugin Frankenstyle name to make CSS easier in plugin.
899 this.pluginNode.addClass('availability_' + json.type);
900 }
901
95d7c77b 902 this.node = Y.Node.create('<div class="availability-item d-sm-flex align-items-center"><h3 class="accesshide"></h3></div>');
d3db4b03 903
904 // Add eye icon if required. This icon is added for root items, but may be
905 // hidden depending on the selected list operator.
906 if (root) {
907 var shown = true;
5bb4f444 908 if (json.showc !== undefined) {
d3db4b03 909 shown = json.showc;
910 }
911 this.eyeIcon = new M.core_availability.EyeIcon(true, shown);
912 this.node.appendChild(this.eyeIcon.span);
913 }
914
915 // Add plugin controls.
916 this.pluginNode.addClass('availability-plugincontrols');
917 this.node.appendChild(this.pluginNode);
918
919 // Add delete button for node.
920 var deleteIcon = new M.core_availability.DeleteIcon(this);
921 this.node.appendChild(deleteIcon.span);
922
923 // Add the invalid marker (empty).
924 this.node.appendChild(document.createTextNode(' '));
95d7c77b 925 this.node.appendChild(Y.Node.create('<span class="label label-warning"/>'));
d3db4b03 926};
927
928/**
929 * Obtains the value of this condition, which will be serialized into JSON
930 * format and stored in the form.
931 *
932 * @method getValue
933 * @return {Object} JavaScript object containing value of this item
934 */
935M.core_availability.Item.prototype.getValue = function() {
5bb4f444 936 var value = {'type': this.pluginType};
d3db4b03 937 if (this.plugin) {
938 this.plugin.fillValue(value, this.pluginNode);
939 }
940 return value;
941};
942
943/**
944 * Checks whether this condition has any errors (incorrect user input). If so,
945 * an error string identifier in the form langfile:langstring should be pushed
946 * into the errors array.
947 *
948 * @method fillErrors
949 * @param {Array} errors Array of errors so far
950 */
951M.core_availability.Item.prototype.fillErrors = function(errors) {
952 var before = errors.length;
953 if (this.plugin) {
954 // Pass to plugin.
955 this.plugin.fillErrors(errors, this.pluginNode);
956 } else {
957 // Unknown plugin is an error
958 errors.push('core_availability:item_unknowntype');
959 }
960 // If any errors were added, add the marker to this item.
961 var errorLabel = this.node.one('> .label-warning');
962 if (errors.length !== before && !errorLabel.get('firstChild')) {
64e7aa4d 963 errorLabel.appendChild(document.createTextNode(M.util.get_string('invalid', 'availability')));
d3db4b03 964 } else if (errors.length === before && errorLabel.get('firstChild')) {
965 errorLabel.get('firstChild').remove();
966 }
967};
968
969/**
970 * Renumbers the item.
971 *
972 * @method renumber
973 * @param {String} number Number to use in heading for this item
974 */
975M.core_availability.Item.prototype.renumber = function(number) {
976 // Update heading for item.
5bb4f444 977 var headingParams = {number: number};
d3db4b03 978 if (this.plugin) {
64e7aa4d 979 headingParams.type = M.util.get_string('title', 'availability_' + this.pluginType);
d3db4b03 980 } else {
981 headingParams.type = '[' + this.pluginType + ']';
982 }
983 headingParams.number = number + ':';
984 var heading = M.util.get_string('itemheading', 'availability', headingParams);
985 this.node.one('> h3').set('innerHTML', heading);
986};
987
988/**
989 * Focuses something after a new item is added.
990 *
991 * @method focusAfterAdd
992 */
993M.core_availability.Item.prototype.focusAfterAdd = function() {
994 this.plugin.focusAfterAdd(this.pluginNode);
995};
996
997/**
998 * Name of plugin.
999 *
1000 * @property pluginType
1001 * @type String
1002 */
1003M.core_availability.Item.prototype.pluginType = null;
1004
1005/**
1006 * Object representing plugin form controls.
1007 *
1008 * @property plugin
1009 * @type Object
1010 */
1011M.core_availability.Item.prototype.plugin = null;
1012
1013/**
1014 * Eye icon for item.
1015 *
1016 * @property eyeIcon
1017 * @type M.core_availability.EyeIcon
1018 */
1019M.core_availability.Item.prototype.eyeIcon = null;
1020
1021/**
1022 * HTML node for item.
1023 *
1024 * @property node
1025 * @type Y.Node
1026 */
1027M.core_availability.Item.prototype.node = null;
1028
1029/**
1030 * Inner part of node that is owned by plugin.
1031 *
1032 * @property pluginNode
1033 * @type Y.Node
1034 */
1035M.core_availability.Item.prototype.pluginNode = null;
1036
1037
1038/**
1039 * Eye icon (to control show/hide of the activity if the user fails a condition).
1040 *
1041 * There are individual eye icons (show/hide control for a single condition) and
1042 * 'all' eye icons (show/hide control that applies to the entire item, whatever
1043 * reason it fails for). This is necessary because the individual conditions
1044 * don't make sense for OR and AND NOT lists.
1045 *
1046 * @class M.core_availability.EyeIcon
1047 * @constructor
1048 * @param {Boolean} individual True if the icon is controlling a single condition
1049 * @param {Boolean} shown True if icon is initially in shown state
1050 */
1051M.core_availability.EyeIcon = function(individual, shown) {
1052 this.individual = individual;
560a43f2 1053 this.span = Y.Node.create('<a class="availability-eye col-form-label" href="#" role="button">');
f67dd628 1054 var icon = Y.Node.create('<img />');
1055 this.span.appendChild(icon);
d3db4b03 1056
1057 // Set up button text and icon.
64e7aa4d
AN
1058 var suffix = individual ? '_individual' : '_all',
1059 setHidden = function() {
1060 var hiddenStr = M.util.get_string('hidden' + suffix, 'availability');
1061 icon.set('src', M.util.image_url('i/show', 'core'));
1062 icon.set('alt', hiddenStr);
1063 this.span.set('title', hiddenStr + ' \u2022 ' +
1064 M.util.get_string('show_verb', 'availability'));
1065 },
1066 setShown = function() {
1067 var shownStr = M.util.get_string('shown' + suffix, 'availability');
1068 icon.set('src', M.util.image_url('i/hide', 'core'));
1069 icon.set('alt', shownStr);
1070 this.span.set('title', shownStr + ' \u2022 ' +
1071 M.util.get_string('hide_verb', 'availability'));
1072 };
5bb4f444 1073 if (shown) {
f67dd628 1074 setShown.call(this);
d3db4b03 1075 } else {
f67dd628 1076 setHidden.call(this);
d3db4b03 1077 }
1078
1079 // Update when button is clicked.
f67dd628 1080 var click = function(e) {
1081 e.preventDefault();
d3db4b03 1082 if (this.isHidden()) {
f67dd628 1083 setShown.call(this);
d3db4b03 1084 } else {
f67dd628 1085 setHidden.call(this);
d3db4b03 1086 }
1087 M.core_availability.form.update();
1088 };
f67dd628 1089 this.span.on('click', click, this);
1090 this.span.on('key', click, 'up:32', this);
bc8b6dc6
DP
1091 this.span.on('key', function(e) {
1092 e.preventDefault();
1093 }, 'down:32', this);
d3db4b03 1094};
1095
1096/**
1097 * True if this eye icon is an individual one (see above).
1098 *
1099 * @property individual
1100 * @type Boolean
1101 */
1102M.core_availability.EyeIcon.prototype.individual = false;
1103
1104/**
1105 * YUI node for the span that contains this icon.
1106 *
1107 * @property span
1108 * @type Y.Node
1109 */
1110M.core_availability.EyeIcon.prototype.span = null;
1111
1112/**
1113 * Checks the current state of the icon.
1114 *
1115 * @method isHidden
1116 * @return {Boolean} True if this icon is set to 'hidden'
1117 */
1118M.core_availability.EyeIcon.prototype.isHidden = function() {
64e7aa4d
AN
1119 var suffix = this.individual ? '_individual' : '_all',
1120 compare = M.util.get_string('hidden' + suffix, 'availability');
d3db4b03 1121 return this.span.one('img').get('alt') === compare;
1122};
1123
1124
1125/**
1126 * Delete icon (to delete an Item or List).
1127 *
1128 * @class M.core_availability.DeleteIcon
1129 * @constructor
1130 * @param {M.core_availability.Item|M.core_availability.List} toDelete Thing to delete
1131 */
1132M.core_availability.DeleteIcon = function(toDelete) {
560a43f2 1133 this.span = Y.Node.create('<a class="d-inline-block col-form-label availability-delete p-x-1" href="#" title="' +
64e7aa4d 1134 M.util.get_string('delete', 'moodle') + '" role="button">');
38584d11 1135 var img = Y.Node.create('<img src="' + M.util.image_url('t/delete', 'core') +
64e7aa4d 1136 '" alt="' + M.util.get_string('delete', 'moodle') + '" />');
f67dd628 1137 this.span.appendChild(img);
1138 var click = function(e) {
1139 e.preventDefault();
d3db4b03 1140 M.core_availability.form.rootList.deleteDescendant(toDelete);
1141 M.core_availability.form.rootList.renumber();
1142 };
f67dd628 1143 this.span.on('click', click, this);
1144 this.span.on('key', click, 'up:32', this);
bc8b6dc6
DP
1145 this.span.on('key', function(e) {
1146 e.preventDefault();
1147 }, 'down:32', this);
d3db4b03 1148};
1149
1150/**
1151 * YUI node for the span that contains this icon.
1152 *
1153 * @property span
1154 * @type Y.Node
1155 */
1156M.core_availability.DeleteIcon.prototype.span = null;