Skip to content

Commit 5be1724

Browse files
committed
Add swipe to images and set as default method
1 parent b01bea5 commit 5be1724

File tree

2 files changed

+37
-3
lines changed

2 files changed

+37
-3
lines changed

nativescript-ng2-carousel.ts

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import {Directive, ElementRef, AfterViewInit, Input} from '@angular/core';
1+
import {AfterViewInit, Directive, ElementRef, EventEmitter, Input, Output} from '@angular/core';
22
import {AnimationCurve} from "ui/enums";
33
import {Image} from "ui/image";
44
import {StackLayout} from "ui/layouts/stack-layout";
55
import {GridLayout, ItemSpec} from "ui/layouts/grid-layout";
66
import {Label} from "ui/label";
7-
import {GestureTypes} from "ui/gestures";
7+
import {GestureTypes, SwipeGestureEventData} from "ui/gestures";
88
import {View} from "ui/core/view";
99
import {fromFile, fromResource} from "image-source";
1010

11+
var labelModule = require("ui/label");
12+
1113
@Directive({selector: '[carousel]'})
1214
export class CarouselDirective implements AfterViewInit {
1315

@@ -33,21 +35,27 @@ export class CarouselDirective implements AfterViewInit {
3335
@Input() carousel: any;
3436
@Input() carouselSpeed: number; // autoplay speed (ms)
3537
@Input() carouselArrows: string; // arrows type
38+
@Input() arrowsEnabled: boolean = false; // enable arrows [default to false]
3639
@Input() carouselLabelOverlay: boolean; // title over image (bool)
3740
@Input() carouselAnimationSpeed: number; // animation speed
3841

3942
@Output() selectedImageChange: EventEmitter<string> = new EventEmitter<string>();
4043

4144
constructor(private elem: ElementRef) {
4245
this.container = elem.nativeElement;
46+
47+
4348
}
4449

4550
ngAfterViewInit() {
4651
this.initOptions();
4752
this.initContainer();
4853
this.initImagesLayout();
4954
this.initSlides();
50-
this.initControls();
55+
// Prefer swipe over arrows tap
56+
if (this.arrowsEnabled) {
57+
this.initControls();
58+
}
5159
this.initAutoPlay();
5260
}
5361

@@ -129,6 +137,13 @@ export class CarouselDirective implements AfterViewInit {
129137
image.on(GestureTypes.tap, () => {
130138
this.selectedImageChange.emit( slide.title );
131139
});
140+
image.on(GestureTypes.swipe, (args: SwipeGestureEventData) => {
141+
if (args.direction === 1) {
142+
this.swipe(CarouselDirections.DIRECTION_LEFT);
143+
} else if (args.direction === 2) {
144+
this.swipe(CarouselDirections.DIRECTION_RIGHT);
145+
}
146+
});
132147
gridLayout.addChild(image);
133148
}
134149

@@ -137,6 +152,13 @@ export class CarouselDirective implements AfterViewInit {
137152
image.on(GestureTypes.tap, () => {
138153
this.selectedImageChange.emit( slide.title );
139154
});
155+
image.on(GestureTypes.swipe, (args: SwipeGestureEventData) => {
156+
if (args.direction === 1) {
157+
this.swipe(CarouselDirections.DIRECTION_LEFT);
158+
} else if (args.direction === 2) {
159+
this.swipe(CarouselDirections.DIRECTION_RIGHT);
160+
}
161+
});
140162
gridLayout.addChild(image);
141163
}
142164

@@ -145,6 +167,13 @@ export class CarouselDirective implements AfterViewInit {
145167
image.on(GestureTypes.tap, () => {
146168
this.selectedImageChange.emit( slide.title );
147169
});
170+
image.on(GestureTypes.swipe, (args: SwipeGestureEventData) => {
171+
if (args.direction === 1) {
172+
this.swipe(CarouselDirections.DIRECTION_LEFT);
173+
} else if (args.direction === 2) {
174+
this.swipe(CarouselDirections.DIRECTION_RIGHT);
175+
}
176+
});
148177
gridLayout.addChild(image);
149178
}
150179

swipeable-image.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import {Image} from "ui/image";
2+
3+
export class SwipeableImage extends Image {
4+
5+
}

0 commit comments

Comments
 (0)