// ========================================================================== // Project: SproutCore - JavaScript Application Framework // Copyright: ©2006-2011 Strobe Inc. and contributors. // Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ========================================================================== /** Renders and updates the HTML representation of a button. */ SC.BaseTheme.buttonRenderDelegate = SC.RenderDelegate.create({ className: 'button', // // SIZE DEFINITIONS // 'sc-small-size': { height: 18, autoResizePadding: { width: 15, height: 0 } }, 'sc-regular-size': { height: 24, autoResizePadding: { width: 20, height: 0 } }, 'sc-huge-size': { height: 30, autoResizePadding: { width: 30, height: 0 } }, 'sc-jumbo-size': { height: 44, autoResizePadding: { width: 50, height: 0 } }, // // RENDERING LOGIC // /** Called when we need to create the HTML that represents the button. @param {SC.Object} dataSource the object containing the information on how to render the button @param {SC.RenderContext} context the render context instance */ render: function(dataSource, context) { this.addSizeClassName(dataSource, context); var toolTip = dataSource.get('toolTip'), isSelected = dataSource.get('isSelected') || NO, isActive = dataSource.get('isActive') || NO, isDefault = dataSource.get('isDefault') || NO, isCancel = dataSource.get('isCancel') || NO, isToggle = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR), labelId = SC.guidFor(dataSource) + '-label'; context.setClass({ 'icon': !!dataSource.get('icon'), 'def': isDefault, 'cancel': isCancel && !isDefault, 'active': isActive, 'sel': isSelected }); // Set the toolTip. if (toolTip) { context.setAttr('title', toolTip); } this.includeSlices(dataSource, context, SC.THREE_SLICE); // accessibility if(dataSource.get('isSegment')){ context.setAttr('aria-selected', isSelected.toString()); }else if(isToggle) { context.setAttr('aria-pressed', isActive.toString()); } context.setAttr('aria-labelledby', labelId); // Create the inner label element that contains the text and, optionally, // an icon. context = context.begin('label').addClass('sc-button-label').id(labelId); dataSource.get('theme').labelRenderDelegate.render(dataSource, context); context = context.end(); if (dataSource.get('supportFocusRing')) { context = context.begin('div').addClass('focus-ring'); this.includeSlices(dataSource, context, SC.THREE_SLICE); context = context.end(); } }, /** Called when one or more display properties have changed and we need to update the HTML representation with the new values. @param {SC.Object} dataSource the object containing the information on how to render the button @param {SC.RenderContext} jquery the jQuery object representing the HTML representation of the button */ update: function(dataSource, jquery) { var isToggle = (dataSource.get('buttonBehavior') === SC.TOGGLE_BEHAVIOR), isDefault = dataSource.get('isDefault'), isCancel = dataSource.get('isCancel'), toolTip = dataSource.get('toolTip'); this.updateSizeClassName(dataSource, jquery); if (dataSource.get('isActive')) { jquery.addClass('active'); } if (dataSource.get('isSegment')) { jquery.attr('aria-selected', dataSource.get('isSelected').toString()); } else if (isToggle) { jquery.attr('aria-pressed', dataSource.get('isActive').toString()); } // Update the toolTip. if (toolTip) { jquery.attr('title', toolTip); } else { jquery.removeAttr('title'); } jquery.setClass('icon', !!dataSource.get('icon')); jquery.setClass('def', !!isDefault); jquery.setClass('cancel', !!isCancel && !isDefault); dataSource.get('theme').labelRenderDelegate.update(dataSource, jquery.find('label')); }, /** Returns the layer to be used for auto resizing. */ getRenderedAutoResizeLayer: function(dataSource, jq) { return jq.find('.sc-button-label')[0]; } });