Skip to content

Instantly share code, notes, and snippets.

/Swipeable-Cards-1.0.0-beta.6.markdown

Created July 8, 2014 14:18
Show Gist options
  • Save anonymous/4d2a80057a193005d098 to your computer and use it in GitHub Desktop.
Save anonymous/4d2a80057a193005d098 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Captain Anonymous.
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.0-beta.8/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.8/js/ionic.bundle.js">
</script>
<script src="http://clic.cimec.unitn.it/~elia.bruni/tank/ionic.cards.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7" no-scroll>
<pane ng-controller="CardsCtrl" class="pane">
<header-bar type="bar-transparent" title="'Help out'"></header-bar>
<p style="color:white">Accepted: {{accepted}}, Rejected: {{rejected}}</p>
<swipe-cards>
<swipe-card on-swipe="cardSwiped()" id="start-card">
Swipe down for a new card
</swipe-card>
<swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
<div ng-controller="CardCtrl">
<div class="title">
{{card.title}}
</div>
<div class="image">
<img ng-src="{{card.image}}">
</div>
<div class="button-bar">
<button class="button button-clear button-positive" ng-click="reject()">No</button>
<button class="button button-clear button-positive" ng-click="accept()">Yes</button>
</div>
</div>
</swipe-card>
</swipe-cards>
</pane>
</body>
</html>
Raw
script.js
angular.module('starter', ['ionic', 'ionic.contrib.ui.cards'])
.directive('noScroll', function($document) {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
$document.on('touchmove', function(e) {
e.preventDefault();
});
}
}
})
.controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate, $rootScope) {
$rootScope.accepted = 0;
$rootScope.rejected = 0;
var cardTypes = [
{ title: 'Swipe down to clear the card', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic.png' },
{ title: 'Where is this?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic.png' },
{ title: 'What kind of grass is this?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic2.png' },
{ title: 'What beach is this?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic3.png' },
{ title: 'What kind of clouds are these?', image: 'http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic4.png' }
];
$scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);
$scope.cardSwiped = function(index) {
$scope.addCard();
};
$scope.cardDestroyed = function(index) {
if (this.swipeCard.positive === true) {
$scope.$root.accepted++;
} else {
$scope.$root.rejected++;
}
$scope.cards.splice(index, 1);
};
$scope.addCard = function() {
var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
}
})
.controller('CardCtrl', function($scope, $ionicSwipeCardDelegate, $rootScope) {
$scope.accept = function () {
var card = $ionicSwipeCardDelegate.getSwipebleCard($scope);
$rootScope.accepted++;
card.swipe(true);
}
$scope.reject = function() {
var card = $ionicSwipeCardDelegate.getSwipebleCard($scope);
$rootScope.rejected++;
card.swipe();
};
});
Raw
style.css
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
/* Your app's CSS, go crazy, make it your own */
.ionic-logo {
display: block;
margin: 15px auto;
width: 96px;
height: 96px;
}
.pane {
background-color: #333 !important
}
.bar.bar-transparent {
background-color: transparent;
background-image: none;
border: none;
}
.bar .title {
color: #eee;
}
.swipe-cards {
position: fixed;
}
.swipe-card {
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
display: none;
position: fixed;
-webkit-transform: scale(1,1);
left: 50%;
top: 50%;
width: 300px;
height: 300px;
margin-left: -150px;
margin-top: -150px;
box-sizing: border-box;
background-color: rgb(255,255,255);
border-radius: 4px;
overflow: hidden;
-webkit-animation-fill-mode: forwards;
}
.swipe-card .title {
height: 40px;
padding: 5px;
line-height: 30px;
color: #444;
}
.swipe-card .image {
overflow: hidden;
max-height: 210px;
}
.swipe-card .button {
border: none;
}
.swipe-card .image img {
width: 100%;
border-radius: 0px 0px 4px 4px;
}
#start-card {
color: #fff;
background-color: #30BD8A;
line-height: 300px;
word-wrap: break-word;
border: 6px solid #4CD68E;
text-align: center;
}
#start-card span {
display: inline-block;
line-height: 40px;
width: 200px;
font-size: 30px;
vertical-align: middle;
}
#footer .button {
color: #fff;
}
@-webkit-keyframes bounceIn {
0% {
-webkit-transform: scale(0,0);
}
70% {
-webkit-transform: scale(1.2,1.2);
}
100% {
-webkit-transform: scale(1,1);
}
}
.swipe-card.pop-in-start {
-webkit-transform: scale(0,0);
}
.swipe-card.pop-in {
-webkit-animation: bounceIn 0.3s ease-out;
}
Raw
Swipeable-Cards-1.0.0-beta.6.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment