ksachdeva / angular2-swing Goto Github PK

I am currently calling the throwout function when clicking a like or dislike button, but I am not able to set the speed of the thow out movement of the card. Right now it is not visible for the user which side it is moving and the card just disappears.
Is there a solution for this?

Hi I am using the plugin with ionic 2 angular 2. I can see the cards working fine. But how do I access the events. I dont see any events triggered in the console. thanks

Using Ionic 2 RC 0 with Angular 2 final, I get the following error:

[05:23:16]  Error: Module .../node_modules/angular2-swing/dist/index.js does not export SwingModule (imported by .../.tmp/app/app.module.js)
    at Module.trace (.../node_modules/rollup/dist/rollup.js:7677:29)
    at ModuleScope.findDeclaration (.../node_modules/rollup/dist/rollup.js:7300:22)
    at Scope.findDeclaration (.../node_modules/rollup/dist/rollup.js:5351:39)
    at Identifier.bind (.../node_modules/rollup/dist/rollup.js:6489:29)
    at .../node_modules/rollup/dist/rollup.js:5151:50
    at ArrayExpression.eachChild (.../node_modules/rollup/dist/rollup.js:5165:19)
    at ArrayExpression.bind (.../node_modules/rollup/dist/rollup.js:5151:7)
    at .../node_modules/rollup/dist/rollup.js:5151:50
    at Node.eachChild (.../node_modules/rollup/dist/rollup.js:5168:5)
    at Node.bind (.../node_modules/rollup/dist/rollup.js:5151:7)

Code is simple, in app.module.ts:

import { SwingModule } from 'angular2-swing';

I get the same when trying to import SwingCardComponent and SwingStackComponent.

Gajus swing now supports throwing in all 4 directions via:
gajus/swing@81045ac

Can we also support the same?

Thanks,

Tapping on the card below the top card makes bottom card come up and top card goes down and then instead of restricting user to topmost card, user can swipe card on 2nd position also instead of only the topmost card. Need to disallow moving any other card except the top card by the user.

Hello Dear Angular2-swing,
Im having issue with this plugin as its working awesome in web browser as well as android device.
But Im having issue in IOS Devices.

In IOS devices cards not are swipe correctly with Ion slide.
But Outside ion slide its working fine..
let share the code here..

     <div *ngFor="let i of cards;trackBy:trackByCards; let index=index;">
        <ion-card id="myswingCard" swing-card  class="card-index"  [style.zIndex]="-1+i" [style.marginTop]="i===0?'0px':'12px'"> <!--id="myswingCard" swing-card  class="card-index"  [style.zIndex]="-1+i" [style.marginTop]="i===0?'0px':'12px'"-->
            <ion-card-content padding id="card-c">
                <!-- <div> -->  <!-- (ionSlideTap)="changeSlide()" swing-card [autoplay]="4000" [loop]="true" speed="1000"-->
                <!-- <div>
                    {{ i.property_images| json }}
                </div>   -->
                  <ion-slides pager (click)="changeSlide(index)"> 
                      <div *ngIf="overlayisHidden" (tap)="removeDummy()" style="position: absolute;
                      z-index: 99999;">  
                          <div class="overLayer"></div>
                  
                      <!-- <img src="assets/imgs/popup.png" alt="tutorial Screen"> -->
                        <img class="swipe-left-text"src="assets/imgs/swipe-left-text.png" alt="tutorial imgs">
                        <img class="swipe-left" src="assets/imgs/swipe-left0.png" alt="tutorial imgs">
                        <img class="dotted-lines" src="assets/imgs/dotted-lines.png" alt="tutorial imgs">
                        <img class="swipe-right-text"src="assets/imgs/swipe-right-text.png" alt="tutorial imgs">
                        <img class="swipe-right"src="assets/imgs/swipe-right.png" alt="tutorial imgs">
                        <img class="click-view" src="assets/imgs/click-view-1.png" alt="tutorial imgs">
                  
                  
                  
                        </div>
                      <img src="assets/imgs/dummy-img.jpg" *ngIf="i.images.length == '0'" style="height: 57vh;">

                    <ion-slide  *ngFor="let images of i.images">

                          <!-- <p>abc</p> -->
                          <div class="backward" (click)="slideMoveBack(index)"></div>
                          <div class="forward" (click)="slideMoveFor(index)"></div>
                          <img src="{{images.images}}" class="fade-in" (load)="imageloaded()" [ngClass]="{'img-loaded':loaded}" [hidden]="!loaded" *ngIf="images.images" />
                          <img src="assets/imgs/dummy-img.jpg" class="fade-in" [ngClass]="{'center':true}" *ngIf="!loaded" alt="" srcset="">
                          <!-- <ion-spinner [ngClass]="{'center':true}" *ngIf="!loaded"></ion-spinner> -->
                          <!-- <img class="img-class" src="{{images.images || 'assets/imgs/dummy-img.jpg'}}" onerror="this.src='assets/imgs/dummy-img.jpg'"> -->
                        </ion-slide> 
                         <!-- <ion-slide>
                            <div class="backward" (click)="slideMoveBack(index)"></div>
                            <div class="forward" (click)="slideMoveFor(index)"></div>
                          <img onerror="error" class="img-class" src="assets/imgs/slid2.jpg" alt="">
                        </ion-slide>
                        <ion-slide>
                            <div class="backward" (click)="slideMoveBack(index)"></div>
                            <div class="forward" (click)="slideMoveFor(index)"></div>
                            <img onerror="error" class="img-class" src="assets/imgs/slid3.jpg" alt="">
                        </ion-slide> -->
                       </ion-slides>
                    

                      <div class="card-l" (tap)='goNext(i)'>

                        <div class="div-h2">

                            <h2 class="card-h2">{{i.property_name}} </h2>
                            <ion-icon style="font-size: 1.0em; position: absolute;
                            bottom: 7vh;
                            right: 2vh;" name="information-circle">
                              </ion-icon>
                            
                            <p class="card-p"> &euro; {{i.amount}}</p>
                        </div>

                   </div>
                <!-- </div> -->

                <div class="card-b">
                  <ion-row> 
                      <ion-col class="padding-top-22"> 
                          <span>{{i.no_of_bedrooms}} 
                          </span> 
                             <img class="card-img" src="assets/icon/sleeping-bed.svg" alt="">

                          
                        </ion-col>
                        <ion-col class="padding-top-22"> 
                          <span>{{i.no_of_bathrooms}}</span> 
                          <img class="card-img" src="assets/icon/bathtub.svg" alt="">
                        </ion-col>
                    <ion-col></ion-col>
                    <ion-col padding (click)="voteUp(false,i.property_id)">
                        <ion-icon name="trash"></ion-icon>
                    </ion-col>
                    <ion-col padding (click)="voteUp(true,i.property_id)">
                      <ion-icon name="heart" color="danger"></ion-icon>
                    </ion-col>
                  </ion-row>
                </div>
            </ion-card-content>
        </ion-card>
        <div text-center class="index">
          <br>
          <p>{{currentIndex}}/{{total_data_length}}</p>
          </div>
    </div>

Hello team, when I try to update the angular2-swing in my project. it's updating to only 0.10.0 version so examples given in readme is not working for me in the project.

In Angular 6, the build succeeds but the swipe doesn't work and the last card in the stack is shown. But it cannot be interacted with.

On inspect you get the following errors :-

• Uncaught ReferenceError: global is not defined
• v is not a function

This helped me solve the issue. So leaving it here for others that run into the same problem.

In your polyfills.ts file (Example location :- E:\temple\tinderapp\app\src) add the following code below the last import statement :-
(window as any).global = window;

If this doesn't work, there are other solutions in the link provided, you can try those as well.

Cheers,
Chris
Neutrinos

To keep DOM memory low I need to load cards two by two.

The process is working well when I use one card at a time, but when I want to display one draggable card and one card under the draggable one a push or unshift onto the cards array is making the new card appearing on top of the card currently dragged or on top of the second card wherein should appear under it.

Have you been able to lazy load cards at the back of the stack ?? no matter what I do the card appear at the top of the stack and it's very annoying ...

no matter if I push or unshift the next card appear on top of the existing one...

Hi,
when using example code, I try to get the first or last card from stack, but it's null. Any ideas?

this.swingCards.first.getCard()

The swingCards.first is a SwingCardComponent with a valid elementRef and etc.
Any ideas?

When running the app in a smaller window size. Ex: testing in chrome for smaller resolution devices, I receive
ReferenceError: global is not defined at Card.js: 206
the global.addEventListener doesn't work.
A second error appears after:
ERROR TypeError: doMove is not a function

Using Angular Core 6.1.7 and CLI 6.2.0

I was debugging the card stack and I noticed that, If I update cards array and my *ngFor ion-cards changed, the stack is intact!

I start with 3 cards then the user thows out 2 cards. So I append 2 more cards to stack.. when I look to this.swingStack.cards I see 5 cards. If I use the stack repeatedly 100 cards or 1k cards the memory will increase.

I searched for a "removeCard" metho and I could find it in node_modules/swing/dist/stack.js a function named destroyCard.

Understand? We need optimize the stack.

Card.js is throwing errors in Angular 6 which makes it unusable.

ERROR ReferenceError: global is not defined at Card.js:205 at construct (Card.js:210) at Card (Card.js:364) at Object.Stack.stack.createCard (Stack.js:81) at SwingStackComponent.push../node_modules/angular2-swing/dist/swing-stack-component.js.SwingStackComponent.addCard (swing-stack-component.js:24) at SwingCardComponent.push../node_modules/angular2-swing/dist/swing-card-component.js.SwingCardComponent.ngOnInit (swing-card-component.js:12) at checkAndUpdateDirectiveInline (core.js:10097) at checkAndUpdateNodeInline (core.js:11363) at checkAndUpdateNode (core.js:11325) at debugCheckAndUpdateNode (core.js:11962)

I recently updated an Angular app to Angular 6 and it resulted in the breaking of some functionality in the the angular2-swing package (0.14.0) I'm using. Specifically the onThrowOut method fails to fire when the app is built with the --prod flag. It fires correctly when the app is built in dev mode.

You need to include some new stuff in the tsconfig file for AoT https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

I'm working on a pull request on my fork right now, making an issue to ref in the pull request. I also included the changes from #11 in my fork, since I needed that for my Ionic project.

hi, I have a requirement, like in tinder when the user clicks on the reverse button the card just thrown out should come back with reversed animation. is it possible? anyone has a solution?

I am trying run npm run build but I get this error.

Error at /home/raj/ionic/angular2-swing/node_modules/@angular/core/src/di/reflective_provider.d.ts:87:123: Cannot find name 'Map'.
Error at /home/raj/ionic/angular2-swing/node_modules/@angular/core/src/di/reflective_provider.d.ts:87:165: Cannot find name 'Map'.
Error at /home/raj/ionic/angular2-swing/node_modules/rxjs/Observable.d.ts:69:60: 'Promise' only refers to a type, but is being used as a value here.
Error at /home/raj/ionic/angular2-swing/node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts:15:48: Cannot find name 'Iterable'.
Error at /home/raj/ionic/angular2-swing/node_modules/@angular/core/src/change_detection/differs/keyvalue_differs.d.ts:23:18: Cannot find name 'Map'.
Error at /home/raj/ionic/angular2-swing/node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts:24:16: Cannot find name 'Map'.
Error at /home/raj/ionic/angular2-swing/node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts:32:16: Cannot find name 'Map'.
Error at /home/raj/ionic/angular2-swing/node_modules/@angular/common/src/directives/ng_class.d.ts:48:34: Cannot find name 'Set'.

Any idea why? I am working on an update to enable prepend option for cards in the stack .

Hey,

at first thanks for this lib. The plunker looks awesome!

I have a Problem in my Ionic2 App. I get the above error for all bindable properties of the sc-card component. Anyone else with this Problem? I have imorptet the Module in my NgModule...

Hello,

Great work on this library, and thanks for the recent update!

I have a question regarding stack order.

I have a card stack in which I am adding and removing cards, both through gestures and programmatically as the user clicks buttons. This is an example of the html content.

When using programmatically everything works fine, cards slide in and out of their position correctly. The issue is when I combine swiping with throwing in / out programmatically. The DOM updates and the order becomes lost. When I then throwIn to the deck programmatically , the cards slide under instead of over in some instances. Below is an example of what the HTML content looks like in this scenario, after a few gestures + throwIn. You can see element 1 has moved above element 2, so element 1 then slides under 2 instead of on top when I throw back in.

Any suggestions you can give to fix this problem would be greatly appreciated. I'm currently spinning my wheels. Thanks in advance for the help or ideas! 😄

Chrome throws this error when moving cards:

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

But everything is still working fine.

@ksachdeva :
I this repo dead? Since November 2016 no Issues and Pull-Requests are responded to. If you don't want to maintain it anymore, we can certainly can find someone who would love to take it over. Please just be honest with us.

I've properly installed angular2-swing and copied the example code from the readme into my angular project.

When I try to transpile the code I get this error:

Can't bind to 'stack Config' since it isn't a known property of 'ul'

Angular version: 2.2.1

Note: i have not forgotten the following lines:

@ViewChild('myswing1') swingStack: SwingStackComponent;
@ViewChildren('mycards1') swingCards: QueryList<SwingCardComponent>;

How can I fix this issue? Is it a bug in angular2-swing, or did I do something wrong?

Hi ,
I need left swipe animation on left button click and right swipe animation on right button click like tinder or any other app. Is it possible with this plugin ?

Hi, thank you for this plugin.

I'm using it in a mobile application I'm developing. I experience the following issue: some of my cards remain in DOM after they have been swiped left or right. they are not visibile but remain in dom nonetheless. they have the following transform css inline style

transform: translate3d(0px, 0px, 0px) translate(500px, 0px) rotate(0deg);
where 500px equals my thrownout distance. I dnynamically fetch new cards when the stack falls below a certain threshold. this behviour appears rather randomly, not on all cards.

exspected behaviour:
Swiped cards are removed from stack and dom

actual behaviour:
some cards remain in stack/DOM although not visible

Can you help?

Hello

Firstly i want to say thanks for this plugin

I try to build my app with Ionic 2 and for this i use tinder card like this : https://devdactic.com/ionic-2-tinder-cards/ But on some android device ( sony z4 compact, sony z5 compact and HUAWEI P8 lite) next card not load.

The array which contain card is this.cards I try to display it with log and it contain the good value. The card display only after click on button for display menu. Or it can work if used button which call voteUp(true/false) function swipe, in theory call the same function but the result is totaly different. My code :

ts file

addNewCards(count: number) {
  this.auth.getToken().subscribe(data=>{
  let url='http://my.url/api/api.php/'+data+'/repas/' + count;
    let result= this.http.get(url).map(data => data.json().msg)
    this.cache.loadFromObservable('repas'+count, result)
    .subscribe(msgs => {
      for (let val of msgs){
        this.cards.push(val[0]);
      }
    });
  });
}

template file :

<div swing-stack #myswing1 [stackConfig]="stackConfig"   (throwoutleft)="voteUp(false)" (throwoutright)="voteUp(true)" id="card-stack">
    <ion-card class="card" #mycards1 swing-card *ngFor="let c of cards">
      <div *ngIf="c.photo" class=" image-recipe-position">
        <div class="img-recipe"   [ngStyle]="{ 'background-image': 'url(' + c.photo + ')'}">
        </div>
      </div>
      <ion-item >
        <h2>{{c.title}}</h2>
        {{c.ing}}
      </ion-item>
        <ion-row  >
          <ion-col col-4 offset-1 class="center-left">
            <button disabled={{buttonDisabled}}   (click)="voteUp(false)" class="button-choose">
              <ion-icon class="dislike" name="ios-close"></ion-icon>
            </button>
          </ion-col>
          <ion-col class="center-right" col-4 offset-2>

            <button disabled={{buttonDisabled}}   (click)="voteUp(true)" class="button-choose">
              <ion-icon class="like" name="ios-checkmark"></ion-icon>

            </button>
          </ion-col>
        </ion-row>
    </ion-card>

  </div>

I get this error Message:

sister.js:57 Uncaught ReferenceError: global is not defined
    at Object../node_modules/sister/src/sister.js (sister.js:57)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/swing/dist/Card.js (Card.js:11)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/swing/dist/index.js (index.js:8)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/components/angular-swing/swing.ts (swing.ts:1)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/components/angular-swing/index.ts (app.module.ts:34)
    at __webpack_require__ (bootstrap:81)

[22:27:30] Error: Type SwingCardComponent is part of the declarations of 2 modules
[22:27:30] SwingModule and AppModule! Please consider moving SwingCardComponent to a higher module that imports
SwingModule and AppModule. You can also create a new NgModule that exports and includes SwingCardComponent
then import that NgModule in SwingModule and AppModule.
[22:27:30] ngc failed
[22:27:30] ionic-app-script task: "build"
[22:27:30] Error: Error

=======
IONIC INFO

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.43
ios-deploy version: Not installed
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.1 Build version 8B62

Hi,
Can you tell me how to access the eventlisteners of the swing library?

I want to do something like this.

// Add event listener for when a card is thrown out of the stack.
stack.on('throwout', (event) => {
    // e.target Reference to the element that has been thrown out of the stack.
    // e.throwDirection Direction in which the element has been thrown (Card.DIRECTION_LEFT, Card.DIRECTION_RIGHT).

    console.log('Card has been thrown out of the stack.');
    console.log('Throw direction: ' + (event.throwDirection == Card.DIRECTION_LEFT ? 'left' : 'right'));
});

// Add event listener for when a card is thrown in the stack, including the spring back into place effect.
stack.on('throwin', () => {
    console.log('Card has snapped back to the stack.');
});

Current api support (throwout) event but it's on swing-stack so I can't access thrown card at this point as swing-stack is a top level of swing-card where *ngFor exists.

I need to access this card to do some logic not only event as an argument to the callback function.

is this doable ?

Gajus provides

card.throwIn(x, y)
card.throwOut(x, y)

ref: https://github.com/gajus/swing#throwing-card-out-of-the-stack

Anything equivalent in this library? Couldn't find in the interfaces.

-bhupi

Is there any reason because of which swipe down cannot work? all other orientations are working well;

Hi, I'm new to Angular2, and I'm trying to figure out how to use this component on a project.

I also never used Swing, but I use a similar component in a Ionic v1 application: https://github.com/xchilenox/ionic-tinder-cards.

In our App we need only left and right swipes, so we want to disable up and down swipes. now the App is submitting in up when user moves to the corner right or left.

Great library - I have been trying to only allow certain 'types' of cards to be swiped in one direction and other 'types' in the opposite direction.

Is it possible to update the configuration of the stackConfig based on the "type" of card on the top of the stack?

Currently I'm able to detect the type of card, and then set the stackConfig.allowedDirections array to what I would like it to be. However it doesn't seem to effect behavior of the stack.

Is there a refresh that is needed?

Any direction you could provide would be very much appreciated.

When including SwingStackComponent and SwingCardComponent in my Component's directive property, it fails to load with this error: No Directive annotation found on SwingStackComponent or No Directive annotation found on SwingCardComponent. Works on angular-2.0.0.rc.1, fails on angular-2.0.0.rc.3.

Is it a directive bug or an angular bug?

after npm start webpage get 404 for all script files

Hello how i can fixed this error?

This likely means that the library (angular2-swing) which declares SwingModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Hi , When i am sliding top item then background item is also moving. Which is creating issue for me ,I want to fix second item when i scroll first like tinder

I've just installed this in Angular 4 but I'm getting the following error -

TypeError: Cannot read property 'DOWN' of undefined
at exports.Direction.exports.Direction (http://localhost:8100/build/vendor.js:120021:50)
at Object.defineProperty.value (http://localhost:8100/build/vendor.js:120026:3)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object. (http://localhost:8100/build/vendor.js:116894:15)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.217 (http://localhost:8100/build/main.js:241:74)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at Object.198 (http://localhost:8100/build/main.js:212:70)
at webpack_require (http://localhost:8100/build/vendor.js:55:30)
at webpackJsonpCallback (http://localhost:8100/build/vendor.js:26:23)

The element object is coming through as undefined

this.stackConfig = { // Default setting only allows UP, LEFT and RIGHT so you can override this as below allowedDirections: [Direction.UP, Direction.DOWN, Direction.LEFT, Direction.RIGHT], // Now need to send offsetX and offsetY with element instead of just offset throwOutConfidence: (offsetX, offsetY, element) => { return Math.min(Math.max(Math.abs(offsetX) / (element.offsetWidth / 1.7), Math.abs(offsetY) / (element.offsetHeight / 2)), 1); }, throwOutDistance: (d) => { return 800; } }

Hey,

It looks like that importing SwingModule in a Ionic 3 project as a weird side effect.

If somewhere in the application you use the event (swipe) on a list or a scroll, then that list or scroll gonna be frozen respectively not scrollable on both iOS and Android devices.

If you remove the import of the SwingModule, then the scroll and list work as excepted.

For example:

<ion-scroll #datePickerScrollY scrollY="true" id="datePickerScrollY">
    <ion-list no-padding (swipe)="swipeSomething($event)"> <!-- Here the swipe will work but the list will be not scrollable -->
        <ion-item *ngFor="let hero of heroes;">
            <p>
                {{hero.name}}
            </p>
        </ion-item>
    </ion-list>
</ion-scroll>

There is a sample project to reproduce the problem:

https://github.com/peterpeterparker/myIonScroll.git

Just by commenting SwingModule in app.module.ts gonna make the list scrollable.

Any idea how to solve that issue?

P.S.: A screenshot too

I want to interval 2 seconds before cards adding but set timeout function not proper working in my device. in computer browser the code is running correctly but in android device it stoped when interval is true and donot back to the game start view.....plz help me>??????????
code is here********************************
//when card is empty*********************************************
if (this.cards.length == 0) {
vm.goToAddCard();
}
goToAddCard() {
var vm = this;
this.game_interval = true;
this.game_start = false;
setTimeout(() => {
alert("Done");
vm.game_interval = false;
vm.game_start = true;
console.log("game_start==", vm.game_start);
console.log("game_interval==", vm.game_interval);
vm.addNewCards();
}, 2000);
//html code is here********************