ionic-team / ionic-ion-swipe-cards Goto Github PK

View Code? Open in Web Editor NEW

355.0 37.0 134.0 11.71 MB

Swipeable card based layout for Ionic and Angular

License: MIT License

JavaScript 83.03% Java 0.30% Objective-C 0.49% C++ 0.17% C# 0.16% CSS 15.84%

ionic-ion-swipe-cards's Introduction

Ionic Contrib: Swipeable Cards

Swipeable card based layout for Ionic and Angular. As seen in apps like Jelly

Demo

Usage

Include ionic.swipecards.js after the rest of your Ionic and Angular includes. Then use the following AngularJS directives:

<swipe-cards>
  <swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)">
    Card content here
  </swipe-card>
</swipe-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-swipe-cards's People

Contributors

Stargazers

Watchers

Forkers

biddyweb adrichman thaiat wenguo571 marcelabomfim darylrowland bradorego dalewebb guinetik cevic colibri-software otechnology sksedghi augiekaz codecloudme bentaly carlosrojaso spacewolf21 findigital snaas john-banks techycode srameshr phileaswong aabilio bonbonpiment jyek cihejimba bab55z bacanapps lumiscript jianbo mixersoft ozerozay karlwinter iduducohen fitbodylife sn0opr rungsan kamalkrjain edsonf michikono manjunathkg miguelramosfdz javee-armadillo eduals mkurdyk amir-shah hybrid-force rubenjpmartins elaineglennon kevinmcalear scottsnkwcz1 fagnerdireito ramanan12345 coolwp shiyanghuang sherlock221 loringdodge xxpro gexplorer cristoferdomingues miznokruge chunfengd nicolasanastassacos jeremy017 ionic-rising sigh0829 nakaz aan9 lbriones bdgamble 253681319 helsont gummie4444 alexflanagan jryderrichardson huygun jakxz scottspittle bpshonyak tipsy-and-tumbler-ltd kulkarnirakesh szforward liqingzhu kjb14d monsuratolaosebikan billymahmood rulanino chintak86 webappventures wqzgh hungtrinh adammendoza estudoslivres 19317362 harikasabbella rongfengliang langman15 psarmmiey

ionic-ion-swipe-cards's Issues

Doesn't work on ionic beta 12

Doesn't work on current ionic framework version; got:

Uncaught TypeError: Cannot read property 'ViewController' of undefined ionic.swipecards.js:26(anonymous function) ionic.swipecards.js:26(anonymous function) ionic.swipecards.js

Is there a way to go to previous card when swiping up?

Is there a way to go to previous card when swipping up and reseating the card when at the first card and swiping up or at the last card and swiping down?

I'm testing this swipe cards solution inside the Titanium cross platform, as a webview page, and always it was crashing while encrypting the JS files, so after a while I took out all the \lib\ionic\js\angular and angular-ui files and it's working now.
Don't know if it's a Titanium bug, but doing the same thing on a computer browser the demo works fine.

just can't get this to work... always get an error in the directive for swipe-card

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:
(line 297)
...
compile: function(element, attr) {
return function($scope, $element, $attr, swipeCards) {
var el = $element[0];
...

Cearly the swipe-card directive requires that it is contained within a swipe-cards(plural) directive.. and it is as i've only copy-pasted the example... so I always get this error:

(anonymous function) (angular.min.js, line 99)
(anonymous function) (angular.min.js, line 74)
U (angular.min.js, line 68)
C (angular.min.js, line 57)
g (angular.min.js, line 50)
(anonymous function) (angular.min.js, line 49)
(anonymous function) (angular.min.js, line 50)
k (angular.min.js, line 54)
link (angular.min.js, line 231)
(anonymous function) (angular.min.js, line 68)
U (angular.min.js, line 68)
C (angular.min.js, line 57)
g (angular.min.js, line 50)
C (angular.min.js, line 57)
g (angular.min.js, line 50)
g (angular.min.js, line 50)
(anonymous function) (angular.min.js, line 49)
(anonymous function) (angular.min.js, line 18)
$eval (angular.min.js, line 121)
$apply (angular.min.js, line 121)
(anonymous function) (angular.min.js, line 18)
e (angular.min.js, line 36)
d (angular.min.js, line 18)
kc (angular.min.js, line 18)
Ad (angular.min.js, line 17)
(anonymous function) (angular.min.js, line 241)
j (jquery.min.js, line 2)
fireWith (jquery.min.js, line 2)
ready (jquery.min.js, line 2)
I (jquery.min.js, line 2)

My html the quite obviously does have the proper nesting of the swipe-card directives nested within swipe-cards:

Help Out

<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>

Please throw me a bone here... 8 hours in and I can't get a cut-and-paste of the example to work at all.

The Swipe doesn't work with Android 4.1.2 and 4.0.4

The swipe in the cards doesn't work in this versions of Android 4.1.2 and 4.0.4, but in 4.4.2 version it works perfect.

This the the debug in 4.4.2
http://i.imgur.com/bSzYWWy.png?1

And this is in 4.1.2
http://i.imgur.com/Aeg05bt.png?1

Any idea?

regret swipe after started

First, I really love this swipe card script! its AWESOME!!

Card swipes despite I move the card back up (after regret swiping), please see referance of a good feeling slider with the ability to regret triggering swipe

https://github.com/bradbirdsall/Swipe/blob/master/swipe.js

several comments about behabior:

can do fast swipes (even if the distance between start and end is small)
when distance is short and the speed is slow it won't swipe
when start swiping and swipe back cancel swipe (unless the distance back is too short)

Hope you understood my issue. LOOOVE the IONIC framework!

P.S horisontal swipes can be nice as well

Enable Sourcegraph

I want to use Sourcegraph for ionic-ion-swipe-cards code search, browsing, and usage examples. Can an admin enable Sourcegraph for this repository? Just go to https://sourcegraph.com/github.com/driftyco/ionic-ion-swipe-cards. (It should only take 30 seconds.)

Thank you!

Swift left or right

Hi, how can I change the way of swiping the cards on right or left pls ?

Thanks.

The rAF function typo (?)

In trying to get the demo to work locally, I kept noticing the console showing issues with the window.rAF function not being found. So I snoop around and find that there IS a window._rAF function. I added the underscore in 3 places in the ionic.cards.js file starting at line 211 as below, and now it works.

Android pre-5.0 rendering issues

I wrote up a forum post here, but I'd love to hear any recommendations on how to resolve this:

http://forum.ionicframework.com/t/android-rendering-woes-blurry-pre-5-0-only/19207

In a nutshell, on some Android devices pre-5.0, specifically I've tested 4.4.4 on both Genymotion images and real hardware, occasionally the swipecards render in a manner that could aptly be described as "obliterated". Sometimes swiping away and back again resolves it. Sometimes it doesn't.

Sometimes the card is rendered not quite as obliterated, but the text has anti-aliasing issues -- this seems to be a common issue with -webkit and transform3d

Adding card to back of stack

I am struggling to add a card, that is, hard coded into the html, that appears at the back of the stack. Even if I put my after the "card in cards" set of cards, it still appears first. Any ideas on how to do this?
Thanks,
Tom

Very low quality plugin (not useable for anything useful)

It is just me or are there so many issues with this plugin, I don't mean to be mean but this really not in a state to be used by anyone or is there a good fork somewhere

Adding cards dynamically the order is messed up
The new cards dont appear in a stack properly
There are no methods for swiping left or right programmatically
There are glitches everywhere
The onSwiped method is called inconsistently, sometimes not at all
Adding a new card like in the example really messes order up, animation happens sporadically

Just to name a few...

Breaks in 0.0.12

@mlynch

When my app gets booted up. the below error arises

Uncaught TypeError: Cannot read property 'ViewController' of undefined

The error arises from this line in swipecards.js

var SwipeableCardController = ionic.controllers.ViewController.inherit

Has the object name ionic.controllers changed to something? Or is it because ionic module not being injected?

Problem using with Side Menu

I am using this directive with a side menu at the same time. I have ion-side-menu-content(drag-content="false")and `ion-content.has-header(scroll="false")``

The problem is that the dragevent fires only once, i tried with different configurations without any succeed.

Xcode code signing error

With a recent Xcode update it seems certain executable files cause code signing to fail.

When submitting to the app store, this error is given. Removing the file and re-building fixes the error and submission is successful.

ERROR ITMS-90035: "Invalid Signature. Code object is not signed at all. The binary path [MyApp.app/www/lib/ionic-ion-swipe-cards/example/hooks/after_prepare/010_add_platform_class.js] contains an invalid signature..."

Easy solution may be to ignore the "example" folder in bower.json?

memory leak in SwipeCardController

Here's a codepen.io demo that uses the latest from this repo.

Open the console, inside the pushCard function I'm dumping this.cards and you'll see it grows on each swipe. I have a modified version of this component locally and I noticed the leak, and wanted to ensure it was a bug in the component and not something I added. It is the former.

It looks like you just aren't calling popCard in concert with a swipe event. I'm looking at a way to resolve it.

Can't get working with ionic.js v0.9.25

When I try and integrate with my project that's using 0.9.25 the swiping action doesn't work - throws up this error:

Uncaught TypeError: Object [object global] has no method 'rAF'

Reverting back to ionic.js 0.9.22-alpha fixes it, but then that causes a whole host of other problems with my project.

edit: 0.9.26 showing the same problem.

Help!

Is there any way to make it circular?

When I swipe out, instead of removing from the list, go back to the end of the list

Card pops up but does not follow finger...

I have this problem where the cards are swipable but do not follow the finger like they follow the mouse pointer in the browser.

Anyone else encountered this problem?

getSwipebleCard works only once

When using the following code in the show controller:

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

it only works once, every other call will not make the current card swipe.

Not working on ionic framework beta 14

New Problems with beta.12

I have just updated to the new beta.12 version of Ionic and some errors have appeared regarding the ionic.swipecards plugin.

First i am receiving the following message:
Uncaught TypeError: Cannot read property 'ViewController' of undefined
on ionic.swipecards.js:26

the line reads: "var SwipeableCardController = ionic.controllers.viewController.inherit({"
so I am guessing the ionic.controllers has somehow change

further to this I also receive the following message which crushes the app completely:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ionic.contrib.ui.cards due to:
Error: [$injector:nomod] Module 'ionic.contrib.ui.cards' is not available! You......1)

I am guessing the two issues are related but cant figure out how to resolve the problem, any suggestions?

What all can i put on my cards?

example shows title and image... what if i want to have just html? like form elements? maybe i want like a multi-step form that one can just complete each step and swipe. is that possible? i don't see it discussed anywhere... or is it only title and image and that's it?

Move each card 5 pixels down to give a nice stacking effect (max of 3 stacked)

Noticed this comment in the code and a card offset var, but its never used.
// Move each card 5 pixels down to give a nice stacking effect (max of 3 stacked)
This would really be a cool feature. Really surprised you haven't converted this to use Collide. Or is that coming ?

ionic-ion-swipe-cards not working

Hey,

Here are my controllers
myApp.controller('MyCardsCtrl', function($scope, $http, $ionicSwipeCardDelegate) {

console.log('MyCardsCtrl');

$scope.cards = [];

$scope.addCard = function(img, name) {
var newCard = {image: img, title: name};
newCard.id = Math.random();
$scope.cards.unshift(angular.extend({}, newCard));
};

$scope.addCards = function(count) {
$http.get('http://api.randomuser.me/?results=' + count).then(function(value) {
angular.forEach(value.data.results, function (v) {
$scope.addCard(v.picture.medium, v.email);
});
$scope.showCards = true;
console.log($scope.cards);
});
};

$scope.addCards(1);

$scope.cardSwiped = function(index) {
$scope.addCards(1);
console.log('cardSwiped');
console.log($scope.cards);
};

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

myApp.controller('MyCardCtrl', function($scope, $ionicSwipeCardDelegate) {
$scope.doAnything = function() {
var card = $ionicSwipeCardDelegate.getSwipeableCard($scope);
card.swipe();
};
});

below is my html content

Swipe down for a new card

Like Disklike

Need help in fixing the issue. I used the same css mentioned in the https://devdactic.com/swipeable-cards-ionic/

Also I don't want in random order, instead i want in either ascending or descending order.

Thanks

When card is swiped right or left or to the top, the answer,decline buttons wont work

When card is swiped right or left or to the top, the answer,decline buttons wont work. Please fix