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