diff --git a/lib/javascript-static.js b/lib/javascript-static.js
index 523a79b2bea..92edf7b6f4d 100644
--- a/lib/javascript-static.js
+++ b/lib/javascript-static.js
@@ -9,31 +9,31 @@ var Y = null;
* Add module to list of available modules that can be laoded from YUI.
*/
M.yui.add_module = function(modules) {
- for (modname in modules) {
- M.yui.loader.modules[modname] = modules[modname];
- }
+ for (modname in modules) {
+ M.yui.loader.modules[modname] = modules[modname];
+ }
};
/**
* 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;
- }
+ /**
+ * 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;
+ }
}
@@ -965,54 +965,63 @@ function moodle_initialise_body() {
* @param Boolean startcollapsed whether the box should start collapsed.
*/
function collapsible_region(id, userpref, strtooltip, collapsedicon, expandedicon) {
- // Record the pref name
- this.userpref = userpref;
- this.collapsedicon = collapsedicon;
- this.expandedicon = 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);
- // 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 YAHOO.util.Anim(this.div, {}, 0.3, YAHOO.util.Easing.easeBoth);
-
- // Get to the right initial state.
- if (this.div.className.match(/\bcollapsed\b/)) {
- this.collapsed = true;
- var self = this;
- setTimeout(function() {
- var region = YAHOO.util.Region.getRegion(self.caption);
- self.div.style.height = (region.bottom - region.top + 3) + 'px';
- }, 10);
- }
-
- // 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.
- YAHOO.util.Event.addListener(a, 'click', this.handle_click, null, this);
-
- // Handler for the animation finishing.
- this.animation.onComplete.subscribe(function() {self.handle_animation_complete();});
+ // 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);
+ });
}
/**
@@ -1047,51 +1056,48 @@ collapsible_region.prototype.collapsed = false;
/**
* @property animation
- * @type YAHOO.util.Anim
+ * @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) {
- // Toggle the state.
- this.collapsed = !this.collapsed;
+ var context = this;
+
+ YUI(M.yui.loader).use('anim', function(Y) {
+ // Toggle the state.
+ context.collapsed = !context.collapsed;
- // Stop the click following the link.
- YAHOO.util.Event.stopEvent(e);
+ // 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();
- // Animate to the appropriate size.
- if (this.animation.isAnimated()) {
- this.animation.stop();
- }
- if (this.collapsed) {
- var region = YAHOO.util.Region.getRegion(this.caption);
- var targetheight = region.bottom - region.top + 3;
- } else {
- var region = YAHOO.util.Region.getRegion(this.innerdiv);
- var targetheight = region.bottom - region.top + 2;
- this.div.className = this.div.className.replace(/\s*\bcollapsed\b\s*/, ' ');
- }
- this.animation.attributes.height = { to: targetheight, unit: 'px' };
- this.animation.animate();
-
- // 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);
- }
-}
-
-/** When when the animation is finished, add the collapsed class name in relevant. */
-collapsible_region.prototype.handle_animation_complete = function() {
- if (this.collapsed) {
- this.div.className += ' collapsed';
- }
+ // 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);
+ }
+ });
}
/**
@@ -1273,7 +1279,7 @@ function init_help_icons() {
// remove all titles, they would obscure the YUI tooltip
for (var i = 0; i < iconspans.length; i++) {
- iconspans[i].getElementsByTagName('a')[0].title = '';
+ iconspans[i].getElementsByTagName('a')[0].title = '';
}
tooltip.contextTriggerEvent.subscribe(
diff --git a/lib/weblib.php b/lib/weblib.php
index 9bca76a874b..e00db532d22 100644
--- a/lib/weblib.php
+++ b/lib/weblib.php
@@ -2106,9 +2106,6 @@ function print_collapsible_region($contents, $classes, $id, $caption, $userpref
function print_collapsible_region_start($classes, $id, $caption, $userpref = false, $default = false, $return = false) {
global $CFG, $PAGE, $OUTPUT;
- // Include required JavaScript libraries.
- $PAGE->requires->yui2_lib('animation');
-
// Work out the initial state.
if (is_string($userpref)) {
user_preference_allow_ajax_update($userpref, PARAM_BOOL);