MDL-21400 collapsible_region moved to M, using CamelCase for JS classes because it is otehrwise extremely hard to actually know what is instance and what is class + switched to js_init_call()

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,14 +10,16 @@ M.yui.add_module = function(modules) {
     }
 };
 
+
 /**
  * Various utility functions
  */
-M.util = {
+M.util = {};
+
 /**
  * Returns url for images.
  */
-    image_url: function(imagename, component) {
+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) {
@@ -33,9 +31,161 @@ M.util = {
     }
 
     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 <a> 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 <a> 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.

lib/weblib.php

@@ -2125,9 +2125,7 @@ function print_collapsible_region_start($classes, $id, $caption, $userpref = fal
     $output .= '<div id="' . $id . '_caption" class="collapsibleregioncaption">';
     $output .= $caption . ' ';
     $output .= '</div><div id="' . $id . '_inner" class="collapsibleregioninner">';
-    $PAGE->requires->js_function_call('new collapsible_region',
+    $PAGE->requires->js_init_call('M.util.init_collapsible_region', array($id, $userpref, get_string('clicktohideshow')));
-            array($id, $userpref, get_string('clicktohideshow'),
-            $OUTPUT->pix_url('t/collapsed')->out(false), $OUTPUT->pix_url('t/expanded')->out(false)));
 
     if ($return) {
         return $output;