Add swipe to images and set as default method

Author: fdiazaguirre

README.md

@@ -42,7 +42,10 @@ npm install nativescript-ng2-carousel --save
 
 3. To use the CarouselDirective, create a template that applies the directive as an attribute to a paragraph GridLayout element:
 <pre>
-&lt;GridLayout [carousel]="images" carouselLabelOverlay="true" carouselSpeed="2000"&gt;
+&lt;GridLayout [carousel]="images"
+               carouselLabelOverlay="true"
+               carouselSpeed="2000"
+               (selectedImageChange)="select($event)"&gt;
 
 &lt;/GridLayout&gt;
 </pre>
@@ -133,8 +136,10 @@ Currently directive supported attributes:
 * **carousel** list of images as JSON or CarouselSlide class, accepted parameters (title?, url?, file?)
 * **carouselSpeed** _(optional)_ defines the interval (number in ms) to wait before the next slide is shown 
 * **carouselAnimationSpeed** _(optional)_ defines the animation speed (number in ms)
+* **arrowsEnabled** _(optional)_ Show arrows to navigate the carousel (default false since swipe it's preferred)
 * **carouselArrows** _(optional)_ arrow type, accepted values _none_, _small_, _normal_, _bold_ or _narrow_ (default _normal_)
 * **carouselLabelOverlay** _(optional)_ silde title over image, accepted values _true_ or _false_ (default false)
+* **selectedImageChange** _(optional)_ get the title of the selected image (key)
 
 ## Changelog
 

nativescript-ng2-carousel.ts nativescript-ng2-carousel-swipeable.tsnativescript-ng2-carousel.ts renamed to nativescript-ng2-carousel-swipeable.ts

@@ -1,16 +1,14 @@
-import {Directive, ElementRef, AfterViewInit, Input} from '@angular/core';
+import {AfterViewInit, Directive, ElementRef, EventEmitter, Input, Output} from '@angular/core';
 import {AnimationCurve} from "ui/enums";
 import {Image} from "ui/image";
 import {StackLayout} from "ui/layouts/stack-layout";
 import {GridLayout, ItemSpec} from "ui/layouts/grid-layout";
-import {GridUnitType} from "ui/layouts/grid-layout";
-import {HorizontalAlignment} from "ui/enums";
 import {Label} from "ui/label";
-import {GestureTypes} from "ui/gestures";
+import {GestureTypes, SwipeGestureEventData} from "ui/gestures";
 import {View} from "ui/core/view";
-import {Visibility} from "ui/enums";
-import {fromFile} from "image-source";
-import {fromResource} from "image-source";
+import {fromFile, fromResource} from "image-source";
+
+var labelModule = require("ui/label");
 
 @Directive({selector: '[carousel]'})
 export class CarouselDirective implements AfterViewInit {
@@ -37,19 +35,27 @@ export class CarouselDirective implements AfterViewInit {
     @Input() carousel: any;
     @Input() carouselSpeed: number; // autoplay speed (ms)
     @Input() carouselArrows: string; // arrows type
+    @Input() arrowsEnabled: boolean = false; // enable arrows [default to false]
     @Input() carouselLabelOverlay: boolean; // title over image (bool)
     @Input() carouselAnimationSpeed: number; // animation speed
 
+    @Output() selectedImageChange: EventEmitter<string> = new EventEmitter<string>();
+
     constructor(private elem: ElementRef) {
         this.container = elem.nativeElement;
+
+
     }
 
     ngAfterViewInit() {
         this.initOptions();
         this.initContainer();
         this.initImagesLayout();
         this.initSlides();
-        this.initControls();
+        // Prefer swipe over arrows tap
+        if (this.arrowsEnabled) {
+            this.initControls();
+        }
         this.initAutoPlay();
     }
 
@@ -128,16 +134,46 @@ export class CarouselDirective implements AfterViewInit {
 
             if (slide.url) {
                 let image: Image = CarouselDirective.generateImageSliderFromUrl(slide.url);
+                image.on(GestureTypes.tap, () => {
+                    this.selectedImageChange.emit( slide.title );
+                });
+                image.on(GestureTypes.swipe, (args: SwipeGestureEventData) => {
+                    if (args.direction === 1) {
+                        this.swipe(CarouselDirections.DIRECTION_LEFT);
+                    } else if (args.direction === 2) {
+                        this.swipe(CarouselDirections.DIRECTION_RIGHT);
+                    }
+                });
                 gridLayout.addChild(image);
             }
 
             if (slide.file && slide.file.indexOf('res://') !== 0) {
                 let image: Image = CarouselDirective.generateImageSliderFromFile(slide.file);
+                image.on(GestureTypes.tap, () => {
+                    this.selectedImageChange.emit( slide.title );
+                });
+                image.on(GestureTypes.swipe, (args: SwipeGestureEventData) => {
+                    if (args.direction === 1) {
+                        this.swipe(CarouselDirections.DIRECTION_LEFT);
+                    } else if (args.direction === 2) {
+                        this.swipe(CarouselDirections.DIRECTION_RIGHT);
+                    }
+                });
                 gridLayout.addChild(image);
             }
 
             if (slide.file && slide.file.indexOf('res://') === 0) {
                 let image: Image = CarouselDirective.generateImageSliderFromResource(slide.file);
+                image.on(GestureTypes.tap, () => {
+                    this.selectedImageChange.emit( slide.title );
+                });
+                image.on(GestureTypes.swipe, (args: SwipeGestureEventData) => {
+                    if (args.direction === 1) {
+                        this.swipe(CarouselDirections.DIRECTION_LEFT);
+                    } else if (args.direction === 2) {
+                        this.swipe(CarouselDirections.DIRECTION_RIGHT);
+                    }
+                });
                 gridLayout.addChild(image);
             }
 

package-lock.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "description": "A simple NativeScript + Angular images carousel for iOS and Android",
   "license": "MIT",
-  "main": "nativescript-ng2-carousel",
+  "main": "nativescript-ng2-carousel-swipeable",
   "homepage": "https://github.com/alcoceba/ngCarouselDirective#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/alcoceba/ngCarouselDirective.git"
   },
-  "typings": "nativescript-ng2-carousel.ts",
+  "typings": "nativescript-ng2-carousel-swipeable.ts",
   "keywords": [
     "angular",
     "nativescript",
@@ -44,8 +44,9 @@
     "zone.js": "^0.8.0"
   },
   "author": "Manel Alcoceba <manelalcoceba@gmail.com>",
+  "contributors": ["Federico Diaz <fdiazaguirre@gmail.com>"],
   "bugs": {
-    "url": "https://github.com/alcoceba/ngCarouselDirective/issues"
+    "url": "https://github.com/fdiazaguirre/ngCarouselDirective/issues"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"