Merge pull request #272 from koenbok/simpler-events

Simpler events

framer/Animation.coffee

@@ -269,3 +269,13 @@ class exports.Animation extends EventEmitter
 
 
 		return animatableProperties
+
+	##############################################################
+	## EVENT HELPERS
+
+	onAnimationStart: (cb) -> @on(Events.AnimationStart, cb)
+	onAnimationStop: (cb) -> @on(Events.AnimationStop, cb)
+	onAnimationEnd: (cb) -> @on(Events.AnimationEnd, cb)
+	onAnimationDidStart: (cb) -> @on(Events.AnimationDidStart, cb)
+	onAnimationDidStop: (cb) -> @on(Events.AnimationDidStop, cb)
+	onAnimationDidEnd: (cb) -> @on(Events.AnimationDidEnd, cb)

framer/BaseClass.coffee

@@ -110,6 +110,8 @@ class exports.BaseClass extends EventEmitter
 	toInspect: =>
 		"<#{@constructor.name} id:#{@id or null}>"
 
+	onChange: (name, cb) -> @on("change:#{name}", cb)
+
 
 	#################################################################
 	# Base constructor method

framer/Canvas.coffee

@@ -16,6 +16,8 @@ class CanvasClass extends BaseClass
 		super(eventName, listener)
 
 	on: @::addListener
+
+	onResize: (cb) -> @on("resize", cb)
 
 # We use this as a singleton
 exports.Canvas = new CanvasClass

framer/Events.coffee

@@ -17,6 +17,7 @@ Events.MouseOut = "mouseout"
 Events.MouseMove = "mousemove"
 Events.MouseWheel = "mousewheel"
 Events.DoubleClick = "dblclick"
+Events.MouseDoubleClick = "dblclick" # Alias for consistent naming
 
 # Let's make sure the touch events work on desktop too
 if not Utils.isTouch()
@@ -51,17 +52,4 @@ Events.touchEvent = (event) ->
 Events.wrap = (element) ->
 	Framer.CurrentContext.domEventManager.wrap(element)
 
-Events.addHelpers = (obj) ->
-
-	# Add event helpers to an object like:
-	# layer.onClick, layer.onScroll, etc.
-
-	_.keys(Events).map (eventName) ->
-		return unless _.isString(eventName)
-		obj::["on#{eventName}"] = (callback) ->
-			@on(Events[eventName], callback)
-
-	obj::onChange = (p, callback) ->
-		@on("change:#{p}", callback)
-
 exports.Events = Events

framer/Layer.coffee

@@ -856,6 +856,45 @@ class exports.Layer extends BaseClass
 	on: @::addListener
 	off: @::removeListener
 
+	##############################################################
+	## EVENT HELPERS
+
+	onClick: (cb) -> @on(Events.Click, cb)
+	onDoubleClick: (cb) -> @on(Events.DoubleClick, cb)
+	onScroll: (cb) -> @on(Events.Scroll, cb)
+
+	onTouchStart: (cb) -> @on(Events.TouchStart, cb)
+	onTouchEnd: (cb) -> @on(Events.TouchEnd, cb)
+	onTouchMove: (cb) -> @on(Events.TouchMove, cb)
+
+	onMouseUp: (cb) -> @on(Events.MouseUp, cb)
+	onMouseDown: (cb) -> @on(Events.MouseDown, cb)
+	onMouseOver: (cb) -> @on(Events.MouseOver, cb)
+	onMouseOut: (cb) -> @on(Events.MouseOut, cb)
+	onMouseMove: (cb) -> @on(Events.MouseMove, cb)
+	onMouseWheel: (cb) -> @on(Events.MouseWheel, cb)
+
+	onAnimationStart: (cb) -> @on(Events.AnimationStart, cb)
+	onAnimationStop: (cb) -> @on(Events.AnimationStop, cb)
+	onAnimationEnd: (cb) -> @on(Events.AnimationEnd, cb)
+	onAnimationDidStart: (cb) -> @on(Events.AnimationDidStart, cb)
+	onAnimationDidStop: (cb) -> @on(Events.AnimationDidStop, cb)
+	onAnimationDidEnd: (cb) -> @on(Events.AnimationDidEnd, cb)
+
+	onImageLoaded: (cb) -> @on(Events.ImageLoaded, cb)
+	onImageLoadError: (cb) -> @on(Events.ImageLoadError, cb)
+
+	onMove: (cb) -> @on(Events.Move, cb)
+	onDragStart: (cb) -> @on(Events.DragStart, cb)
+	onDragWillMove: (cb) -> @on(Events.DragWillMove, cb)
+	onDragMove: (cb) -> @on(Events.DragMove, cb)
+	onDragDidMove: (cb) -> @on(Events.DragDidMove, cb)
+	onDrag: (cb) -> @on(Events.Drag, cb)
+	onDragEnd: (cb) -> @on(Events.DragEnd, cb)
+	onDragAnimationDidStart: (cb) -> @on(Events.DragAnimationDidStart, cb)
+	onDragAnimationDidEnd: (cb) -> @on(Events.DragAnimationDidEnd, cb)
+	onDirectionLockDidStart: (cb) -> @on(Events.DirectionLockDidStart, cb)
+
 	##############################################################
 	## DESCRIPTOR
 
@@ -869,6 +908,3 @@ class exports.Layer extends BaseClass
 		if @name
 			return "<#{@constructor.name} id:#{@id} name:#{@name} (#{round(@x)},#{round(@y)}) #{round(@width)}x#{round(@height)}>"
 		return "<#{@constructor.name} id:#{@id} (#{round(@x)},#{round(@y)}) #{round(@width)}x#{round(@height)}>"
-
-# Add event helpers for the layer dynamically
-Events.addHelpers(exports.Layer)

framer/LayerDraggable.coffee

@@ -150,8 +150,8 @@ class exports.LayerDraggable extends BaseClass
 			x: touchEvent.clientX - @_correctedLayerStartPoint.x
 			y: touchEvent.clientY - @_correctedLayerStartPoint.y
 
-		document.addEventListener(Events.TouchMove, @_touchMove)
-		document.addEventListener(Events.TouchEnd, @_touchEnd)
+		@layer._context.domEventManager.wrap(document).addEventListener(Events.TouchMove, @_touchMove)
+		@layer._context.domEventManager.wrap(document).addEventListener(Events.TouchEnd, @_touchEnd)
 
 		@emit(Events.DragStart, event)
 
@@ -218,8 +218,8 @@ class exports.LayerDraggable extends BaseClass
 
 		event.stopPropagation() unless @propagateEvents
 
-		document.removeEventListener(Events.TouchMove, @_touchMove)
-		document.removeEventListener(Events.TouchEnd, @_touchEnd)
+		@layer._context.domEventManager.wrap(document).removeEventListener(Events.TouchMove, @_touchMove)
+		@layer._context.domEventManager.wrap(document).removeEventListener(Events.TouchEnd, @_touchEnd)
 
 		# Start the simulation prior to emitting the DragEnd event.
 		# This way, if the user calls layer.animate on DragEnd, the simulation will 
@@ -515,4 +515,17 @@ class exports.LayerDraggable extends BaseClass
 	animateStop: ->
 		@_stopSimulation()
 
+	##############################################################
+	## EVENT HELPERS
+
+	onMove: (cb) -> @on(Events.Move, cb)
+	onDragStart: (cb) -> @on(Events.DragStart, cb)
+	onDragWillMove: (cb) -> @on(Events.DragWillMove, cb)
+	onDragMove: (cb) -> @on(Events.DragMove, cb)
+	onDragDidMove: (cb) -> @on(Events.DragDidMove, cb)
+	onDrag: (cb) -> @on(Events.Drag, cb)
+	onDragEnd: (cb) -> @on(Events.DragEnd, cb)
+	onDragAnimationDidStart: (cb) -> @on(Events.DragAnimationDidStart, cb)
+	onDragAnimationDidEnd: (cb) -> @on(Events.DragAnimationDidEnd, cb)
+	onDirectionLockDidStart: (cb) -> @on(Events.DirectionLockDidStart, cb)
 

framer/VideoLayer.coffee

@@ -14,8 +14,8 @@ class exports.VideoLayer extends Layer
 
 		# Make it work with .on and .off
 		# https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
-		@player.on = @player.addEventListener
-		@player.off = @player.removeEventListener
+		@player.on = @_context.domEventManager.wrap(@player).addEventListener
+		@player.off = @_context.domEventManager.wrap(@player).removeEventListener
 
 		@video = options.video
 
@@ -24,3 +24,5 @@ class exports.VideoLayer extends Layer
 	@define "video",
 		get: -> @player.src
 		set: (video) -> @player.src = video
+
+	# TODO: Maybe add event handler shortcuts here too