Skip to content

Instantly share code, notes, and snippets.

/Swipeable-Cards-nightly.markdown

Created March 26, 2015 07:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/1bddd1e2a058413fe3d7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/1bddd1e2a058413fe3d7 to your computer and use it in GitHub Desktop.
Download ZIP
Swipeable Cards nightly
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 Swipe Down</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="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
</head>
<body ng-app="starter" class="slide-left-right-ios7" no-scroll>
<ion-pane ng-controller="CardsCtrl">
<ion-header-bar class="bar-transparent">
<h1 class="title">Help Out</h1>
</ion-header-bar>
<swipe-cards on-card-swipe="onSwipe($event)">
<swipe-cards>
<swipe-card on-card-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-card-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="goAway()">Answer</button>
<button class="button button-clear button-positive" ng-click="goAway()">Decline</button>
</div>
</div>
</swipe-card>
</swipe-cards>
</ion-pane>
<!-- quick cache hack -->
<img src="http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic.png" style="display: none">
<img src="http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic1.png" style="display: none">
<img src="http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic2.png" style="display: none">
<img src="http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic3.png" style="display: none">
<img src="http://ionicframework.com.s3.amazonaws.com/demos/ionic-contrib-swipecards/pic4.png" style="display: none">
</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) {
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) {
$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) {
$scope.goAway = function() {
var card = $ionicSwipeCardDelegate.getSwipeableCard($scope);
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-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-nightly.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment