javascript MDL-21400 Revised CollapsibleRegion code

lib/javascript-static.js

@@ -3,9 +3,10 @@
 
 /**
  * Add module to list of available modules that can be laoded from YUI.
+ * @param {Array} modules
  */
 M.yui.add_module = function(modules) {
-    for (modname in modules) {
+    for (var modname in modules) {
         M.yui.loader.modules[modname] = modules[modname];
     }
 };
@@ -18,6 +19,9 @@ M.util = {};
 
 /**
  * Returns url for images.
+ * @param {String} imagename
+ * @param {String} component
+ * @return {String}
  */
 M.util.image_url = function(imagename, component) {
     var url = M.cfg.wwwroot + '/theme/image.php?theme=' + M.cfg.theme + '&image=' + imagename;
@@ -39,10 +43,10 @@ M.util.create_UFO_object = function (eid, FO) {
 
 /**
  * Init a collapsible region, see print_collapsible_region in weblib.php
- * @param Object YUI3 instance with all libraries loaded
+ * @param {YUI} Y YUI3 instance with all libraries loaded
- * @param String id the HTML id for the div.
+ * @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} userpref the user preference that records the state of this box. false if none.
- * @param String tooltip
+ * @param {String} strtooltip
  */
 M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) {
     Y.use('anim', function(Y) {
@@ -51,69 +55,83 @@ M.util.init_collapsible_region = function(Y, id, userpref, strtooltip) {
 };
 
 /**
- * Oject to handle a collapsible region
+ * Object to handle a collapsible region : instantiate and forget styled object
+ * 
+ * @class
  * @constructor
- * @param Object YUI3 instance with all libraries loaded
+ * @param {YUI} Y YUI3 instance with all libraries loaded
- * @param String id the HTML id for the div.
+ * @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} userpref The user preference that records the state of this box. false if none.
- * @param String tooltip
+ * @param {String} strtooltip
  */
 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.div = Y.one('#'+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.
+    // Get the caption for the collapsible region
-    var a = document.createElement('a');
+    var caption = this.div.one('#'+id + '_caption');
-    while (e = this.caption.firstChild) {
+    caption.setAttribute('title', strtooltip);
-        a.appendChild(e);
+
+    // Create a link
+    var a = Y.Node.create('<a href="#"></a>');
+    // Create a local scoped lamba function to move nodes to a new link
+    var movenode = function(node){
+        node.remove();
+        a.append(node);
+    };
+    // Apply the lamba function on each of the captions child nodes
+    caption.get('children').each(movenode, this);
+    caption.append(a);
+
+    // Get the height of the div at this point before we shrink it if required
+    var height = this.div.get('offsetHeight');
+    if (this.div.hasClass('collapsed')) {
+        // Add the correct image and record the YUI node created in the process
+        this.icon = Y.Node.create('<img src="'+M.util.image_url('t/collapsed', 'moodle')+'" alt="" />');
+        // Shrink the div as it is collapsed by default
+        this.div.setStyle('height', caption.get('offsetHeight')+'px');
+    } else {
+        // Add the correct image and record the YUI node created in the process
+        this.icon = Y.Node.create('<img src="'+M.util.image_url('t/expanded', 'moodle')+'" alt="" />');
     }
-    a.href = '#';
+    a.append(this.icon);
-    this.caption.appendChild(a);
 
     // Create the animation.
-    this.animation = new this.Y.Anim({
+    var animation = new Y.Anim({
         node: this.div,
         duration: 0.3,
-        easing: Y.Easing.easeBoth
+        easing: Y.Easing.easeBoth,
+        to: {height:caption.get('offsetHeight')},
+        from: {height:height}
     });
     
-    // 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() {
+    animation.on('end', function() {
-        if (this.collapsed) {
+        this.div.toggleClass('collapsed');
-            this.div.className += ' collapsed';
+        if (this.div.hasClass('collapsed')) {
+            this.icon.set('src', M.util.image_url('t/collapsed', 'moodle'));
+        } else {
+            this.icon.set('src', M.util.image_url('t/expanded', 'moodle'));
         }
     }, this);
+
+    // Hook up the event handler.
+    a.on('click', function(e, animation) {
+        e.preventDefault();
+        // Animate to the appropriate size.
+        if (animation.get('running')) {
+            animation.stop();
+        }
+        animation.set('reverse', this.div.hasClass('collapsed'));
+        // Update the user preference.
+        if (this.userpref) {
+            set_user_preference(this.userpref, !this.div.hasClass('collapsed'));
+        }
+        animation.run();
+    }, this, animation);
 };
 
 /**
@@ -125,70 +143,18 @@ M.util.CollapsibleRegion.prototype.userpref = null;
 
 /**
  * The key divs that make up this
- * @property div, innerdiv, captiondiv
+ * @property div
- * @type HTMLDivElement
+ * @type Y.Node
  */
 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
+ * @type Y.Node
  */
 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) {