// ========================================================================== // 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) // ========================================================================== sc_require(“theme”); /**
Renders and updates the HTML representation of a button.
*/ SC
.LegacyTheme.buttonRenderDelegate = SC
.RenderDelegate.create({
className: 'button', /** 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 theme = dataSource.get('theme'), minWidth = dataSource.get('titleMinWidth'), toolTip = dataSource.get('toolTip'), isSelected = dataSource.get('isSelected'), isActive = dataSource.get('isActive'); var labelContent; context.setClass('icon', !!dataSource.get('icon') || 0); context.setClass('def', dataSource.get('isDefault') || 0); context.setClass('cancel', dataSource.get('isCancel') || 0); if (toolTip) { context.setAttr('title', toolTip); context.setAttr('alt', toolTip); } // addressing accessibility context.setAttr('aria-pressed', isActive); // Specify a minimum width for the inner part of the button. minWidth = (minWidth ? "style='min-width: " + minWidth + "px'" : ''); context = context.push("<span class='sc-button-inner' " + minWidth + ">"); // Create the inner label element that contains the text and, optionally, // an icon. context = context.begin('label').addClass('sc-button-label'); // NOTE: we don't add the label class names because button styles its own label. theme.labelRenderDelegate.render(dataSource, context); context = context.end(); context.push("</span>"); if (dataSource.get('supportFocusRing')) { context.push('<div class="focus-ring">', '<div class="focus-left"></div>', '<div class="focus-middle"></div>', '<div class="focus-right"></div></div>'); } }, /** 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) { this.updateSizeClassName(dataSource, jquery); var theme = dataSource.get('theme'), isSelected = dataSource.get('isSelected'), isActive = dataSource.get('isActive'); if (dataSource.get('isActive')) jquery.addClass('active'); if (dataSource.get('isDefault')) jquery.addClass('default'); if (dataSource.get('isCancel')) jquery.addClass('cancel'); if (dataSource.get('icon')) jquery.addClass('icon'); // addressing accessibility jquery.attr('aria-pressed', isActive); theme.labelRenderDelegate.update(dataSource, jquery.find('label')); }
});