Fixes sproutcore#292. Update ImageView so that CSS classes for values…

… are rendered and updated correctly. Unit tests provided.
jwang · Apr 14, 2011 · 0cd1f61 · 0cd1f61
1 parent 93de263
commit 0cd1f61
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/frameworks/foundation/render_delegates/image.js b/frameworks/foundation/render_delegates/image.js
@@ -71,8 +71,10 @@ SC.BaseTheme.imageRenderDelegate = SC.RenderDelegate.create({
     jquery.attr('src', image.src);
 
     if (imageValue !== this._last_class) jquery.setClass(this._last_class, NO);
-    jquery.addClass(imageValue);
-    this._last_class = imageValue;
+    if (imageValue) {
+      jquery.addClass(imageValue);
+      this._last_class = imageValue;
+    }
 
     if (toolTip) {
       jquery.attr('title', toolTip);

diff --git a/frameworks/foundation/tests/views/image/ui.js b/frameworks/foundation/tests/views/image/ui.js
@@ -488,5 +488,25 @@
 
     imageHolder.appendChild(imageView);
   });
+
+  test("CSS class is applied for ImageView using a sprite for value", function() {
+    var view = pane.view('sprite_image'),
+        viewElem = view.$('img');
+
+    ok(viewElem.hasClass('sprite-class'), "element given correct class");
+
+    SC.run(function() {
+      view.set('value', 'another-sprite');
+    });
+
+    ok(!viewElem.hasClass('sprite-class'), "When value changed, element has old class removed");
+    ok(viewElem.hasClass('another-sprite'), "When value changed, element has new class added");
+
+    SC.run(function() {
+      view.set('value', null);
+    });
+
+    ok(!viewElem.hasClass('another-sprite'), "When value removed, element has old class removed");
+  });
 })();
 
diff --git a/frameworks/foundation/views/image.js b/frameworks/foundation/views/image.js
@@ -51,7 +51,7 @@ SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
 
   ariaRole: 'img',
 
-  displayProperties: 'frame image innerFrame toolTip'.w(),
+  displayProperties: 'frame image innerFrame toolTip imageValue type'.w(),
 
   renderDelegateName: function() {
     return (this.get('useCanvas') ? 'canvasImage' : 'image') + "RenderDelegate";
@@ -150,8 +150,8 @@ SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
     @since SproutCore 1.5
   */
   useCanvas: function() {
-    return SC.platform.supportsCanvas && !this.get('useStaticLayout');
-  }.property('useStaticLayout').cacheable(),
+    return SC.platform.supportsCanvas && !this.get('useStaticLayout') && this.get('type') !== SC.IMAGE_TYPE_CSS_CLASS;
+  }.property('useStaticLayout', 'type').cacheable(),
 
   /**
     If YES, image view will use the SC.imageQueue to control loading.  This
@@ -257,14 +257,15 @@ SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
     if (value !== this._iv_value) {
       this._iv_value = value;
 
-      // While the new image is loading use SC.BLANK_IMAGE as a placeholder
       this.set('image', SC.BLANK_IMAGE);
-      this.set('status', SC.IMAGE_STATE_LOADING);
 
-      // order: image cache, normal load
-      if (!this._loadImageUsingCache()) {
-        if (!this._loadImage()) {
-          // CSS class? this will be handled automatically
+      if (type !== SC.IMAGE_TYPE_CSS_CLASS) {
+        // While the new image is loading use SC.BLANK_IMAGE as a placeholder
+        this.set('status', SC.IMAGE_STATE_LOADING);
+
+        // order: image cache, normal load
+        if (!this._loadImageUsingCache()) {
+          this._loadImage();
         }
       }
     }