checkbox.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.Checkbox = SC.Renderer.extend({

  controlSizeArray: [14, 16], // pre-create for performance (purely optional optimization)
  controlSizes: {
    14: SC.SMALL_CONTROL_SIZE,
    16: SC.REGULAR_CONTROL_SIZE
  },
  
  init: function(settings) {
    this._controlRenderer = this.theme.control({
      controlSizes: this.controlSizes,
      controlSizeArray: this.controlSizeArray // purely optional optimization
    });
    this.attr(settings);
  },

  render: function(context) {
    this.renderControlRenderer(context);
    
    context.attr('role', 'checkbox');
    if (SC.browser.msie) context.attr('for', this.guid);
    context.attr('name', this.name);
    context.attr("aria-checked", this.ariaValue);
    context.push('<span class="button"></span>');
    
    this.resetChanges();
  },

  update: function() {
    this.updateControlRenderer();
    
    if (this.didChange('ariaValue')) this.$().attr("aria-checked", this.ariaValue);
    
    this.resetChanges();
  },
  
  renderControlRenderer: function(context) {
    this._controlRenderer.attr({
      isEnabled: this.isEnabled,
      isActive: this.isActive,
      isSelected: this.isSelected,
      controlSize: this.controlSize
    });
    
    this._controlRenderer.render(context);
  },
  
  updateControlRenderer: function() {
    this._controlRenderer.attr({
      isEnabled: this.isEnabled,
      isActive: this.isActive,
      isSelected: this.isSelected,
      controlSize: this.controlSize
    });
    this._controlRenderer.update();
  },
  
  didAttachLayer: function(layer){
    this._controlRenderer.attachLayer(layer);
  },
  
  willDetachLayer: function() {
    this._controlRenderer.detachLayer();
  }

});

SC.BaseTheme.renderers.checkbox = SC.BaseTheme.renderers.Checkbox.create();

checkbox_control.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.CheckboxControl = SC.Renderer.extend({

  init: function(settings) {
    this._checkboxRenderer = this.theme.checkbox();
    this._titleRenderer = this.theme.title();
    this.attr(settings);
  },

  render: function(context) {
    this.renderCheckboxRenderer(context);
    this.renderTitleRenderer(context);
    
    this.resetChanges();
  },
  
  update: function() {
    this.updateCheckboxRenderer();
    this.updateTitleRenderer();
    
    this.resetChanges();
  },
  
  renderCheckboxRenderer: function(context) {
    this._checkboxRenderer.attr({
      ariaValue: this.ariaValue,
      name: this.name
    });
    
    this._checkboxRenderer.render(context);
  },
  
  updateCheckboxRenderer: function() {
    this._checkboxRenderer.attr({
      ariaValue: this.ariaValue,
      isActive: this.isActive,
      isEnabled: this.isEnabled,
      isSelected: this.isSelected,
      name: this.name
    });
    
    this._checkboxRenderer.update();
  },
  
  renderTitleRenderer: function(context) {
    this._titleRenderer.attr({
      title: this.title,
      icon: this.icon,
      needsEllipsis: this.needsEllipsis,
      escapeHTML: this.escapeHTML
    });
    
    context = context.begin("span").addClass("label");
    this._titleRenderer.render(context);
    context = context.end();
  },
  
  updateTitleRenderer: function() {
    this._titleRenderer.attr({
      title: this.title,
      icon: this.icon,
      needsEllipsis: this.needsEllipsis,
      escapeHTML: this.escapeHTML
    });
    
    this._titleRenderer.update();
  },
  
  didAttachLayer: function(layer){
    this._checkboxRenderer.attachLayer(layer);
    this._titleRenderer.attachLayer(this.provide("span.label"));
  },
  
  willDetachLayer: function() {
    this._checkboxRenderer.detachLayer();
    this._titleRenderer.detachLayer();
  }
});

SC.BaseTheme.renderers.checkboxControl = SC.BaseTheme.renderers.CheckboxControl.create();