Gestures snippets

Author: vakrilov

tests/app/main.ts

@@ -1,5 +1,7 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
 import {nativeScriptBootstrap} from "nativescript-angular/application";
 import {AppComponent} from "./app.component";
+import {GestureComponent} from "./snippets/gestures.component";
 
 nativeScriptBootstrap(AppComponent);
+// nativeScriptBootstrap(GestureComponent);

tests/app/snippets/gestures.component.ts

@@ -0,0 +1,65 @@
+import {Component} from "angular2/core";
+import {
+    GestureEventData,
+    PanGestureEventData,
+    PinchGestureEventData,
+    RotationGestureEventData,
+    SwipeGestureEventData,
+    TouchGestureEventData} from "ui/gestures";
+
+@Component({
+    selector: "gestures",
+    templateUrl: "snippets/gestures.component.xml",
+    styles:['label { font-size: 32; margin: 2; background-color: lightgreen;}']
+})
+export class GestureComponent {
+    
+    // >> tap-gesture
+    onTap(args: GestureEventData) {
+        console.log("Tap!")
+    }
+    // << tap-gesture
+    
+    // >> double-tap-gesture
+    onDoubleTap(args: GestureEventData) {
+        console.log("DoubleTap!")
+
+    }
+    // << double-tap-gesture
+    
+    // >> long-press-gesture
+    onLongPress(args: GestureEventData) {
+        console.log("LongPress!")
+    }
+    // << long-press-gesture
+    
+    // >> swipe-gesture
+    onSwipe(args: SwipeGestureEventData) {
+        console.log("Swipe Direction: " + args.direction);
+    }
+    // << swipe-gesture
+    
+    // >> pan-gesture
+    onPan(args: PanGestureEventData) {
+        console.log("Pan delta: [" + args.deltaX + ", " + args.deltaY + "] state: " + args.state);
+    }
+    // << pan-gesture
+    
+    // >> pinch-gesture
+    onPinch(args: PinchGestureEventData) {
+        console.log("Pinch scale: " + args.scale + " state: " + args.state);
+    }
+    // << pinch-gesture
+    
+    // >> rotate-gesture
+    onRotate(args: RotationGestureEventData) {
+        console.log("Rotate angle: " + args.rotation + " state: " + args.state);
+    }
+    // << rotate-gesture
+    
+    // >> touch-gesture
+    onTouch(args: TouchGestureEventData) {
+        console.log("Touch point: [" + args.getX() + ", " + args.getY() + "] activePointers: " + args.getActivePointers().length);
+    } 
+    // << touch-gesture   
+}

tests/app/snippets/gestures.component.xml

@@ -0,0 +1,33 @@
+<StackLayout orientation="vertical">
+    <!-- >> tap-gesture -->
+    <Label text="Tap here" (tap)="onTap($event)"></Label>
+    <!-- << tap-gesture -->
+    
+    <!-- >> double-tap-gesture -->    
+    <Label text="Double tap here" (doubleTap)="onDoubleTap($event)"></Label>
+    <!-- << double-tap-gesture -->
+    
+    <!-- >> long-press-gesture -->
+    <Label text="Long press here" (longPress)="onLongPress($event)"></Label>
+    <!-- << long-press-gesture -->
+    
+    <!-- >> swipe-gesture -->
+    <Label text="Swipe here" (swipe)="onSwipe($event)"></Label>
+    <!-- << swipe-gesture -->
+    
+    <!-- >> pan-gesture -->
+    <Label text="Pan here" (pan)="onPan($event)"></Label>
+    <!-- << pan-gesture -->
+    
+    <!-- >> pinch-gesture -->
+    <Label text="Pinch here" (pinch)="onPinch($event)"></Label>
+    <!-- << pinch-gesture -->
+    
+    <!-- >> rotate-gesture -->
+    <Label text="Rotate here" (rotation)="onRotate($event)"></Label>
+    <!-- << rotate-gesture -->
+    
+    <!-- >> touch-gesture -->
+    <Label text="Touch here" (touch)="onTouch($event)"></Label>
+    <!-- << touch-gesture -->    
+</StackLayout>