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