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   Renders and updates the DOM representation of a radio button (a single button,
 10   not the group).
 11 
 12   Expected Properties
 13   -----------------------------------
 14 
 15    - `isSelected`
 16    - `isActive`
 17    - `isMixed`
 18    - `title`
 19 
 20   Optional Properties
 21   -----------------------------------
 22 
 23    - `width` -- an optional width of the radio button
 24    - `labelRenderDelegate` properties
 25 
 26 */
 27 SC.BaseTheme.radioRenderDelegate = SC.RenderDelegate.create({
 28   className: 'radio',
 29 
 30   render: function(dataSource, context) {
 31     this.addSizeClassName(dataSource, context);
 32 
 33     var theme = dataSource.get('theme');
 34 
 35     var isSelected = dataSource.get('isSelected'),
 36         width = dataSource.get('width'),
 37         labelId = SC.guidFor(dataSource) + '-label';
 38 
 39     context.setClass({
 40       active: dataSource.get('isActive'),
 41       mixed: dataSource.get('isMixed'),
 42       sel: dataSource.get('isSelected'),
 43       disabled: !dataSource.get('isEnabled')
 44     });
 45 
 46     //accessing accessibility
 47     context.setAttr('role', 'radio');
 48     context.setAttr('aria-checked', isSelected);
 49     context.setAttr('aria-labelledby', labelId);
 50     context.setAttr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
 51 
 52     if (width) context.setStyle('width', width);
 53 
 54     context.push('<span class = "button"></span>');
 55 
 56     context = context.begin('span').addClass('sc-button-label').id(labelId);
 57     theme.labelRenderDelegate.render(dataSource, context);
 58     context = context.end();
 59   },
 60 
 61   update: function(dataSource, jquery) {
 62     this.updateSizeClassName(dataSource, jquery);
 63 
 64     var theme = dataSource.get('theme');
 65 
 66     var isSelected = dataSource.get('isSelected'),
 67         width = dataSource.get('width'),
 68         value = dataSource.get('value');
 69 
 70     jquery.setClass({
 71       active: dataSource.get('isActive'),
 72       mixed: dataSource.get('isMixed'),
 73       sel: dataSource.get('isSelected'),
 74       disabled: !dataSource.get('isEnabled')
 75     });
 76 
 77     jquery.attr('aria-disabled', dataSource.get('isEnabled') ? 'false' : 'true');
 78     jquery.attr('aria-checked', isSelected);
 79     jquery.css('width', width ? width : null);
 80 
 81     theme.labelRenderDelegate.update(dataSource, jquery.find('.sc-button-label'));
 82   }
 83 });
 84