Merge pull request #19 from TheOriginalJosh/ng2-compatability-update

adding angular property. for ng2 compatibility

Author: TheOriginalJosh

README.md

@@ -75,22 +75,25 @@ the `<Slides:SlideContainer>` element also has a property called `velocityScroll
 
 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`.
 
+#### 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()`.
+
 #### Android Optional Attributes
 - `androidTranslucentStatusBar`: boolean - If true, the Android status bar will be translucent on devices that support it. (Android sdk >= 19).
 - `androidTranslucentNavBar`: boolean - If true, the Android navigation bar will be translucent on devices that support it. (Android sdk >= 19).
 
-###Plugin Development Work Flow:
+#### Plugin Development Work Flow:
 
 * Clone repository to your machine.
 * 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`
 
-###Known issues
+#### Known issues
 
   * There apears to be a bug with the loop resulting in bad transitions going right to left.
 
-### Smoother panning on Android (For {N} v2.0.0 and below __only__).
+#### Smoother panning on Android (For {N} v2.0.0 and below __only__).
 
 To achieve a much smoother drag on android simply go into the gestures.android.js file in the tns-core-modules here
 

nativescript-slides.d.ts

@@ -19,6 +19,7 @@ export declare class SlideContainer extends AbsoluteLayout {
     private _androidTranslucentStatusBar;
     private _androidTranslucentNavBar;
     private timer_reference;
+    private _angular;
     hasNext: boolean;
     hasPrevious: boolean;
     interval: number;
@@ -27,11 +28,12 @@ export declare class SlideContainer extends AbsoluteLayout {
     androidTranslucentNavBar: boolean;
     velocityScrolling: boolean;
     pageWidth: number;
+    angular: boolean;
     android: any;
     ios: any;
     constructor();
     private setupDefaultValues();
-    constructView(): void;
+    constructView(constructor?: boolean): void;
     private carousel(isenabled, time);
     private rebindSlideShow();
     stopSlideshow(): void;

nativescript-slides.ts

@@ -42,6 +42,7 @@ export class SlideContainer extends AbsoluteLayout {
 	private _androidTranslucentStatusBar: boolean;
 	private _androidTranslucentNavBar: boolean;
 	private timer_reference: number;
+	private _angular: boolean;
 
 	get hasNext(): boolean {
 		return !!this.currentPanel.right;
@@ -93,6 +94,14 @@ export class SlideContainer extends AbsoluteLayout {
 		return this._pageWidth;
 	}
 
+	get angular(): boolean {
+		return this._angular;
+	}
+
+	set angular(value: boolean) {
+		this._angular = value;
+	}
+
 	get android(): any {
 		return;
 	}
@@ -103,34 +112,46 @@ export class SlideContainer extends AbsoluteLayout {
 
 	constructor() {
 		super();
-		this.constructView();
+		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 {
 		this._loaded = false;
 		if (this._loop == null) {
 			this.loop = false;
 		}
+
 		this.transitioning = false;
 
 		this._pageWidth = Platform.screen.mainScreen.widthDIPs;
 
 		if (this._interval == null) {
-			this._interval = 0;
+			this.interval = 0;
 		}
 
 		if (this._velocityScrolling == null) {
 			this._velocityScrolling = false;
 		}
+		if (this._angular == null) {
+			this.angular = false;
+		}
 
 	}
-	constructView(): void {
-		this.setupDefaultValues();
+
+	public constructView(constructor: boolean = false): void {
+
 
 		this.on(AbsoluteLayout.loadedEvent, (data: any) => {
 			if (!this._loaded) {
 				this._loaded = true;
-
+				if (this.angular === true && constructor === true) {
+					return;
+				}
 				// Android Translucent bars API >= 19 only
 				if (this.androidTranslucentStatusBar === true || this._androidTranslucentNavBar === true && app.android && Platform.device.sdkVersion >= '19') {
 					let window = app.android.startActivity.getWindow();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-slides",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "NativeScript Slides plugin.",
   "main": "nativescript-slides.js",
   "nativescript": {