diff --git a/lib/javascript-static.js b/lib/javascript-static.js index 92edf7b6f4d..6951f94a52a 100644 --- a/lib/javascript-static.js +++ b/lib/javascript-static.js @@ -1,10 +1,6 @@ // Miscellaneous core Javascript functions for Moodle // Global M object is initilised in inline javascript -// Global Y instance, inilialised much later in page footer, -// it is usually better to initialise own Y by: "YUI(M.yui.loader).use('......', function(Y) { .... }); -var Y = null; - /** * Add module to list of available modules that can be laoded from YUI. */ @@ -14,28 +10,182 @@ M.yui.add_module = function(modules) { } }; + /** * Various utility functions */ -M.util = { - /** - * Returns url for images. - */ - image_url: function(imagename, component) { - var url = M.cfg.wwwroot + '/theme/image.php?theme=' + M.cfg.theme + '&image=' + imagename; - - if (M.cfg.themerev > 0) { - url = url + '&rev=' + M.cfg.themerev; - } - - if (component != '' && component != 'moodle' && component != 'core') { - url = url + '&component=' + component; - } - - return url; - } -} +M.util = {}; +/** + * Returns url for images. + */ +M.util.image_url = function(imagename, component) { + var url = M.cfg.wwwroot + '/theme/image.php?theme=' + M.cfg.theme + '&image=' + imagename; + + if (M.cfg.themerev > 0) { + url = url + '&rev=' + M.cfg.themerev; + } + + if (component != '' && component != 'moodle' && component != 'core') { + url = url + '&component=' + component; + } + + return url; +}; + +/** + * Init a collapsible region, see print_collapsible_region in weblib.php + * @param Object YUI3 instance with all libraries loaded + * @param String id the HTML id for the div. + * @param String userpref the user preference that records the state of this box. false if none. + * @param String tooltip + */ +M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) { + Y.use('anim', function(Y) { + new M.util.CollapsibleRegion(Y, id, userpref, strtooltip); + }); +}; + +/** + * Oject to handle a collapsible region + * @constructor + * @param Object YUI3 instance with all libraries loaded + * @param String id the HTML id for the div. + * @param String userpref the user preference that records the state of this box. false if none. + * @param String tooltip + */ +M.util.CollapsibleRegion = function(Y, id, userpref, strtooltip) { + this.Y = Y; + + // Record the pref name + this.userpref = userpref; + this.collapsedicon = M.util.image_url('t/collapsed', 'moodle'); + this.expandedicon = M.util.image_url('t/expanded', 'moodle'); + + // Find the divs in the document. + this.div = document.getElementById(id); + this.innerdiv = document.getElementById(id + '_sizer'); + this.caption = document.getElementById(id + '_caption'); + this.caption.title = strtooltip; + + // Put the contents of caption in an to make it focussable. + var a = document.createElement('a'); + while (e = this.caption.firstChild) { + a.appendChild(e); + } + a.href = '#'; + this.caption.appendChild(a); + + // Create the animation. + this.animation = new this.Y.Anim({ + node: this.div, + duration: 0.3, + easing: Y.Easing.easeBoth + }); + + // Get to the right initial state. + if (this.div.className.match(/\bcollapsed\b/)) { + this.collapsed = true; + var region = this.Y.one(this.caption).get('region'); + this.div.style.height = (region.bottom - region.top + 3) + 'px'; + } + + // Add the appropriate image. + this.icon = document.createElement('img'); + this.icon.id = id + '_icon'; + this.icon.alt = ''; + if (this.collapsed) { + this.icon.src = this.collapsedicon; + } else { + this.icon.src = this.expandedicon; + } + a.appendChild(this.icon); + + // Hook up the event handler. + this.Y.on('click', this.handle_click, a, this); + + // Handler for the animation finishing. + this.animation.on('end', function() { + if (this.collapsed) { + this.div.className += ' collapsed'; + } + }, this); +}; + +/** + * The user preference that stores the state of this box. + * @property userpref + * @type String + */ +M.util.CollapsibleRegion.prototype.userpref = null; + +/** + * The key divs that make up this + * @property div, innerdiv, captiondiv + * @type HTMLDivElement + */ +M.util.CollapsibleRegion.prototype.div = null; +M.util.CollapsibleRegion.prototype.innerdiv = null; +M.util.CollapsibleRegion.prototype.captiondiv = null; + +/** + * The key divs that make up this + * @property icon + * @type HTMLImageElement + */ +M.util.CollapsibleRegion.prototype.icon = null; + +/** + * Whether the region is currently collapsed. + * @property collapsed + * @type Boolean + */ +M.util.CollapsibleRegion.prototype.collapsed = false; + +/** + * @property animation + * @type Y.Anim + */ +M.util.CollapsibleRegion.prototype.animation = null; + +/** When clicked, toggle the collapsed state, and trigger the animation. */ +M.util.CollapsibleRegion.prototype.handle_click = function(e) { + // Toggle the state. + this.collapsed = !this.collapsed; + + // Stop the click following the link. + e.preventDefault(); + + // Animate to the appropriate size. + if (this.animation.get('running')) { + this.animation.stop(); + } + if (this.collapsed) { + var region = this.Y.one(this.caption).get('region'); + var targetheight = region.bottom - region.top + 3; + } else { + var region = this.Y.one(this.innerdiv).get('region'); + var targetheight = region.bottom - region.top + 2; + this.div.className = this.div.className.replace(/\s*\bcollapsed\b\s*/, ' '); + } + this.animation.set('to', { height: targetheight }); + this.animation.run(); + + // Set the appropriate icon. + if (this.collapsed) { + this.icon.src =this.collapsedicon; + } else { + this.icon.src = this.expandedicon; + } + + // Update the user preference. + if (this.userpref) { + set_user_preference(this.userpref, this.collapsed); + } +}; + + +//=== old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code === function launch_filemanager(options) { Y.use('core_filemanager', function() { @@ -47,8 +197,6 @@ function launch_filemanager(options) { }); } -// === old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code === - function popupchecker(msg) { var testwindow = window.open('', '', 'width=1,height=1,left=0,top=0,scrollbars=no'); if (!testwindow) { @@ -953,152 +1101,6 @@ function set_user_preference(name, value) { } } -function moodle_initialise_body() { - document.body.className += ' jsenabled'; -} - -/** - * Oject to handle a collapsible region, see print_collapsible_region in weblib.php - * @constructor - * @param String id the HTML id for the div. - * @param String userpref the user preference that records the state of this box. false if none. - * @param Boolean startcollapsed whether the box should start collapsed. - */ -function collapsible_region(id, userpref, strtooltip, collapsedicon, expandedicon) { - var context = this; - - YUI(M.yui.loader).use('anim', function(Y) { - // Record the pref name - context.userpref = userpref; - context.collapsedicon = collapsedicon; - context.expandedicon = expandedicon; - - // Find the divs in the document. - context.div = document.getElementById(id); - context.innerdiv = document.getElementById(id + '_sizer'); - context.caption = document.getElementById(id + '_caption'); - context.caption.title = strtooltip; - - // Put the contents of caption in an to make it focussable. - var a = document.createElement('a'); - while (e = context.caption.firstChild) { - a.appendChild(e); - } - a.href = '#'; - context.caption.appendChild(a); - - // Create the animation. - context.animation = new Y.Anim({ - node: context.div, - duration: 0.3, - easing: Y.Easing.easeBoth - }); - - // Get to the right initial state. - if (context.div.className.match(/\bcollapsed\b/)) { - context.collapsed = true; - var region = Y.one(context.caption).get('region'); - context.div.style.height = (region.bottom - region.top + 3) + 'px'; - } - - // Add the appropriate image. - context.icon = document.createElement('img'); - context.icon.id = id + '_icon'; - context.icon.alt = ''; - if (context.collapsed) { - context.icon.src = context.collapsedicon; - } else { - context.icon.src = context.expandedicon; - } - a.appendChild(context.icon); - - // Hook up the event handler. - Y.on('click', context.handle_click, a, context); - - // Handler for the animation finishing. - context.animation.on('end', function() { - if (this.collapsed) { - this.div.className += ' collapsed'; - } - }, context); - }); -} - -/** - * The user preference that stores the state of this box. - * @property userpref - * @type String - */ -collapsible_region.prototype.userpref = null; - -/** - * The key divs that make up this - * @property div, innerdiv, captiondiv - * @type HTMLDivElement - */ -collapsible_region.prototype.div = null; -collapsible_region.prototype.innerdiv = null; -collapsible_region.prototype.captiondiv = null; - -/** - * The key divs that make up this - * @property icon - * @type HTMLImageElement - */ -collapsible_region.prototype.icon = null; - -/** - * Whether the region is currently collapsed. - * @property collapsed - * @type Boolean - */ -collapsible_region.prototype.collapsed = false; - -/** - * @property animation - * @type Y.Anim - */ -collapsible_region.prototype.animation = null; - -/** When clicked, toggle the collapsed state, and trigger the animation. */ -collapsible_region.prototype.handle_click = function(e) { - var context = this; - - YUI(M.yui.loader).use('anim', function(Y) { - // Toggle the state. - context.collapsed = !context.collapsed; - - // Stop the click following the link. - e.preventDefault(); - - // Animate to the appropriate size. - if (context.animation.get('running')) { - context.animation.stop(); - } - if (context.collapsed) { - var region = Y.one(context.caption).get('region'); - var targetheight = region.bottom - region.top + 3; - } else { - var region = Y.one(context.innerdiv).get('region'); - var targetheight = region.bottom - region.top + 2; - context.div.className = context.div.className.replace(/\s*\bcollapsed\b\s*/, ' '); - } - context.animation.set('to', { height: targetheight }); - context.animation.run(); - - // Set the appropriate icon. - if (context.collapsed) { - context.icon.src =context.collapsedicon; - } else { - context.icon.src = context.expandedicon; - } - - // Update the user preference. - if (context.userpref) { - set_user_preference(context.userpref, context.collapsed); - } - }); -} /** * Oject to handle expanding and collapsing blocks when an icon is clicked on. diff --git a/lib/weblib.php b/lib/weblib.php index e00db532d22..601a477c963 100644 --- a/lib/weblib.php +++ b/lib/weblib.php @@ -2125,9 +2125,7 @@ function print_collapsible_region_start($classes, $id, $caption, $userpref = fal $output .= '
'; $output .= $caption . ' '; $output .= '
'; - $PAGE->requires->js_function_call('new collapsible_region', - array($id, $userpref, get_string('clicktohideshow'), - $OUTPUT->pix_url('t/collapsed')->out(false), $OUTPUT->pix_url('t/expanded')->out(false))); + $PAGE->requires->js_init_call('M.util.init_collapsible_region', array($id, $userpref, get_string('clicktohideshow'))); if ($return) { return $output;