diff --git a/README.md b/README.md index 3ff916e..15a5a88 100755 --- a/README.md +++ b/README.md @@ -75,22 +75,25 @@ the `` element also has a property called `velocityScroll the `` 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 ``), 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 diff --git a/nativescript-slides.d.ts b/nativescript-slides.d.ts index 22b1c41..cb45bc1 100644 --- a/nativescript-slides.d.ts +++ b/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; diff --git a/nativescript-slides.ts b/nativescript-slides.ts index ce0fd8f..15cd107 100755 --- a/nativescript-slides.ts +++ b/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,7 +112,12 @@ 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 { @@ -111,26 +125,33 @@ export class SlideContainer extends AbsoluteLayout { 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(); diff --git a/package.json b/package.json index 20ed66c..bdde576 100644 --- a/package.json +++ b/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": {