Merge pull request #36 from sitefinitysteve/master

Add Events

Author: TheOriginalJosh

README.md

@@ -86,6 +86,11 @@ add as many ``<Slides:Slide>`` as you want.
 
 - **disablePan : boolean** - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions to change the slide. If slides is used to get details about users like email, phone number, username etc. in this case you don't want users to move from one slide to another slide without filling details.
 
+#### Events
+- **start** - Start pan
+- **changed** - Transition complete
+- **cancelled** - User didn't complete the transition
+
 #### Angular 2 compatibility
 To use the slides with Angular2 and the `registerElement` from `nativescript-angular` you will want to set the `SlideContainer`'s property of `angular` to `true`. Then in your angular component in the `ngAfterViewInit`. you will want to have an instance of your slide container to call the function `constructView()`.
 
@@ -153,6 +158,8 @@ _please note this will change the panning gesture for your entire project._
 
 [Victor Nascimento](https://github.com/vjoao)
 
+[Steve McNiven-Scott](https://github.com/sitefinitysteve)
+
 And thanks to [Nathan Walker](https://github.com/NathanWalker) for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:
 https://github.com/NathanWalker/nativescript-plugin-seed
 

demo/app/app.css

@@ -1,25 +1,26 @@
 .slide-1{
-  background-color: darkslateblue;
+  background-color: #448AFF;
 }
 
 .slide-2{
-  background-color: lightcyan;
+  background-color: #F44336;
 }
 .slide-3{
-  background-color: darkgreen;
-}
+  background-color: #8BC34A;
+} 
 
 .slide-4{
-  background-color: darkgoldenrod;
+  background-color: #9C27B0;
 }
 .slide-5{
-  background-color: darkslategray;
+  background-color: #FFC107;
 }
 
 Label{
   text-align: center;
   width: 100%;
   font-size: 35;
   margin-top: 35;
+  color: #FFF;
 }
 

demo/app/main-page.ts

@@ -18,4 +18,19 @@ export function next() {
 
 export function prev() {
 	slideContainer.previousSlide();
+}
+
+export function onStart(args){
+	var data = args.eventData;
+	console.log("Start: " + JSON.stringify(data));
+}
+
+export function onChanged(args){
+	var data = args.eventData;
+	console.log("Changed: " + JSON.stringify(data));
+}
+
+export function onCancelled(args){
+	var data = args.eventData;
+	console.log("Cancelled: " + JSON.stringify(data));
 }

demo/app/main-page.xml

@@ -1,7 +1,7 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" loaded="pageLoaded">
 
 	<GridLayout rows="* auto">
-		<Slides:SlideContainer id="slides" row="0" pageIndicators="true" androidTranslucentStatusBar ="true">
+		<Slides:SlideContainer id="slides" row="0" pageIndicators="true" androidTranslucentStatusBar="true" start="onStart" cancelled="onCancelled" changed="onChanged">
 			<Slides:Slide class="slide-1">
 				<Label text="This is Panel 1"  />
 			</Slides:Slide>

nativescript-slides.d.ts

@@ -26,6 +26,9 @@ export declare class SlideContainer extends AbsoluteLayout {
     private _footer;
     private _pageIndicators;
     private _indicatorsColor;
+    static startEvent: string;
+    static changedEvent: string;
+    static cancelledEvent: string;
     pageIndicators: boolean;
     indicatorsColor: string;
     hasNext: boolean;

nativescript-slides.ts

@@ -53,6 +53,10 @@ export class SlideContainer extends AbsoluteLayout {
 	private _pageIndicators: boolean;
 	private _indicatorsColor: string;
 
+	public static startEvent = "start";
+	public static changedEvent = "changed";
+	public static cancelledEvent = "cancelled";
+
 	/* page indicator stuff*/
 	get pageIndicators(): boolean {
 		return this._pageIndicators;
@@ -187,8 +191,6 @@ export class SlideContainer extends AbsoluteLayout {
 	}
 
 	public constructView(constructor: boolean = false): void {
-
-
 		this.on(AbsoluteLayout.loadedEvent, (data: any) => {
 			if (!this._loaded) {
 				this._loaded = true;
@@ -349,11 +351,18 @@ export class SlideContainer extends AbsoluteLayout {
 		let startTime, deltaTime;
 
 		this.currentPanel.panel.on('pan', (args: gestures.PanGestureEventData): void => {
-
 			if (args.state === gestures.GestureStateTypes.began) {
 				startTime = Date.now();
 				previousDelta = 0;
 				endingVelocity = 250;
+
+				this.notify({
+					eventName: SlideContainer.startEvent,
+					object: this,
+					eventData: {
+						currentIndex: this.currentPanel.index
+					}
+				});
 			} else if (args.state === gestures.GestureStateTypes.ended) {
 				deltaTime = Date.now() - startTime;
 				// if velocityScrolling is enabled then calculate the velocitty
@@ -366,6 +375,16 @@ export class SlideContainer extends AbsoluteLayout {
 						this.transitioning = true;
 						this.showLeftSlide(this.currentPanel, args.deltaX, endingVelocity).then(() => {
 							this.setupPanel(this.currentPanel.left);
+							
+							this.notify({
+								eventName: SlideContainer.changedEvent,
+								object: this,
+								eventData: {
+									direction: direction.left,
+									newIndex: this.currentPanel.index,
+									oldIndex: this.currentPanel.index + 1
+								}
+							});
 						});
 					}
 					return;
@@ -374,12 +393,30 @@ export class SlideContainer extends AbsoluteLayout {
 						this.transitioning = true;
 						this.showRightSlide(this.currentPanel, args.deltaX, endingVelocity).then(() => {
 							this.setupPanel(this.currentPanel.right);
+
+							this.notify({
+								eventName: SlideContainer.changedEvent,
+								object: this,
+								eventData: {
+									direction: direction.right,
+									newIndex: this.currentPanel.index,
+									oldIndex: this.currentPanel.index - 1
+								}
+							});
 						});
 					}
 					return;
 				}
 
 				if (this.transitioning === false) {
+					this.notify({
+								eventName: SlideContainer.cancelledEvent,
+								object: this,
+								eventData: {
+									currentIndex: this.currentPanel.index
+								}
+							});
+
 					this.transitioning = true;
 					this.currentPanel.panel.animate({
 						translate: { x: -this.pageWidth, y: 0 },

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nativescript-slides",
-	"version": "1.5.4",
+	"version": "1.5.5",
 	"description": "NativeScript Slides plugin.",
 	"main": "nativescript-slides.js",
 	"nativescript": {
@@ -9,7 +9,7 @@
 			"ios": "2.0.0"
 		},
 		"tns-ios": {
-			"version": "2.0.0"
+			"version": "2.0.1"
 		}
 	},
 	"scripts": {
@@ -55,6 +55,11 @@
 			"name": "Victor Nascimento",
 			"email": "victormota15@gmail.com",
 			"url": "https://github.com/vjoao"
+		},
+		{
+			"name": "Steve McNiven-Scott",
+    		"email": "steve@sitefinitysteve.com",
+    		"url": "https://github.com/sitefinitysteve"
 		}
 	],
 	"bugs": {