Last active
August 29, 2015 14:05
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I get an error in Line 116 when I execude that in Framer Studio… Any idea?