Merge branch 'MDL-38346_master' of git://github.com/dmonllao/moodle
[moodle.git] / lib / javascript-static.js
1 // Miscellaneous core Javascript functions for Moodle
2 // Global M object is initilised in inline javascript
4 /**
5  * Add module to list of available modules that can be loaded from YUI.
6  * @param {Array} modules
7  */
8 M.yui.add_module = function(modules) {
9     for (var modname in modules) {
10         YUI_config.modules[modname] = modules[modname];
11     }
12 };
13 /**
14  * The gallery version to use when loading YUI modules from the gallery.
15  * Will be changed every time when using local galleries.
16  */
17 M.yui.galleryversion = '2010.04.21-21-51';
19 /**
20  * Various utility functions
21  */
22 M.util = M.util || {};
24 /**
25  * Language strings - initialised from page footer.
26  */
27 M.str = M.str || {};
29 /**
30  * Returns url for images.
31  * @param {String} imagename
32  * @param {String} component
33  * @return {String}
34  */
35 M.util.image_url = function(imagename, component) {
37     if (!component || component == '' || component == 'moodle' || component == 'core') {
38         component = 'core';
39     }
41     var url = M.cfg.wwwroot + '/theme/image.php';
42     if (M.cfg.themerev > 0 && M.cfg.slasharguments == 1) {
43         if (!M.cfg.svgicons) {
44             url += '/_s';
45         }
46         url += '/' + M.cfg.theme + '/' + component + '/' + M.cfg.themerev + '/' + imagename;
47     } else {
48         url += '?theme=' + M.cfg.theme + '&component=' + component + '&rev=' + M.cfg.themerev + '&image=' + imagename;
49         if (!M.cfg.svgicons) {
50             url += '&svg=0';
51         }
52     }
54     return url;
55 };
57 M.util.in_array = function(item, array){
58     for( var i = 0; i<array.length; i++){
59         if(item==array[i]){
60             return true;
61         }
62     }
63     return false;
64 };
66 /**
67  * Init a collapsible region, see print_collapsible_region in weblib.php
68  * @param {YUI} Y YUI3 instance with all libraries loaded
69  * @param {String} id the HTML id for the div.
70  * @param {String} userpref the user preference that records the state of this box. false if none.
71  * @param {String} strtooltip
72  */
73 M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) {
74     Y.use('anim', function(Y) {
75         new M.util.CollapsibleRegion(Y, id, userpref, strtooltip);
76     });
77 };
79 /**
80  * Object to handle a collapsible region : instantiate and forget styled object
81  *
82  * @class
83  * @constructor
84  * @param {YUI} Y YUI3 instance with all libraries loaded
85  * @param {String} id The HTML id for the div.
86  * @param {String} userpref The user preference that records the state of this box. false if none.
87  * @param {String} strtooltip
88  */
89 M.util.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
90     // Record the pref name
91     this.userpref = userpref;
93     // Find the divs in the document.
94     this.div = Y.one('#'+id);
96     // Get the caption for the collapsible region
97     var caption = this.div.one('#'+id + '_caption');
99     // Create a link
100     var a = Y.Node.create('<a href="#"></a>');
101     a.setAttribute('title', strtooltip);
103     // Get all the nodes from caption, remove them and append them to <a>
104     while (caption.hasChildNodes()) {
105         child = caption.get('firstChild');
106         child.remove();
107         a.append(child);
108     }
109     caption.append(a);
111     // Get the height of the div at this point before we shrink it if required
112     var height = this.div.get('offsetHeight');
113     var collapsedimage = 't/collapsed'; // ltr mode
114     if (right_to_left()) {
115         collapsedimage = 't/collapsed_rtl';
116     } else {
117         collapsedimage = 't/collapsed';
118     }
119     if (this.div.hasClass('collapsed')) {
120         // Add the correct image and record the YUI node created in the process
121         this.icon = Y.Node.create('<img src="'+M.util.image_url(collapsedimage, 'moodle')+'" alt="" />');
122         // Shrink the div as it is collapsed by default
123         this.div.setStyle('height', caption.get('offsetHeight')+'px');
124     } else {
125         // Add the correct image and record the YUI node created in the process
126         this.icon = Y.Node.create('<img src="'+M.util.image_url('t/expanded', 'moodle')+'" alt="" />');
127     }
128     a.append(this.icon);
130     // Create the animation.
131     var animation = new Y.Anim({
132         node: this.div,
133         duration: 0.3,
134         easing: Y.Easing.easeBoth,
135         to: {height:caption.get('offsetHeight')},
136         from: {height:height}
137     });
139     // Handler for the animation finishing.
140     animation.on('end', function() {
141         this.div.toggleClass('collapsed');
142         var collapsedimage = 't/collapsed'; // ltr mode
143         if (right_to_left()) {
144             collapsedimage = 't/collapsed_rtl';
145             } else {
146             collapsedimage = 't/collapsed';
147             }
148         if (this.div.hasClass('collapsed')) {
149             this.icon.set('src', M.util.image_url(collapsedimage, 'moodle'));
150         } else {
151             this.icon.set('src', M.util.image_url('t/expanded', 'moodle'));
152         }
153     }, this);
155     // Hook up the event handler.
156     a.on('click', function(e, animation) {
157         e.preventDefault();
158         // Animate to the appropriate size.
159         if (animation.get('running')) {
160             animation.stop();
161         }
162         animation.set('reverse', this.div.hasClass('collapsed'));
163         // Update the user preference.
164         if (this.userpref) {
165             M.util.set_user_preference(this.userpref, !this.div.hasClass('collapsed'));
166         }
167         animation.run();
168     }, this, animation);
169 };
171 /**
172  * The user preference that stores the state of this box.
173  * @property userpref
174  * @type String
175  */
176 M.util.CollapsibleRegion.prototype.userpref = null;
178 /**
179  * The key divs that make up this
180  * @property div
181  * @type Y.Node
182  */
183 M.util.CollapsibleRegion.prototype.div = null;
185 /**
186  * The key divs that make up this
187  * @property icon
188  * @type Y.Node
189  */
190 M.util.CollapsibleRegion.prototype.icon = null;
192 /**
193  * Makes a best effort to connect back to Moodle to update a user preference,
194  * however, there is no mechanism for finding out if the update succeeded.
195  *
196  * Before you can use this function in your JavsScript, you must have called
197  * user_preference_allow_ajax_update from moodlelib.php to tell Moodle that
198  * the udpate is allowed, and how to safely clean and submitted values.
199  *
200  * @param String name the name of the setting to udpate.
201  * @param String the value to set it to.
202  */
203 M.util.set_user_preference = function(name, value) {
204     YUI().use('io', function(Y) {
205         var url = M.cfg.wwwroot + '/lib/ajax/setuserpref.php?sesskey=' +
206                 M.cfg.sesskey + '&pref=' + encodeURI(name) + '&value=' + encodeURI(value);
208         // If we are a developer, ensure that failures are reported.
209         var cfg = {
210                 method: 'get',
211                 on: {}
212             };
213         if (M.cfg.developerdebug) {
214             cfg.on.failure = function(id, o, args) {
215                 alert("Error updating user preference '" + name + "' using ajax. Clicking this link will repeat the Ajax call that failed so you can see the error: ");
216             }
217         }
219         // Make the request.
220         Y.io(url, cfg);
221     });
222 };
224 /**
225  * Prints a confirmation dialog in the style of DOM.confirm().
226  * @param object event A YUI DOM event or null if launched manually
227  * @param string message The message to show in the dialog
228  * @param string url The URL to forward to if YES is clicked. Disabled if fn is given
229  * @param function fn A JS function to run if YES is clicked.
230  */
231 M.util.show_confirm_dialog = function(e, args) {
232     var target = e.target;
233     if (e.preventDefault) {
234         e.preventDefault();
235     }
237     YUI().use('yui2-container', 'yui2-event', function(Y) {
238         var simpledialog = new Y.YUI2.widget.SimpleDialog('confirmdialog',
239             {width: '300px',
240               fixedcenter: true,
241               modal: true,
242               visible: false,
243               draggable: false
244             }
245         );
247         simpledialog.setHeader(M.str.admin.confirmation);
248         simpledialog.setBody(args.message);
249         simpledialog.cfg.setProperty('icon', Y.YUI2.widget.SimpleDialog.ICON_WARN);
251         var handle_cancel = function() {
252             simpledialog.hide();
253         };
255         var handle_yes = function() {
256             simpledialog.hide();
258             if (args.callback) {
259                 // args comes from PHP, so callback will be a string, needs to be evaluated by JS
260                 var callback = null;
261                 if (Y.Lang.isFunction(args.callback)) {
262                     callback = args.callback;
263                 } else {
264                     callback = eval('('+args.callback+')');
265                 }
267                 if (Y.Lang.isObject(args.scope)) {
268                     var sc = args.scope;
269                 } else {
270                     var sc = e.target;
271                 }
273                 if (args.callbackargs) {
274                     callback.apply(sc, args.callbackargs);
275                 } else {
276                     callback.apply(sc);
277                 }
278                 return;
279             }
281             var targetancestor = null,
282                 targetform = null;
284             if (target.test('a')) {
285                 window.location = target.get('href');
287             } else if ((targetancestor = target.ancestor('a')) !== null) {
288                 window.location = targetancestor.get('href');
290             } else if (target.test('input')) {
291                 targetform = target.ancestor(function(node) { return node.get('tagName').toLowerCase() == 'form'; });
292                 // We cannot use target.ancestor('form') on the previous line
293                 // because of http://yuilibrary.com/projects/yui3/ticket/2531561
294                 if (!targetform) {
295                     return;
296                 }
297                 if (target.get('name') && target.get('value')) {
298                     targetform.append('<input type="hidden" name="' + target.get('name') +
299                                     '" value="' + target.get('value') + '">');
300                 }
301                 targetform.submit();
303             } else if (target.get('tagName').toLowerCase() == 'form') {
304                 // We cannot use target.test('form') on the previous line because of
305                 // http://yuilibrary.com/projects/yui3/ticket/2531561
306                 target.submit();
308             } else if (M.cfg.developerdebug) {
309                 alert("Element of type " + target.get('tagName') + " is not supported by the M.util.show_confirm_dialog function. Use A, INPUT, or FORM");
310             }
311         };
313         if (!args.cancellabel) {
314             args.cancellabel = M.str.moodle.cancel;
315         }
316         if (!args.continuelabel) {
317             args.continuelabel = M.str.moodle.yes;
318         }
320         var buttons = [
321             {text: args.cancellabel,   handler: handle_cancel, isDefault: true},
322             {text: args.continuelabel, handler: handle_yes}
323         ];
325         simpledialog.cfg.queueProperty('buttons', buttons);
327         simpledialog.render(document.body);
328         simpledialog.show();
329     });
330 };
332 /** Useful for full embedding of various stuff */
333 M.util.init_maximised_embed = function(Y, id) {
334     var obj = Y.one('#'+id);
335     if (!obj) {
336         return;
337     }
339     var get_htmlelement_size = function(el, prop) {
340         if (Y.Lang.isString(el)) {
341             el = Y.one('#' + el);
342         }
343         // Ensure element exists.
344         if (el) {
345             var val = el.getStyle(prop);
346             if (val == 'auto') {
347                 val = el.getComputedStyle(prop);
348             }
349             return parseInt(val);
350         } else {
351             return 0;
352         }
353     };
355     var resize_object = function() {
356         obj.setStyle('width', '0px');
357         obj.setStyle('height', '0px');
358         var newwidth = get_htmlelement_size('maincontent', 'width') - 35;
360         if (newwidth > 500) {
361             obj.setStyle('width', newwidth  + 'px');
362         } else {
363             obj.setStyle('width', '500px');
364         }
366         var headerheight = get_htmlelement_size('page-header', 'height');
367         var footerheight = get_htmlelement_size('page-footer', 'height');
368         var newheight = parseInt(Y.one('body').get('winHeight')) - footerheight - headerheight - 100;
369         if (newheight < 400) {
370             newheight = 400;
371         }
372         obj.setStyle('height', newheight+'px');
373     };
375     resize_object();
376     // fix layout if window resized too
377     window.onresize = function() {
378         resize_object();
379     };
380 };
382 /**
383  * Attach handler to single_select
384  *
385  * This code was deprecated in Moodle 2.4 and will be removed in Moodle 2.6
386  *
387  * Please see lib/yui/formautosubmit/formautosubmit.js for its replacement
388  */
389 M.util.init_select_autosubmit = function(Y, formid, selectid, nothing) {
390     if (M.cfg.developerdebug) {
391         Y.log("You are using a deprecated function call (M.util.init_select_autosubmit). Please look at rewriting your call to use moodle-core-formautosubmit");
392     }
393     Y.use('event-key', function() {
394         var select = Y.one('#'+selectid);
395         if (select) {
396             // Try to get the form by id
397             var form = Y.one('#'+formid) || (function(){
398                 // Hmmm the form's id may have been overriden by an internal input
399                 // with the name id which will KILL IE.
400                 // We need to manually iterate at this point because if the case
401                 // above is true YUI's ancestor method will also kill IE!
402                 var form = select;
403                 while (form && form.get('nodeName').toUpperCase() !== 'FORM') {
404                     form = form.ancestor();
405                 }
406                 return form;
407             })();
408             // Make sure we have the form
409             if (form) {
410                 var buttonflag = 0;
411                 // Create a function to handle our change event
412                 var processchange = function(e, paramobject) {
413                     if ((nothing===false || select.get('value') != nothing) && paramobject.lastindex != select.get('selectedIndex')) {
414                         // chrome doesn't pick up on a click when selecting an element in a select menu, so we use
415                         // the on change event to fire this function. This just checks to see if a button was
416                         // first pressed before redirecting to the appropriate page.
417                         if (Y.UA.os == 'windows' && Y.UA.chrome){
418                             if (buttonflag == 1) {
419                                 buttonflag = 0;
420                                 this.submit();
421                             }
422                         } else {
423                             this.submit();
424                         }
425                     }
426                     if (e.button == 1) {
427                         buttonflag = 1;
428                     }
429                     paramobject.lastindex = select.get('selectedIndex');
430                 };
432                 var changedown = function(e, paramobject) {
433                     if ((nothing===false || select.get('value') != nothing) && paramobject.lastindex != select.get('selectedIndex')) {
434                         if(e.keyCode == 13) {
435                             form.submit();
436                         }
437                         paramobject.lastindex = select.get('selectedIndex');
438                     }
439                 }
441                 var paramobject = new Object();
442                 paramobject.lastindex = select.get('selectedIndex');
443                 paramobject.eventchangeorblur = select.on('click', processchange, form, paramobject);
444                 // Bad hack to circumvent problems with different browsers on different systems.
445                 if (Y.UA.os == 'macintosh') {
446                     if(Y.UA.webkit) {
447                         paramobject.eventchangeorblur = select.on('change', processchange, form, paramobject);
448                     }
449                     paramobject.eventkeypress = Y.on('key', processchange, select, 'press:13', form, paramobject);
450                 } else {
451                     if(Y.UA.os == 'windows' && Y.UA.chrome) {
452                         paramobject.eventchangeorblur = select.on('change', processchange, form, paramobject);
453                     }
454                     paramobject.eventkeypress = Y.on('keydown', changedown, select, '', form, paramobject);
455                 }
456             }
457         }
458     });
459 };
461 /**
462  * Attach handler to url_select
463  * Deprecated from 2.4 onwards.
464  * Please use @see init_select_autosubmit() for redirecting to a url (above).
465  * This function has accessability issues and also does not use the formid passed through as a parameter.
466  */
467 M.util.init_url_select = function(Y, formid, selectid, nothing) {
468     if (M.cfg.developerdebug) {
469         Y.log("You are using a deprecated function call (M.util.init_url_select). Please look at rewriting your call to use moodle-core-formautosubmit");
470     }
471     YUI().use('node', function(Y) {
472         Y.on('change', function() {
473             if ((nothing == false && Y.Lang.isBoolean(nothing)) || Y.one('#'+selectid).get('value') != nothing) {
474                 window.location = M.cfg.wwwroot+Y.one('#'+selectid).get('value');
475             }
476         },
477         '#'+selectid);
478     });
479 };
481 /**
482  * Breaks out all links to the top frame - used in frametop page layout.
483  */
484 M.util.init_frametop = function(Y) {
485     Y.all('a').each(function(node) {
486         node.set('target', '_top');
487     });
488     Y.all('form').each(function(node) {
489         node.set('target', '_top');
490     });
491 };
493 /**
494  * Finds all nodes that match the given CSS selector and attaches events to them
495  * so that they toggle a given classname when clicked.
496  *
497  * @param {YUI} Y
498  * @param {string} id An id containing elements to target
499  * @param {string} cssselector A selector to use to find targets
500  * @param {string} toggleclassname A classname to toggle
501  */
502 M.util.init_toggle_class_on_click = function(Y, id, cssselector, toggleclassname, togglecssselector) {
504     if (togglecssselector == '') {
505         togglecssselector = cssselector;
506     }
508     var node = Y.one('#'+id);
509     node.all(cssselector).each(function(n){
510         n.on('click', function(e){
511             e.stopPropagation();
512             if (e.target.test(cssselector) && !e.target.test('a') && !e.target.test('img')) {
513                 if (this.test(togglecssselector)) {
514                     this.toggleClass(toggleclassname);
515                 } else {
516                     this.ancestor(togglecssselector).toggleClass(toggleclassname);
517             }
518             }
519         }, n);
520     });
521     // Attach this click event to the node rather than all selectors... will be much better
522     // for performance
523     node.on('click', function(e){
524         if (e.target.hasClass('addtoall')) {
525             this.all(togglecssselector).addClass(toggleclassname);
526         } else if (e.target.hasClass('removefromall')) {
527             this.all(togglecssselector+'.'+toggleclassname).removeClass(toggleclassname);
528         }
529     }, node);
530 };
532 /**
533  * Initialises a colour picker
534  *
535  * Designed to be used with admin_setting_configcolourpicker although could be used
536  * anywhere, just give a text input an id and insert a div with the class admin_colourpicker
537  * above or below the input (must have the same parent) and then call this with the
538  * id.
539  *
540  * This code was mostly taken from my [Sam Hemelryk] css theme tool available in
541  * contrib/blocks. For better docs refer to that.
542  *
543  * @param {YUI} Y
544  * @param {int} id
545  * @param {object} previewconf
546  */
547 M.util.init_colour_picker = function(Y, id, previewconf) {
548     /**
549      * We need node and event-mouseenter
550      */
551     Y.use('node', 'event-mouseenter', function(){
552         /**
553          * The colour picker object
554          */
555         var colourpicker = {
556             box : null,
557             input : null,
558             image : null,
559             preview : null,
560             current : null,
561             eventClick : null,
562             eventMouseEnter : null,
563             eventMouseLeave : null,
564             eventMouseMove : null,
565             width : 300,
566             height :  100,
567             factor : 5,
568             /**
569              * Initalises the colour picker by putting everything together and wiring the events
570              */
571             init : function() {
572                 this.input = Y.one('#'+id);
573                 this.box = this.input.ancestor().one('.admin_colourpicker');
574                 this.image = Y.Node.create('<img alt="" class="colourdialogue" />');
575                 this.image.setAttribute('src', M.util.image_url('i/colourpicker', 'moodle'));
576                 this.preview = Y.Node.create('<div class="previewcolour"></div>');
577                 this.preview.setStyle('width', this.height/2).setStyle('height', this.height/2).setStyle('backgroundColor', this.input.get('value'));
578                 this.current = Y.Node.create('<div class="currentcolour"></div>');
579                 this.current.setStyle('width', this.height/2).setStyle('height', this.height/2 -1).setStyle('backgroundColor', this.input.get('value'));
580                 this.box.setContent('').append(this.image).append(this.preview).append(this.current);
582                 if (typeof(previewconf) === 'object' && previewconf !== null) {
583                     Y.one('#'+id+'_preview').on('click', function(e){
584                         if (Y.Lang.isString(previewconf.selector)) {
585                             Y.all(previewconf.selector).setStyle(previewconf.style, this.input.get('value'));
586                         } else {
587                             for (var i in previewconf.selector) {
588                                 Y.all(previewconf.selector[i]).setStyle(previewconf.style, this.input.get('value'));
589                             }
590                         }
591                     }, this);
592                 }
594                 this.eventClick = this.image.on('click', this.pickColour, this);
595                 this.eventMouseEnter = Y.on('mouseenter', this.startFollow, this.image, this);
596             },
597             /**
598              * Starts to follow the mouse once it enter the image
599              */
600             startFollow : function(e) {
601                 this.eventMouseEnter.detach();
602                 this.eventMouseLeave = Y.on('mouseleave', this.endFollow, this.image, this);
603                 this.eventMouseMove = this.image.on('mousemove', function(e){
604                     this.preview.setStyle('backgroundColor', this.determineColour(e));
605                 }, this);
606             },
607             /**
608              * Stops following the mouse
609              */
610             endFollow : function(e) {
611                 this.eventMouseMove.detach();
612                 this.eventMouseLeave.detach();
613                 this.eventMouseEnter = Y.on('mouseenter', this.startFollow, this.image, this);
614             },
615             /**
616              * Picks the colour the was clicked on
617              */
618             pickColour : function(e) {
619                 var colour = this.determineColour(e);
620                 this.input.set('value', colour);
621                 this.current.setStyle('backgroundColor', colour);
622             },
623             /**
624              * Calculates the colour fromthe given co-ordinates
625              */
626             determineColour : function(e) {
627                 var eventx = Math.floor(e.pageX-e.target.getX());
628                 var eventy = Math.floor(e.pageY-e.target.getY());
630                 var imagewidth = this.width;
631                 var imageheight = this.height;
632                 var factor = this.factor;
633                 var colour = [255,0,0];
635                 var matrices = [
636                     [  0,  1,  0],
637                     [ -1,  0,  0],
638                     [  0,  0,  1],
639                     [  0, -1,  0],
640                     [  1,  0,  0],
641                     [  0,  0, -1]
642                 ];
644                 var matrixcount = matrices.length;
645                 var limit = Math.round(imagewidth/matrixcount);
646                 var heightbreak = Math.round(imageheight/2);
648                 for (var x = 0; x < imagewidth; x++) {
649                     var divisor = Math.floor(x / limit);
650                     var matrix = matrices[divisor];
652                     colour[0] += matrix[0]*factor;
653                     colour[1] += matrix[1]*factor;
654                     colour[2] += matrix[2]*factor;
656                     if (eventx==x) {
657                         break;
658                     }
659                 }
661                 var pixel = [colour[0], colour[1], colour[2]];
662                 if (eventy < heightbreak) {
663                     pixel[0] += Math.floor(((255-pixel[0])/heightbreak) * (heightbreak - eventy));
664                     pixel[1] += Math.floor(((255-pixel[1])/heightbreak) * (heightbreak - eventy));
665                     pixel[2] += Math.floor(((255-pixel[2])/heightbreak) * (heightbreak - eventy));
666                 } else if (eventy > heightbreak) {
667                     pixel[0] = Math.floor((imageheight-eventy)*(pixel[0]/heightbreak));
668                     pixel[1] = Math.floor((imageheight-eventy)*(pixel[1]/heightbreak));
669                     pixel[2] = Math.floor((imageheight-eventy)*(pixel[2]/heightbreak));
670                 }
672                 return this.convert_rgb_to_hex(pixel);
673             },
674             /**
675              * Converts an RGB value to Hex
676              */
677             convert_rgb_to_hex : function(rgb) {
678                 var hex = '#';
679                 var hexchars = "0123456789ABCDEF";
680                 for (var i=0; i<3; i++) {
681                     var number = Math.abs(rgb[i]);
682                     if (number == 0 || isNaN(number)) {
683                         hex += '00';
684                     } else {
685                         hex += hexchars.charAt((number-number%16)/16)+hexchars.charAt(number%16);
686                     }
687                 }
688                 return hex;
689             }
690         };
691         /**
692          * Initialise the colour picker :) Hoorah
693          */
694         colourpicker.init();
695     });
696 };
698 M.util.init_block_hider = function(Y, config) {
699     Y.use('base', 'node', function(Y) {
700         M.util.block_hider = M.util.block_hider || (function(){
701             var blockhider = function() {
702                 blockhider.superclass.constructor.apply(this, arguments);
703             };
704             blockhider.prototype = {
705                 initializer : function(config) {
706                     this.set('block', '#'+this.get('id'));
707                     var b = this.get('block'),
708                         t = b.one('.title'),
709                         a = null;
710                     if (t && (a = t.one('.block_action'))) {
711                         var hide = Y.Node.create('<img class="block-hider-hide" tabindex="0" alt="'+config.tooltipVisible+'" title="'+config.tooltipVisible+'" />');
712                         hide.setAttribute('src', this.get('iconVisible')).on('click', this.updateState, this, true);
713                         hide.on('keypress', this.updateStateKey, this, true);
714                         var show = Y.Node.create('<img class="block-hider-show" tabindex="0" alt="'+config.tooltipHidden+'" title="'+config.tooltipHidden+'" />');
715                         show.setAttribute('src', this.get('iconHidden')).on('click', this.updateState, this, false);
716                         show.on('keypress', this.updateStateKey, this, false);
717                         a.insert(show, 0).insert(hide, 0);
718                     }
719                 },
720                 updateState : function(e, hide) {
721                     M.util.set_user_preference(this.get('preference'), hide);
722                     if (hide) {
723                         this.get('block').addClass('hidden');
724                     } else {
725                         this.get('block').removeClass('hidden');
726                     }
727                 },
728                 updateStateKey : function(e, hide) {
729                     if (e.keyCode == 13) { //allow hide/show via enter key
730                         this.updateState(this, hide);
731                     }
732                 }
733             };
734             Y.extend(blockhider, Y.Base, blockhider.prototype, {
735                 NAME : 'blockhider',
736                 ATTRS : {
737                     id : {},
738                     preference : {},
739                     iconVisible : {
740                         value : M.util.image_url('t/switch_minus', 'moodle')
741                     },
742                     iconHidden : {
743                         value : M.util.image_url('t/switch_plus', 'moodle')
744                     },
745                     block : {
746                         setter : function(node) {
747                             return Y.one(node);
748                         }
749                     }
750                 }
751             });
752             return blockhider;
753         })();
754         new M.util.block_hider(config);
755     });
756 };
758 /**
759  * Returns a string registered in advance for usage in JavaScript
760  *
761  * If you do not pass the third parameter, the function will just return
762  * the corresponding value from the M.str object. If the third parameter is
763  * provided, the function performs {$a} placeholder substitution in the
764  * same way as PHP get_string() in Moodle does.
765  *
766  * @param {String} identifier string identifier
767  * @param {String} component the component providing the string
768  * @param {Object|String} a optional variable to populate placeholder with
769  */
770 M.util.get_string = function(identifier, component, a) {
771     var stringvalue;
773     if (M.cfg.developerdebug) {
774         // creating new instance if YUI is not optimal but it seems to be better way then
775         // require the instance via the function API - note that it is used in rare cases
776         // for debugging only anyway
777         // To ensure we don't kill browser performance if hundreds of get_string requests
778         // are made we cache the instance we generate within the M.util namespace.
779         // We don't publicly define the variable so that it doesn't get abused.
780         if (typeof M.util.get_string_yui_instance === 'undefined') {
781             M.util.get_string_yui_instance = new YUI({ debug : true });
782         }
783         var Y = M.util.get_string_yui_instance;
784     }
786     if (!M.str.hasOwnProperty(component) || !M.str[component].hasOwnProperty(identifier)) {
787         stringvalue = '[[' + identifier + ',' + component + ']]';
788         if (M.cfg.developerdebug) {
789             Y.log('undefined string ' + stringvalue, 'warn', 'M.util.get_string');
790         }
791         return stringvalue;
792     }
794     stringvalue = M.str[component][identifier];
796     if (typeof a == 'undefined') {
797         // no placeholder substitution requested
798         return stringvalue;
799     }
801     if (typeof a == 'number' || typeof a == 'string') {
802         // replace all occurrences of {$a} with the placeholder value
803         stringvalue = stringvalue.replace(/\{\$a\}/g, a);
804         return stringvalue;
805     }
807     if (typeof a == 'object') {
808         // replace {$a->key} placeholders
809         for (var key in a) {
810             if (typeof a[key] != 'number' && typeof a[key] != 'string') {
811                 if (M.cfg.developerdebug) {
812                     Y.log('invalid value type for $a->' + key, 'warn', 'M.util.get_string');
813                 }
814                 continue;
815             }
816             var search = '{$a->' + key + '}';
817             search = search.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
818             search = new RegExp(search, 'g');
819             stringvalue = stringvalue.replace(search, a[key]);
820         }
821         return stringvalue;
822     }
824     if (M.cfg.developerdebug) {
825         Y.log('incorrect placeholder type', 'warn', 'M.util.get_string');
826     }
827     return stringvalue;
828 };
830 /**
831  * Set focus on username or password field of the login form
832  */
833 M.util.focus_login_form = function(Y) {
834     var username = Y.one('#username');
835     var password = Y.one('#password');
837     if (username == null || password == null) {
838         // something is wrong here
839         return;
840     }
842     var curElement = document.activeElement
843     if (curElement == 'undefined') {
844         // legacy browser - skip refocus protection
845     } else if (curElement.tagName == 'INPUT') {
846         // user was probably faster to focus something, do not mess with focus
847         return;
848     }
850     if (username.get('value') == '') {
851         username.focus();
852     } else {
853         password.focus();
854     }
857 /**
858  * Set focus on login error message
859  */
860 M.util.focus_login_error = function(Y) {
861     var errorlog = Y.one('#loginerrormessage');
863     if (errorlog) {
864         errorlog.focus();
865     }
867 /**
868  * Adds lightbox hidden element that covers the whole node.
869  *
870  * @param {YUI} Y
871  * @param {Node} the node lightbox should be added to
872  * @retun {Node} created lightbox node
873  */
874 M.util.add_lightbox = function(Y, node) {
875     var WAITICON = {'pix':"i/loading_small",'component':'moodle'};
877     // Check if lightbox is already there
878     if (node.one('.lightbox')) {
879         return node.one('.lightbox');
880     }
882     node.setStyle('position', 'relative');
883     var waiticon = Y.Node.create('<img />')
884     .setAttrs({
885         'src' : M.util.image_url(WAITICON.pix, WAITICON.component)
886     })
887     .setStyles({
888         'position' : 'relative',
889         'top' : '50%'
890     });
892     var lightbox = Y.Node.create('<div></div>')
893     .setStyles({
894         'opacity' : '.75',
895         'position' : 'absolute',
896         'width' : '100%',
897         'height' : '100%',
898         'top' : 0,
899         'left' : 0,
900         'backgroundColor' : 'white',
901         'textAlign' : 'center'
902     })
903     .setAttribute('class', 'lightbox')
904     .hide();
906     lightbox.appendChild(waiticon);
907     node.append(lightbox);
908     return lightbox;
911 /**
912  * Appends a hidden spinner element to the specified node.
913  *
914  * @param {YUI} Y
915  * @param {Node} the node the spinner should be added to
916  * @return {Node} created spinner node
917  */
918 M.util.add_spinner = function(Y, node) {
919     var WAITICON = {'pix':"i/loading_small",'component':'moodle'};
921     // Check if spinner is already there
922     if (node.one('.spinner')) {
923         return node.one('.spinner');
924     }
926     var spinner = Y.Node.create('<img />')
927         .setAttribute('src', M.util.image_url(WAITICON.pix, WAITICON.component))
928         .addClass('spinner')
929         .addClass('iconsmall')
930         .hide();
932     node.append(spinner);
933     return spinner;
936 //=== old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code ===
938 function checkall() {
939     var inputs = document.getElementsByTagName('input');
940     for (var i = 0; i < inputs.length; i++) {
941         if (inputs[i].type == 'checkbox') {
942             if (inputs[i].disabled || inputs[i].readOnly) {
943                 continue;
944             }
945             inputs[i].checked = true;
946         }
947     }
950 function checknone() {
951     var inputs = document.getElementsByTagName('input');
952     for (var i = 0; i < inputs.length; i++) {
953         if (inputs[i].type == 'checkbox') {
954             if (inputs[i].disabled || inputs[i].readOnly) {
955                 continue;
956             }
957             inputs[i].checked = false;
958         }
959     }
962 /**
963  * Either check, or uncheck, all checkboxes inside the element with id is
964  * @param id the id of the container
965  * @param checked the new state, either '' or 'checked'.
966  */
967 function select_all_in_element_with_id(id, checked) {
968     var container = document.getElementById(id);
969     if (!container) {
970         return;
971     }
972     var inputs = container.getElementsByTagName('input');
973     for (var i = 0; i < inputs.length; ++i) {
974         if (inputs[i].type == 'checkbox' || inputs[i].type == 'radio') {
975             inputs[i].checked = checked;
976         }
977     }
980 function select_all_in(elTagName, elClass, elId) {
981     var inputs = document.getElementsByTagName('input');
982     inputs = filterByParent(inputs, function(el) {return findParentNode(el, elTagName, elClass, elId);});
983     for(var i = 0; i < inputs.length; ++i) {
984         if(inputs[i].type == 'checkbox' || inputs[i].type == 'radio') {
985             inputs[i].checked = 'checked';
986         }
987     }
990 function deselect_all_in(elTagName, elClass, elId) {
991     var inputs = document.getElementsByTagName('INPUT');
992     inputs = filterByParent(inputs, function(el) {return findParentNode(el, elTagName, elClass, elId);});
993     for(var i = 0; i < inputs.length; ++i) {
994         if(inputs[i].type == 'checkbox' || inputs[i].type == 'radio') {
995             inputs[i].checked = '';
996         }
997     }
1000 function confirm_if(expr, message) {
1001     if(!expr) {
1002         return true;
1003     }
1004     return confirm(message);
1008 /*
1009     findParentNode (start, elementName, elementClass, elementID)
1011     Travels up the DOM hierarchy to find a parent element with the
1012     specified tag name, class, and id. All conditions must be met,
1013     but any can be ommitted. Returns the BODY element if no match
1014     found.
1015 */
1016 function findParentNode(el, elName, elClass, elId) {
1017     while (el.nodeName.toUpperCase() != 'BODY') {
1018         if ((!elName || el.nodeName.toUpperCase() == elName) &&
1019             (!elClass || el.className.indexOf(elClass) != -1) &&
1020             (!elId || el.id == elId)) {
1021             break;
1022         }
1023         el = el.parentNode;
1024     }
1025     return el;
1027 /*
1028     findChildNode (start, elementName, elementClass, elementID)
1030     Travels down the DOM hierarchy to find all child elements with the
1031     specified tag name, class, and id. All conditions must be met,
1032     but any can be ommitted.
1033     Doesn't examine children of matches.
1034 */
1035 function findChildNodes(start, tagName, elementClass, elementID, elementName) {
1036     var children = new Array();
1037     for (var i = 0; i < start.childNodes.length; i++) {
1038         var classfound = false;
1039         var child = start.childNodes[i];
1040         if((child.nodeType == 1) &&//element node type
1041                   (elementClass && (typeof(child.className)=='string'))) {
1042             var childClasses = child.className.split(/\s+/);
1043             for (var childClassIndex in childClasses) {
1044                 if (childClasses[childClassIndex]==elementClass) {
1045                     classfound = true;
1046                     break;
1047                 }
1048             }
1049         }
1050         if(child.nodeType == 1) { //element node type
1051             if  ( (!tagName || child.nodeName == tagName) &&
1052                 (!elementClass || classfound)&&
1053                 (!elementID || child.id == elementID) &&
1054                 (!elementName || child.name == elementName))
1055             {
1056                 children = children.concat(child);
1057             } else {
1058                 children = children.concat(findChildNodes(child, tagName, elementClass, elementID, elementName));
1059             }
1060         }
1061     }
1062     return children;
1065 function unmaskPassword(id) {
1066   var pw = document.getElementById(id);
1067   var chb = document.getElementById(id+'unmask');
1069   try {
1070     // first try IE way - it can not set name attribute later
1071     if (chb.checked) {
1072       var newpw = document.createElement('<input type="text" autocomplete="off" name="'+pw.name+'">');
1073     } else {
1074       var newpw = document.createElement('<input type="password" autocomplete="off" name="'+pw.name+'">');
1075     }
1076     newpw.attributes['class'].nodeValue = pw.attributes['class'].nodeValue;
1077   } catch (e) {
1078     var newpw = document.createElement('input');
1079     newpw.setAttribute('autocomplete', 'off');
1080     newpw.setAttribute('name', pw.name);
1081     if (chb.checked) {
1082       newpw.setAttribute('type', 'text');
1083     } else {
1084       newpw.setAttribute('type', 'password');
1085     }
1086     newpw.setAttribute('class', pw.getAttribute('class'));
1087   }
1088   newpw.id = pw.id;
1089   newpw.size = pw.size;
1090   newpw.onblur = pw.onblur;
1091   newpw.onchange = pw.onchange;
1092   newpw.value = pw.value;
1093   pw.parentNode.replaceChild(newpw, pw);
1096 function filterByParent(elCollection, parentFinder) {
1097     var filteredCollection = [];
1098     for (var i = 0; i < elCollection.length; ++i) {
1099         var findParent = parentFinder(elCollection[i]);
1100         if (findParent.nodeName.toUpperCase() != 'BODY') {
1101             filteredCollection.push(elCollection[i]);
1102         }
1103     }
1104     return filteredCollection;
1107 /*
1108     All this is here just so that IE gets to handle oversized blocks
1109     in a visually pleasing manner. It does a browser detect. So sue me.
1110 */
1112 function fix_column_widths() {
1113     var agt = navigator.userAgent.toLowerCase();
1114     if ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)) {
1115         fix_column_width('left-column');
1116         fix_column_width('right-column');
1117     }
1120 function fix_column_width(colName) {
1121     if(column = document.getElementById(colName)) {
1122         if(!column.offsetWidth) {
1123             setTimeout("fix_column_width('" + colName + "')", 20);
1124             return;
1125         }
1127         var width = 0;
1128         var nodes = column.childNodes;
1130         for(i = 0; i < nodes.length; ++i) {
1131             if(nodes[i].className.indexOf("block") != -1 ) {
1132                 if(width < nodes[i].offsetWidth) {
1133                     width = nodes[i].offsetWidth;
1134                 }
1135             }
1136         }
1138         for(i = 0; i < nodes.length; ++i) {
1139             if(nodes[i].className.indexOf("block") != -1 ) {
1140                 nodes[i].style.width = width + 'px';
1141             }
1142         }
1143     }
1147 /*
1148    Insert myValue at current cursor position
1149  */
1150 function insertAtCursor(myField, myValue) {
1151     // IE support
1152     if (document.selection) {
1153         myField.focus();
1154         sel = document.selection.createRange();
1155         sel.text = myValue;
1156     }
1157     // Mozilla/Netscape support
1158     else if (myField.selectionStart || myField.selectionStart == '0') {
1159         var startPos = myField.selectionStart;
1160         var endPos = myField.selectionEnd;
1161         myField.value = myField.value.substring(0, startPos)
1162             + myValue + myField.value.substring(endPos, myField.value.length);
1163     } else {
1164         myField.value += myValue;
1165     }
1169 /*
1170         Call instead of setting window.onload directly or setting body onload=.
1171         Adds your function to a chain of functions rather than overwriting anything
1172         that exists.
1173 */
1174 function addonload(fn) {
1175     var oldhandler=window.onload;
1176     window.onload=function() {
1177         if(oldhandler) oldhandler();
1178             fn();
1179     }
1181 /**
1182  * Replacement for getElementsByClassName in browsers that aren't cool enough
1183  *
1184  * Relying on the built-in getElementsByClassName is far, far faster than
1185  * using YUI.
1186  *
1187  * Note: the third argument used to be an object with odd behaviour. It now
1188  * acts like the 'name' in the HTML5 spec, though the old behaviour is still
1189  * mimicked if you pass an object.
1190  *
1191  * @param {Node} oElm The top-level node for searching. To search a whole
1192  *                    document, use `document`.
1193  * @param {String} strTagName filter by tag names
1194  * @param {String} name same as HTML5 spec
1195  */
1196 function getElementsByClassName(oElm, strTagName, name) {
1197     // for backwards compatibility
1198     if(typeof name == "object") {
1199         var names = new Array();
1200         for(var i=0; i<name.length; i++) names.push(names[i]);
1201         name = names.join('');
1202     }
1203     // use native implementation if possible
1204     if (oElm.getElementsByClassName && Array.filter) {
1205         if (strTagName == '*') {
1206             return oElm.getElementsByClassName(name);
1207         } else {
1208             return Array.filter(oElm.getElementsByClassName(name), function(el) {
1209                 return el.nodeName.toLowerCase() == strTagName.toLowerCase();
1210             });
1211         }
1212     }
1213     // native implementation unavailable, fall back to slow method
1214     var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
1215     var arrReturnElements = new Array();
1216     var arrRegExpClassNames = new Array();
1217     var names = name.split(' ');
1218     for(var i=0; i<names.length; i++) {
1219         arrRegExpClassNames.push(new RegExp("(^|\\s)" + names[i].replace(/\-/g, "\\-") + "(\\s|$)"));
1220     }
1221     var oElement;
1222     var bMatchesAll;
1223     for(var j=0; j<arrElements.length; j++) {
1224         oElement = arrElements[j];
1225         bMatchesAll = true;
1226         for(var k=0; k<arrRegExpClassNames.length; k++) {
1227             if(!arrRegExpClassNames[k].test(oElement.className)) {
1228                 bMatchesAll = false;
1229                 break;
1230             }
1231         }
1232         if(bMatchesAll) {
1233             arrReturnElements.push(oElement);
1234         }
1235     }
1236     return (arrReturnElements)
1239 /**
1240  * Return whether we are in right to left mode or not.
1241  *
1242  * @return boolean
1243  */
1244 function right_to_left() {
1245     var body = Y.one('body');
1246     var rtl = false;
1247     if (body && body.hasClass('dir-rtl')) {
1248         rtl = true;
1249     }
1250     return rtl;
1253 function openpopup(event, args) {
1255     if (event) {
1256         if (event.preventDefault) {
1257             event.preventDefault();
1258         } else {
1259             event.returnValue = false;
1260         }
1261     }
1263     // Make sure the name argument is set and valid.
1264     var nameregex = /[^a-z0-9_]/i;
1265     if (typeof args.name !== 'string') {
1266         args.name = '_blank';
1267     } else if (args.name.match(nameregex)) {
1268         // Cleans window name because IE does not support funky ones.
1269         args.name = args.name.replace(nameregex, '_');
1270         if (M.cfg.developerdebug) {
1271             alert('DEVELOPER NOTICE: Invalid \'name\' passed to openpopup()');
1272         }
1273     }
1275     var fullurl = args.url;
1276     if (!args.url.match(/https?:\/\//)) {
1277         fullurl = M.cfg.wwwroot + args.url;
1278     }
1279     if (args.fullscreen) {
1280         args.options = args.options.
1281                 replace(/top=\d+/, 'top=0').
1282                 replace(/left=\d+/, 'left=0').
1283                 replace(/width=\d+/, 'width=' + screen.availWidth).
1284                 replace(/height=\d+/, 'height=' + screen.availHeight);
1285     }
1286     var windowobj = window.open(fullurl,args.name,args.options);
1287     if (!windowobj) {
1288         return true;
1289     }
1291     if (args.fullscreen) {
1292         // In some browser / OS combinations (E.g. Chrome on Windows), the
1293         // window initially opens slighly too big. The width and heigh options
1294         // seem to control the area inside the browser window, so what with
1295         // scroll-bars, etc. the actual window is bigger than the screen.
1296         // Therefore, we need to fix things up after the window is open.
1297         var hackcount = 100;
1298         var get_size_exactly_right = function() {
1299             windowobj.moveTo(0, 0);
1300             windowobj.resizeTo(screen.availWidth, screen.availHeight);
1302             // Unfortunately, it seems that in Chrome on Ubuntu, if you call
1303             // something like windowobj.resizeTo(1280, 1024) too soon (up to
1304             // about 50ms) after the window is open, then it actually behaves
1305             // as if you called windowobj.resizeTo(0, 0). Therefore, we need to
1306             // check that the resize actually worked, and if not, repeatedly try
1307             // again after a short delay until it works (but with a limit of
1308             // hackcount repeats.
1309             if (hackcount > 0 && (windowobj.innerHeight < 10 || windowobj.innerWidth < 10)) {
1310                 hackcount -= 1;
1311                 setTimeout(get_size_exactly_right, 10);
1312             }
1313         }
1314         setTimeout(get_size_exactly_right, 0);
1315     }
1316     windowobj.focus();
1318     return false;
1321 /** Close the current browser window. */
1322 function close_window(e) {
1323     if (e.preventDefault) {
1324         e.preventDefault();
1325     } else {
1326         e.returnValue = false;
1327     }
1328     window.close();
1331 /**
1332  * Used in a couple of modules to hide navigation areas when using AJAX
1333  */
1335 function show_item(itemid) {
1336     var item = document.getElementById(itemid);
1337     if (item) {
1338         item.style.display = "";
1339     }
1342 function destroy_item(itemid) {
1343     var item = document.getElementById(itemid);
1344     if (item) {
1345         item.parentNode.removeChild(item);
1346     }
1348 /**
1349  * Tranfer keyboard focus to the HTML element with the given id, if it exists.
1350  * @param controlid the control id.
1351  */
1352 function focuscontrol(controlid) {
1353     var control = document.getElementById(controlid);
1354     if (control) {
1355         control.focus();
1356     }
1359 /**
1360  * Transfers keyboard focus to an HTML element based on the old style style of focus
1361  * This function should be removed as soon as it is no longer used
1362  */
1363 function old_onload_focus(formid, controlname) {
1364     if (document.forms[formid] && document.forms[formid].elements && document.forms[formid].elements[controlname]) {
1365         document.forms[formid].elements[controlname].focus();
1366     }
1369 function build_querystring(obj) {
1370     return convert_object_to_string(obj, '&');
1373 function build_windowoptionsstring(obj) {
1374     return convert_object_to_string(obj, ',');
1377 function convert_object_to_string(obj, separator) {
1378     if (typeof obj !== 'object') {
1379         return null;
1380     }
1381     var list = [];
1382     for(var k in obj) {
1383         k = encodeURIComponent(k);
1384         var value = obj[k];
1385         if(obj[k] instanceof Array) {
1386             for(var i in value) {
1387                 list.push(k+'[]='+encodeURIComponent(value[i]));
1388             }
1389         } else {
1390             list.push(k+'='+encodeURIComponent(value));
1391         }
1392     }
1393     return list.join(separator);
1396 function stripHTML(str) {
1397     var re = /<\S[^><]*>/g;
1398     var ret = str.replace(re, "");
1399     return ret;
1402 Number.prototype.fixed=function(n){
1403     with(Math)
1404         return round(Number(this)*pow(10,n))/pow(10,n);
1405 };
1406 function update_progress_bar (id, width, pt, msg, es){
1407     var percent = pt;
1408     var status = document.getElementById("status_"+id);
1409     var percent_indicator = document.getElementById("pt_"+id);
1410     var progress_bar = document.getElementById("progress_"+id);
1411     var time_es = document.getElementById("time_"+id);
1412     status.innerHTML = msg;
1413     percent_indicator.innerHTML = percent.fixed(2) + '%';
1414     if(percent == 100) {
1415         progress_bar.style.background = "green";
1416         time_es.style.display = "none";
1417     } else {
1418         progress_bar.style.background = "#FFCC66";
1419         if (es == '?'){
1420             time_es.innerHTML = "";
1421         }else {
1422             time_es.innerHTML = es.fixed(2)+" sec";
1423             time_es.style.display
1424                 = "block";
1425         }
1426     }
1427     progress_bar.style.width = width + "px";
1432 // ===== Deprecated core Javascript functions for Moodle ====
1433 //       DO NOT USE!!!!!!!
1434 // Do not put this stuff in separate file because it only adds extra load on servers!
1436 /**
1437  * Used in a couple of modules to hide navigation areas when using AJAX
1438  */
1439 function hide_item(itemid) {
1440     // use class='hiddenifjs' instead
1441     var item = document.getElementById(itemid);
1442     if (item) {
1443         item.style.display = "none";
1444     }
1447 M.util.help_popups = {
1448     setup : function(Y) {
1449         Y.one('body').delegate('click', this.open_popup, 'a.helplinkpopup', this);
1450     },
1451     open_popup : function(e) {
1452         // Prevent the default page action
1453         e.preventDefault();
1455         // Grab the anchor that was clicked
1456         var anchor = e.target.ancestor('a', true);
1457         var args = {
1458             'name'          : 'popup',
1459             'url'           : anchor.getAttribute('href'),
1460             'options'       : ''
1461         };
1462         var options = [
1463             'height=600',
1464             'width=800',
1465             'top=0',
1466             'left=0',
1467             'menubar=0',
1468             'location=0',
1469             'scrollbars',
1470             'resizable',
1471             'toolbar',
1472             'status',
1473             'directories=0',
1474             'fullscreen=0',
1475             'dependent'
1476         ]
1477         args.options = options.join(',');
1479         openpopup(e, args);
1480     }
1483 /**
1484  * This code bas been deprecated and will be removed from Moodle 2.7
1485  *
1486  * Please see lib/yui/popuphelp/popuphelp.js for its replacement
1487  */
1488 M.util.help_icon = {
1489     initialised : false,
1490     setup : function(Y, properties) {
1491         this.add(Y, properties);
1492     },
1493     add : function(Y) {
1494         if (M.cfg.developerdebug) {
1495             Y.log("You are using a deprecated function call (M.util.help_icon.add). " +
1496                     "Please look at rewriting your call to support lib/yui/popuphelp/popuphelp.js");
1497         }
1498         if (!this.initialised) {
1499             YUI().use('moodle-core-popuphelp', function() {
1500                 M.core.init_popuphelp([]);
1501             });
1502         }
1503         this.initialised = true;
1504     }
1505 };
1507 /**
1508  * Custom menu namespace
1509  */
1510 M.core_custom_menu = {
1511     /**
1512      * This method is used to initialise a custom menu given the id that belongs
1513      * to the custom menu's root node.
1514      *
1515      * @param {YUI} Y
1516      * @param {string} nodeid
1517      */
1518     init : function(Y, nodeid) {
1519         var node = Y.one('#'+nodeid);
1520         if (node) {
1521             Y.use('node-menunav', function(Y) {
1522                 // Get the node
1523                 // Remove the javascript-disabled class.... obviously javascript is enabled.
1524                 node.removeClass('javascript-disabled');
1525                 // Initialise the menunav plugin
1526                 node.plug(Y.Plugin.NodeMenuNav);
1527             });
1528         }
1529     }
1530 };
1532 /**
1533  * Used to store form manipulation methods and enhancments
1534  */
1535 M.form = M.form || {};
1537 /**
1538  * Converts a nbsp indented select box into a multi drop down custom control much
1539  * like the custom menu. It also selectable categories on or off.
1540  *
1541  * $form->init_javascript_enhancement('elementname','smartselect', array('selectablecategories'=>true|false, 'mode'=>'compact'|'spanning'));
1542  *
1543  * @param {YUI} Y
1544  * @param {string} id
1545  * @param {Array} options
1546  */
1547 M.form.init_smartselect = function(Y, id, options) {
1548     if (!id.match(/^id_/)) {
1549         id = 'id_'+id;
1550     }
1551     var select = Y.one('select#'+id);
1552     if (!select) {
1553         return false;
1554     }
1555     Y.use('event-delegate',function(){
1556         var smartselect = {
1557             id : id,
1558             structure : [],
1559             options : [],
1560             submenucount : 0,
1561             currentvalue : null,
1562             currenttext : null,
1563             shownevent : null,
1564             cfg : {
1565                 selectablecategories : true,
1566                 mode : null
1567             },
1568             nodes : {
1569                 select : null,
1570                 loading : null,
1571                 menu : null
1572             },
1573             init : function(Y, id, args, nodes) {
1574                 if (typeof(args)=='object') {
1575                     for (var i in this.cfg) {
1576                         if (args[i] || args[i]===false) {
1577                             this.cfg[i] = args[i];
1578                         }
1579                     }
1580                 }
1582                 // Display a loading message first up
1583                 this.nodes.select = nodes.select;
1585                 this.currentvalue = this.nodes.select.get('selectedIndex');
1586                 this.currenttext = this.nodes.select.all('option').item(this.currentvalue).get('innerHTML');
1588                 var options = Array();
1589                 options[''] = {text:this.currenttext,value:'',depth:0,children:[]};
1590                 this.nodes.select.all('option').each(function(option, index) {
1591                     var rawtext = option.get('innerHTML');
1592                     var text = rawtext.replace(/^(&nbsp;)*/, '');
1593                     if (rawtext === text) {
1594                         text = rawtext.replace(/^(\s)*/, '');
1595                         var depth = (rawtext.length - text.length ) + 1;
1596                     } else {
1597                         var depth = ((rawtext.length - text.length )/12)+1;
1598                     }
1599                     option.set('innerHTML', text);
1600                     options['i'+index] = {text:text,depth:depth,index:index,children:[]};
1601                 }, this);
1603                 this.structure = [];
1604                 var structcount = 0;
1605                 for (var i in options) {
1606                     var o = options[i];
1607                     if (o.depth == 0) {
1608                         this.structure.push(o);
1609                         structcount++;
1610                     } else {
1611                         var d = o.depth;
1612                         var current = this.structure[structcount-1];
1613                         for (var j = 0; j < o.depth-1;j++) {
1614                             if (current && current.children) {
1615                                 current = current.children[current.children.length-1];
1616                             }
1617                         }
1618                         if (current && current.children) {
1619                             current.children.push(o);
1620                         }
1621                     }
1622                 }
1624                 this.nodes.menu = Y.Node.create(this.generate_menu_content());
1625                 this.nodes.menu.one('.smartselect_mask').setStyle('opacity', 0.01);
1626                 this.nodes.menu.one('.smartselect_mask').setStyle('width', (this.nodes.select.get('offsetWidth')+5)+'px');
1627                 this.nodes.menu.one('.smartselect_mask').setStyle('height', (this.nodes.select.get('offsetHeight'))+'px');
1629                 if (this.cfg.mode == null) {
1630                     var formwidth = this.nodes.select.ancestor('form').get('offsetWidth');
1631                     if (formwidth < 400 || this.nodes.menu.get('offsetWidth') < formwidth*2) {
1632                         this.cfg.mode = 'compact';
1633                     } else {
1634                         this.cfg.mode = 'spanning';
1635                     }
1636                 }
1638                 if (this.cfg.mode == 'compact') {
1639                     this.nodes.menu.addClass('compactmenu');
1640                 } else {
1641                     this.nodes.menu.addClass('spanningmenu');
1642                     this.nodes.menu.delegate('mouseover', this.show_sub_menu, '.smartselect_submenuitem', this);
1643                 }
1645                 Y.one(document.body).append(this.nodes.menu);
1646                 var pos = this.nodes.select.getXY();
1647                 pos[0] += 1;
1648                 this.nodes.menu.setXY(pos);
1649                 this.nodes.menu.on('click', this.handle_click, this);
1651                 Y.one(window).on('resize', function(){
1652                      var pos = this.nodes.select.getXY();
1653                     pos[0] += 1;
1654                     this.nodes.menu.setXY(pos);
1655                  }, this);
1656             },
1657             generate_menu_content : function() {
1658                 var content = '<div id="'+this.id+'_smart_select" class="smartselect">';
1659                 content += this.generate_submenu_content(this.structure[0], true);
1660                 content += '</ul></div>';
1661                 return content;
1662             },
1663             generate_submenu_content : function(item, rootelement) {
1664                 this.submenucount++;
1665                 var content = '';
1666                 if (item.children.length > 0) {
1667                     if (rootelement) {
1668                         content += '<div class="smartselect_mask" href="#ss_submenu'+this.submenucount+'">&nbsp;</div>';
1669                         content += '<div id="ss_submenu'+this.submenucount+'" class="smartselect_menu">';
1670                         content += '<div class="smartselect_menu_content">';
1671                     } else {
1672                         content += '<li class="smartselect_submenuitem">';
1673                         var categoryclass = (this.cfg.selectablecategories)?'selectable':'notselectable';
1674                         content += '<a class="smartselect_menuitem_label '+categoryclass+'" href="#ss_submenu'+this.submenucount+'" value="'+item.index+'">'+item.text+'</a>';
1675                         content += '<div id="ss_submenu'+this.submenucount+'" class="smartselect_submenu">';
1676                         content += '<div class="smartselect_submenu_content">';
1677                     }
1678                     content += '<ul>';
1679                     for (var i in item.children) {
1680                         content += this.generate_submenu_content(item.children[i],false);
1681                     }
1682                     content += '</ul>';
1683                     content += '</div>';
1684                     content += '</div>';
1685                     if (rootelement) {
1686                     } else {
1687                         content += '</li>';
1688                     }
1689                 } else {
1690                     content += '<li class="smartselect_menuitem">';
1691                     content += '<a class="smartselect_menuitem_content selectable" href="#" value="'+item.index+'">'+item.text+'</a>';
1692                     content += '</li>';
1693                 }
1694                 return content;
1695             },
1696             select : function(e) {
1697                 var t = e.target;
1698                 e.halt();
1699                 this.currenttext = t.get('innerHTML');
1700                 this.currentvalue = t.getAttribute('value');
1701                 this.nodes.select.set('selectedIndex', this.currentvalue);
1702                 this.hide_menu();
1703             },
1704             handle_click : function(e) {
1705                 var target = e.target;
1706                 if (target.hasClass('smartselect_mask')) {
1707                     this.show_menu(e);
1708                 } else if (target.hasClass('selectable') || target.hasClass('smartselect_menuitem')) {
1709                     this.select(e);
1710                 } else if (target.hasClass('smartselect_menuitem_label') || target.hasClass('smartselect_submenuitem')) {
1711                     this.show_sub_menu(e);
1712                 }
1713             },
1714             show_menu : function(e) {
1715                 e.halt();
1716                 var menu = e.target.ancestor().one('.smartselect_menu');
1717                 menu.addClass('visible');
1718                 this.shownevent = Y.one(document.body).on('click', this.hide_menu, this);
1719             },
1720             show_sub_menu : function(e) {
1721                 e.halt();
1722                 var target = e.target;
1723                 if (!target.hasClass('smartselect_submenuitem')) {
1724                     target = target.ancestor('.smartselect_submenuitem');
1725                 }
1726                 if (this.cfg.mode == 'compact' && target.one('.smartselect_submenu').hasClass('visible')) {
1727                     target.ancestor('ul').all('.smartselect_submenu.visible').removeClass('visible');
1728                     return;
1729                 }
1730                 target.ancestor('ul').all('.smartselect_submenu.visible').removeClass('visible');
1731                 target.one('.smartselect_submenu').addClass('visible');
1732             },
1733             hide_menu : function() {
1734                 this.nodes.menu.all('.visible').removeClass('visible');
1735                 if (this.shownevent) {
1736                     this.shownevent.detach();
1737                 }
1738             }
1739         };
1740         smartselect.init(Y, id, options, {select:select});
1741     });
1742 };
1744 /** List of flv players to be loaded */
1745 M.util.video_players = [];
1746 /** List of mp3 players to be loaded */
1747 M.util.audio_players = [];
1749 /**
1750  * Add video player
1751  * @param id element id
1752  * @param fileurl media url
1753  * @param width
1754  * @param height
1755  * @param autosize true means detect size from media
1756  */
1757 M.util.add_video_player = function (id, fileurl, width, height, autosize) {
1758     M.util.video_players.push({id: id, fileurl: fileurl, width: width, height: height, autosize: autosize, resized: false});
1759 };
1761 /**
1762  * Add audio player.
1763  * @param id
1764  * @param fileurl
1765  * @param small
1766  */
1767 M.util.add_audio_player = function (id, fileurl, small) {
1768     M.util.audio_players.push({id: id, fileurl: fileurl, small: small});
1769 };
1771 /**
1772  * Initialise all audio and video player, must be called from page footer.
1773  */
1774 M.util.load_flowplayer = function() {
1775     if (M.util.video_players.length == 0 && M.util.audio_players.length == 0) {
1776         return;
1777     }
1778     if (typeof(flowplayer) == 'undefined') {
1779         var loaded = false;
1781         var embed_function = function() {
1782             if (loaded || typeof(flowplayer) == 'undefined') {
1783                 return;
1784             }
1785             loaded = true;
1787             var controls = {
1788                     autoHide: true
1789             }
1790             /* TODO: add CSS color overrides for the flv flow player */
1792             for(var i=0; i<M.util.video_players.length; i++) {
1793                 var video = M.util.video_players[i];
1794                 if (video.width > 0 && video.height > 0) {
1795                     var src = {src: M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.14.swf', width: video.width, height: video.height};
1796                 } else {
1797                     var src = M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.14.swf';
1798                 }
1799                 flowplayer(video.id, src, {
1800                     plugins: {controls: controls},
1801                     clip: {
1802                         url: video.fileurl, autoPlay: false, autoBuffering: true, scaling: 'fit', mvideo: video,
1803                         onMetaData: function(clip) {
1804                             if (clip.mvideo.autosize && !clip.mvideo.resized) {
1805                                 clip.mvideo.resized = true;
1806                                 //alert("metadata!!! "+clip.width+' '+clip.height+' '+JSON.stringify(clip.metaData));
1807                                 if (typeof(clip.metaData.width) == 'undefined' || typeof(clip.metaData.height) == 'undefined') {
1808                                     // bad luck, we have to guess - we may not get metadata at all
1809                                     var width = clip.width;
1810                                     var height = clip.height;
1811                                 } else {
1812                                     var width = clip.metaData.width;
1813                                     var height = clip.metaData.height;
1814                                 }
1815                                 var minwidth = 300; // controls are messed up in smaller objects
1816                                 if (width < minwidth) {
1817                                     height = (height * minwidth) / width;
1818                                     width = minwidth;
1819                                 }
1821                                 var object = this._api();
1822                                 object.width = width;
1823                                 object.height = height;
1824                             }
1825                         }
1826                     }
1827                 });
1828             }
1829             if (M.util.audio_players.length == 0) {
1830                 return;
1831             }
1832             var controls = {
1833                     autoHide: false,
1834                     fullscreen: false,
1835                     next: false,
1836                     previous: false,
1837                     scrubber: true,
1838                     play: true,
1839                     pause: true,
1840                     volume: true,
1841                     mute: false,
1842                     backgroundGradient: [0.5,0,0.3]
1843                 };
1845             var rule;
1846             for (var j=0; j < document.styleSheets.length; j++) {
1848                 // To avoid javascript security violation accessing cross domain stylesheets
1849                 var allrules = false;
1850                 try {
1851                     if (typeof (document.styleSheets[j].rules) != 'undefined') {
1852                         allrules = document.styleSheets[j].rules;
1853                     } else if (typeof (document.styleSheets[j].cssRules) != 'undefined') {
1854                         allrules = document.styleSheets[j].cssRules;
1855                     } else {
1856                         // why??
1857                         continue;
1858                     }
1859                 } catch (e) {
1860                     continue;
1861                 }
1863                 // On cross domain style sheets Chrome V8 allows access to rules but returns null
1864                 if (!allrules) {
1865                     continue;
1866                 }
1868                 for(var i=0; i<allrules.length; i++) {
1869                     rule = '';
1870                     if (/^\.mp3flowplayer_.*Color$/.test(allrules[i].selectorText)) {
1871                         if (typeof(allrules[i].cssText) != 'undefined') {
1872                             rule = allrules[i].cssText;
1873                         } else if (typeof(allrules[i].style.cssText) != 'undefined') {
1874                             rule = allrules[i].style.cssText;
1875                         }
1876                         if (rule != '' && /.*color\s*:\s*([^;]+).*/gi.test(rule)) {
1877                             rule = rule.replace(/.*color\s*:\s*([^;]+).*/gi, '$1');
1878                             var colprop = allrules[i].selectorText.replace(/^\.mp3flowplayer_/, '');
1879                             controls[colprop] = rule;
1880                         }
1881                     }
1882                 }
1883                 allrules = false;
1884             }
1886             for(i=0; i<M.util.audio_players.length; i++) {
1887                 var audio = M.util.audio_players[i];
1888                 if (audio.small) {
1889                     controls.controlall = false;
1890                     controls.height = 15;
1891                     controls.time = false;
1892                 } else {
1893                     controls.controlall = true;
1894                     controls.height = 25;
1895                     controls.time = true;
1896                 }
1897                 flowplayer(audio.id, M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.14.swf', {
1898                     plugins: {controls: controls, audio: {url: M.cfg.wwwroot + '/lib/flowplayer/flowplayer.audio-3.2.10.swf'}},
1899                     clip: {url: audio.fileurl, provider: "audio", autoPlay: false}
1900                 });
1901             }
1902         }
1904         if (M.cfg.jsrev == -1) {
1905             var jsurl = M.cfg.wwwroot + '/lib/flowplayer/flowplayer-3.2.11.js';
1906         } else {
1907             var jsurl = M.cfg.wwwroot + '/lib/javascript.php?jsfile=/lib/flowplayer/flowplayer-3.2.11.min.js&rev=' + M.cfg.jsrev;
1908         }
1909         var fileref = document.createElement('script');
1910         fileref.setAttribute('type','text/javascript');
1911         fileref.setAttribute('src', jsurl);
1912         fileref.onload = embed_function;
1913         fileref.onreadystatechange = embed_function;
1914         document.getElementsByTagName('head')[0].appendChild(fileref);
1915     }
1916 };