<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Tinder Cards 2</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://code.ionicframework.com/collide/0.0.4/collide.js"></script>
<script src="http://www.loringdodge.com/files/ionic.tdcards2.js"></script>
</head>
<body ng-app="starter" no-scroll>
<ion-pane ng-controller="CardsCtrl" class="background-grey">
<ion-header-bar class="bar-default">
<h1 class="title">TD Cards 2</h1>
</ion-header-bar>
<div class="td-title">
<div class="row">
<div class="col">Master: <span>{{ cards.master.length }}</span></div>
<div class="col">Cards: <span>{{ cards.active.length }}</span></div>
<div class="col">Discards: <span>{{ cards.discards.length }}</span></div>
</div>
<div class="row">
<div class="col">Liked: <span>{{ cards.liked.length }}</span></div>
<div class="col">Disliked: <span>{{ cards.disliked.length }}</span></div>
</div>
</div>
<!-- *************************
TD Cards
- We start off with an ng-if so that the cards are not generated
unless $scope.cards is not 'null'
************************* -->
<div ng-if="cards.active">
<td-cards>
<td-card ng-repeat="card in cards.active" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)">
<div class="image" ng-controller="CardCtrl">
<div class="no-text"><i class="icon ion-thumbsdown"></i></div>
<div class="yes-text"><i class="icon ion-thumbsup"></i></div>
<!-- *************************
Discard
- The card is removed from the deck and a fly away animation is triggered.
- onClickTransitionOut is found in ionic.tdcards.js
- Animation can be customized by changing defaults
************************* -->
<div class="discard" ng-click="onClickTransitionOut(card)">DISCARD</div>
<img ng-src="{{ card.image }}">
</div>
</td-card>
<!-- *************************
End Card
- 'drag' is set to false. The user cannot drag it.
- 'refreshCards()' reloads all cards that have NOT been discarded.
************************* -->
<td-card id="end-card" drag="false">
<i class="icon ion-ios-refresh disable-user-behavior" ng-click="refreshCards()"></i>
</td-card>
</td-cards>
</div>
</ion-pane>
</body>
</html>
.background-grey {
background-color: #F7F7F7;
}
.td-title {
position: absolute;
top: 70px;
width: 100%;
text-align: center;
}
.td-title span {
font-weight: bold;
}
td-cards {
display: block;
}
td-card {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
width: 300px;
height: 300px;
box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
border-radius: 3px;
background-color: transparent;
}
td-card img {
max-width: 100%;
border-radius: 4px;
}
.yes-text {
position: absolute;
top: 10px;
left: 10px;
font-size: 30px;
color: #4CAF50;
opacity: 0;
}
.no-text {
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
color: #F44336;
opacity: 0;
}
.discard {
position: absolute;
bottom: 20px;
padding: 10px 15px;
color: #FFF;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 0 5px 5px 0;
}
td-card#end-card {
background-color: none;
box-shadow: none;
border-radius: none;
}
#end-card i {
position: absolute;
top: calc(50% - 55px);
left: calc(50% - 40px);
font-size: 100px;
}
.fade {
-webkit-transition: 0.2s opacity linear;
transition: 0.2s opacity linear;
opacity: 0;
}
angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards2'])
.config(function($stateProvider, $urlRouterProvider) {
})
.directive('noScroll', function($document) {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
$document.on('touchmove', function(e) {
e.preventDefault();
});
}
}
})
.controller('CardsCtrl', function($scope, TDCardDelegate, $timeout) {
var cardTypes = [
{ image: 'http://c4.staticflickr.com/4/3924/18886530069_840bc7d2a5_n.jpg' },
{ image: 'http://c1.staticflickr.com/1/421/19046467146_548ed09e19_n.jpg' },
{ image: 'http://c1.staticflickr.com/1/278/18452005203_a3bd2d7938_n.jpg' },
{ image: 'http://c1.staticflickr.com/1/297/19072713565_be3113bc67_n.jpg' },
{ image: 'http://c1.staticflickr.com/1/536/19072713515_5961d52357_n.jpg' },
{ image: 'http://c4.staticflickr.com/4/3937/19072713775_156a560e09_n.jpg' },
{ image: 'http://c1.staticflickr.com/1/267/19067097362_14d8ed9389_n.jpg' }
];
$scope.cards = {
master: Array.prototype.slice.call(cardTypes, 0),
active: Array.prototype.slice.call(cardTypes, 0),
discards: [],
liked: [],
disliked: []
}
$scope.cardDestroyed = function(index) {
$scope.cards.active.splice(index, 1);
};
$scope.addCard = function() {
var newCard = cardTypes[0];
$scope.cards.active.push(angular.extend({}, newCard));
}
$scope.refreshCards = function() {
// Set $scope.cards to null so that directive reloads
$scope.cards.active = null;
$timeout(function() {
$scope.cards.active = Array.prototype.slice.call($scope.cards.master, 0);
});
}
$scope.$on('removeCard', function(event, element, card) {
var discarded = $scope.cards.master.splice($scope.cards.master.indexOf(card), 1);
$scope.cards.discards.push(discarded);
});
$scope.cardSwipedLeft = function(index) {
console.log('LEFT SWIPE');
var card = $scope.cards.active[index];
$scope.cards.disliked.push(card);
};
$scope.cardSwipedRight = function(index) {
console.log('RIGHT SWIPE');
var card = $scope.cards.active[index];
$scope.cards.liked.push(card);
};
})
.controller('CardCtrl', function($scope, TDCardDelegate) {
});
Also see: Tab Triggers