A YUI Plugin for widgets that use WidgetStdMod which lets you collapse and expand the bodyNode

gistfile1.js

/**
A Plugin for widgets that use WidgetStdMod which lets you
collapse and expand the bodyNode

@class Plugin.Collapsible
@constructor
@extends Plugin.Base
@param {Object} config Object literal containing plugin configuration options
**/
function Collapsible() {
  Collapsible.superclass.constructor.apply(this, arguments);
}
Y.extend(Collapsible, Y.Plugin.Base, {
  initializer: function () {
    var widget = this.get('host');
    
    this._handlers = [];
    
    this._handlers.push(
      widget.after('render', this._bindUI, this),
      widget.after('render', this._syncUI, this)
    );
  },
  
  _bindUI: function () {
    var widget = this.get('host'),
        header = widget.getStdModNode('header');
    
    this._handlers.push(
      header.on('dblclick', this.toggle, this)
    );
    
    // Listen to collapsedChange only after the widget was
    // rendered, otherwise calls to expand() or collapse()
    // before it was rendered can break everything
    this.after('collapsedChange', this._collapsedChange);
  },
  
  _syncUI: function () {
    // Fake a collapsedChange event so that the widget is synced
    // to previous changes to the collapse attribute
    this._collapsedChange({
      newVal: this.get('collapsed')
    });
  },
  
  _collapsedChange: function (e) {
    var widget = this.get('host');
    
    if (e.newVal) {
      // Store the height of the widget before collapsing
      // so that we can restore it once the widget is not
      // collapsed anymore
      this._prevHeight = widget.get('height');
      
      // This strategy only works if the widget's contentBox
      // has overflow: hidden. Keep in mind that changes to the
      // content may overflow
      widget.set('height', widget.getStdModNode('header').get('offsetHeight'));
    } else {
      // If there is no previous height it means that this is
      // the first time it's called, so the widget should take
      // the height of the boundingBox.
      // This is important so that the widget takes the height
      // of the content. Without it the first time we collapse
      // widget.get('height') will not work. See _collapsedChange
      widget.set('height', this._prevHeight || widget.get('boundingBox').get('offsetHeight'));
    }
  },
  
  /**
  Collapses the widget
  
  @method collapse
  @chainable
  **/
  collapse: function () {
    return this.set('collapsed', true);
  },
  /**
  Expands the widget
  
  @method expand
  @chainable
  **/
  expand: function () {
    return this.set('collapsed', false);
  },
  /**
  Toggles the collapsed state
  
  @method toggle
  @chainable
  **/
  toggle: function () {
    return this.set('collapsed', !this.get('collapsed'));
  },
  destructor: function () {
    Y.Array.each(this._handlers, function (handler) {
      handler.detach();
    });
    this._handlers = null;
  }
}, {
  /**
  Plugin namespace
  
  @property NS
  @type {String}
  @default 'collapsible'
  @static
  **/
  NS: 'collapsible',
  
  ATTRS: {
    /**
    Whether this widget is collapsed or not
    
    @attribute collapsed
    @default false
    **/
    collapsed: {
      value: false
    }
  }
});

Y.Plugin.Collapsible = Collapsible;