ionic-team / ionic-ion-swipe-cards Goto Github PK
View Code? Open in Web Editor NEWSwipeable card based layout for Ionic and Angular
License: MIT License
Swipeable card based layout for Ionic and Angular
License: MIT License
When card is swiped right or left or to the top, the answer,decline buttons wont work. Please fix
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:
Hope you understood my issue. LOOOVE the IONIC framework!
P.S horisontal swipes can be nice as well
Hi, how can I change the way of swiping the cards on right or left pls ?
Thanks.
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 ?
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?
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?
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
I have a api and i want to fetch my posts in the form of cards.
this is the link to API
http://emailnirdeshak.com/preparationbench/api/get_recent_posts/
Also I don't want in random order, instead i want in either ascending or descending order.
Thanks
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.
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.
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:
[Error] Error: 'undefined' is not a function (evaluating 'swipeCards.pushCard(swipeableCard)')
http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5:297:30
http://localhost/bower_components/angular/angular.min.js:68:126
U@http://localhost/bower_components/angular/angular.min.js:68:178
C@http://localhost/bower_components/angular/angular.min.js:57:360
g@http://localhost/bower_components/angular/angular.min.js:50:20
http://localhost/bower_components/angular/angular.min.js:49:128
http://localhost/bower_components/angular/angular.min.js:50:509
k@http://localhost/bower_components/angular/angular.min.js:54:503
link@http://localhost/bower_components/angular/angular.min.js:231:181
http://localhost/bower_components/angular/angular.min.js:68:126
U@http://localhost/bower_components/angular/angular.min.js:68:178
C@http://localhost/bower_components/angular/angular.min.js:57:360
g@http://localhost/bower_components/angular/angular.min.js:50:20
C@http://localhost/bower_components/angular/angular.min.js:57:304
g@http://localhost/bower_components/angular/angular.min.js:50:20
g@http://localhost/bower_components/angular/angular.min.js:50:37
http://localhost/bower_components/angular/angular.min.js:49:128
http://localhost/bower_components/angular/angular.min.js:18:145
$eval@http://localhost/bower_components/angular/angular.min.js:121:193
$apply@http://localhost/bower_components/angular/angular.min.js:121:413
http://localhost/bower_components/angular/angular.min.js:18:107
e@http://localhost/bower_components/angular/angular.min.js:36:220
d@http://localhost/bower_components/angular/angular.min.js:18:28
kc@http://localhost/bower_components/angular/angular.min.js:18:317
Ad@http://localhost/bower_components/angular/angular.min.js:17:131
http://localhost/bower_components/angular/angular.min.js:241:154
j@http://localhost/bower_components/jquery/dist/jquery.min.js:2:27129
fireWith@http://localhost/bower_components/jquery/dist/jquery.min.js:2:54631
ready@http://localhost/bower_components/jquery/dist/jquery.min.js:2:29742
I@http://localhost/bower_components/jquery/dist/jquery.min.js:2:29927
My html the quite obviously does have the proper nesting of the swipe-card directives nested within swipe-cards:
<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.
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?
When I swipe out, instead of removing from the list, go back to the end of the list
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 drag
event fires only once, i tried with different configurations without any succeed.
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?
With the update to Angular, the swipecards
variable is not passed and therefore
swipeCards.pushCard(swipeableCard);
triggers a fatal error.
Would be nice to install through bower.
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 cardNeed help in fixing the issue. I used the same css mentioned in the https://devdactic.com/swipeable-cards-ionic/
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
I dont know if it is because of the new version of ionic, but the transitions are very strange in my project. Not popping up and everything.
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?
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
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 either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.17/$injector/nomod?p0=ionic.contrib.ui.cards
at http://localhost:2000/lib/ionic/js/ionic.bundle.js:7649:12
at http://localhost:2000/lib/ionic/js/ionic.bundle.js:9210:17
at ensure (http://localhost:2000/lib/ionic/js/ionic.bundle.js:9134:38)
at module (http://localhost:2000/lib/ionic/js/ionic.bundle.js:9208:14)
at http://localhost:2000/lib/ionic/js/ionic.bundle.js:11382:22
at Array.forEach (native)
at forEach (http://localhost:2000/lib/ionic/js/ionic.bundle.js:7891:11)
at loadModules (http://localhost:2000/lib/ionic/js/ionic.bundle.js:11376:5)
at http://localhost:2000/lib/ionic/js/ionic.bundle.js:11383:40
at Array.forEach (native)
http://errors.angularjs.org/1.2.17/$injector/modulerr?p0=ionic.contrib.ui.cā¦%2Fionic.bundle.js%3A11383%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
at http://localhost:2000/lib/ionic/js/ionic.bundle.js:7649:12
at http://localhost:2000/lib/ionic/js/ionic.bundle.js:11410:15
at Array.forEach (native)
at forEach (http://localhost:2000/lib/ionic/js/ionic.bundle.js:7891:11)
at loadModules (http://localhost:2000/lib/ionic/js/ionic.bundle.js:11376:5)
at http://localhost:2000/lib/ionic/js/ionic.bundle.js:11383:40
at Array.forEach (native)
at forEach (http://localhost:2000/lib/ionic/js/ionic.bundle.js:7891:11)
at loadModules (http://localhost:2000/lib/ionic/js/ionic.bundle.js:11376:5)
at createInjector (http://localhost:2000/lib/ionic/js/ionic.bundle.js:11316:11)
http://errors.angularjs.org/1.2.17/$injector/modulerr?p0=starter&p1=Error%3ā¦3A%2F%2Flocalhost%3A2000%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A11316%3A11) ionic.bundle.js:7649
It would be nice for the library to support swipe action in any direction, so we could bind other actions and build an UI around that.
Very nice performance by the way. Glad to see somebody actually making something feel native using HTML5.
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.
TypeError: undefined is not a function
at angular.module.directive.compile (http://localhost:8100/js/vendor/ionic.swipecards.js:297:22)
at http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:101:300
at Z (http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:101:356)
at J (http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:90:484)
at g (http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:83:9)
at http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:82:118
at $get.l (http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:83:497)
at k (http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:88:62)
at http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:266:148
at Object.fn (http://localhost:8100/lib/ionic/js/ionic.bundle.min.js:153:53)
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.
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?
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!
Doesn't work with ionic v1.0.0-beta7
i cloned the source, switch ionic to v1.0.0-beta7 and now it doesn't work..
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
Just to name a few...
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 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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ššš
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ā¤ļø Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.