Merge from dev for version 0.0.1

Author: peterpeterparker

README.MD

@@ -1,5 +1,23 @@
 # ionic-swing
 
+ionic-swing is a fork of the following projects intended to add the swipeable cards capatibilies to Ionic (>= 2)
+
+- swing.js (version 4.2.0, https://github.com/gajus/swing)
+- angular2-swing (version 0.11.0, https://github.com/ksachdeva/angular2-swing)
+
+The main reason behind this fork is that I was facing a problem with hammerjs, which was freezing the scrolling of my application's on iOS and Android when I was using (swipe) on a list or on an ion-scroll.
+After having unsuccessfully tried many solutions I was thinking, after all, that Ionic already include is own version of hammer.
+Therefore I decided to create this fork with the goal to make a version of swing.js which doesn't embed any external hammerjs.
+
+## Current status
+
+This fork project is in beta version but seems to work (tested with Ionic 3.0.1).
+
+Possible improvements not yet done:
+
+- Improve typescripting and remove class swing.ts
+- The fork special dependencies are, inherited from swing.js, lodash, raf, rebound, sister, vendor-prefix. For bundle size reason mostly, it should be checked if these can't be replaced with native code or smaller libs.
+
 ## Installation
 
 To install this library, run:
@@ -8,50 +26,27 @@ To install this library, run:
 $ npm install ionic-swing --save
 ```
 
-## Consuming your library
+## Usage
 
-Once you have published your library to npm, you can import your library in any Angular application by running:
+### 1. Import the IonicSwingModule
 
-```bash
-$ npm install ionic-swing
-```
-
-and then from your Angular `AppModule`:
+In your app.module.ts, import the library like following:
 
-```typescript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+    import {IonicSwingModule} from 'ionic-swing';
 
-import { AppComponent } from './app.component';
+and add it to your imports:
 
-// Import your library
-import { SampleModule } from 'ionic-swing';
+    imports: [
+        ...
+        IonicSwingModule
+        ...
+    ]
 
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
+### 2. To implement a card stack
 
-    // Specify your library as an import
-    LibraryModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
+To implement a card stack, follow the example provided by angular2-swing
 
-Once your library is imported, you can use its components, directives and pipes in your Angular application:
-
-```xml
-<!-- You can now use your library component in app.component.html -->
-<h1>
-  {{title}}
-</h1>
-<sampleComponent></sampleComponent>
-```
+See https://github.com/ksachdeva/angular2-swing
 
 ## Development
 
@@ -67,6 +62,10 @@ To lint all `*.ts` files:
 $ npm run lint
 ```
 
+## Side notes
+
+Project structure created with https://github.com/jvandemo/generator-angular2-library
+
 ## License
 
 MIT © [David Dal Busco](mailto:[email protected])

package.json

@@ -44,17 +44,23 @@
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "lodash": "^4.6.1",
     "node-watch": "^0.5.2",
     "protractor": "~5.1.0",
+    "raf": "^3.1.0",
+    "rebound": "^0.0.13",
     "rollup": "^0.41.6",
     "run-sequence": "^1.2.2",
     "rxjs": "^5.1.0",
+    "sister": "^3.0.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.5.0",
     "typescript": "~2.2.0",
+    "vendor-prefix": "^0.1.0",
     "zone.js": "^0.8.4"
   },
   "engines": {
     "node": ">=6.0.0"
-  }
+  },
+  "dependencies": {}
 }

src/angular2-swing/swing-card-component.ts

@@ -0,0 +1,32 @@
+import {Component, ElementRef, OnInit} from '@angular/core';
+import {SwingStackComponent} from './swing-stack-component';
+import {Card} from './swing';
+
+@Component({
+    selector: '[swing-card]',
+    template: `
+        <ng-content></ng-content>
+    `
+})
+export class SwingCardComponent implements OnInit {
+    constructor(
+        private elmentRef: ElementRef,
+        private swingStack: SwingStackComponent) {
+    }
+
+    ngOnInit() {
+        this.swingStack.addCard(this);
+    }
+
+    getElementRef() {
+        return this.elmentRef;
+    }
+
+    getNativeElement() {
+        return this.elmentRef.nativeElement;
+    }
+
+    getCard(): Card {
+        return this.swingStack.stack.getCard(this.getNativeElement());
+    }
+}

src/angular2-swing/swing-stack-component.ts

@@ -0,0 +1,77 @@
+import {Component, Input,
+    AfterContentInit, EventEmitter } from '@angular/core';
+
+import {SwingCardComponent} from './swing-card-component';
+
+import {StackConfig, ThrowEvent, DragEvent} from './swing';
+
+import Stack from '../swing/stack';
+
+@Component({
+    selector: '[swing-stack]',
+    template: `
+        <ng-content></ng-content>
+    `,
+    outputs: [
+        'throwout',
+        'throwoutend',
+        'throwoutleft',
+        'throwoutright',
+        'throwoutup',
+        'throwoutdown',
+        'throwin',
+        'throwinend',
+        'dragstart',
+        'dragmove',
+        'dragend',
+    ]
+})
+export class SwingStackComponent implements AfterContentInit {
+
+    @Input() stackConfig: StackConfig;
+
+    throwout: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+    throwoutend: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+    throwoutleft: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+    throwoutright: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+    throwoutup: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+    throwoutdown: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+    throwin: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+    throwinend: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+
+    dragstart: EventEmitter<DragEvent> = new EventEmitter<DragEvent>();
+    dragmove: EventEmitter<DragEvent> = new EventEmitter<DragEvent>();
+    dragend: EventEmitter<DragEvent> = new EventEmitter<DragEvent>();
+
+    cards: SwingCardComponent[];
+    stack: any;
+
+    constructor() {
+        this.cards = [];
+    }
+
+    addCard(card: SwingCardComponent) {
+        this.cards.push(card);
+        if (this.stack) {
+            this.stack.createCard(card.getNativeElement());
+        }
+    }
+
+    ngAfterContentInit() {
+        this.stack = Stack(this.stackConfig || {});
+        this.cards.forEach((c) => this.stack.createCard(c.getNativeElement()));
+
+        // Hook various events
+        this.stack.on('throwout', $event => this.throwout.emit($event));
+        this.stack.on('throwoutend', $event => this.throwoutend.emit($event));
+        this.stack.on('throwoutleft', $event => this.throwoutleft.emit($event));
+        this.stack.on('throwoutright', $event => this.throwoutright.emit($event));
+        this.stack.on('throwin', $event => this.throwin.emit($event));
+        this.stack.on('throwinend', $event => this.throwinend.emit($event));
+        this.stack.on('dragstart', $event => this.dragstart.emit($event));
+        this.stack.on('dragmove', $event => this.dragmove.emit($event));
+        this.stack.on('dragend', $event => this.dragend.emit($event));
+        this.stack.on('throwoutup', $event => this.throwoutup.emit($event));
+        this.stack.on('throwoutdown', $event => this.throwoutdown.emit($event));
+    }
+}

src/angular2-swing/swing.ts

@@ -0,0 +1,140 @@
+// here the ambient definitions for the swing
+// module are specified. Normally they should be at DefinitelyTyped
+// or better with the repository
+
+export interface ThrowEvent {
+    /**
+     * The element being dragged.
+     */
+    target: HTMLElement;
+
+    /**
+     * The direction in which the element is being dragged: Card.DIRECTION_LEFT
+     * or Card.DIRECTION_RIGHT
+     */
+    throwDirection: any;
+}
+
+export interface DragEvent {
+    /**
+     * The element being dragged.
+     */
+    target: HTMLElement;
+
+    /**
+     * Only available when the event is dragmove
+     */
+    throwOutConfidence?: number;
+    /**
+     * Only available when the event is dragmove
+     */
+    throwDirection?: any;
+    /**
+     * Only available when the event is dragmove
+     */
+    offset?: number;
+
+}
+
+export type ThrowEventName = 'throwin' | 'throwinend' |
+    'throwout' | 'throwoutend' | 'throwoutleft' | 'throwoutup' | 'throwoutdown' | 'throwoutright';
+
+export type DragEventName = 'dragstart' | 'dragmove' | 'dragend';
+
+export interface Card {
+    /**
+     * Unbinds all Hammer.Manager events.
+     * Removes the listeners from the physics simulation.
+     *
+     * @return {undefined}
+     */
+    destroy(): void;
+
+    /**
+     * Throws a card into the stack from an arbitrary position.
+     *
+     * @param {Number} fromX
+     * @param {Number} fromY
+     * @return {undefined}
+     */
+    throwIn(x: number, y: number): void;
+
+    /**
+     * Throws a card out of the stack in the direction away from the original offset.
+     *
+     * @param {Number} fromX
+     * @param {Number} fromY
+     * @return {undefined}
+     */
+    throwOut(x: number, y: number): void;
+
+    on(eventName: ThrowEventName, callabck: (event: ThrowEvent) => void): void;
+    on(eventName: DragEventName, callabck: (event: DragEvent) => void): void;
+}
+
+export interface StackConfig {
+
+    minThrowOutDistance?: number;
+    maxThrowOutDistance?: number;
+    maxRotation?: number;
+    allowedDirections?: Array<any>;
+
+    /**
+     * Determines if element is being thrown out of the stack.
+     *
+     * Element is considered to be thrown out when throwOutConfidence is equal to 1.
+     *
+     * @param {Number} offset Distance from the dragStart.
+     * @param {HTMLElement} element Element.
+     * @param {Number} throwOutConfidence config.throwOutConfidence
+     * @return {Boolean}
+     */
+    isThrowOut?: (offset: number, element: HTMLElement, throwOutConfidence: number) => boolean;
+
+    /**
+     * Returns a value between 0 and 1 indicating the completeness of the throw out condition.
+     *
+     * Ration of the absolute distance from the original card position and element width.
+     *
+     * @param {Number} offsetX Distance from the dragStart.
+     * @param {Number} offsetY Distance from the dragStart.
+     * @param {HTMLElement} element Element.
+     * @return {Number}
+     */
+    throwOutConfidence?: (offsetX: number, offsetY: number, element: HTMLElement) => number;
+
+    /**
+     * Calculates a distances at which the card is thrown out of the stack.
+     *
+     * @param {Number} min
+     * @param {Number} max
+     * @return {Number}
+     */
+    throwOutDistance?: (min: number, max: number) => number;
+
+    /**
+     * Calculates rotation based on the element x and y offset, element width and
+     * maxRotation variables.
+     *
+     * @param {Number} x Horizontal offset from the startDrag.
+     * @param {Number} y Vertical offset from the startDrag.
+     * @param {HTMLElement} element Element.
+     * @param {Number} maxRotation
+     * @return {Number} Rotation angle expressed in degrees.
+     */
+    rotation?: (x: number, y: number, element: HTMLElement, maxRotation: number) => number;
+
+    /**
+     * Uses CSS transform to translate element position and rotation.
+     *
+     * Invoked in the event of `dragmove` and every time the physics solver is triggered.
+     *
+     * @param {HTMLElement} element
+     * @param {Number} x Horizontal offset from the startDrag.
+     * @param {Number} y Vertical offset from the startDrag.
+     * @param {Number} r
+     * @return {undefined}
+     */
+    transform?: (element: HTMLElement, x: number, y: number, r: number) => void;
+}
+