gajus / angular-swing Goto Github PK
View Code? Open in Web Editor NEWAngularJS directive for Swing: A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.
License: Other
AngularJS directive for Swing: A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.
License: Other
Hi,
you've shown methods on how to add and remove cards but these methods only work if the cards are untouched.
I would like to be able to remove these cards on the throw out event handler. Is there a function like
$scope.card[0].destroy()?
Thanks
I tried to install by bower install angular-swing --save
, but bower throws two errors:
bower invalid-meta The "description" is too long, the limit is 140 characters
bower invalid-meta The "main" field cannot contain minified files
The specification for bower.json
files is here https://github.com/bower/spec/blob/master/json.md
The requirements might have been changed just recently, thought I'm not sure as I'm fairly new to this.
I've got an application using the sample cards demo sitting here.
If you try it out on your phone (or using Chromes dev tools and set it to emulate a phone screen) you can see that the throwout distance is pretty far. I'm using the same controller code as is in the demo as you can see here.
I'm wondering how we can set the configs as is referenced here? I'd like to be able to adjust the distance so it doesn't just sit outside the stage but instead disappears.
In your example, after adding/removing a card, the $scope.$digest()
needs to be called. Otherwise changes are not reflected, at least in Angular 1.4 in my case..
card.throwOut
is not animating the card.
Hi my friend. Very nice job! :)
I try remove cards in throw-confidence example, without use angular, but not have sucess.
Has one method like "stack.remove(cardElement)" ?
Don't have too much experiente in Angular, i'm a newbie in javascript...rsrs
I'm Brazilian. Sorry for my bad english language.
Does this support AngularJS 4?
Hi,
I'm new to node js. How can I generate a server that can run the index.html example file?
Thanks.
The plugin doesn't work for me. I'm using Angular 1.4.8. ANy ideas?
Awesome directory - very useful - thanks!!!
I have two questions:
I'm using angular swing in an ionic app. It works perfectly so far. But currently I have the issue that I can't throw out cards in any direction. They just snap back. I only can throw cards out, if I touch them on the outmost edge in the opposite direction of which I'm throwing.
Is it possible to set a minimum distance a card has to be dragged to count as thrown out?
I hope I expressed my problem correctly :)
Thanks in advance!
Hey,
Thanks for the great plugin! I see you added the allowedDirections
in v4, do you plan to bring that to this library? Would be much appreciated :)
It would be great if we could specify a sort, rather than automatically having the list of cards be reversed. This would be particularly helpful when the data backing the cards is used elsewhere on the page.
It would be cool if there were a way to access the methods to trigger throwing the objects from a directive. So that you could easily place links to throw to the left or right.
First of all, this is a great angular module and works perfectly as intended.
I have a couple of concerns, and I hope you help me in pointing me in the right direction..
I noticed there is a bunch of methods for configuring and automating the swiping of cards in the main Swing repo...is it possible with this module?
Hi,
I'd like to implement angular-swing into an angularJs webapp but i can't get it to work.
If i test the example on chrome in ipad simulator the throwoutdistance seems endless and in my own app I implemented the html in the way the instructions describe with the swing-options and a cardstack object with 3 objects.
But when I test it in the ipad simulator in chrome dev tools, the cards jump to a random position on click (or perhaps dragstart)
I wonder if i missed something, or misconfigured anything.
Is there some requirement for the css of the stack and cards? (u> and li)
<ul class="swipeimgholder swipestack" swing-stack swing-options="swingoptions">
<li ng-repeat="qs in quickswipes track by $index"
swing-card
swing-on-throwout="throwout($index)"
swing-on-throwoutleft="throwoutleft()"
swing-on-throwoutright="throwoutright()"
>
<img class="swipeimg" src="{{qs.img}}">
</li>
</ul>
$scope.cards= [
{
img: 'http://placekitten.com/300/400',
question: 'Where is that pussy cat?',
antwoord: null
},
{
img: 'http://placekitten.com/400/400',
question: 'is this a dog?',
answer: null
},
{
img: 'http://placekitten.com/300/400',
question: 'Is this a kitty cat?',
answer: null
}
$scope.swingoptions = {
throwOutConfidence: function (offset, element) {
console.log('throwOutConfidence', offset, element.offsetWidth);
return Math.min(Math.abs(offset) / element.offsetWidth, 1);
},
isThrowOut: function (offset, element, throwOutConfidence) {
console.log('isThrowOut', offset, element.offsetWidth, throwOutConfidence);
return throwOutConfidence === 0.5;
}
};
/*quickswipe*/
.bigpicturebox
{
border:1px solid black;
width:100%;
height:60%;
text-align:center;
}
.swipeimgholder
{
margin:0 auto;
width:400px;
height:400px;
border:2px solid lime;
}
.swipeimg
{
width:100%;
height:auto;
}
Is it possible to ignore swiping vertical or horizontal and let swipe card element retrieve event?
I want make throw out with button exactly as Tinder in controller $scope
Hi,
I was trying to destroy a card but getCard method doesn't exist in stack.
stack = stack = gajus.Swing.Stack();
card = stack.getCard(index.target);
card.destroy();
I can detect swing right and I'm calling:
onThrowOut(event: any) {
if (event.throwDirection === Direction.RIGHT)
{
const targetId = Number(event.target.id);
const targetCampain = this.ads.find(ad => ad.id === targetId);
this.openCampaign(targetCampain);
}
}
to perform a task but i want to keep the card in the stack.
On swing left i want to remove the card.
So how can i keep the card in stack after the throwOut right is detected?
I'm creating an initial stack of cards and want to add a new card at the bottom of the stack to replace a card that has been thrown out. Is there a way of achieving this?
Here is the function I'm using. Currently cards are being added at the top of the stack. Using $scope.stack.push
instead of unshift
also produces the same result.
$scope.addCard = function(name) {
$scope.stack.unshift({
'name': name
});
};
Hi,
are there any plans to support the angular version? There is really need for..
After merging #15 you can't throw out card. After merging #19 library is not working at all - you can not play with cards.
Steps to reproduce:
npm i
On develop everything is working fine. I updated angular version to 1.4.7 in bower.json file on develop and everything is still okay.
Sorry to saying that, but everything is broken after recent changes from @marcelaraujo :( Anyway, swing is so cool library.
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.