Transitions.coffee

# Transitions
# Compiled by @myvo, packaged up by @steveruizok, then an attempt at extending was made by @myvo
#
# Usage
#
# - Drop this file in your project's modules folder.
#
# - At the top of your project, include: 
#     Transitions = require "Transitions"
#
# - Use the transitions in your flow component:
#     flow.transition(layer, Transitions.slideOutRight)
#
# - Advanced (time and curve options):
#     flow.transition(layer, Transitions.go(Transitions.slideOutRight, time: 1, curve: Bezier.easeOut ))
#
# - Need to quickly review all the transitions in this module? Try:
#     print _.keys(Transitions)

timing = 0.75
curving = Bezier.easeInOut

exports.go = (transition, {time, curve}) ->
	if time
		timing = time
	else
		timing = 0.75
	if curve
		curving = curve
	else
		curving = Bezier.linear
	return transition

exports.switchInstant = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0

			hide:
				x:0
				y:0

		layerB:
			show:
				x:0
				y:0

			hide:
				x:0
				y:0
					
exports.slideInUp = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving
				
exports.slideInDown = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:-Screen.height
				options:
					time: timing
					curve: curving
				
exports.slideInLeft = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width
				y:0
				options:
					time: timing
					curve: curving
				
exports.slideInRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving
				
				

exports.slideOutDown = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				height: Screen.height
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				height:0
				options:
					time: timing
					curve: curving
				
exports.slideOutRight = (nav, layerA, layerB, overlay) ->
		transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				width:Screen.width
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				width:0
				options:
					time: timing
					curve: curving
				
exports.moveInUp = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:-Screen.height
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving
				
exports.moveInDown = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:Screen.height
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:-Screen.height
				options:
					time: timing
					curve: curving
				
exports.moveInLeft = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width
				y:0
				options:
					time: timing
					curve: curving
				
exports.moveInRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

exports.pushInLeft = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving
				
			hide:
				x:Screen.width / 2
				y:0
				options:
					time: timing
					curve: curving
				

		layerB:
			show:
				x:0
				y:0
				shadowX: 0
				shadowColor: 'rgba(0,0,0,0.6)'
				options:
					time: timing
					curve: curving
				
			hide:
				x:-Screen.width
				y:0
				shadowX: Screen.width
				shadowColor: 'rgba(0,0,0,0)'
				options:
					time: timing
					curve: curving
				
				
exports.pushInRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0

			hide:
				x:-Screen.width / 2
				y:0

		layerB:
			show:
				x:0
				y:0
				shadowX: 0
				shadowColor: 'rgba(0,0,0,0.6)'

			hide:
				x:Screen.width
				y:0
				shadowX: -Screen.width
				shadowColor: 'rgba(0,0,0,0)'
				
				
exports.pushOutRight = (nav, layerA, layerB, overlay) ->
	transition =
		layerA:
			show:
				x:0
				y:0
				options:
					time: timing
					curve: curving

			hide:
				x:Screen.width
				y:0
				options:
					time: timing
					curve: curving

		layerB:
			show:
				x:0
				y:0
				width:Screen.width
				shadowX: Screen.width
				shadowColor: 'rgba(0,0,0,0)'
				shadowType: 'inner'
				options:
					time: timing
					curve: curving

			hide:
				x:-Screen.width / 2
				y:0
				width:Screen.width/2
				shadowX: Screen.width
				shadowColor: 'rgba(0,0,0,0.6)'
				shadowType: 'inner'
				options:
					time: timing
					curve: curving
				
exports.fadeIn = (nav, layerA, layerB, overlay) ->
	transition =
		layerB:
			show:
				x:0
				y:0
				opacity: 1
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				opacity: 0
				options:
					time: timing
					curve: curving
				
exports.zoomIn = (nav, layerA, layerB, overlay) ->
	transition =
		layerB:
			show:
				x:0
				y:0
				scale: 1
				opacity: 1
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				scale: .9
				opacity: 0
				options:
					time: timing
					curve: curving
				
exports.zoomOut = (nav, layerA, layerB, overlay) ->
	transition =
		layerB:
			show:
				x:0
				y:0
				scale: 1
				opacity: 1
				options:
					time: timing
					curve: curving

			hide:
				x:0
				y:0
				options:
					time: timing
					curve: curving