Merge pull request #292 from jchavarri/issue-290

Events.ImageLoaded not being triggered

framer/Layer.coffee

@@ -650,18 +650,19 @@ class exports.Layer extends BaseClass
 
 			# As an optimization, we will only use a loader
 			# if something is explicitly listening to the load event
-			if @_eventListeners?.hasOwnProperty "load" or @_eventListeners?.hasOwnProperty "error"
+
+			if @_domEventManager.listeners(Events.ImageLoaded) or @_domEventManager.listeners(Events.ImageLoadError)
 
 				loader = new Image()
 				loader.name = imageUrl
 				loader.src = imageUrl
 
 				loader.onload = =>
 					@style["background-image"] = "url('#{imageUrl}')"
-					@emit "load", loader
+					@emit Events.ImageLoaded, loader
 
 				loader.onerror = =>
-					@emit "error", loader
+					@emit Events.ImageLoadError, loader
 
 			else
 				@style["background-image"] = "url('#{imageUrl}')"

test/tests/LayerEventsTest.coffee

@@ -139,6 +139,20 @@ describe "LayerEvents", ->
 
 			simulate.mouseover(layer._element)
 
+		it "should trigger ImageLoaded events", (done) ->
+			layerA = new Layer
+			layerA.on Events.ImageLoaded, ->
+				done()
+			layerA.image = "../static/test.png"
+
+		it "should trigger ImageLoadError events", (done) ->
+			layerA = new Layer
+			layerA.on Events.ImageLoadError, ->
+				done()
+			# Apparently there's no way of preventing this 404 error being logged to the console (try/catch or window.onerror don't work)
+			# http://stackoverflow.com/questions/9893886/prevent-image-load-errors-going-to-the-javascript-console
+			layerA.image = "../static/thisimagedoesnotexist.png"
+
 	describe "Gesture events", ->
 
 		it "should not be listened to until a listener is added", ->

test/tests/LayerTest.coffee

@@ -129,7 +129,7 @@ describe "Layer", ->
 			layer._element.style.webkitTransformStyle.should.equal "flat"
 
 
-		it "should set local image", ->
+		it "should set local image", (done) ->
 
 			prefix = "../"
 			imagePath = "static/test.png"
@@ -139,16 +139,18 @@ describe "Layer", ->
 			layer.image = fullPath
 			layer.image.should.equal fullPath
 
-			layer.style["background-image"].indexOf(imagePath).should.not.equal(-1)
-			layer.style["background-image"].indexOf("file://").should.not.equal(-1)
-			layer.style["background-image"].indexOf("?nocache=").should.not.equal(-1)
+			image = layer.props.image
+			layer.props.image.should.equal fullPath
 
+			layer.on Events.ImageLoaded, ->
+				layer.style["background-image"].indexOf(imagePath).should.not.equal(-1)
+				layer.style["background-image"].indexOf("file://").should.not.equal(-1)
+				layer.style["background-image"].indexOf("?nocache=").should.not.equal(-1)
+				done()
+
 			#layer.computedStyle()["background-size"].should.equal "cover"
 			#layer.computedStyle()["background-repeat"].should.equal "no-repeat"
 
-			image = layer.props.image
-			layer.props.image.should.equal fullPath
-
 		it "should set image", ->
 			imagePath = "../static/test.png"
 			layer = new Layer image:imagePath