Permalink
Browse files

Merge pull request #272 from koenbok/simpler-events

Simpler events
  • Loading branch information...
koenbok committed Dec 15, 2015
2 parents 6cf8a83 + ea17d4e commit d38fcf7a27578ccef033738d0e1d56541c8ced44
View
@@ -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)
View
@@ -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
View
@@ -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
View
@@ -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
View
@@ -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)
@@ -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)
View
@@ -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

0 comments on commit d38fcf7

Please sign in to comment.