Tinder-Style Swipable Cards

Swipe left, swipe right, find your true match!

  •         
    Page {
    	background-color: white;
    }
    Image {
    	margin: 10;
    }
    .card{
    	margin:20px;
    	background-color:#03A9F4;
    	border-radius:5;
    }
    Label{
    	font:40;
    	color:white;
    }		
          
  •         
    <Page loaded="loaded">	
      <Page.actionBar>		
        <ActionBar title="Hello!" id="verdict"></ActionBar>
      </Page.actionBar>		
        <StackLayout id="card" class="card">
        	<Image id="guy"></Image>
        	<Label id="name"></Label>
        	<Label id="job"></Label>
        	<Label id="age"></Label>
        </StackLayout>
    </Page>      
    		
          
  •         
    var actionBarUtil = require("../../shared/utils/action-bar-util");
    var gestures = require("ui/gestures");
    var _page;
    
    exports.loaded = function(args) {
    
    	_page = args.object;
    	_page.bindingContext = user;
    	actionBarUtil.styleActionBar();
        actionBarUtil.hideiOSBackButton();
    
        var card = _page.getViewById("card");
        var img = _page.getViewById("guy");
        var job = _page.getViewById("job");
        var age = _page.getViewById("age");
        var name = _page.getViewById("name");
    
        var namesArray = ["Floyd","Pete","Brian","Randall","Jim","Ashef","Michel","Drake","Ed"];
        var jobsArray = ["Developer","Food Editor","Journalist","Actor","Fisherman","Chef","Designer","Musician","Baker"];
        var ageArray = [41,23,35,33,45,64,33,54,34];
        
        var i = 0;
    	
    	//set a default
    	img.src="~/images/"+i+".jpg"; 
    	job.text=jobsArray[i];
    	age.text=ageArray[i];
    	name.text=namesArray[i];
       
        var verdict = _page.getViewById("verdict");
        card.on(gestures.GestureTypes.swipe, function (args) {
    
        	i = i + 1;
        			
        	if(args.direction === 1){
    			verdict.title="Yea!";
        		card.animate({ translate: { x: 1000, y: 100 } })
        			.then(function () { return card.animate({ translate: { x: 0, y: -2000 } }); })			    
    			    .then(function () { return card.animate({ translate: { x: 0, y: 0 } }); })			    
    			    .then(function () {
    					img.src="~/images/"+i+".jpg"; 
    					job.text=jobsArray[i];
    					age.text=ageArray[i];
    					name.text=namesArray[i];   	
    			})
    			    .catch(function (e) {
    			    console.log(e.message);
    			});
    		}
    		else{
    			verdict.title="Nay!";
    			card.animate({ translate: { x: -1000, y: 100 } })
    				.then(function () { return card.animate({ translate: { x: 0, y: -2000 } }); })			    
    			    .then(function () { return card.animate({ translate: { x: 0, y: 0 } }); })			    
    			    .then(function () {			    
    					img.src="~/images/"+i+".jpg"; 
    					job.text=jobsArray[i];
    					age.text=ageArray[i]; 
    					name.text=namesArray[i];   
        	
    			})
    			    .catch(function (e) {
    			    console.log(e.message);
    			});
    		}
          
    	});
    
    	
    };