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