From 71573109adc4916fe66718eb04ebd82d4c32bf93 Mon Sep 17 00:00:00 2001 From: Josh Sommer Date: Sun, 22 May 2016 20:25:01 -0400 Subject: [PATCH 1/3] adding ng2 property. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit basically we don’t want the constructView function to fire for angular to so that it can be called latter in ngAfterViewInit --- README.md | 9 ++++++--- demo/app/main-page.xml | 2 +- nativescript-slides.d.ts | 2 ++ nativescript-slides.ts | 20 +++++++++++++++++++- 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3ff916e..dbcbd03 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 `ng2` 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/demo/app/main-page.xml b/demo/app/main-page.xml index 4023c84..87442d4 100755 --- a/demo/app/main-page.xml +++ b/demo/app/main-page.xml @@ -1,7 +1,7 @@ - + diff --git a/nativescript-slides.d.ts b/nativescript-slides.d.ts index 22b1c41..797137a 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 _ng2; hasNext: boolean; hasPrevious: boolean; interval: number; @@ -27,6 +28,7 @@ export declare class SlideContainer extends AbsoluteLayout { androidTranslucentNavBar: boolean; velocityScrolling: boolean; pageWidth: number; + ng2: boolean; android: any; ios: any; constructor(); diff --git a/nativescript-slides.ts b/nativescript-slides.ts index ce0fd8f..76e1620 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 _ng2: boolean; get hasNext(): boolean { return !!this.currentPanel.right; @@ -93,6 +94,14 @@ export class SlideContainer extends AbsoluteLayout { return this._pageWidth; } + get ng2(): boolean { + return this._ng2; + } + + set ng2(value: boolean) { + this._ng2 = value; + } + get android(): any { return; } @@ -122,10 +131,19 @@ export class SlideContainer extends AbsoluteLayout { if (this._velocityScrolling == null) { this._velocityScrolling = false; } + if (this._ng2 == null) { + this._ng2 = false; + } } - constructView(): void { + + public constructView(): void { 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. + if (this.ng2) { + return; + } this.on(AbsoluteLayout.loadedEvent, (data: any) => { if (!this._loaded) { From dd0e0514ef6a572c7522f89d16ed0d4e02ddc2a8 Mon Sep 17 00:00:00 2001 From: Josh Sommer Date: Sun, 22 May 2016 20:25:56 -0400 Subject: [PATCH 2/3] version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 20ed66c..cbc62a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nativescript-slides", - "version": "1.2.0", + "version": "1.3.0", "description": "NativeScript Slides plugin.", "main": "nativescript-slides.js", "nativescript": { From 91db93b136b9fe407033c426a3b8f54c4ef8de54 Mon Sep 17 00:00:00 2001 From: Josh Sommer Date: Sun, 22 May 2016 20:54:08 -0400 Subject: [PATCH 3/3] rename property also includes readme updates and fixes for property not being set. this is release 1.3.1 --- README.md | 2 +- demo/app/main-page.xml | 2 +- nativescript-slides.d.ts | 6 +++--- nativescript-slides.ts | 37 ++++++++++++++++++++----------------- package.json | 2 +- 5 files changed, 26 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index dbcbd03..15a5a88 100755 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ 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 `ng2` 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()`. +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). diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml index 87442d4..4023c84 100755 --- a/demo/app/main-page.xml +++ b/demo/app/main-page.xml @@ -1,7 +1,7 @@ - + diff --git a/nativescript-slides.d.ts b/nativescript-slides.d.ts index 797137a..cb45bc1 100644 --- a/nativescript-slides.d.ts +++ b/nativescript-slides.d.ts @@ -19,7 +19,7 @@ export declare class SlideContainer extends AbsoluteLayout { private _androidTranslucentStatusBar; private _androidTranslucentNavBar; private timer_reference; - private _ng2; + private _angular; hasNext: boolean; hasPrevious: boolean; interval: number; @@ -28,12 +28,12 @@ export declare class SlideContainer extends AbsoluteLayout { androidTranslucentNavBar: boolean; velocityScrolling: boolean; pageWidth: number; - ng2: boolean; + 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 76e1620..15cd107 100755 --- a/nativescript-slides.ts +++ b/nativescript-slides.ts @@ -42,7 +42,7 @@ export class SlideContainer extends AbsoluteLayout { private _androidTranslucentStatusBar: boolean; private _androidTranslucentNavBar: boolean; private timer_reference: number; - private _ng2: boolean; + private _angular: boolean; get hasNext(): boolean { return !!this.currentPanel.right; @@ -94,12 +94,12 @@ export class SlideContainer extends AbsoluteLayout { return this._pageWidth; } - get ng2(): boolean { - return this._ng2; + get angular(): boolean { + return this._angular; } - set ng2(value: boolean) { - this._ng2 = value; + set angular(value: boolean) { + this._angular = value; } get android(): any { @@ -112,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 { @@ -120,35 +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._ng2 == null) { - this._ng2 = false; + if (this._angular == null) { + this.angular = false; } } - public constructView(): void { - 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. - if (this.ng2) { - return; - } + 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 cbc62a1..bdde576 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nativescript-slides", - "version": "1.3.0", + "version": "1.3.1", "description": "NativeScript Slides plugin.", "main": "nativescript-slides.js", "nativescript": {