ionic-team/ionic-ion-tinder-cards

Add Tinder-style card swiping to any app with this simple Ionic Ion.

Ionic Contrib: Tinder Cards

Swipeable card based layout for Ionic and Angular. As seen in apps like Tinder
Note: There is also a similar ion library here: https://github.com/driftyco/ionic-ion-swipe-cards where you swipe the cards down instead of left or right.

Demo

Install

bower install ionic-contrib-tinder-cards

Usage

Include ionic.tdcards.js, collide.js and ionic.tdcards.css after the rest of your Ionic and Angular includes. Add ionic.contrib.ui.tinderCards as a module dependency of your app. Then use the following AngularJS directives:

<td-cards>
  <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe="cardSwiped($index)">
    Card content here
  </td-card>
</td-cards>

To add new cards dynamically, just add them to the cards array:

$scope.cards = [
  { // card 1 },
  { // card 2 }
];

$scope.cardDestroyed = function(index) {
  $scope.cards.splice(index, 1);
};

$scope.cardSwiped = function(index) {
  var newCard = // new card data
  $scope.cards.push(newCard);
};

ionic-ion-tinder-cards's Issues

Please fix the demo on Codepen

Demo: https://codepen.io/ionic/pen/nxEdH

It doesn't work.

Method $scope.addCard is never called.

CardCtrl doesn't seem to be required.

Performance on Device

i've tested on my android device with ionic view and the performance was terrible, i'm searching if i did something wrong.
Someone have tested it?

Use unshift to add new cards to the bottom of the stack

The current example uses Array.shift to add new cards, which results in the card being placed on the top of the stack.

It should use Array.unshift, instead:

$scope.addCard = function() {
    var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
    newCard.id = Math.random();
    $scope.cards.unshift(angular.extend({}, newCard));
}

Example

Promatically swipe cards

This used to be a feature with the swipe cards but it has seemed to be moved from this version of it. Example used to be this code

var card = TDCardDelegate.getSwipeableCard($scope);
card.swipe();

Does not seem to work anymore from what I can see? Any suggestions

Missing controller for directive 'tdCard'

Hello,

When I try and use your code (copying it almost directly from the demo into my code) I get an error:
Error: [$compile:ctreq] Controller 'tdCards', required by directive 'tdCard', can't be found!

In your tdCard directive there is a line:
require: '^tdCards'
but that should be fine as the tdCards directive exists and has a controller....

Not sure what is wrong.

Thanks!

Joe

Swipe events not always triggered (with possible fix)

If you pause before releasing a card near the edge, the card will swipe out, but won't run your onSwipeLeft() or onSwipeRight() function.

You can verify this by watching the console on any demo page.

(I previously thought I'd fixed it, but I was wrong. Problem seems to be that transitionOut() fires if the card's dropped beyond the threshold, but the onSwipe events don't.)

Dynamically added cards don't "restack"

On load (and using ng-if) the cards I load in appear as a neat stack, however when I swipe a card out and a replacement is added from my API, the card doesn't appear in the correct place. Is there something I need to call?

I've created a codepen to illustrate the issue - http://codepen.io/anon/pen/ByYJmz

What is the purpose of TDCardDelegate ?

Hi,

I just played with this ion (thanks a lot guys, it's very nice) but can't figure out what is the purpose of TDCardDelegate service.
Regarding to methods name, it seems to be intended to manipulate cards (which would be really nice) but does not seems to work...
Moreover, I don't understant what $scope to pass as argument...

Is there a way to programatically swipe cards left/right ? Like in tinder.

Ionic 2 Support

Hello,

I realise that this project is not core to Ionic and the wish is for it to become a community one, I was wondering if anyone is going to port it over to Ionic/Angular 2?

Thanks,
Ross

Provided demo code never outputs anything to the console.log()

No matter what events are used on-transition-left vs on-swipe-left etc. none ever get called to output the demo debug text to the console.log

Looking at the code i'm assuming as cards are swiped off new cards should be added? This too doesn't happen so I eventually get to the end of the card pile.

I'm testing in the Chrome browser. But even on iOS with Ionic View I can get to the end of he card pile as no new cards are being added.

The only output I do see in the console is regarding:

'webkitMovementX' is deprecated. Please use 'movementX' instead. ionic.bundle.js:1162
'webkitMovementY' is deprecated. Please use 'movementY' instead. ionic.bundle.js:1162

Dynamically added cards cause flickering

I am dynamically adding a card every time a swipe event is fired, I noticed that the first couple of cards after the first card always flicker (they also don't stack nice as mentioned in other posts).

any idea how to resolve the flickering issue?

Cards are difficult to swipe

On Android 4.4.2 on Samsung Tab 3 (10inch) - In order to get a card to swipe, you have to drag it downward first then drag left or right. Unable to immediately swipe to the right or left upon touching the card. I have not tested on any other Android devices. Same thing seems to happen on my iPhone 5S running iOS8.1

height:100%

Hello,
im trying to set height:100% on each td-card but it doesn't work. I want the height to be 100% of the device not fixed 300px. Any workarounds for this?

Thanks in advance

Example just won't work...

I've done nothing but copy verbatim the example code. i've stripped down everything to just the very basics as you have in the example, but regardless, the directive for swipe-card fails becuase the swipe-cards argument to the directive is never valid...

so this the last argument (swipe-cards) on the compile function for the swipe-card directive line is just never properly set.

Specifically here in the directive won't work:
...
.directive('tdCard', ['$timeout', function($timeout) {
return {
restrict: 'E',
template: '

',
require: '^tdCards',
transclude: true,
scope: {
onCardSwipe: '&',
onDestroy: '&'
},
compile: function(element, attr) {
return function($scope, $element, $attr, swipeCards) {
var el = $element[0];

*** the last argument 'swipeCards' is always undefined. **

I've also tried the original fork for swipe-cards and the same issue there. How is anyone making this work? baffling.. so little code , not much to debug. but 'swipeCards' argument is always undefined.

Can anyone throw me a bone?

my HTML is exactly from the demo (but i added some real cards)

.controller('CardsCtrl', function($scope, TDCardDelegate) {
console.log('CARDS CTRL');
var cardTypes = [{
title: 'Swipe down to clear the card',
image: '/vendor/ionic-contrib-swipe-cards/example/www/img/pic.png'
}, {
title: 'Where is this?',
image: '/vendor/ionic-contrib-swipe-cards/example/www/img/pic.png'
}, {
title: 'What kind of grass is this?',
image: '/vendor/ionic-contrib-swipe-cards/example/www/img/pic2.png'
}, {
title: 'What beach is this?',
image: '/vendor/ionic-contrib-swipe-cards/example/www/img/pic3.png'
}, {
title: 'What kind of clouds are these?',
image: '/vendor/ionic-contrib-swipe-cards/example/www/img/pic4.png'
}];

$scope.cards = Array.prototype.slice.call(cardTypes, 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, TDCardDelegate) {
$scope.goAway = function() {
var card = TDCardDelegate.getSwipebleCard($scope);
card.swipe();
};
})

Add new card functionality breaks swipe animation when card added when card view is not the active view

Adding new cards to the card array while not in the tinder card view breaks the transition out animation when we come to swipe that card. I have made a codepen to show this with add card buttons on the card view and another view. Normally the card smoothly swipes out, but in the case of cards added off view, the animation is incorrect. Any help much appreciated thanks. http://codepen.io/antonfire/pen/xwrjPx

card remains stuck on ipad

if you drag a card out of the screen on an ipad, it remains stucked on the margin of the display

How to have 2 buttons to trigger Like or Nope?

So I created 2 buttons under the cards. I want when click the Nope button, card will slide left without user drag left, same as Like button with card slide right. What function I need to call in the ng-click on my button to achieve that?

Full Screen cards issue

Hi,

I changed the td-card CSS to make the cards fullscreen like this:
td-card { top: 0; left: 0; width: 100%; height: 100%; }
But now each card is a little bit smaller as I go through the stack. I want all cards to be the exact same size, which is my device's width & height.

Any suggestions?

Thank you

Installation instructions

Ionic newbie here, how should one implement this in a new starter app?

Think the setup instructions are to summier for us newbies to get this working.

I did a:
bower install ionic-contrib-tinder-cards

What would be the next step?

What is the recomended way of supporting limited amount of cards?

See also #85

If we have unlimited cards - no problem.

As we have finite amount - accessing third form the end triggers an error (see image attached)

Bug when used inside a "side menu" view

My "swipe cards" ion is inside a tab view inside a "side menu" app.

When I'm testing it on the iOS simulator, displaying the console in the terminal, I observe that if I open the left menu and then close it, the next card I will throw out will cause an error once it leaves.

And starting form that, the "cards" become full of glitches: when I'm trying to drag one, it "flickers", when I move one out, it comes back (with an animation) when I drag the next one (without triggering the log that I inserted in the "onSnapBack()" method).

I do not observe the issue when testing on my browser.

The log in the console:

40    822410   log      DRAG START
41    822410   log      DRAG
42    822616   log      DRAG
[...]
51    822631   log      DRAG
52    822648   log      DRAG
53    823027   log      DRAG END
54    823030   log      RIGHT SWIPE
55    823031   error    Error: Attempted to assign to readonly property.
ChildScope@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:23815:34
$new@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:23958:40
boundTranscludeFn@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:16383:40
controllersBoundTransclude@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:17004:35
ngRepeatAction@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:36019:26
$watchCollectionAction@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:24377:21
$digest@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:24510:31
$apply@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:24778:31
http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:26545:42
completeOutstandingRequest@http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:14221:15
http://192.168.0.29:8100/lib/ionic/js/ionic.bundle.js:14493:33
56    823280   log      DESTRUCTION : 1
57    823281   error    Error: <exactly the same than above>

issue with ionic beta 14

Getting this error after upgrading to ionic beta 14:

Error: [$compile:multidir] Multiple directives [ngController, tdCard] asking for new/isolated scope on: 
<td-card ng-repeat="post in data.posts" on-destroy="cardDestroyed($index)" on-transition-left="cardTransitionedLeft($index)" on-transition-right="cardTransitionedRight($index)" ng-controller="CardCtrl">

card.swipe() not working

As far as I can tell the following should cause the current swipeable card to be swiped off screen, however I can't seem to get it to work. Has anyone had any success with being able to trigger a swipe with this method?

var card = $ionicSwipeCardDelegate.getSwipebleCard($scope);
card.swipe();

Project abandoned?

@driftyco @mlynch Is this project abandoned? It is buggy as hell. I'd love to contribute, but as far as I can see pull requests are ignored and that's demotivating.

opacity like and dislike

Please can you suggest me why Yes and No text opacity is not apply when dragging left and right

isUnderThreshold returns false for a card that didn't moved

isUnderThreshold() doesn't check if the variable this.thresholdAmount exists before computing and ends up returning false when the card hasn't moved, when should return true if anything (if the card hasn't moved yet this.thresholdAmount is undefined).

My use case: I'm using the plug-in with a list of cards (not a "stack"). To do that I create a stack with just one card for each card. I modified the plug-in to use only dragright and dragleft to use only horizontal dragging and allow scrolling. But when I scroll the page, a dragend event is fired and since the card didn't move at all there is no this.thresholdAmount and the value of calling isUnderThreshold() is false. That triggers the onDestroy handler (in my case removing the card) while the card didn't even moved.

I'm submitting a PR to solve this.

bindevents memory leak

With each cards destroyed, the events listener bound to them remains. This cause a memory leak and is quite laggy on android with a lot of cards to swipe.

Drawer Opening as well

When I swipe right the drawer menu opens as well. I guess this is a propagation issue. Not sure how to prevent it though as there is no event to use stopPropagation with.

TypeError: undefined is not an object (evaluating 'collide.animation')

Hi,

I have a big problem in ionic tinder cards.
I can move my cards but the SnapBack don't work.
I don't manage to resolve it.

[Error] TypeError: undefined is not an object (evaluating 'collide.animation') In ionic.tdcards.js, line 308
onSnapBack (ionic.tdcards.js, line 308)
transitionOut (ionic.tdcards.js, line 117)
_doDragEnd (ionic.tdcards.js, line 205)
(fonction anonyme) (ionic.tdcards.js, line 171)

If one of you can help me I paie you a cafe :D
Thx a lot

French Guy with bad english.. Sorry.
Alexy

Cards dont display properly when dynamically fetching image urls on actual devices

@mlynch Please help! I think I need something similar to the $ionicSlideBoxDelegate.update function on the $ionicSwipeCardDelegate to fix issues related to the cards being loaded dynamically. I am not sure how I might achieve this. Let me explain the issues with some screenshots.

I fetch the image urls from an http request on a separate view and then upon touching the "Card" tab, the cards aren't displayed properly. See image below.

Note: If I slightly drag the page itself, the images appear as in the last image below.

Upon refetching the image urls without leaving the "Card" tab, I get something a bit better but not what I expected. See image below.

Then upon navigating to a different tab and then back to the "Card" tab(without refetching image urls), I get what I expected.

Note: If I set scroll=false on the content, these issues go away. However, the swipe functionality is quirky and very sluggish. Both on iOS and Android.

onSwipeLeft & onSwipeRight not called on slow swipes

When a full swipe to the left or right is done very slowly, onDestroy() is called, but onSwipe[Left|Right]() are not called.

Spring animations don't work until one complete cycle of cards

I've tried numerous approaches to resolve this, logged every event possible to find the reason but no luck.

I've copied and pasted the working example even and I have the same result. Array size doesn't matter. The first cycle of cards they can simply be dragged around the screen and on release they transition back to the deck (they're being spliced however because it's a full left/right drag from demo code). After the first swipe of the entire stack, the animations start firing correctly and the 'spring' works Partial swipes animate correctly. It just works well after the first cycle of cards.

Tinder cards inside ion-modal

Hi,

I tried to use ionic tinder cards inside ion-modal.
On browser it's perfect but on mobile it's very sluggish.

The same code in ion-pane run well on both.

Is there a solution to make it work inside ion-modal like in ion-pane?

Thanks,

card flickering on ipad

if you drag a card and then you stop and keep the finger on a certain point you will see that the card will start flickering.

card not returned to its position

Hello EveryOne
I have faced the following issue is that in my Domino Game the card is not return to its original position, you could refer to the following image.

Regards

Draggable elements in card

Adding a range slider in the card (or any other draggable element) will result in not being able to drag this element but only the card.
Is this a bug or shall cards not be able to hold (almost) every other element?

Wrong code on the Tinder Cards (Official) Pen

http://codepen.io/ionic/pen/nxEdH

cardSwipedLeft() and cardSwipedRight() shouldn't be inside CardCtrl, but inside CardsCtrl.

Ability to limit amount of visible cards no matter size of array

If one adds 20 cards to the array, from which cards are looped through, the result is currently 20 cards, all visible, on top of each other. Say I want to load in 50 cards at a time, that quickly becomes an unnecessary amount of screen estate for showing the stack itself.

See example: http://forum.ionicframework.com/t/tinder-cards-stacking-issue/12026

It would be nice with the option to limit the amount of visible cards no matter the size of the whole stack/array. Is this in the pipeline? :)

cardSwipedLeft not fired

Hello
Iam testing the demo but i couldn't found cardSwipedLeft fired, i am working on App that requires to know the swiping direction

Strange behavior on drag cards when fetch a list of "cards" asynchronous

When i start drag the card, he moves to the center.

Code Pen - http://codepen.io/anon/pen/dPRdPj

The only difference between in the example above and the original example, is a "timeout" simulating a call asynchronous to populate the list of cards.

Causing error after the first card is swiped out

Hi,

I am having issues with this library. After swiping the first card out, it keeps printing error on the console:

Uncaught TypeError: Cannot read property 'style' of undefined

The error happens here: ionic.tdcards.js:371

position = card.style.transform || card.style.webkitTransform;

Could you please take a look at this?

Minification troubles

Hi,

I've got some troubles at minification time...
The aProvider is not found... I didn't figure out (from now) which is the aProvider, still searching...

card to fit 100% vertically

I have been trying to resize the card to fit the whole screen (specifically height) but nothing seems to work even tried a flex-box approach, any idea how the d-card can be defined to fit 100% vertically?

Delay between the last "DRAG" and "DRAGEND" events

I got something which looks a lot like the 300ms delay issue: there is a very noticeable latency when I release the card.
I added some logs for all the "dragstart", "drag" and "dragend" events, and there is clearly a pause between the last "drag" event and the "dragend" event.
I observe exactly the same delay here : http://ionicframework.com/demos/swipe-cards/ or here http://codepen.io/ionic/pen/nxEdH
I mainly have tested on the iOS virtual machine, the android virtual machine, my browser (Chrome), and 2 android physical devices through Ionicview.

Missing files in example project

http://localhost:8100/js/ionic.swipecards.js
Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:8100/js/services.js
Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:8100/js/controllers.js
Failed to load resource: the server responded with a status of 404 (Not Found)

Flicker with some cards in the stack during a drag and a "move up"

There is a bug where we are incorrectly "moving up" a card that is really being dragged. That results in a flicker effect as the transform axis is modified in x and y randomly.

Align image at bottom

Hi,

How is it possible to align the images at so they align from the bottom (not the top)?

When images are different sizes, or you want put a box of information below each image, it does not look good.

It isn't possible to do using CSS- I've had a play with the JS without any luck.

Thanks

About collection-repeat and filters on tinder-cards

Nice to meet you all, I'm loic, a french guy working on a wonderfull ridesharing app built with ionic and rails. I'm here for taking advices,

I use ionic-ion-tinder-cards to display trips on a search results. It's working but i would like your advices about the method to work with filters and tinder cards. There will be a lot of cards... and a lot of filters, they will be filtered first by the origin & destination city searched and after by a filter modal.

Questions :

1 - ng-repeat or collection-repeat ?

2 - filters on back-end or on front-end with angular filters ?

3 - any other advice to do it ?

Thank you !! ionic rocks !

Example thoroughly broken

I'm trying to run the example code provided, but it seems to be outdated and broken. It relies on files that don't exist, including swipecards.js. And when I try to fix the code and run it, I still get an empty cards array for some reason. Not sure how to fix this, or I would have updated it and submitted a pull request myself.

isolate scope issue after upgrade

I just upgraded my project to Angular 1.3.8 and ionic beta 14. Almost everything is working except for <td-card> inside <td-cards>. Now my cards do not render at all and I get: https://docs.angularjs.org/error/$compile/multidir and I know it has something to do with the tdCard and tdCards directives both requesting isolate scopes (though it used to work?).

If I remove the following

         scope: {
            onSwipeLeft: '&',
            onSwipeRight: '&',
            onTransitionLeft: '&',
            onTransitionRight: '&',
            onTransitionOut: '&',
            onPartialSwipe: '&',
            onSnapBack: '&',
            onDestroy: '&'
          },

...from the tdCard (child?) directive, the cards render and even still 'swipe' but the behaviors (now undefined) of course don't work.

Any pointers?