Apple Maps iOS 10 : Place Card Swipe

index.js

// Vars
var olt = Titanium.UI.create2DMatrix(), curX, curY;
var initialTop = Alloy.Globals.halfScreenY;
var currentViewTop = initialTop; // 100% = curY
var swipeDisplacementPercentage = 1; // 0 is at the floor, 2 is all the way to the top

var deltaX, deltaY;

$.contentArea.addEventListener('touchstart', function(e) {
    curX = e.x;
    curY = e.y;
    Ti.API.info('** Start *** curY ' + curY);
    $.contentArea.viewShadowOffset = {y:-1};
	$.contentArea.viewShadowRadius = 5;
});

$.contentArea.addEventListener('touchend', function(e) {
    $.contentArea.viewShadowOffset = {y:2};
	$.contentArea.viewShadowRadius = 5;
	Ti.API.info('touchend STT - displacementPercentage ' + swipeDisplacementPercentage + '  InitialTop ' + initialTop + '  currentViewTop ' + currentViewTop);
	
	if (deltaY > 0) {
		Ti.API.info('Pushed Downwards');
		// Set Constraints max top & min bottom
		if (swipeDisplacementPercentage < 1.9 && swipeDisplacementPercentage > 0.8) { // Hovered in Middle
	    		//Ti.API.info('center it');
	    		//swipeDisplacementPercentage = 1;
	    		$.contentArea.animate({
	    			transform: Titanium.UI.create2DMatrix().translate(0, 0),
				curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
		    		opacity : 1,
		    		backgroundColor: '#0B5370',
		        duration : 100,
		    });
		    $.contentArea.borderRadius = 5;
		    currentViewTop = Alloy.Globals.halfScreenY;
	   } 
	   else if (swipeDisplacementPercentage >= 1.9) { // reached Over 2/3 of screen
	   		Ti.API.info('top lock it');
	    		$.contentArea.animate({
	    			transform: Titanium.UI.create2DMatrix().translate(0, -initialTop),
	    			opacity : 1,
		    		backgroundColor: '#FDBB42',
		        duration : 100,
		    });
		    $.contentArea.borderRadius = 0;
		    currentViewTop = Alloy.Globals.halfScreenY * 2;
	   } else if (swipeDisplacementPercentage <= 0.8) { // reached lower 1/3 of screen
	   		Ti.API.info('Bottom lock it');
	    		$.contentArea.animate({
	    			transform: Titanium.UI.create2DMatrix().translate(0, initialTop - 50),
		    		backgroundColor: '#0B5370',
		    		opacity: 0.25,
		        duration : 100,
		    });
		    $.contentArea.borderRadius = 0;
		    currentViewTop = -Alloy.Globals.halfScreenY * 2 + 50;
	   }
	} else {
		Ti.API.info('Pushed Upwards');
		// Set Constraints max top & min bottom
		if (swipeDisplacementPercentage < 1.2 && swipeDisplacementPercentage > 0.2) { // Hovered in Middle
	    		Ti.API.info('center it');
	    		$.contentArea.animate({
	    			transform: Titanium.UI.create2DMatrix().translate(0, 0),
				curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
		    		opacity : 1,
		    		backgroundColor: '#0B5370',
		        duration : 100,
		    });
		    $.contentArea.borderRadius = 5;
		    currentViewTop = Alloy.Globals.halfScreenY;
	   } else if (swipeDisplacementPercentage >= 1.2) { // reached Less 2/3 of screen
	   		Ti.API.info('Top it');
	    		$.contentArea.animate({
	    			transform: Titanium.UI.create2DMatrix().translate(0, -initialTop),
	    			opacity : 1,
		    		backgroundColor: '#FDBB42',
		        duration : 100,
		    });
		    $.contentArea.borderRadius = 0;
		    currentViewTop = Alloy.Globals.halfScreenY * 2;
	   }  else if (swipeDisplacementPercentage <= 0.8) { // reached lower 1/3 of screen
	   		Ti.API.info('Bottom lock it');
	    		$.contentArea.animate({
	    			transform: Titanium.UI.create2DMatrix().translate(0, initialTop - 50),
		    		backgroundColor: '#0B5370',
		    		opacity: 0.25,
		        duration : 100,
		    });
		    $.contentArea.borderRadius = 0;
		    initialTop = -Alloy.Globals.halfScreenY * 2 + 50;
	   }
	}
	
   counter = 0;
   //curY = curY - deltaY;
   deltaYAdder = 0;
   //initialTop = currentViewTop;
   Ti.API.info('------touchend END - InitialTop now is ' + initialTop + '  currentViewTop ' + currentViewTop);
   //initialTop = currentViewTop;
   //Ti.API.info('    -- END - displacementPercentage ' + swipeDisplacementPercentage + 
   //				'  InitialTop ' + initialTop +
//				'  currentViewTop ' + currentViewTop);
});

$.contentArea.addEventListener('touchcancel', function(e) {
    if (swipeDisplacementPercentage < 1.2 && swipeDisplacementPercentage > 0.8) {
    		// center it
    		swipeDisplacementPercentage = 1;
    		$.contentArea.animate({
	    		top: initialTop,
	        duration : 100
	    });
    }
});

var counter = 0;
var deltaYAdder = 0;
$.contentArea.addEventListener('touchmove', function(e) {
	counter++;
	
	previousDeltaY = deltaY;
	deltaX = e.x - curX;
	deltaY = e.y - curY; // Different in pixel the figer has panned from last move
	//Ti.API.info(counter + '----  e.y ' + e.y + '-  curY ' + curY + '  = deltaY ' + deltaY + '  previousDeltaY ' + previousDeltaY);
	
	deltaYAdder += deltaY;
    
    olt = olt.translate(0, deltaY);

    Ti.API.info(counter + '----  currentViewTop ' + currentViewTop);
    
	currentViewTop -= deltaY;
    swipeDisplacementPercentage = currentViewTop/initialTop;
    Ti.API.info('   - currentViewTop ' + currentViewTop + '  deltaY ' + deltaY);
    //Ti.API.info('    -- currentViewTop ' + currentViewTop + ' (deltaY ' + deltaY + ':  (e.y '+e.y+' - curY ' + curY + ')\tswipeDisplacementPercentage ' + swipeDisplacementPercentage + ' which is currentViewTop: ' + currentViewTop + '/ initialTop ' + initialTop);

    $.contentArea.animate({
    		opacity: Math.max(swipeDisplacementPercentage, 0.15),
        transform : olt,
        duration : 60
    });
    
    if (swipeDisplacementPercentage > 1) { // Went over it's initial Position
    		$.contentArea.animate({ backgroundColor:'#FDBB42', duration: 250, curve: Ti.UI.ANIMATION_CURVE_EASE_OUT });
	} else {
		$.contentArea.animate({ backgroundColor:'#0B5370', duration: 250, curve: Ti.UI.ANIMATION_CURVE_EASE_OUT });
	}
	
	// Correct over/under displacement when touchend triggers
	if (swipeDisplacementPercentage > 2) swipeDisplacementPercentage = 2;
	else if (swipeDisplacementPercentage < 0) swipeDisplacementPercentage = 0;
   
});

$.index.open();

index.tss

".container": {
	backgroundColor:"#28B4ED"
}

"#contentArea": {
	width: Ti.UI.FILL,
	height: Ti.Platform.displayCaps.platformHeight,
	top: Alloy.Globals.halfScreenY,
	backgroundColor: '#0B5370',
	viewShadowColor: '#2E2E2E',
	viewShadowOffset: {y:2},
	viewShadowRadius: 5,
	borderRadius: 5,
}

index.xml

<Alloy>
	<Window class="container">
		<View id="contentArea"></View>
	</Window>
</Alloy>