search

Viczei / ng2-swipe-cards

A kit of cards (including tinder-card) for angular2
MIT License
25 stars 18 forks source link

Pulling cards up/down glitches/freezes them #7

Open XPanniX opened 7 years ago

XPanniX commented 7 years ago

When I set the orientation to x or xy and pick up a card with and up-/downward motion instead of just touching it and dragging it around or sliding it directly to the left or right, the card freezes on the left side of the screen. EDIT: When picking up a card by a simple touch and moving it up/down then, everything works fine. image Not sure if this is because of some falsy CSS/Code from me or a bug in the module. On the demo page this doesn't happen.

Viczei commented 7 years ago

Hi there!

i couldn't reproduce the bug. Could you give some more information like:

This could help to reproduce Thanks!

XPanniX commented 7 years ago

Sure: I am running it using the Ionic Framework on Android and in Browser Page resolution should be around 375*667

Element on page:

<div class="card-container" *ngIf="loaded">
        <sc-card padding
                 *ngFor="let attendant of attendants"
                 orientation="x"
                 [tinder-card]="cardOverlay"
                 [callDestroy]="attendant.destroyEvent"
                 [callLike]="attendant.likeEvent"
                 (onLike)="onCardInteract($event)"
                 (click)="openCurrentProfile()">
            <div class="user_img" [style.background-image]="attendant.picture.asBg"></div>
        </sc-card>
    </div>

Code:

    public attendants: Array<any>;
    public attendantsCursor: number = 0;
    cardOverlay: any = {
        like: {
            backgroundColor: '#28e93b'
        },
        dislike: {
            backgroundColor: '#e92828'
        }
    };

   // Creating cards from API data result:
  result['data']['attendants'].forEach(function(attendant){
                    attendant['picture']['asBg'] = self.sanitizer.bypassSecurityTrustStyle('url('+attendant['picture']['url']+')');
                    attendant['likeEvent'] = new EventEmitter();
                    attendant['destroyEvent'] = new EventEmitter();
                });
  this.attendants = result['data']['attendants']

CSS/SCSS

.card-container {
    height:90vw;
    width:90vw;
  }
Viczei commented 7 years ago

I did a little patch fixing an uninitialized attribute in the tinder-card directive which may cause the problem you had. Could you update your version to 1.0.7 and tell me if you reproduce?

If the bug is still there, send me your console errors (if there is any)

XPanniX commented 7 years ago

The problem still occurs but there are no errors in the console. But I get these errors while updating/installing the new version via npm

npm WARN ng2-swipe-cards@1.0.7 requires a peer of @angular/common@2.0.1 but none was installed.
npm WARN ng2-swipe-cards@1.0.7 requires a peer of @angular/compiler@2.0.1 but none was installed.
npm WARN ng2-swipe-cards@1.0.7 requires a peer of @angular/core@2.0.1 but none was installed.
npm WARN ng2-swipe-cards@1.0.7 requires a peer of @angular/platform-browser@2.0.1 but none was installed.
npm WARN ng2-swipe-cards@1.0.7 requires a peer of @angular/platform-browser-dynamic@2.0.1 but none was installed.
npm WARN ng2-swipe-cards@1.0.7 requires a peer of zone.js@0.6.21 but none was installed.

My package.json dependencies look like this:

"dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "angular2-swing": "0.10.0",
    "font-awesome": "^4.7.0",
    "ionic-angular": "2.0.0",
    "ionic-image-loader": "^1.3.0",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "ng2-swipe-cards": "^1.0.7",
    "ng2-translate": "^5.0.0",
    "rxjs": "5.0.0-beta.12",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.6.26"
  },
Viczei commented 7 years ago

Hi! the errors that you get are actually warnings caused because the package was build with the last version of packages. But your application should still load correctly.

About the bug, i could reproduce it only in the case if the "callLike" parameter was filled with an undefined value. Your code seemed right but i believe in some case may be the value was undefined.

I also did a new fix because the default value wasn't well assigned for some of the parameters if a wrong value was entered on the component. So an update on the package should make it work.

XPanniX commented 7 years ago

I just updated to 1.0.10 and it still happens :l

But I found out that my other code (not belonging to the cards) is throwing some errors, maybe these mess up the JS execution for the cards?

I'll try to test the cards in an environment without the errors later and tell you if this sorts it out. (I think it should, since I first tested your module on a blank page without any other JS and didn't notice that bug).

Viczei commented 7 years ago

I think the problem comes from the fact your datas are refreshing at one time but the EventEmitters get lost in the process.

I did another fix which makes the component get the previous parameter instead of "undefined" values. May be it could fix your problem.

XPanniX commented 7 years ago

I tested it on an empty page without any other errors now but it's still happenning.

But when loading the page now this is logged in console for each card: image

Maybe you forgot to remove some debug messages? But maybe it can help you figure out my problem.

XPanniX commented 7 years ago

For the blank page I have the following code:

HTML:

<ion-header>
    <ion-navbar>
        <ion-title>{{ 'chats.title' | translate }}</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <div class="card-container" *ngIf="ready">
        <sc-card padding
                 *ngFor="let attendant of attendants"
                 [orientation]="cardDirection"
                 [tinder-card]="cardOverlay"
                 [callDestroy]="attendant.destroyEvent"
                 [callLike]="attendant.likeEvent"
                 (onLike)="onCardInteract($event)">
            <div class="user_img" [style.background-image]="attendant.asBg"></div>
        </sc-card>
    </div>
</ion-content>

TypeScript:

import {Component, EventEmitter} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Component({
    selector: 'page-chats',
    templateUrl: 'chats.html'
})
export class ChatsPage {

    ready = false;
    attendants = [];
    cardDirection = "xy";
    cardOverlay: any = {
        like: {
            backgroundColor: '#28e93b'
        },
        dislike: {
            backgroundColor: '#e92828'
        }
    };

    constructor(private sanitizer: DomSanitizer) {

        for (let i = 0; i < 50; i++) {
            this.attendants.push({
                id: i + 1,
                likeEvent: new EventEmitter(),
                destroyEvent: new EventEmitter(),
                asBg: sanitizer.bypassSecurityTrustStyle('url(http://placehold.it/500x500)')
            });
        }

        this.ready = true;
    }

}

CSS:

.card-container {
  height:90vw;
  width:90vw;
}

.user_img {
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
XPanniX commented 7 years ago

Rebuild it with plunkr and it works fine. Must be caused by the Ionic Framework then, I guess? https://embed.plnkr.co/k8Kj2OOV4BnmOV5OJsfZ/

XPanniX commented 7 years ago

First of all, sorry for the "spam"

I just created a clean Ionic Project and the bug occured again. Must be because of the Ionic Framework then.

Are you familiar with it and could have a look into it?

Viczei commented 7 years ago

No worries, i am also interested in fixing this bug which could be related to my package Sorry about the console logs, forgot to take it off.

I created an ionic blank project from scratch and inserted your code inside: https://github.com/ViCode/ng2-swipe-cards-ionic-demo

Everythings seems to work fine.

XPanniX commented 7 years ago

I just cloned the project and noticed that if I don't run it in the Chrome device emulator thingy everything works fine, also in a small window. This is also the case for my real project/app.

But unfortunately on my android device the issue still occurs.

Viczei commented 7 years ago

I did reproduce the bug on the android device. Hammerjs seems to have a strange behavior on the pan event when combined with ionic and doing very small and quick swipes on the screen.

I managed to fix it, so the update should resolve it now. Hope it works this time!

XPanniX commented 7 years ago

Awesome, now it works or at least doesn't glitch out anymore!

But it "feels" a little but odd now, that you cant pick up a card by an upward swipe gesture when orientation xy ist set or that swiping diagonal up/down doesn't move the card aswell.

Viczei commented 7 years ago

Yes, i noticed the drawback with the up/down swiping. I will keep the issue opened until i find a solution about it. Meanwhile cards are not broken anymore, which is a good point.

XPanniX commented 7 years ago

Anything new on this?

Viczei commented 7 years ago

This is fixed now. Check the version 1.0.14

The bug was caused by an incompatibility between hammerjs and a last update version of chrome (which is used on android)

XPanniX commented 7 years ago

Nice, working great!

Is there a way to define where the cards fly when calling .likeEvent.emit()? E.g. left and right instead of upper left and lower right corner