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