breaking: refactor components to directives

Author: peterpeterparker

CHANGELOG.md

@@ -1,3 +1,7 @@
+<a name="3.0.0"></a>
+## [3.0.0](https://github.com/peterpeterparker/ionic-swing/compare/v2.3.1...v3.0.0) (2018-08-28)
+* **breaking**: Refactor components to directives in order to be compatible with Ionic v4 (>= beta.5) and/or Typescript v2.9.2
+
 <a name="2.3.1"></a>
 ## [2.3.1](https://github.com/peterpeterparker/ionic-swing/compare/v2.3.0...v2.3.1) (2018-08-27)
 * **revert**: Revert rename `swing-card`

README.md

@@ -35,6 +35,22 @@ To implement a card stack, follow the example provided by angular2-swing
 
 See https://github.com/ksachdeva/angular2-swing
 
+### 3. ViewChild and ViewChildren in Ionic v4
+
+In Ionic v4, in order to access the stack and cards as `ViewChild` and `ViewChildren`, it's mandatory to use the keyword `read` to identify correctly the elements 
+
+Html:
+
+    <div swingStack #swingStack>
+         <ion-card swingCard #swingCards>
+         </ion-card>
+    </div>
+
+Ts:
+
+    @ViewChild('swingStack', {read: SwingStackDirective}) swingStack: SwingStackDirective;
+    @ViewChildren('swingCards', {read: SwingCardDirective}) swingCards: QueryList<SwingCardDirective>;
+
 ## Notes regarding hammerjs
 
 This library need `hammerjs` but isn't shipped with it because some framework, like `Ionic v3`, already include it in their own resources. If it isn't your case, you would need to install `hammerjs` in your project 

angular.json

@@ -122,11 +122,11 @@
   "defaultProject": "ionic-swing",
   "schematics": {
     "@schematics/angular:component": {
-      "prefix": "app",
+      "prefix": "swing",
       "styleext": "scss"
     },
     "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "swing"
     }
   }
-}
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-swing",
-  "version": "2.3.1",
+  "version": "3.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",

package.json

@@ -0,0 +1,32 @@
+import {Directive, ElementRef, OnInit} from '@angular/core';
+
+import {SwingStackDirective} from './swing-stack.directive';
+import {Card} from '../interfaces/swing';
+
+@Directive({
+  selector: '[swingCard]'
+})
+export class SwingCardDirective implements OnInit {
+  private card: Card;
+
+  constructor(
+    private elementRef: ElementRef,
+    private swingStack: SwingStackDirective) {
+  }
+
+  ngOnInit() {
+    this.card = this.swingStack.addCard(this);
+  }
+
+  getElementRef() {
+    return this.elementRef;
+  }
+
+  getNativeElement() {
+    return this.elementRef.nativeElement;
+  }
+
+  getCard(): Card {
+    return this.card;
+  }
+}

src/app/modules/ionic-swing/components/swing-card.component.ts

@@ -0,0 +1,63 @@
+import {
+  Input,
+  AfterContentInit, EventEmitter, Output, Directive
+} from '@angular/core';
+
+import {SwingCardDirective} from './swing-card.directive';
+
+import {StackConfig, ThrowEvent, DragEvent} from '../interfaces/swing';
+
+import Stack from '../swing/stack';
+
+@Directive({
+  selector: '[swingStack]'
+})
+export class SwingStackDirective implements AfterContentInit {
+
+  @Input() stackConfig: StackConfig;
+
+  @Output() throwout: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+  @Output() throwoutend: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+  @Output() throwoutleft: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+  @Output() throwoutright: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+  @Output() throwoutup: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+  @Output() throwoutdown: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+  @Output() throwin: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+  @Output() throwinend: EventEmitter<ThrowEvent> = new EventEmitter<ThrowEvent>();
+
+  @Output() dragstart: EventEmitter<DragEvent> = new EventEmitter<DragEvent>();
+  @Output() dragmove: EventEmitter<DragEvent> = new EventEmitter<DragEvent>();
+  @Output() dragend: EventEmitter<DragEvent> = new EventEmitter<DragEvent>();
+
+  cards: SwingCardDirective[];
+  stack: any;
+
+  constructor() {
+    this.cards = [];
+  }
+
+  addCard(card: SwingCardDirective) {
+    this.cards.push(card);
+    if (this.stack) {
+      return 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/app/modules/ionic-swing/components/swing-stack.component.ts

@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
-import {SwingCardComponent} from './components/swing-card.component';
-import {SwingStackComponent} from './components/swing-stack.component';
+import {SwingCardDirective} from './directives/swing-card.directive';
+import {SwingStackDirective} from './directives/swing-stack.directive';
 
-export * from './components/swing-card.component';
-export * from './components/swing-stack.component';
+export * from './directives/swing-card.directive';
+export * from './directives/swing-stack.directive';
 
 export * from './interfaces/swing';
 
@@ -19,12 +19,12 @@ export * from './swing/utilities';
     CommonModule
   ],
   declarations: [
-    SwingCardComponent,
-    SwingStackComponent
+    SwingCardDirective,
+    SwingStackDirective
   ],
   exports: [
-    SwingCardComponent,
-    SwingStackComponent
+    SwingCardDirective,
+    SwingStackDirective
   ]
 })
 export class IonicSwingModule {