Skip to content

Instantly share code, notes, and snippets.

@edwardsanchez
Last active August 29, 2015 14:05
Show Gist options
  • Save edwardsanchez/1da746f64070fa5c4288 to your computer and use it in GitHub Desktop.
Save edwardsanchez/1da746f64070fa5c4288 to your computer and use it in GitHub Desktop.
Several Event Calls: Touch Start, Touch End, Drag Start, Dragging (continuous calling), Drag End, Hold Star, tHold End, Hold Drag Start, Hold Dragging (continuous), Hold Drag End
layer = new Layer width:200, height:200
layer.draggable.enabled = true
layer.center()
layer.html = "Layer"
isDragging=false
isHolding = false
isHoldingandDragging = false
DragStart = false
layer.on Events.DragMove, ->
isDragging=true
if isHolding == false
layer.html = "Dragging"
layer.animate
time: 0.1
properties:
rotationZ: event.x
if isHolding == true
layer.html = "Hold Dragging"
layer.animate
time: 0.1
properties:
#rotationY: event.y
rotationZ: event.x
myTimer = ->
if isDragging == true && isHolding == true && isHoldingandDragging == false
#print "Hold Drag Start"
print "Hold Drag Start"
layer.animate
time: 0.1
curve: "spring"
properties:
scale: 0.5
layer.backgroundColor = "black"
isHoldingandDragging = true
#print "my timer"
if isDragging == true && isHolding == false && DragStart == false
#print "Hold Drag Start"
print "Drag Start"
layer.animate
time: 0.1
curve: "spring"
properties:
scale: 0.5
layer.backgroundColor = "orange"
isDragging = true
DragStart = true
#print "my timer"
myStopFunction = ->
clearInterval myVar
myVar = setInterval(->
myTimer()
, 15)
cancel = ->
document.removeEventListener(Events.TouchEnd, cancel)
clearTimeout(layer.timer)
layer.on Events.TouchStart, ->
document.addEventListener(Events.TouchEnd, cancel)
layer.timer = Utils.delay 0.5, ->
if isDragging==false
print "Hold Start"
layer.html = "Hold Start"
layer.animate
time: 0.3
curve: "spring"
properties:
rotationZ: 45
layer.backgroundColor = "green"
isHolding = true
layer.on Events.DragStart, ->
DragStart = false
myTimer()
myVar = setInterval(->
myTimer()
, 15)
addDraggableClickHandler = (layer, handler) ->
# On the touch start, record this layers position on the screen
layer.on Events.TouchStart, ->
#print "Touch Start"
layer.html = "Touch Start"
layer.backgroundColor = "red"
layer._previousScreenFrame = layer.screenFrame()
layer.on Events.TouchEnd, (event) ->
if isHolding == false && isDragging == false
#print "Touch End"
layer.html = "Touch End"
layer.backgroundColor = "pink"
isHolding = false
if isHolding == true && isDragging == true
myStopFunction()
isHoldingandDragging = false
#print "Hold Drag End"
layer.html = "Hold Drag End"
layer.animate
time: 0.3
curve: "spring"
properties:
rotationZ: 0
rotationX: 0
rotationY: 0
scale: 1
layer.backgroundColor = "blue"
isHolding = false
isDragging = false
# Get the current position on the screen
currentScreenFrame = layer.screenFrame()
# Compare it with the recorded position at touch start
layerNotMoved = \
currentScreenFrame.x is layer._previousScreenFrame.x and \
currentScreenFrame.y is layer._previousScreenFrame.y
layerMoved = \
currentScreenFrame.x isnt layer._previousScreenFrame.x and \
currentScreenFrame.y isnt layer._previousScreenFrame.y
# Only if the layer did not move, call the handler
handler.call(layer, event, layer) if layerNotMoved
if currentScreenFrame.x != layer._previousScreenFrame.x
if isHolding == false && isDragging == true
#print "Drag End"
layer.html = "Drag End"
layer.animate
time: 0.1
curve: "spring"
properties:
rotationY: 0
rotationX: 0
rotationZ: 0
scale: 1
layer.backgroundColor = "brown"
isDragging = false
DragStart = true
addDraggableClickHandler layer, ->
if isHolding == true
#print "Hold End"
layer.html = "Hold End"
layer.animate
time: 0.3
curve: "spring"
properties:
rotationZ: 0
layer.backgroundColor = "gray"
isHolding = false
@ServusJon
Copy link

I get an error in Line 116 when I execude that in Framer Studio… Any idea?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment