disclosure.js

// ==========================================================================
// Project:   SproutCore - JavaScript Application Framework
// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
//            Portions ©2008-2009 Apple Inc. All rights reserved.
// License:   Licened under MIT license (see license.js)
// ==========================================================================

/** @class
  @extends SC.Renderer
  @since SproutCore 1.1
*/
SC.BaseTheme.renderers.Disclosure = SC.Renderer.extend({
  
  init: function(settings) {
    this._controlRenderer = this.theme.control();
    this.attr(settings);
  },
  
  render: function(context) {
    this.renderControlRenderer(context);
    
    var state = this.state ? "open" : "closed";
    context.push('<img src="' + SC.BLANK_IMAGE_URL + '" class="disclosure button ' + state + '" />');    
  },
  
  renderByQuery: function() {
    // this should be general enough to put in SC.Renderer...
    var context = SC.RenderContext(), cq = this.$(), contextCQ, attrs, key;
    
    // render to an empty context
    this.render(context);
    contextCQ = SC.$(context.join());
    
    // get classes across to our layer
    cq.addClass(context.classNames().join(" "));
    
    // get attributes across as well
    attrs = contextCQ.attr();
    for (key in attrs) {
      if (!attrs.hasOwnProperty(key)) continue;
      cq.attr(key, attrs[key]);
    }
    
    // finally, append the children on contextCQ to our layer
    cq.append(contextCQ.children());
  },
  
  update: function() {
    var state = this.state,
        elem = this.$("img");
    
    if (elem.size() > 0) {
      this.updateControlRenderer();

      elem.setClass("open", state);
      elem.setClass("closed", !state);
    } else {
      // need to create query
      this.renderByQuery();
    }
  },
  
  renderControlRenderer: function(context) {
    this._controlRenderer.attr({
      controlSize: this.controlSize,
      isActive: this.isActive,
      isEnabled: this.isEnabled,
      isSelected: this.isSelected
    });
    
    this._controlRenderer.render(context);
  },
  
  updateControlRenderer: function() {
    this._controlRenderer.attr({
      controlSize: this.controlSize,
      isActive: this.isActive,
      isEnabled: this.isEnabled,
      isSelected: this.isSelected
    });
    
    this._controlRenderer.update();
  },
  
  focus: function() {
    var elem = this.$()[0];
    elem.focus();
  },
  
  didAttachLayer: function(layer){
    this._controlRenderer.attachLayer(layer);
  },
  
  willDetachLayer: function() {
    this._controlRenderer.detachLayer();
  }
  
});

SC.BaseTheme.renderers.disclosure = SC.BaseTheme.renderers.Disclosure.create();