Programming Steps: 225 Ionic-v1 Ionic Ion: Tinder Cards

Friday, June 2, 2017

225 Ionic-v1 Ionic Ion: Tinder Cards

Ionic Ion: Tinder Cards
code example:

<html>
  <head>
       <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <link rel="stylesheet" href="https://code.ionicframework.com/contrib/ionic-contrib-tinder-cards/ionic.tdcards.css">
    
    <title>Ionic Swipe Down</title>

td-card {
  position: absolute;
  left: 50%;
  margin-top: 80px;
  margin-bottom: 40px;
  margin-left: -150px;
  width: 300px;
  height: 300px;

border: 1px solid #999;
  box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
  border-radius: 6px;
}
/*
td-card.card-0 {
  -webkit-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
  top: 0px;
  z-index: 10;
}
td-card.card-1 {
  -webkit-transform: translate3d(0, 4px, 0);
  transform: translate3d(0, 4px, 0);
  z-index: 9;
}
td-card.card-2 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
  z-index: 8;
}
*/

td-card .image {
  position: relative;
}

td-card img {
  max-width: 100%;
  border-radius: 6px;
}

.yes-text {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 30px;
  color: rgb(111, 250, 111);
  opacity: 0;
}
.no-text {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: rgb(255, 115, 115);
  opacity: 0;
}

.fade {
  -webkit-transition: 0.2s opacity linear;
  transition: 0.2s opacity linear;
  opacity: 0;
}  
    </style>
  </head>
<body ng-app="starter" no-scroll>
    <ion-pane ng-controller="CardsCtrl">
      <ion-header-bar class="bar-default">
        <h1 class="title">TD Cards</h1>
      </ion-header-bar>

<td-cards>
        <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{$index}}">
          <div class="image" ng-controller="CardCtrl">
            <div class="no-text">NOPE</div>
            <img ng-src="{{card.image}}">
            <div class="yes-text">LIKE</div>
          </div>
        </td-card>
      </td-cards>
    </ion-pane>
<script>
angular.module('starter', ['ionic', 'ionic.contrib.ui.tinderCards'])

.directive('noScroll', function($document) {

return {
    restrict: 'A',
    link: function($scope, $element, $attr) {

$document.on('touchmove', function(e) {
        e.preventDefault();
      });
    }
  }
})

.controller('CardsCtrl', function($scope, TDCardDelegate) {
  console.log('CARDS CTRL');
  var cardTypes = [
    { image: 'https://pbs.twimg.com/profile_images/696212819570655232/UJYdhVYj.jpg' },
    { image: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg' },
    { image: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png' },
    { image: 'https://pbs.twimg.com/profile_images/692904108424982528/0PESpDwT.jpg'}
  ];

$scope.cards = Array.prototype.slice.call(cardTypes, 0);

$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, TDCardDelegate) {
  $scope.cardSwipedLeft = function(index) {
    console.log('LEFT SWIPE');
    $scope.addCard();
  };
  $scope.cardSwipedRight = function(index) {
    console.log('RIGHT SWIPE');
    $scope.addCard();
  };
});
  
  </script>
  </body>
</html>

https://codepen.io/ionic/pens/public

201706,20170602