user selection: MDL-17073 add options to control the search in a collapsible region.

lib/javascript-static.js

@@ -607,7 +607,7 @@ function collapsible_region(id, userpref, strtooltip) {
 
     // Find the divs in the document.
     this.div = document.getElementById(id);
-    this.innerdiv = document.getElementById(id + '_inner');
+    this.innerdiv = document.getElementById(id + '_sizer');
     this.caption = document.getElementById(id + '_caption');
     this.caption.title = strtooltip;
 
@@ -641,8 +641,11 @@ function collapsible_region(id, userpref, strtooltip) {
     a.appendChild(this.icon);
 
     // Hook up the event handler.
-    self = this;
+    var self = this;
     YAHOO.util.Event.addListener(a, 'click', function(e) {self.handle_click(e);});
+
+    // Handler for the animation finishing.
+    this.animation.onComplete.subscribe(function() {self.handle_animation_complete();});
 }
 
 /**
@@ -681,6 +684,7 @@ collapsible_region.prototype.collapsed = false;
  */
 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;
@@ -694,7 +698,6 @@ collapsible_region.prototype.handle_click = function(e) {
     }
     if (this.collapsed) {
         var targetel = this.caption;
-        this.div.className += ' collapsed';
     } else {
         var targetel = this.innerdiv;
         this.div.className = this.div.className.replace(/\s*\bcollapsed\b\s*/, ' ');
@@ -715,3 +718,10 @@ collapsible_region.prototype.handle_click = function(e) {
         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';
+    }
+}