Merge pull request #54 from TheOriginalJosh/2.0.0

TheOriginalJosh · web-flow · commit c1df62d68115 · 2016-07-30T07:47:03.000-04:00
2.0.0
diff --git a/README.md b/README.md
@@ -80,17 +80,39 @@ add as many ``<Slides:Slide>`` as you want.
 
 -  **loop : boolean** - If true will cause the slide to be an endless loop. The suggested use case would be for a Image Carousel or something of that nature.
 
-- **velocityScrolling : boolean** - If true will calculate transitions speeds based on the finger movement speed.
+- **disablePan : boolean** - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions 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.
+
+- **pagerOffset : string** - Margin-top for the pager.  Number or percentage, default 88%.
 
 - **pageIndicators : boolean** - If true adds indicator dots to the bottom of your slides.
 
-- **indicatorsColor : string** -  color of the indicator dots.
+#### Indicators
 
-- **interval : integer** -  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`.
+If the property `pageIndicators` is `true` you won't see the page indicators anymore as of 2.0.0 right away. there are two css classes exposed that you can setup however you like for active and inactive indicators. below is an example for semi translucent dots.
 
-- **disablePan : boolean** - If true panning is disabled. So that you can call nextSlide()/previousSlide() functions 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.
+```css
+.slide-indicator-inactive{
+    background-color: #fff;
+    opacity : 0.4;
+    width : 10;
+    height : 10;
+    margin-left : 2.5;
+    margin-right : 2.5;
+    margin-top : 0;
+    border-radius : 5;
+}
 
-- **pagerOffset : string** - Margin-top for the pager.  Number or percentage, default 88%.
+.slide-indicator-active{
+    background-color: #fff;
+    opacity : 0.9;
+    width : 10;
+    height : 10;
+    margin-left : 2.5;
+    margin-right : 2.5;
+    margin-top : 0;
+    border-radius : 5;
+}
+```
 
 #### Events
 - **start** - Start pan
@@ -102,10 +124,6 @@ add as many ``<Slides:Slide>`` as you want.
 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()`.
 [Follow the example](https://github.com/TheOriginalJosh/nativescript-slides/issues/37#issuecomment-224820901)
 
-#### 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:
 
 * Clone repository to your machine.
@@ -115,7 +133,7 @@ To use the slides with Angular2 and the `registerElement` from `nativescript-ang
 
 #### Known issues
 
-  * There apears to be a bug with the loop resulting in bad transitions going right to left.
+  * There appears to be a bug with the loop resulting in bad transitions going right to left.
 
 #### How To: Load slides dynamically
 You want to hook into the loaded event of the view and then create your view elements.
@@ -127,7 +145,7 @@ You want to hook into the loaded event of the view and then create your view ele
 ``` ts
 import * as slides from 'nativescript-slides/nativescript-slides'
 
-export function onSlideContainerLoaded(args) {    
+export function onSlideContainerLoaded(args) {
     let slideContainer = <slides.SlideContainer>args.object;
 
       //Construct the slides
diff --git a/demo/app/app.css b/demo/app/app.css
@@ -7,7 +7,7 @@
 }
 .slide-3{
   background-color: #8BC34A;
-} 
+}
 
 .slide-4{
   background-color: #9C27B0;
@@ -25,7 +25,7 @@
 }
 .slide-8{
   background-color: #8BC34A;
-} 
+}
 
 .slide-9{
   background-color: #9C27B0;
@@ -60,3 +60,25 @@ Label{
   color: #fff;
   margin-right: 20;
 }
+
+.slide-indicator-inactive{
+    background-color: #fff;
+  	opacity : 0.4;
+		width : 10;
+		height : 10;
+		margin-left : 2.5;
+		margin-right : 2.5;
+		margin-top : 0;
+		border-radius : 5;
+}
+
+.slide-indicator-active{
+    background-color: #fff;
+  	opacity : 0.9;
+		width : 10;
+		height : 10;
+		margin-left : 2.5;
+		margin-right : 2.5;
+		margin-top : 0;
+		border-radius : 5;
+}
diff --git a/demo/app/loader.xml b/demo/app/loader.xml
@@ -6,6 +6,6 @@
     <StackLayout class="commands">
         <Button text="Main Demo" tap="onLoadMain" />
         <Button text="Dynamic Slides" tap="onLoadDynamic" />
-        <Button text="Carousel" tap="onLoadCarousel" />            
+        <!--<Button text="Carousel" tap="onLoadCarousel" />            -->
     </StackLayout>
 </Page>
diff --git a/demo/app/views/carousel-page.ts b/demo/app/views/carousel-page.ts
@@ -11,7 +11,7 @@ export function pageLoaded(args: observable.EventData) {
 	var page = <pages.Page>args.object;
 	page.actionBarHidden = true;
 	let slideContainer = <slides.SlideContainer>page.getViewById("slides");
-    slideContainer.startSlideshow();
+    // slideContainer.startSlideshow();
 }
 
 export function onNavHome() {
diff --git a/demo/app/views/carousel-page.xml b/demo/app/views/carousel-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" pageIndicators="true" androidTranslucentStatusBar="true" disablePan="true" interval="2000"
+		<Slides:SlideContainer id="slides" row="0" pageIndicators="true" disablePan="true"
 							  start="onStart" cancelled="onCancelled" changed="onChanged" finished="onFinished">
 			<Slides:Slide class="slide-1">
 				<Label text="This is Panel 1"  />
diff --git a/demo/app/views/dynamic-page.xml b/demo/app/views/dynamic-page.xml
@@ -1,9 +1,9 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:Slides="nativescript-slides" navigatedTo="navigatedTo">
 
 	<GridLayout rows="* auto">
-		<Slides:SlideContainer id="slides" row="0" pageIndicators="true" androidTranslucentStatusBar="true" loaded="onSlideContainerLoaded"
+		<Slides:SlideContainer id="slides" row="0" pageIndicators="true" loaded="onSlideContainerLoaded"
 							  start="onStart" cancelled="onCancelled" changed="onChanged" finished="onFinished">
-                                             
+
 		</Slides:SlideContainer>
 	</GridLayout>
 </Page>
diff --git a/demo/app/views/main-page.xml b/demo/app/views/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" pageIndicators="true" androidTranslucentStatusBar="true" 
+		<Slides:SlideContainer id="slides" row="0" pageIndicators="true" loop="true"
 							  start="onStart" cancelled="onCancelled" changed="onChanged" finished="onFinished">
 			<Slides:Slide class="slide-1">
 				<Label text="This is Panel 1"  />
diff --git a/demo/lib/iOS/TNSWidgets.framework/Headers/TNSLabel.h b/demo/lib/iOS/TNSWidgets.framework/Headers/TNSLabel.h
@@ -0,0 +1,16 @@
+//
+//  TNSLabel.h
+//  TNSWidgets
+//
+//  Created by Hristo Hristov on 6/9/16.
+//  Copyright © 2016 Telerik A D. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+@interface TNSLabel : UILabel
+
+@property(nonatomic) UIEdgeInsets padding;
+@property(nonatomic) UIEdgeInsets borderThickness;
+
+@end
diff --git a/demo/lib/iOS/TNSWidgets.framework/Headers/TNSWidgets.h b/demo/lib/iOS/TNSWidgets.framework/Headers/TNSWidgets.h
@@ -0,0 +1,20 @@
+//
+//  TNSWidgets.h
+//  TNSWidgets
+//
+//  Created by Panayot Cankov on 4/27/16.
+//  Copyright © 2016 Telerik A D. All rights reserved.
+//
+
+#import <UIKit/UIKit.h>
+
+//! Project version number for TNSWidgets.
+FOUNDATION_EXPORT double TNSWidgetsVersionNumber;
+
+//! Project version string for TNSWidgets.
+FOUNDATION_EXPORT const unsigned char TNSWidgetsVersionString[];
+
+// In this header, you should import all the public headers of your framework using statements like #import <TNSWidgets/PublicHeader.h>
+
+#import "UIImage+TNSBlocks.h"
+#import "TNSLabel.h"
diff --git a/demo/lib/iOS/TNSWidgets.framework/Headers/UIImage+TNSBlocks.h b/demo/lib/iOS/TNSWidgets.framework/Headers/UIImage+TNSBlocks.h
@@ -0,0 +1,26 @@
+//
+//  UIImage+UIImage_Async.h
+//  TKImageAsync
+//
+//  Created by Panayot Cankov on 4/18/16.
+//  Copyright © 2016 Telerik A D. All rights reserved.
+//
+
+@interface UIImage (TNSBlocks)
+
+/**
+ * Similar to imageNamed: however it runs on a separate queue so the UI thread is not blocked.
+ * It also draws the UIImage in a small thumb to force decoding potentially avoiding UI hicckups when displayed.
+ */
++ (void) tns_safeDecodeImageNamed: (NSString*) name completion: (void (^) (UIImage*))callback;
+
+/**
+ * Same as imageNamed, however calls to this method are sinchronized to be thread safe in iOS8 along with calls to tns_safeImageNamed and tns_safeDecodeImageNamed:completion:
+ * imageNamed is thread safe in iOS 9 and later so in later versions this methods simply fallbacks to imageNamed:
+ */
++ (UIImage*) tns_safeImageNamed: (NSString*) name;
+
++ (void) tns_decodeImageWithData: (NSData*) data completion: (void (^) (UIImage*))callback;
++ (void) tns_decodeImageWidthContentsOfFile: (NSString*) file completion: (void (^) (UIImage*))callback;
+
+@end
diff --git a/demo/lib/iOS/TNSWidgets.framework/Info.plist b/demo/lib/iOS/TNSWidgets.framework/Info.plist
diff --git a/demo/lib/iOS/TNSWidgets.framework/Modules/module.modulemap b/demo/lib/iOS/TNSWidgets.framework/Modules/module.modulemap
@@ -0,0 +1,6 @@
+framework module TNSWidgets {
+  umbrella header "TNSWidgets.h"
+
+  export *
+  module * { export * }
+}
diff --git a/demo/lib/iOS/TNSWidgets.framework/TNSWidgets b/demo/lib/iOS/TNSWidgets.framework/TNSWidgets
diff --git a/demo/package.json b/demo/package.json
@@ -1,24 +1,24 @@
 {
   "nativescript": {
     "id": "org.nativescript.demo",
-    "tns-android": {
-      "version": "2.0.0"
-    },
     "tns-ios": {
-      "version": "2.0.0"
+      "version": "2.1.1"
+    },
+    "tns-android": {
+      "version": "2.1.1"
     }
   },
   "dependencies": {
     "nativescript-slides": "file:..",
-    "tns-core-modules": "^2.0.1"
+    "tns-core-modules": "^2.1.0"
   },
   "devDependencies": {
     "babel-traverse": "6.9.0",
     "babel-types": "6.9.1",
     "babylon": "6.8.0",
     "filewalker": "0.1.2",
     "lazy": "1.0.11",
-    "nativescript-dev-typescript": "^0.3.1",
+    "nativescript-dev-typescript": "^0.3.2",
     "typescript": "^1.8.7"
   }
 }
diff --git a/nativescript-slides.d.ts b/nativescript-slides.d.ts
@@ -16,32 +16,21 @@ export declare class SlideContainer extends AbsoluteLayout {
     private _loaded;
     private _pageWidth;
     private _loop;
-    private _interval;
     private _pagerOffset;
-    private _velocityScrolling;
-    private _androidTranslucentStatusBar;
-    private _androidTranslucentNavBar;
-    private timer_reference;
     private _angular;
     private _disablePan;
     private _footer;
     private _pageIndicators;
-    private _indicatorsColor;
-    static startEvent: string;
-    static changedEvent: string;
-    static cancelledEvent: string;
-    static finishedEvent: string;
+    static START_EVENT: string;
+    static CHANGED_EVENT: string;
+    static CANCELLED_EVENT: string;
+    static FINISHED_EVENT: string;
     pageIndicators: boolean;
-    indicatorsColor: string;
     pagerOffset: string;
     hasNext: boolean;
     hasPrevious: boolean;
-    interval: number;
     loop: boolean;
     disablePan: boolean;
-    androidTranslucentStatusBar: boolean;
-    androidTranslucentNavBar: boolean;
-    velocityScrolling: boolean;
     pageWidth: number;
     angular: boolean;
     android: any;
@@ -50,25 +39,21 @@ export declare class SlideContainer extends AbsoluteLayout {
     constructor();
     private setupDefaultValues();
     constructView(constructor?: boolean): void;
-    private carousel(isenabled, time);
-    private rebindSlideShow();
-    stopSlideshow(): void;
-    startSlideshow(): void;
     nextSlide(): void;
     previousSlide(): void;
-    resetAndroidTranslucentFlags(): void;
     private setupPanel(panel);
+    private positionPanels(panel);
     private applySwipe(pageWidth);
     private showRightSlide(panelMap, offset?, endingVelocity?);
     private showLeftSlide(panelMap, offset?, endingVelocity?);
-    private buildFooter(pageCount, activeIndex, iColor);
+    private buildFooter(pageCount?, activeIndex?);
     private setwidthPercent(view, percentage);
     private newFooterButton(name);
     private buildSlideMap(views);
     private triggerStartEvent();
     private triggerChangeEventLeftToRight();
     private triggerChangeEventRightToLeft();
     private triggerCancelEvent(cancelReason);
-    createIndicator(indicatorColor: string): Label;
+    createIndicator(index: number): Label;
     setActivePageIndicator(index: number): void;
 }
diff --git a/nativescript-slides.ts b/nativescript-slides.ts
diff --git a/package.json b/package.json
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export function pageLoaded(args: observable.EventData) {`
`11`	`11`	`var page = <pages.Page>args.object;`
`12`	`12`	`page.actionBarHidden = true;`
`13`	`13`	`let slideContainer = <slides.SlideContainer>page.getViewById("slides");`
`14`		`- slideContainer.startSlideshow();`
	`14`	`+ // slideContainer.startSlideshow();`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`export function onNavHome() {`