gajus/angular-swing

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.

angular-swing's Issues

Destroying cards / fading them out

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

bower install error due to description length and 'main' field containing minified files

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.

Setting config variables in AngularJS web app

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.

Needs $scope.$digest()

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: animation is not working.

card.throwOut is not animating the card.

Remove/Add random cards in throw-confidence example

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.

AngularJS 4 support

Does this support AngularJS 4?

Newbie way to run the example

Hi,
I'm new to node js. How can I generate a server that can run the index.html example file?
Thanks.

Unknown provider: tProvider <- t <- swingStackDirective

The plugin doesn't work for me. I'm using Angular 1.4.8. ANy ideas?

How to change throwOutDistance and trigger the throwout event from an angular app?

Awesome directory - very useful - thanks!!!

I have two questions:

1. I need a smaller throwOutDistance, what is the best way to change it?
2. I also need to be able to connect 2 (yes/no)-buttons to the throwout event, how can I do this in an angular app?

Can't throw out cards on iPhone

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!

Swing v4

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

Implement ability to control the sorting

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.

Create a way to access the methods from a directive

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.

Reseting the cards

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

1. Is there a way to reset the cards in deck on click event?
2. Is there a way to restrict the swing just to one 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?

bower swing not working in angularJS 1.5.0

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

Swipe in one axis only?

Is it possible to ignore swiping vertical or horizontal and let swipe card element retrieve event?

Throwout with button

I want make throw out with button exactly as Tinder in controller $scope

how does this work on angular ES6

stack.getCard(element) doesn't exist

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 want to keep the card in the stack on swing right directions

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?

How to dynamically add card to stack?

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
  });
};

Do you still support this directive?

Hi,
are there any plans to support the angular version? There is really need for..

LIbrary is totally broken

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:

1. Clone repository
2. npm i
3. Open example.

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.

changelog, tag and release packages on NPM

@gajus currently there's no tags in this repo, so it's difficult to find the changes between versions.

Also currently npm only holds v1.0.0 of angular-swing. Please publish the v2 versions.

I've got a package angular-swing2 so that I can use v2 with my npm project.