disable pan done

Author: mabhijith95a10

README.md

@@ -73,6 +73,8 @@ the `<Slides:SlideContainer>` element also has a property called `loop` which is
 
 the `<Slides:SlideContainer>` element also has a property called `velocityScrolling` which is a boolean value and if set to true will calculate transitions speeds based on the finger movement speed.
 
+the `<Slides:SlideContainer>` element also has a property called `pageIndicators` which will add indicator dots to the bottom of your slides.
+
 the `<Slides:SlideContainer>` element also has a property called `interval` which is a integer value and the value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call `page.getViewById("your_id").stopSlideshow()` to unregister it (your_id is the id given to `<Slides:SlideContainer>`), it can be restarted with `startSlidShow`.
 
 the `<Slides:SlideContainer>` element also has a property called `disablePan` which is used to disable panning when set to true. So that you can call nextSlide() function 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. So, you can disablePan option.
@@ -133,64 +135,6 @@ to
     };
 ```
 
-#### Smoother panning on Android (For {N} v2.0.1 __only__).
-
-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.getEventCoordinates = function (event) {
-		var count = event.getPointerCount();
-		if (count === 1) {
-				return {
-						x: event.getRawX() / this.density,
-						y: event.getRawY() / this.density
-				};
-		}
-		else {
-				var offX = event.getRawX() - event.getX();
-				var offY = event.getRawY() - event.getY();
-				var res = { x: 0, y: 0 };
-				for (var i = 0; i < count; i++) {
-						res.x += event.getX(i) + offX;
-						res.y += event.getY(i) + offY;
-				}
-				res.x /= (count * this.density);
-				res.y /= (count * this.density);
-				return res;
-		}
-};
-```
-
-to
-```javascript
-CustomPanGestureDetector.prototype.getEventCoordinates = function (event) {
-			var count = event.getPointerCount();
-			if (count === 1) {
-					return {
-							x: event.getRawX() / this.density,
-							y: event.getRawY() / this.density
-					};
-			}
-			else {
-					var offX = event.getRawX() - event.getX();
-					var offY = event.getRawY() - event.getY();
-					var res = { x: 0, y: 0 };
-					for (var i = 0; i < count; i++) {
-							res.x += event.getRawX(i) + offX;
-							res.y += event.getRawY(i) + offY;
-					}
-					res.x /= (count * this.density);
-					res.y /= (count * this.density);
-					return res;
-			}
-	};
-```
-
 _please note this will change the panning gesture for your entire project._
 
 

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">
+		<Slides:SlideContainer id="slides" row="0" pageIndicators="true">
 			<Slides:Slide class="slide-1">
 				<Label text="This is Panel 1"  />
 			</Slides:Slide>
@@ -19,9 +19,6 @@
 			</Slides:Slide>
 		</Slides:SlideContainer>
 
-		<StackLayout row="1">
-			<button tap="next" text="Next"/>
-			<button tap="prev" text="Prev"/>
-		</StackLayout>
+
 	</GridLayout>
 </Page>

nativescript-slides.d.ts

@@ -1,9 +1,11 @@
 import { AbsoluteLayout } from 'ui/layouts/absolute-layout';
 import { StackLayout } from 'ui/layouts/stack-layout';
+import { Label } from 'ui/label';
 export declare class Slide extends StackLayout {
 }
 export interface ISlideMap {
     panel: StackLayout;
+    index: number;
     left?: ISlideMap;
     right?: ISlideMap;
 }
@@ -21,6 +23,9 @@ export declare class SlideContainer extends AbsoluteLayout {
     private timer_reference;
     private _angular;
     private _disablePan;
+    private _footer;
+    private _pageIndicators;
+    pageIndicators: boolean;
     hasNext: boolean;
     hasPrevious: boolean;
     interval: number;
@@ -33,6 +38,7 @@ export declare class SlideContainer extends AbsoluteLayout {
     angular: boolean;
     android: any;
     ios: any;
+    currentIndex: number;
     constructor();
     private setupDefaultValues();
     constructView(constructor?: boolean): void;
@@ -47,8 +53,10 @@ export declare class SlideContainer extends AbsoluteLayout {
     private applySwipe(pageWidth);
     private showRightSlide(panelMap, offset?, endingVelocity?);
     private showLeftSlide(panelMap, offset?, endingVelocity?);
-    private buildFooter();
+    private buildFooter(pageCount?, activeIndex?);
     private setwidthPercent(view, percentage);
     private newFooterButton(name);
     private buildSlideMap(views);
+    createIndicator(): Label;
+    setActivePageIndicator(index: number): void;
 }

nativescript-slides.ts

@@ -7,7 +7,10 @@ import { Button } from 'ui/button';
 import {Label} from 'ui/label';
 import * as AnimationModule from 'ui/animation';
 import * as gestures from 'ui/gestures';
-import {AnimationCurve} from 'ui/enums';
+import {AnimationCurve, Orientation} from 'ui/enums';
+import {Color} from 'color';
+import {Image} from 'ui/image';
+import * as imageSource from 'image-source';
 
 let LayoutParams: any;
 if (app.android) {
@@ -26,6 +29,7 @@ enum direction {
 
 export interface ISlideMap {
 	panel: StackLayout;
+	index: number;
 	left?: ISlideMap;
 	right?: ISlideMap;
 }
@@ -44,11 +48,20 @@ export class SlideContainer extends AbsoluteLayout {
 	private timer_reference: number;
 	private _angular: boolean;
 	private _disablePan: boolean;
+	private _footer: StackLayout;
+	private _pageIndicators: boolean;
+
+	/* page indicator stuff*/
+	get pageIndicators(): boolean {
+		return this._pageIndicators;
+	}
+	set pageIndicators(value: boolean) {
+		this._pageIndicators = value;
+	}
 
 	get hasNext(): boolean {
 		return !!this.currentPanel.right;
 	}
-
 	get hasPrevious(): boolean {
 		return !!this.currentPanel.left;
 	}
@@ -119,14 +132,17 @@ export class SlideContainer extends AbsoluteLayout {
 		return;
 	}
 
+	get currentIndex(): number {
+		return this.currentPanel.index;
+	}
+
 	constructor() {
 		super();
 		this.setupDefaultValues();
 		// if being used in an ng2 app we want to prevent it from excuting the constructView
 		// until it is called manually in ngAfterViewInit.
 
 		this.constructView(true);
-
 	}
 
 	private setupDefaultValues(): void {
@@ -136,7 +152,6 @@ export class SlideContainer extends AbsoluteLayout {
 		}
 
 		this.transitioning = false;
-
 		this._pageWidth = Platform.screen.mainScreen.widthDIPs;
 
 		if (this._interval == null) {
@@ -154,6 +169,9 @@ export class SlideContainer extends AbsoluteLayout {
 			this.angular = false;
 		}
 
+		if (this._pageIndicators == null) {
+			this._pageIndicators = false;
+		}
 	}
 
 	public constructView(constructor: boolean = false): void {
@@ -191,6 +209,13 @@ export class SlideContainer extends AbsoluteLayout {
 					}
 				});
 
+				if (this.pageIndicators) {
+					this._footer = this.buildFooter(slides.length, 0);
+					this.addChild(this._footer);
+					//	this.setActivePageIndicator(0);
+				}
+
+
 				this.currentPanel = this.buildSlideMap(slides);
 				this.currentPanel.panel.translateX = -this.pageWidth;
 				if(disablePan == false) {
@@ -209,6 +234,8 @@ export class SlideContainer extends AbsoluteLayout {
 					if(disablePan == false) {
 						this.applySwipe(this.pageWidth);
 					}
+					let topOffset = Platform.screen.mainScreen.heightDIPs - 105;
+					AbsoluteLayout.setTop(this._footer, topOffset);
 					this.currentPanel.panel.translateX = -this.pageWidth;
 				});
 			}
@@ -284,6 +311,7 @@ export class SlideContainer extends AbsoluteLayout {
 		if(disablePan == false) {
 			this.applySwipe(this.pageWidth);
 		}
+		this.setActivePageIndicator(this.currentPanel.index);
 		this.rebindSlideShow();
 	}
 
@@ -447,31 +475,29 @@ export class SlideContainer extends AbsoluteLayout {
 	/**
 	 * currently deprecated.... will come back to life for navigation dots.
 	 *  */
-	private buildFooter(): AbsoluteLayout {
-		let footer = new AbsoluteLayout();
+	private buildFooter(pageCount: number = 5, activeIndex: number = 0): StackLayout {
 		let footerInnerWrap = new StackLayout();
-		let footerInnerWrapLeft = new StackLayout();
-		let footerInnerWrapMiddle = new StackLayout();
-		let footerInnerWrapRight = new StackLayout();
-		this.setwidthPercent(footer, 100);
+		const topOffset = Platform.screen.mainScreen.heightDIPs - 105;
+		footerInnerWrap.height = 20;
 
-		footerInnerWrap.orientation = 'horizontal';
 		this.setwidthPercent(footerInnerWrap, 100);
+		AbsoluteLayout.setLeft(footerInnerWrap, 0);
+		AbsoluteLayout.setTop(footerInnerWrap, topOffset);
 
-		footer.addChild(footerInnerWrap);
-
-		this.setwidthPercent(footerInnerWrapRight, 30);
-		this.setwidthPercent(footerInnerWrapLeft, 30);
-		this.setwidthPercent(footerInnerWrapMiddle, 40);
-
-		footerInnerWrapLeft.addChild(this.newFooterButton('Previous'));
-		footerInnerWrapRight.addChild(this.newFooterButton('Next'));
+		footerInnerWrap.orientation = 'horizontal';
+		footerInnerWrap.verticalAlignment = 'top';
+		footerInnerWrap.horizontalAlignment = 'center';
 
-		footerInnerWrap.addChild(footerInnerWrapLeft);
-		footerInnerWrap.addChild(footerInnerWrapMiddle);
-		footerInnerWrap.addChild(footerInnerWrapRight);
+		let i = 0;
+		while (i < pageCount) {
+			footerInnerWrap.addChild(this.createIndicator());
+			i++;
+		}
 
-		return footer;
+		let activeIndicator = footerInnerWrap.getChildAt(0);
+		activeIndicator.className = 'slide-indicator-active';
+		activeIndicator.opacity = 0.9;
+		return footerInnerWrap;
 	}
 
 	private setwidthPercent(view: View, percentage: number) {
@@ -488,9 +514,10 @@ export class SlideContainer extends AbsoluteLayout {
 
 	private buildSlideMap(views: StackLayout[]) {
 		let slideMap: ISlideMap[] = [];
-		views.forEach((view: StackLayout) => {
+		views.forEach((view: StackLayout, index: number) => {
 			slideMap.push({
-				panel: view
+				panel: view,
+				index: index,
 			});
 		});
 		slideMap.forEach((mapping: ISlideMap, index: number) => {
@@ -507,4 +534,30 @@ export class SlideContainer extends AbsoluteLayout {
 		this.startSlideshow();
 		return slideMap[0];
 	}
+
+	createIndicator(): Label {
+		let indicator = new Label();
+		indicator.backgroundColor = new Color('#fff');
+		indicator.opacity = 0.4;
+		indicator.width = 10;
+		indicator.height = 10;
+		indicator.marginLeft = 2.5;
+		indicator.marginRight = 2.5;
+		indicator.borderRadius = 5;
+		return indicator;
+	}
+
+	setActivePageIndicator(index: number) {
+
+		this._footer.eachLayoutChild((view: View) => {
+			if (view instanceof Label) {
+				view.opacity = 0.4;
+				view.className = 'slide-indicator-inactive';
+			}
+		});
+		let activeIndicator = this._footer.getChildAt(index);
+		activeIndicator.className = 'slide-indicator-active';
+		activeIndicator.opacity = 0.9;
+
+	}
 }