Hi,
I’m looking to make a tinder-like swipe left/right app in ionic but new to ionic and angular. I’m wondering if someone has mocked up something like this before? More so than just the swipe left or right, it would be cool to have the click and drag right or left much like Tinder does.
Thanks!
Andrew
Check it this demo that the devs made, right now it works by swiping the cards down, but I’m sure you can get it to work for swipe left and swipe right.
It doesn’t look like there’s any property on the directive itself, so that’s something where we’d either have to modify the directive or clone it and create our own to get horizontal/bi-directional (left and right) swiping, correct?
I’m also interested in a similar interface and am probably willing to do the work to make this happen (I just looked at the github repo and it’s nothing crazy). Would this be something Ionic would be interested in me submitting a pull request for if/when I’m done?
I have built this with ionic. You can create a “Card” directive with event handlers for drag, release, and “exiting” the screen (to keep the card rolling off the page). They should listen to events from the ionic gesture object. Then make a movement service that would move/rotate the card around depending on how far it had been dragged around the screen.
Correct, you would have to modify the directive it self
http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js
As for the PR, probably not, seeing as that project was just an example.
Just an example, sure, but if this is something Drifty’s going to be pointing to as an example, people are going to be using the same code. Why not add a few options - bidirectionality (both up and down) and horizontal vs vertical?
The only thing I’m having trouble with now is getting the status back up to the Controller (in my app). I’m trying to pass a value back up via the onDestroy, but it’s getting lost somewhere. I’m tempted to modify the card object itself (which is accessible from the Controller’s cardDestroyed function). Thoughts?
Note: I’m fairly new to directives/more advanced Angular stuff, so there might be something really dumb I’m missing.
Not really, thats why we have the forum. So people can take these examples and show off their cool work. It’s not something we are going to have built into ionic, more of like an add on or “see what you can do with ionic and angular”
As far as expanding on the directive and example, I can’t really say as I have not looked at it. But it should be as simple as change the threshold for remove the card and changing the drag gesture.
Just my 2 cents here. A demo and/or tutorial on this within the forum would be definitely appreciated! The swipe cards demo is one of the most viewed on codepen. More in general, it would be good advertisement for Ionic since swiping is now really hot.
For what it’s worth, I’m working on a repo that allows both bi-directioal swiping on cards (up and down) as well as horizontal swiping (left and right). I’ve also added code to modify the card object when one is swiped away so you can check which side it left (positive or negative) in your controller. Github repo here: https://github.com/borego/ionic-contrib-swipe-cards (check the different branches).
Next steps for me is to create attributes on the directive that let the user decide vertical v. horizontal and one direction v. two.
cc/ @elia
That sounds great @bradorego, thanks for sharing! I’ll be testing this asap and hopefully give feedback.
Another thing on this, on line 65-67 a stacking effect should be produced, but you cannot see any stacking on the codepen demo. Have you perhaps managed to produce such stack (say, 3, 4 cards piled behind the actual card to drag)?
This went old actualy. @bradorego’s code gets broken for ionic 1.0x and afterwards.
I’m working on updating it to 1.x right now.
Ah. That would explain why it’s working locally and not up in elia’s pen. I just forked the repo and made the changes there. Looks like they haven’t updated the ionic version in the repo in awhile (though it looks like they keep updating the pen). Hmm.
I forked the project, made the changes and the commits, but now I can’t commit to @bradorego’s remote. Do you know if I can do it into my own repo? I’m not that knowledgeable on contributing to projects on github.
If that’s too hard I can also make a zipfile.
Thks!
You won’t be able to commit to my repo unless I give you permission. As I understand it, the way github usually works is you’d want to fork the repo, create your own branch, make the changes in your repo on that branch, then submit a pull request back to the repo you forked for the branch you created.
I feel like these changes should be reflected in the source repo I forked, but I mentioned that above and they don’t seem too interested in maintaining that repo, so I’d be more than happy to start maintaining it as the most up-to-date/fully-featured one.
I really wished the Ionic guys would put more emphasis on providing components like this as well as things like accordion, etc. They have done some great work but they seem to resist adding more components that are a given in other frameworks. In fact, some of which, people just expect to see.
Ok then… pushed to my own and created a pull request. @bradorego @elia
Here’s my git repo, branch is horizontal_swipe
Well done, codepen is working now! http://codepen.io/eliabruni/pen/vKajt
Still some refinements to do it seems, such as left being a bit buggy wrt right. Gonna test it the incoming days… thanks to @bradorego and @aeromgk for the great work, and a big +1 about @bradorego maintaining this code.
Have you tried it with the updated version @aeromgk just posted? I pulled his changes into my repo and @elia has a working pen of it in this thread as well.
The updated version works with 1.x and has support for bi-directional swiping as well as horizontal vs vertical. The cards also tell you which way they were swiped (positive or negative) when they’re destroyed.
The next thing I want to do is add attributes on the directive to allow you to decide if you want bidirectional and/or if you want horizontal vs vertical, but right now you’ll have to make the change in code. I have branches set up to show the differences.