Fix scrolling, fix animation events

koenbok · Sep 25, 2014 · 9552f44c9c6c3ee2eefff7b8c742b75b60704a91 · 9552f44
1 parent 962f45d
commit 9552f44c9c6c3ee2eefff7b8c742b75b60704a91
Unified Split

Showing with 45 additions and 24 deletions.

+30 −22 framer/Layer.coffee

+15 −2 test/tests/LayerTest.coffee
diff --git a/framer/Layer.coffee b/framer/Layer.coffee
@@ -18,14 +18,16 @@ layerProperty = (obj, name, cssProperty, fallback, validator, set) ->
 		default: fallback
 		get: -> 
 			@_properties[name]
+
 		set: (value) ->
+
 			@_properties[name] = value
 			@_element.style[cssProperty] = LayerStyle[cssProperty](@)

 			# @_dirtyStyle[cssProperty] = LayerStyle[cssProperty](@)
 			# @_setNeedsRender()

-			set?(value)
+			set?(@, value)
 			@emit("change:#{name}", value)


@@ -295,6 +297,29 @@ class exports.Layer extends BaseClass
 			_.extend @_element.style, value
 			@emit "change:style"

+	computedStyle: ->
+		# This is an expensive operation
+
+		getComputedStyle  = document.defaultView.getComputedStyle
+		getComputedStyle ?= window.getComputedStyle
+		
+		return getComputedStyle(@_element)
+
+	@define "classList",
+		get: -> @_element.classList
+
+	##############################################################
+	# DOM ELEMENTS
+
+	_createElement: ->
+		return if @_element?
+		@_element = document.createElement "div"
+		@_element.classList.add("framerLayer")
+
+	_insertElement: ->
+		@bringToFront()
+		@_context.getRootElement().appendChild(@_element)
+
 	@define "html",
 		get: ->
 			@_elementHTML?.innerHTML
@@ -321,29 +346,12 @@ class exports.Layer extends BaseClass

 			@emit "change:html"

-	computedStyle: ->
-		document.defaultView.getComputedStyle @_element
-
-	_setDefaultCSS: ->
-		@style = Config.layerBaseCSS
-
-	@define "classList",
-		get: -> @_element.classList
-
-
-	##############################################################
-	# DOM ELEMENTS
-
-	_createElement: ->
-		return if @_element?
-		@_element = document.createElement "div"
-		@_element.classList.add("framerLayer")
-
-	_insertElement: ->
-		@bringToFront()
-		@_context.getRootElement().appendChild @_element
+	querySelector: (query) -> @_element.querySelector(query)
+	querySelectorAll: (query) -> @_element.querySelectorAll(query)

 	destroy: ->
+		
+		# Todo: check this

 		if @superLayer
 			@superLayer._subLayers = _.without @superLayer._subLayers, @
diff --git a/test/tests/LayerTest.coffee b/test/tests/LayerTest.coffee
@@ -123,8 +123,8 @@ describe "Layer", ->
 			# layer.style["background-image"].should.contain "file://"
 			# layer.style["background-image"].should.contain "?nocache="

-			layer.style["background-size"].should.equal "cover"
-			layer.style["background-repeat"].should.equal "no-repeat"
+			layer.computedStyle()["background-size"].should.equal "cover"
+			layer.computedStyle()["background-repeat"].should.equal "no-repeat"

 			layer.properties.image.should.equal imagePath

@@ -211,6 +211,7 @@ describe "Layer", ->
 			layer.scroll = true
 			layer.scroll.should.equal true
 			layer.style["overflow"].should.equal "scroll"
+			
 			layer.ignoreEvents.should.equal false

 		it "should set scrollHorizontal", ->
@@ -666,6 +667,18 @@ describe "Layer", ->
 			layer._elementHTML.innerHTML.should.equal "<input type=\"button\">"
 			layer.ignoreEvents.should.equal false

+		it "should work with querySelectorAll", ->
+
+			layer = new Layer
+			layer.html = "<input type='button' id='hello'>"
+
+			inputElements = layer.querySelectorAll("input")
+			inputElements.length.should.equal 1
+
+			inputElement = _.first(inputElements)
+			inputElement.getAttribute("id").should.equal "hello"
+
+