1 // ==========================================================================
  2 // Project:   SproutCore - JavaScript Application Framework
  3 // Copyright: ©2006-2011 Strobe Inc. and contributors.
  4 //            Portions ©2008-2011 Apple Inc. All rights reserved.
  5 // License:   Licensed under MIT license (see license.js)
  6 // ==========================================================================
  7 
  8 
  9 /**
 10   Renders and updates DOM representations of a checkbox (just the box,
 11   not the title).
 12 
 13   Note: most of the actual rendering is done in CSS. The DOM element provided
 14   to the checkboxRenderDelegate must have the theme class names and the
 15   class name 'checkbox' (the name of the render delegate).
 16 
 17   Parameters
 18   --------------------------
 19   Expects these properties on the data source:
 20 
 21    - `isSelected`
 22    - `isActive`
 23    - `title`
 24 
 25   Optional parameters include all parameters for the `labelRenderDelegate`.
 26 
 27 */
 28 SC.BaseTheme.checkboxRenderDelegate = SC.RenderDelegate.create({
 29   className: 'checkbox',
 30 
 31   render: function(dataSource, context) {
 32     this.addSizeClassName(dataSource, context);
 33 
 34     var theme = dataSource.get('theme'),
 35       labelId;
 36 
 37     // the label id is used so we can set the aria labelledby attribute
 38     labelId = SC.guidFor(dataSource) + "-label";
 39 
 40     var isSelected = dataSource.get('isSelected') || NO;
 41     var isActive = dataSource.get('isActive');
 42 
 43     var ariaIsSelected;
 44     if (isSelected === SC.MIXED_STATE) ariaIsSelected = 'mixed';
 45     else if (isSelected) ariaIsSelected = 'true';
 46     else ariaIsSelected = 'false';
 47 
 48     context.setAttr('role', 'checkbox');
 49     context.setAttr('aria-checked', ariaIsSelected);
 50     context.setAttr('aria-labelledby', labelId);
 51 
 52     context.setClass({
 53       'sel': isSelected,
 54       'active': isActive
 55     });
 56 
 57     context.push('<span class = "button"></span>');
 58 
 59     context = context.begin('span').addClass('label').id(labelId);
 60     theme.labelRenderDelegate.render(dataSource, context);
 61     context = context.end();
 62   },
 63 
 64   update: function(dataSource, jquery) {
 65     this.updateSizeClassName(dataSource, jquery);
 66 
 67     var theme = dataSource.get('theme');
 68 
 69     var isSelected = dataSource.get('isSelected');
 70     var isActive = dataSource.get('isActive');
 71 
 72     var ariaIsSelected;
 73     if (isSelected === SC.MIXED_STATE) ariaIsSelected = 'mixed';
 74     else if (isSelected) ariaIsSelected = 'true';
 75     else ariaIsSelected = 'false';
 76 
 77     // address accessibility
 78     jquery.attr('aria-checked', ariaIsSelected);
 79 
 80     // NOTE: the other properties were already set in render, and should not
 81     // need to be changed.
 82 
 83     theme.labelRenderDelegate.update(dataSource, jquery.find('span.label'));
 84 
 85     // add class names
 86     jquery.setClass({
 87       'sel': isSelected,
 88       'active': isActive
 89     });
 90   }
 91 });
 92 
 93 
 94