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 the HTML representation of a button. 11 */ 12 SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({ 13 className: 'button', 14 15 // 16 // SIZE DEFINITIONS 17 // 18 'sc-small-size': { 19 height: 18, 20 autoResizePadding: { width: 15, height: 0 } 21 }, 22 23 'sc-regular-size': { 24 height: 24, 25 autoResizePadding: { width: 20, height: 0 } 26 }, 27 28 'sc-huge-size': { 29 height: 30, 30 autoResizePadding: { width: 30, height: 0 } 31 }, 32 33 'sc-jumbo-size': { 34 height: 44, 35 autoResizePadding: { width: 50, height: 0 } 36 }, 37 38 39 // 40 // RENDERING LOGIC 41 // 42 43 /** 44 Called when we need to create the HTML that represents the button. 45 46 @param {SC.Object} dataSource the object containing the information on how to render the button 47 @param {SC.RenderContext} context the render context instance 48 */ 49 render: function(dataSource, context) { 50 this.addSizeClassName(dataSource, context); 51 52 var toolTip = dataSource.get('toolTip'), 53 isSelected = dataSource.get('isSelected') || NO, 54 isActive = dataSource.get('isActive') || NO, 55 isDefault = dataSource.get('isDefault') || NO, 56 isCancel = dataSource.get('isCancel') || NO, 57 isToggle = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR), 58 labelId = SC.guidFor(dataSource) + '-label'; 59 60 context.setClass({ 61 'icon': !!dataSource.get('icon'), 62 'def': isDefault, 63 'cancel': isCancel && !isDefault, 64 'active': isActive, 65 'sel': isSelected 66 }); 67 68 // Set the toolTip. 69 if (toolTip) { 70 context.setAttr('title', toolTip); 71 } 72 73 this.includeSlices(dataSource, context, SC.THREE_SLICE); 74 // accessibility 75 if(dataSource.get('isSegment')){ 76 context.setAttr('aria-selected', isSelected.toString()); 77 }else if(isToggle) { 78 context.setAttr('aria-pressed', isActive.toString()); 79 } 80 81 context.setAttr('aria-labelledby', labelId); 82 83 // Create the inner label element that contains the text and, optionally, 84 // an icon. 85 context = context.begin('label').addClass('sc-button-label').id(labelId); 86 dataSource.get('theme').labelRenderDelegate.render(dataSource, context); 87 context = context.end(); 88 89 if (dataSource.get('supportFocusRing')) { 90 context = context.begin('div').addClass('focus-ring'); 91 this.includeSlices(dataSource, context, SC.THREE_SLICE); 92 context = context.end(); 93 } 94 }, 95 96 /** 97 Called when one or more display properties have changed and we need to 98 update the HTML representation with the new values. 99 100 @param {SC.Object} dataSource the object containing the information on how to render the button 101 @param {SC.RenderContext} jquery the jQuery object representing the HTML representation of the button 102 */ 103 update: function(dataSource, jquery) { 104 var isToggle = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR), 105 isDefault = dataSource.get('isDefault'), 106 isCancel = dataSource.get('isCancel'), 107 toolTip = dataSource.get('toolTip'); 108 109 this.updateSizeClassName(dataSource, jquery); 110 111 if (dataSource.get('isActive')) { 112 jquery.addClass('active'); 113 } 114 115 if (dataSource.get('isSegment')) { 116 jquery.attr('aria-selected', dataSource.get('isSelected').toString()); 117 } else if (isToggle) { 118 jquery.attr('aria-pressed', dataSource.get('isActive').toString()); 119 } 120 121 // Update the toolTip. 122 if (toolTip) { 123 jquery.attr('title', toolTip); 124 } else { 125 jquery.removeAttr('title'); 126 } 127 128 jquery.setClass('icon', !!dataSource.get('icon')); 129 jquery.setClass('def', !!isDefault); 130 jquery.setClass('cancel', !!isCancel && !isDefault); 131 132 dataSource.get('theme').labelRenderDelegate.update(dataSource, jquery.find('label')); 133 }, 134 135 /** 136 Returns the layer to be used for auto resizing. 137 */ 138 getRenderedAutoResizeLayer: function(dataSource, jq) { 139 return jq.find('.sc-button-label')[0]; 140 } 141 }); 142