1.0.0 Release

Author: JoshDSommer

README.md

@@ -1,6 +1,6 @@
 # Nativescript Intro Slides for iOS and Android
 
-[![Nativescript Intro Slides. Click to Play](https://img.youtube.com/vi/5GGGiNA98TU/0.jpg)](https://www.youtube.com/embed/5GGGiNA98TU)
+[![Nativescript Intro Slides. Click to Play](https://img.youtube.com/vi/1AatGtPA6J8/0.jpg)](https://www.youtube.com/embed/1AatGtPA6J8)
 
 Beta
 ###XML
@@ -59,24 +59,57 @@ when using the intro slide plugin you need at least two ``<IntroSlides:Slide>``
 
 add as many ``<IntroSlides:Slide>`` as you want.
 
-### Planned additions:
-
-* disable/enable previous and next buttons
-* Add function and property for button text, for next button on the last slide.
-* add properties to override previous and next buttons text.
-
-### Known Issues:
-* Breaks on screen rotation. will be fixed.
+the `IntroSlides` class also has public `nextSlide` and `previousSlide` functions so you can add your own previous and next buttons as needed.
 
 ###Plugin Development Work Flow:
 
 * Clone repository to your machine.
-* First run `npm install`
-* Then run `npm run setup` to prepare the demo project
+* Run `npm run setup` to prepare the demo project
 * Build with `npm run build`
 * Run and deploy to your device or emulator with `npm run demo.android` or `npm run demo.ios`
 
 
+### Smoother panning on Android.
+
+To achieve a much smoother drag on android simply go into the gestures.android.js file in the tns-core-modules here
+
+
+`/node_modules/tns-core-modules/ui/gestures/gestures.android.js`
+
+and change
+
+```javascript
+    CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
+        var count = event.getPointerCount();
+        var res = { x: 0, y: 0 };
+        for (var i = 0; i < count; i++) {
+            res.x += event.getX(i);
+            res.y += event.getY(i);
+        }
+        res.x /= (count * this.density);
+        res.y /= (count * this.density);
+        return res;
+    };
+```
+
+to
+```javascript
+  CustomPanGestureDetector.prototype.getMotionEventCenter = function (event) {
+        var count = event.getPointerCount();
+        var res = { x: 0, y: 0 };
+        for (var i = 0; i < count; i++) {
+            res.x += event.getRawX();
+            res.y += event.getRawY();
+        }
+        res.x /= (count * this.density);
+        res.y /= (count * this.density);
+        return res;
+    };
+```
+
+_please note this will change the panning gesture for your entire project._
+
+
 ###Special thanks to:
 Thanks to [Nathan Walker](https://github.com/NathanWalker) for setting up the {N} plugin seed that I used to help get this plugin up and running. More info can be found about it here:
 https://github.com/NathanWalker/nativescript-plugin-seed

nativescript-intro-slides.d.ts

@@ -1,34 +1,32 @@
 import { AbsoluteLayout } from 'ui/layouts/absolute-layout';
 import { StackLayout } from 'ui/layouts/stack-layout';
-import { AddChildFromBuilder } from 'ui/core/view';
-import { Button } from 'ui/button';
-import { ISlideMap } from './utilities';
-import * as AnimationModule from 'ui/animation';
 export declare class Slide extends StackLayout {
 }
-export declare class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
-    private _childSlides;
+export interface ISlideMap {
+    panel: StackLayout;
+    left?: ISlideMap;
+    right?: ISlideMap;
+}
+export declare class IntroSlides extends AbsoluteLayout {
     private _loaded;
     private currentPanel;
     private _pageWidth;
-    private _btnNext;
-    private _btnPrevious;
     private transitioning;
     private direction;
-    btnNext: Button;
-    btnPrevious: Button;
     pageWidth: number;
     android: any;
     ios: any;
     constructor();
     constructView(): void;
+    nextSlide(): void;
+    previousSlide(): void;
     private setupLeftPanel();
     private setupRightPanel();
-    _addChildFromBuilder: (name: string, value: any) => void;
     private applySwipe(pageWidth);
-    showRightSlide(panelMap: ISlideMap, offset?: number): AnimationModule.AnimationPromise;
-    showLeftSlide(panelMap: ISlideMap, offset?: number): AnimationModule.AnimationPromise;
+    private showRightSlide(panelMap, offset?);
+    private showLeftSlide(panelMap, offset?);
     private buildFooter();
     private setwidthPercent(view, percentage);
     private newFooterButton(name);
+    private buildSlideMap(views);
 }

nativescript-intro-slides.ts

@@ -2,39 +2,33 @@ import * as app from 'application';
 import * as Platform from 'platform';
 import {AbsoluteLayout} from 'ui/layouts/absolute-layout';
 import {StackLayout} from 'ui/layouts/stack-layout';
-import {View, AddChildFromBuilder} from 'ui/core/view';
+import {View} from 'ui/core/view';
 import { Button } from 'ui/button';
-import {SlideUtilities, ISlideMap} from './utilities';
 import {Label} from 'ui/label';
 import * as AnimationModule from 'ui/animation';
 import * as gestures from 'ui/gestures';
 
-export class Slide extends StackLayout {
+export class Slide extends StackLayout { }
 
-}
 enum direction {
 	none,
 	left,
 	right
 }
-export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
 
-	private _childSlides: View[];
+export interface ISlideMap {
+	panel: StackLayout;
+	left?: ISlideMap;
+	right?: ISlideMap;
+}
+
+export class IntroSlides extends AbsoluteLayout {
 	private _loaded: boolean;
 	private currentPanel: ISlideMap;
 	private _pageWidth: number;
-	private _btnNext: Button;
-	private _btnPrevious: Button;
 	private transitioning: boolean;
 	private direction: direction = direction.none;
 
-	get btnNext() {
-		return this._btnNext;
-	}
-
-	get btnPrevious() {
-		return this._btnPrevious;
-	}
 
 	get pageWidth() {
 		return this._pageWidth;
@@ -48,6 +42,7 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
 		return;
 	}
 
+
 	constructor() {
 		super();
 		this.constructView();
@@ -57,21 +52,15 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
 
 		this._loaded = false;
 		this.transitioning = false;
-		this._childSlides = [];
 
 		this._pageWidth = Platform.screen.mainScreen.widthDIPs;
-		const pageHeight = Platform.screen.mainScreen.heightDIPs;
+
+
 
 		this.on(AbsoluteLayout.loadedEvent, (data: any) => {
 			if (!this._loaded) {
 				this._loaded = true;
 
-				let footer = this.buildFooter();
-
-				this._btnPrevious = <Button>footer.getViewById('btn-info-previous');
-				this._btnNext = <Button>footer.getViewById('btn-info-next');
-
-				let info = <Label>footer.getViewById('info');
 				let slides: StackLayout[] = [];
 
 				this.eachLayoutChild((view: View) => {
@@ -82,82 +71,87 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
 						slides.push(view);
 					}
 				});
-				this.currentPanel = SlideUtilities.buildSlideMap(slides);
-
-				this.btnNext.on('tap', () => {
-					this.transitioning = true;
-					this.showRightSlide(this.currentPanel).then(() => {
-						console.log('right button done');
-						this.setupRightPanel();
+				this.currentPanel = this.buildSlideMap(slides);
+				this.currentPanel.panel.translateX = -this.pageWidth;
+				this.applySwipe(this.pageWidth);
 
+				app.on(app.orientationChangedEvent, (args: app.OrientationChangedEventData) => {
+					this._pageWidth = Platform.screen.mainScreen.widthDIPs;
+					this.eachLayoutChild((view: View) => {
+						if (view instanceof StackLayout) {
+							AbsoluteLayout.setLeft(view, this.pageWidth);
+							view.width = this.pageWidth;
+						}
 					});
+					this.applySwipe(this.pageWidth);
+					this.currentPanel.panel.translateX = -this.pageWidth;
 				});
-				this.btnPrevious.on('tap', () => {
-					this.transitioning = true;
-					this.showLeftSlide(this.currentPanel).then(() => {
-						this.setupLeftPanel();
-					});
-				});
-				//	this.addChild(footer);
 
-				if (isNaN(footer.height)) {
-					footer.height = 76; //footer min height
-				}
-				AbsoluteLayout.setTop(footer, (pageHeight - footer.height));
-				this.currentPanel.panel.translateX = -this.pageWidth;
-				this.btnPrevious.visibility = 'collapse';
-				this.applySwipe(this.pageWidth);
 			}
 		});
 
 	}
+
+	public nextSlide() {
+		this.transitioning = true;
+		this.showRightSlide(this.currentPanel).then(() => {
+			this.setupRightPanel();
+		});
+	}
+	public previousSlide() {
+		this.transitioning = true;
+		this.showRightSlide(this.currentPanel).then(() => {
+			this.setupRightPanel();
+		});
+	}
+
 	private setupLeftPanel() {
 		this.direction = direction.none;
 		this.transitioning = false;
-		this.btnNext.visibility = 'visible';
-		this.btnPrevious.visibility = 'visible';
-		this.currentPanel.panel.off('touch,pan');
+		this.currentPanel.panel.off('pan');
 		this.currentPanel = this.currentPanel.left;
 		this.applySwipe(this.pageWidth);
-		if (this.currentPanel.left == null) {
-			this.btnPrevious.visibility = 'collapse';
-		}
 	}
 
 	private setupRightPanel() {
 		this.direction = direction.none;
 		this.transitioning = false;
-		this.btnNext.visibility = 'visible';
-		this.btnPrevious.visibility = 'visible';
-		this.currentPanel.panel.off('touch,pan');
+		this.currentPanel.panel.off('pan');
 		this.currentPanel = this.currentPanel.right;
 		this.applySwipe(this.pageWidth);
-		if (this.currentPanel.right == null) {
-			this.btnNext.visibility = 'collapse';
-		}
 	}
 
-	_addChildFromBuilder = (name: string, value: any) => {
-		if (value instanceof View) {
-			if (value instanceof Slide) {
-				this._childSlides.push(value);
-			}
-			this.addChild(value);
-		}
-	};
-
 	private applySwipe(pageWidth: number) {
 		let previousDelta = -1; //hack to get around ios firing pan event after release
 
 		this.currentPanel.panel.on('pan', (args: gestures.PanGestureEventData): void => {
 			if (args.state === gestures.GestureStateTypes.ended) {
 				if (this.transitioning === false) {
 					this.transitioning = true;
-					this.currentPanel.panel.translateX = -this.pageWidth;
+					this.currentPanel.panel.animate({
+						translate: { x: -this.pageWidth, y: 0 },
+						duration: 250,
+					});
 					if (this.currentPanel.right != null) {
-						this.currentPanel.right.panel.translateX = -this.pageWidth;
-						this.currentPanel.right.panel.translateX = this.pageWidth;
+						this.currentPanel.right.panel.animate({
+							translate: { x: 0, y: 0 },
+							duration: 250,
+						});
+						if (app.ios) //for some reason i have to set these in ios or there is some sort of bounce back.
+							this.currentPanel.right.panel.translateX = 0;
 					}
+					if (this.currentPanel.left != null) {
+						this.currentPanel.left.panel.animate({
+							translate: { x: -this.pageWidth * 2, y: 0 },
+							duration: 250,
+						});
+						if (app.ios)
+							this.currentPanel.left.panel.translateX = -this.pageWidth;
+
+					}
+					if (app.ios)
+						this.currentPanel.panel.translateX = -this.pageWidth;
+
 					this.transitioning = false;
 
 				}
@@ -200,7 +194,7 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
 		});
 	}
 
-	public showRightSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
+	private showRightSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
 		let transition = new Array();
 		transition.push({
 			target: panelMap.right.panel,
@@ -216,21 +210,19 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
 		let animationSet = new AnimationModule.Animation(transition, false);
 
 		return animationSet.play();
-		// panelMap.panel.off('pan');
-		//	this.applySwipe(info, wrapper, pageWidth, panelMap.right, this.btnPrevious, btnNext);
 	}
 
-	public showLeftSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
+	private showLeftSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
 		let transition = new Array();
 		transition.push({
 			target: panelMap.left.panel,
 			translate: { x: -this.pageWidth, y: 0 },
-			duration: 500,
+			duration: 300,
 		});
 		transition.push({
 			target: panelMap.panel,
 			translate: { x: 0, y: 0 },
-			duration: 500,
+			duration: 300,
 		});
 
 		let animationSet = new AnimationModule.Animation(transition, false);
@@ -278,5 +270,21 @@ export class IntroSlides extends AbsoluteLayout implements AddChildFromBuilder {
 		this.setwidthPercent(button, 100);
 		return button;
 	}
+
+	private buildSlideMap(views: StackLayout[]) {
+		let slideMap: ISlideMap[] = [];
+		views.forEach((view: StackLayout) => {
+			slideMap.push({
+				panel: view
+			});
+		});
+		slideMap.forEach((mapping: ISlideMap, index: number) => {
+			if (slideMap[index - 1] != null)
+				mapping.left = slideMap[index - 1];
+			if (slideMap[index + 1] != null)
+				mapping.right = slideMap[index + 1];
+		});
+		return slideMap[0];
+	}
 }