1 // ========================================================================== 2 // Project: SproutCore - JavaScript Application Framework 3 // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors. 4 // Portions ©2010-2011 Strobe Inc. All rights reserved. 5 // License: Licensed under MIT license (see license.js) 6 // ========================================================================== 7 8 sc_require('render_delegates/render_delegate'); 9 10 /** 11 @class 12 Renders and updates DOM representations of an image. 13 14 Parameters 15 -------------------------- 16 Expects these properties on the data source: 17 18 - image: An Image object which has completed loading 19 20 If any of these are not present in the data source, the render delegate 21 will throw an error. 22 23 Optional Parameters: 24 --------------------------- 25 If present, these properties will be used. 26 27 - imageValue: A String which represents the src or CSS class of the image 28 - displayToolTip: A String which is rendered as a toolTip on the element 29 - type: The type of image being rendered. One of: 30 - SC.IMAGE_TYPE_NONE 31 - SC.IMAGE_TYPE_URL 32 - SC.IMAGE_TYPE_CSS_CLASS 33 If not provided, SC.IMAGE_TYPE_URL is the default 34 */ 35 36 SC.BaseTheme.imageRenderDelegate = SC.RenderDelegate.create({ 37 className: 'image', 38 39 render: function (dataSource, context) { 40 var image = dataSource.get('image'), 41 value = dataSource.get('value'), 42 type = dataSource.get('type') || SC.IMAGE_TYPE_URL, 43 toolTip = dataSource.get('toolTip'); 44 45 // Place the img within a div, so that we may scale & offset the img 46 context = context.begin('img'); 47 context.setAttr('src', image.src); 48 49 // Support for CSS sprites (TODO: Remove this) 50 if (value && type === SC.IMAGE_TYPE_CSS_CLASS) { 51 context.addClass(value); 52 dataSource.renderState._last_class = value; 53 } 54 55 if (toolTip) { 56 context.setAttr('title', toolTip); 57 context.setAttr('alt', toolTip); 58 } 59 60 // Adjust the layout of the img 61 context.addStyle(this.imageStyles(dataSource)); 62 63 context = context.end(); 64 }, 65 66 update: function (dataSource, jquery) { 67 var image = dataSource.get('image'), 68 lastClass = dataSource.renderState._last_class, 69 value = dataSource.get('value'), 70 type = dataSource.get('type') || SC.IMAGE_TYPE_URL, 71 toolTip = dataSource.get('toolTip'); 72 73 jquery = jquery.find('img'); 74 75 jquery.attr('src', image.src); 76 77 // Support for CSS sprites (TODO: Remove this) 78 if (lastClass) jquery.removeClass(lastClass); 79 if (value && type === SC.IMAGE_TYPE_CSS_CLASS) { 80 jquery.addClass(value); 81 dataSource.renderState._last_class = value; 82 } 83 84 if (toolTip) { 85 jquery.attr('title', toolTip); 86 jquery.attr('alt', toolTip); 87 } 88 89 // Adjust the layout of the img 90 jquery.css(this.imageStyles(dataSource)); 91 }, 92 93 imageStyles: function (dataSource) { 94 var innerFrame = dataSource.get('innerFrame'); 95 return { 96 'position': 'absolute', 97 'left': Math.round(innerFrame.x), 98 'top': Math.round(innerFrame.y), 99 'width': Math.round(innerFrame.width), 100 'height': Math.round(innerFrame.height) 101 }; 102 } 103 104 }); 105