gajus / swing Goto Github PK

Hi, just a notice. Really liking your library here. On the demo http://gajus.com/sandbox/swing/examples/card-stack/ cards thrown to the left are further offset than the ones thrown right.

Shouldn't they be equal?

Hello,

I am trying to use swing with require.js and I get the following error "Uncaught TypeError: undefined is not a function" for the line mc = new Hammer.Manager(targetElement, {...

Thank you for the greet plugin !

Is there a method built in for reseting a stack of cards and having them thrown back into the pile?

If not, and I need to loop through each card and call card.throwIn(), how can I get the cards current X and Y, so they can animate from where they are currently on the page?

Hello,

I found this plugin very neat and smooth working.
Only issue is that I can't figure out how to setup development version, so I could do modifications.

It works fine if I include swing-master/dist/swing.min.js, which is production version.

But I want to use files from src folder. I tried to include them all and kept getting errors, such as "require not defined" etc.

Could someone create an example, which would have all dependencies loaded from CDN in right order?

Thank you

There is a console.log occuring whenever I begin throwing out a card.

This console.log is not in the src file so building will probably get rid of it.

Right now, EventObject has a member called target, which is the HTMLElement version of the card that corresponds to the event. It would be great if EventObject.target instead contained a Card object, or better yet: there could be a different member altogether, such as EventObject.card.

Either way, EventObject should provide access to the relevant Card object so that event handlers can better leverage the functionality of Card objects

When the user clicks on a card, it zooms in to the card (with some css magic), showing more content, and is scrollable. The problem is that the user can't scroll because swing is still active on the card. Is there any easy way to disable swing with a method or "hack"?

I've tried listening to events and running event.preventDefault(), no luck.

I have 2 questions, please teach me. Thank you and sorry my bad English.

Q1: How to handle card? Example: Tinder have Like or Unlike, i want when i click Like Card will animate left to right.
Q2: I want when card throught 50% it will drop

Please teach me, i want an example like Tinder. Thank so much!

There is annoying debug output on line 3994 (in the distributed version) in version 1.1.3. As far as I can tell it already got fixed in the sources (by this commit ce8dc33) but it is still unfixed in the release/swing.js file.

Could you please release a new version 1.1.4 which contains this fix?
Thanks in advance!

Is it possible to change the speed of card.throwOut? For example, if I do a drag with my finger, the speed is natural. However, if I issue a card.throwOut(-1,0) or similar, the card flashes by so quick you almost don't notice.

What code changes are required to add these states as well?

Sorry to bother again. I'm not experienced at Javascript. So how I can understand which card was swiped right and which left.

Hi there,

I'm trying to figure out how to use the stack.getCard method. What I want to do is get a specific card using a li html attribute. I need this because I want to throw out the card that is on top of the stack. (Just like Tinder, which has dislike and like button)

How can I select the card that is last in the stack and then throw that one out?

I realise that this is probably quite simple, but I'm not very experienced with JavaScript and I'd love to get this awesome plugin to work.

Thanks in advance for helping me out!

On Android this script is very unresponsive. When you try to move a card around nothing happens until you remove your finger and try to move it again. And then it still is very laggy.

I tested it on Motorola Moto G 2. Generation with Android 5.x and Android 6.0.

Remove "jshint" dev dependency from package.json and the gulp task.

sh:

npm install gulp-eslint --save-dev

gulpfile.js:

var eslint = require('gulp-eslint');

gulp.task('lint', function () {
    return gulp
        .src(['./src/*.js', './src/cinemas/*/*.js', './tests/*.js'])
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failOnError());
});

.eslintrc:

{
    "rules": {
        "no-console": 0,
        "no-extra-parens": 2,
        "no-reserved-keys": 2,
        "no-eq-null": 2,
        "no-extend-native": 2,
        "no-process-env": 2,
        "no-self-compare": 2,
        "no-void": 2,
        "no-warning-comments": [1, { "terms": ["todo", "@toto"], "location": "start" }],
        "vars-on-top": 2,
        "wrap-iife": [2, "inside"],
        "global-strict": [2, "always"],
        "new-cap": 0,
        "no-shadow": 0,
        "no-mixed-requires": 0,
        "no-new-require": 2,
        "brace-style": [2, "1tbs"],
        "comma-style": [2, "last"],
        "func-style": [2, "expression"],
        "no-inline-comments": 2,
        "no-lonely-if": 2,
        "no-multiple-empty-lines": 2,
        "no-nested-ternary": 2,
        "one-var": 2,
        "operator-assignment": [2, "always"],
        "padded-blocks": [2, "never"],
        "quote-props": [2, "as-needed"],
        "quotes": [2, "single"],
        "space-after-keywords": [2, "always"],
        "space-before-blocks": [2, "always"],
        "space-in-brackets": [2, "never"],
        "space-in-parens": [2, "never"],
        "space-unary-ops": [2, { "words": true, "nonwords": false }],
        "spaced-line-comment": [2, "always"],
    },
    "env":{
        "mocha": true,
        "node": true
    }
}

Hello,

I'm trying to release card once X distance is reached. So you can't drag more than your throwOutConfidence. Card should get released if distance is more than throw out confidence.
What I tried so far is

eventEmitter.on('_panmove', function (e) {
        var x = lastTranslate.x + e.deltaX,
            y = lastTranslate.y + e.deltaY,
            r = config.rotation(x, y, targetElement, config.maxRotation);

            if(e.deltaX > 150 || e.deltaX < -150 )  card.throwOut(x, y);

        config.transform(targetElement, x, y, r);

        eventEmitter.trigger('dragmove', {
            target: targetElement,
            throwOutConfidence: config.throwOutConfidence(x, targetElement),
            throwDirection: x < 0 ? Card.DIRECTION_LEFT : Card.DIRECTION_RIGHT
        });

 });

I try to throw out the card once it reached x distance, but this calls the function multiple times, as it's gets triggered few times while dragging.

I'm

Just in my Chrome Dev tools if I use touch events, the drag animation is quite choppy, and then goes smooth again as soon as the card is released. I love this library and plan on using it for a little mobile app that I'm doing.. I'l dive in and see if I can figure it out myself, but thought I'd open an issue just to verify that other people are having the same issue.

Thanks again for the repo!!

If you drag a card to the top or to the bottom of the screen outside the container, the card current does not get thrown out. Instead it returns to its place. It should be configurable which directions should trigger a throw-out and which doesnt. Sometimes you would like to have top/down only or something different.

Hi,I am trying to use this project on a AMD project,can you provide an AMD version?

I use keyup to handle card:

if(e.keyCode == 37)
{
card.throwOut(-200, 0);
}

stack.on('throwoutleft', function (e) {
card.destroy();
}

And i got bug: TypeError: spring is undefined
Please help me. Thank so much!

swing is awesome, i'm developing a tinder like app, but i seem to have a problem with swing, i always have 2 cards, when the first one is thrown out i remove it from the stack and add a new one, with that everything is okay, but randomly the hammer events starts to give out NaN in the deltaX and deltaY variables, the panmove event stop working, any ideia why this is happening?

Thanks for this amazing code, it work excellent on mobile devices.
How I can add time when I ThrowOut()/throwIn() a card.
I need to to make something similar to this:

   card.throwOut(100, 500,3000);//where 3000 is the time(ms) that card will take to be in the position (100,500), like in css (transition :3s;)

Thank you again.

Swing seem not working with jquery ajax :( please teach me an example.

How would it be possible to disable the reordering of 'li' elements when clicking on a card which is not on the top of the stack. As of right now, when I click on the second card 'ul' reorders itself and the second card comes on top.

I've got the cards working perfectly in a prototype Meteor.js app, and I'm trying to add and remove elements from the stack. I haven't spent too much time trying, but I thought it might make a good example. Thanks again!

Is there a configuration option to remove the bounce feature when you let go of a card and it bounces back into place (with throwout or throwin)? It would be great if we could configure both bounces for throwout and throwin events separately.

For example, I'd like to have a spring/bounce when the card is thrown onto the stack but not when it is thrown off the stack (because I want to do some other custom animation to make it fly off the screen and the spring makes it bounce back before the animation kicks in).

Latest release, Swing is not defined but gajus.Swing is?

So I am attempting to use Swing to build a bespoke, trading card style app.

I am using the "cards" to hold images and a bit of text.

If I drag the card by clicking in some white space, or on the text, the card moves properly and it looks great.

However, if I click and drag on the image, the card does not move. Instead I see the "placeholder" image moving (like when you click and drag any image in a browser).

When I let go, the card quickly zips into place.

I would like for users to be able to drag by click-dragging the image.

It looks like v3.0.0 isn't set up correctly for nom distribution. The package.son file main entry is for a file that does not exist. Not sure what the correct entry point here would be.

config = {
    throwOutConfidence: function (offset, element) {
        console.log('Check');
        return Math.min(Math.abs(offset/2) / element.offsetWidth, 1);
    }
};

Seems to have no effect on console or throw confidence.

Latest release, Swing is not defined but gajus.Swing is?

Hello, wondering if it's possible to restrict dragging to X axis only?
Issue I get is that I try to scroll down the page on the phone and it drags the element, I would like to make so, it allows you drag page down without garbing the element.

Cards does not bounce back on iOS 5.1 (iPhone 4s). iOS 6 seems to be OK.
Android 4.1.2, 4.3 also have this issue.

When I drag a card out of the pile, I can place it quite high above the pile, or quite below, on the Y axis.

Is there a way to limit the range on the Y axis so card appear more "in line" with the pile?

Example (see how far down I can place a card)

How can I dynamically add a new card to the bottom of the stack with UL/LI?

Currently when I try the following, it reorders the list and new cards appear on the top of the stack.

1. Adding LI element to the beginning of the UL
2. Creating new card from the LI
3. UL gets reordered, newly added LI element is being sent to the top of the stack

Thanks

Tried the official demo and downloaded the example and don't see any console logs.

Is something changed or missed ?

Hello all,

Sorry for my naivety - I'm sure this is extremely simple but I can't seem to get it to function correctly. What do I need to put in the config to reduce the distance the user must move the card before it's considered thrown?

Kind regards,
Ben

It is not possible to click on links inside card on non touch devices if we using lists inside card
Example: http://jsfiddle.net/gef8abk5/2/

When you throw in and throw out cards it moves its position in the DOM

This makes it really difficult if you are using something like handlebars to render stuff.
So is there a reason why the position in the Elements are moved? something to do with z-index?

I am trying to get Swing into a meteor app, but meteor will not pickup the custom events triggered by Sister.

I also tried stack.on('throwout', function (e) { but that is not fired too.

How to get all thrown cards back at once? What function to use?

Start dragging card while holding on link may cause redirect after mouse button release.
http://jsfiddle.net/msnw5xq3/5/

I guess, instead 'mousedown' event we shall use:

 mc.on('panstart', function (e) {
      eventEmitter.trigger('_panstart');
});

Are there any guidelines to how to use this efficiently?

On an iPhone (& Mac), if the cards are near to full screen and contain more content than the ones in the demo the FPS drops quite dramatically & very noticeably.

Maybe it may be smoother with css3 movement/similar to how famo.us does it?

I took the stack demo to play around and added some content in, made the cards full screen and it was near unusable.

Any idea how we can limit to one card being swipeable, the top card? I can think of a quick and dirty fix but i am sure there must be an easier way to do this and make only the card on top swipable.

If any help, it would be much appreciated. I might actually just try to implement this my self and add a option to the stack config. any help would be appreciated . Thank you

Event has the type of current event name should be good.

It's good when the draggable div is on the center, otherwise it's useless. How to make it work according as how close to the outside of the parent element the draggable div is?

I'm looking to add swipe top and bottom functionality.

I've added code to src, when I try to gulp build-browser while in the bower-components/swing folder of my project, I get a SyntaxError: Unexpected reserved word on "import" from import gulp from 'gulp'.

Do you know what's happening here? What's the best way to test edits before a PR?

Cheers,
Johnny

Maybe I'm missing something but it seems like there isn't a simple way to return cards. Instead, you have to throw a new set of cards back in. Is this correct?