Promatically swipe cards #49

steveacalabro · 2015-02-04T00:17:19Z

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

keithdmoore · 2015-02-04T00:39:12Z

I believe this broke when using beta 14

steveacalabro · 2015-02-04T20:23:50Z

Do you know around which commit that was. I want to take a look at the code

keithdmoore · 2015-02-04T20:35:13Z

ionic beta14 release. The example in this library moved the CardCtrl to a div below to resolve a problem with multiple scopes. When I tried this, it was very buggy and unusable. I changed my implementation to place the remove the CardCtrl and move the functions to my view controller instead. In doing so, I lost the ability to use the TDCardDelegate.getSwipeableCard.

steveacalabro · 2015-02-05T19:49:03Z

The code behind this issue is quite confusing. I am not sure where the disconnect between the swipecard project and this one is. It seems like a bunch of methods to obtain this that could be quite useful have been removed or do not work. Such as popCard, swipeRight, swipeLeft and of course the ability to get the swipeableCard is much different. Is there a reason behind this?

julienroubieu · 2015-02-05T20:10:29Z

I'm interested in this too.
Here's my a simple CodePen showing my issue: the delegate cannot find the current card reference.
http://codepen.io/julienroubieu/pen/QwONKP

keithdmoore · 2015-02-05T20:59:38Z

@mlynch @steveacalabro Max would have to answer that question. I am merely a user and contributor to the libraries.

steveacalabro · 2015-02-05T21:44:33Z

I think I might have a fix to this problem. It changes up the td directive and how you call it a bit though. I am testing it now

Neema · 2015-02-12T04:21:28Z

Any updates on this issue? Was anyone able to get it working?

ariera · 2015-02-26T14:47:05Z

+1 for a solution to this problem :)

fsbatista · 2015-03-05T21:55:42Z

+1

th3om1c · 2015-03-16T13:31:03Z

+1

henrythe9th · 2015-04-17T06:20:01Z

Any updates on this issue? Thanks!

grillorafael · 2015-04-24T19:41:03Z

When I do a

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

I receive the following error

TypeError: Cannot read property 'gesture' of undefined
    at ionic.views.View.inherit.transitionOut (ionic.tdcards.js:144)
    at ionic.views.View.inherit.swipe (ionic.tdcards.js:117)
    at Scope.CardCtrl.$scope.accept (pending.controller.js:9)
    at $parseFunctionCall (ionic.bundle.js:20981)
    at ionic.bundle.js:53299
    at Scope.$get.Scope.$eval (ionic.bundle.js:23037)
    at Scope.$get.Scope.$apply (ionic.bundle.js:23136)
    at HTMLButtonElement.<anonymous> (ionic.bundle.js:53298)
    at HTMLButtonElement.eventHandler (ionic.bundle.js:11650)
    at triggerMouseEvent (ionic.bundle.js:2863)

It seems that swipe method calls transitionOut that receives an Event parameter (In that case, undefined)

julienroubieu · 2015-05-04T19:23:11Z

I've been working on getting this to work for my current project.
My solution is there: https://github.com/julienroubieu/ionic-ion-tinder-cards
I've created a demo there: http://codepen.io/julienroubieu/pen/mJeJJE, with the usual 2 buttons to swipe cards.

I'm not sure at all this was the best or the "Angular" way to do it, but it's working nicely.
I've made quite a bunch of modifications so I'm not sure if a pull request can be considered. Let me know.

I've noticed some issues with sorting the cards when pushing new ones, sometimes causing a swipe of the one that is not on top. In my case it's not an issue since the deck I show is fixed, but tell me if you know the cause of this issue.

julienroubieu · 2015-05-04T19:25:27Z

@grillorafael Yes, I had the same issue and needed to update transitionOut() to do manual swipes without an Event.

hughred22 · 2015-05-08T06:33:44Z

+1 For a usable solution as well.

grillorafael · 2015-05-08T14:22:33Z

@julienroubieu I've tested your solution and it worked very well.

shprink · 2015-05-08T14:56:57Z

I made a version with handle and programatic swipe that return promises:

https://github.com/Bixev/ionic-ion-tinder-cards

bower install Bixev/ionic-ion-tinder-cards --save

Adding delegate-handle to have several instances

<td-cards delegate-handle="friends">

Get the card on top

TDCardDelegate.$getByHandle('friends').getFirstCard()

Get any card

TDCardDelegate.$getByHandle('friends').cardInstances[index]

Promatically swipe left (return a promise)

TDCardDelegate.$getByHandle('friends').getFirstCard().swipe('left')

With a promise you could for example disabled buttons when a card is swipping.

$scope.swipeLeft = function(e) {
    $scope.isAnimating = true;
    TDCardDelegate.$getByHandle('friends').getFirstCard().swipe('left').then(function() {
        $scope.isAnimating = false;
    });
};

I did not put too much effort, and it is not fully tested but it works so far. Feel free to get some of the code it you feel there is interesting stuff to keep.

Cheers

nileshlg2003 · 2015-05-12T10:57:37Z

@shprink , I tried your solution. It works great on web page but When I try it on Android phone It throws error on this line ,

TDCardDelegate.$getByHandle('friends').getFirstCard().swipe('left').then(function() {

This is the error,

ReferenceError: Promise is not defined
    at ionic.views.View.inherit.swipe (file:///android_asset/www/lib/ionic-contrib-tinder-cards/ionic.tdcards.js:118:28)
    at Scope.$scope.noClick (file:///android_asset/www/js/controllers.js:602:61)
    at $parseFunctionCall (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:20270:18)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:52468:9
    at Scope.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:22326:28)
    at Scope.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:22425:23)
    at HTMLButtonElement.<anonymous> (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:52467:13)
    at HTMLButtonElement.eventHandler (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:10939:21)
    at triggerMouseEvent (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:2856:7)
    at tapClick (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:2845:3)

shprink · 2015-05-23T04:12:36Z

@nileshlg2003 fixed. https://github.com/Bixev/ionic-ion-tinder-cards

paul-ylz · 2015-11-25T22:02:19Z

@shprink this is brilliant! Thanks so much.

shprink · 2015-11-25T22:11:27Z

@paul-ylz do not get too excited, this was just for fun and it is not maintained :) Feel free to fork and go further

yarnball · 2015-12-20T14:37:24Z

How are people currently doing this? I cannot get @julienroubieu example working (and ideally I just need some custom directive .

As @shprink isn't maintaining his folk- would love another simple solution. Thx

georgethomas2015e · 2017-05-13T07:04:46Z

@shprink can this work with ionic 2 and angular 2, thanks

shprink · 2017-05-13T15:17:59Z

probably not

keithdmoore mentioned this issue Feb 13, 2015

What is the purpose of TDCardDelegate ? #43

Open

shprink mentioned this issue May 8, 2015

How to have 2 buttons to trigger Like or Nope? #64

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Promatically swipe cards #49

Promatically swipe cards #49

steveacalabro commented Feb 4, 2015

keithdmoore commented Feb 4, 2015

steveacalabro commented Feb 4, 2015

keithdmoore commented Feb 4, 2015

steveacalabro commented Feb 5, 2015

julienroubieu commented Feb 5, 2015

keithdmoore commented Feb 5, 2015

steveacalabro commented Feb 5, 2015

Neema commented Feb 12, 2015

ariera commented Feb 26, 2015

fsbatista commented Mar 5, 2015

th3om1c commented Mar 16, 2015

henrythe9th commented Apr 17, 2015

grillorafael commented Apr 24, 2015

julienroubieu commented May 4, 2015

julienroubieu commented May 4, 2015

hughred22 commented May 8, 2015

grillorafael commented May 8, 2015

shprink commented May 8, 2015

nileshlg2003 commented May 12, 2015

shprink commented May 23, 2015

paul-ylz commented Nov 25, 2015

shprink commented Nov 25, 2015

yarnball commented Dec 20, 2015

georgethomas2015e commented May 13, 2017

shprink commented May 13, 2017

Promatically swipe cards #49

Promatically swipe cards #49

Comments

steveacalabro commented Feb 4, 2015

keithdmoore commented Feb 4, 2015

steveacalabro commented Feb 4, 2015

keithdmoore commented Feb 4, 2015

steveacalabro commented Feb 5, 2015

julienroubieu commented Feb 5, 2015

keithdmoore commented Feb 5, 2015

steveacalabro commented Feb 5, 2015

Neema commented Feb 12, 2015

ariera commented Feb 26, 2015

fsbatista commented Mar 5, 2015

th3om1c commented Mar 16, 2015

henrythe9th commented Apr 17, 2015

grillorafael commented Apr 24, 2015

julienroubieu commented May 4, 2015

julienroubieu commented May 4, 2015

hughred22 commented May 8, 2015

grillorafael commented May 8, 2015

shprink commented May 8, 2015

Adding delegate-handle to have several instances

Get the card on top

Get any card

Promatically swipe left (return a promise)

nileshlg2003 commented May 12, 2015

shprink commented May 23, 2015

paul-ylz commented Nov 25, 2015

shprink commented Nov 25, 2015

yarnball commented Dec 20, 2015

georgethomas2015e commented May 13, 2017

shprink commented May 13, 2017