Merge pull request #30 from bradmartin/master

Add indicator color option, cleaned up README

Author: TheOriginalJosh

README.md

@@ -1,38 +1,38 @@
 # NativeScript Slides for iOS and Android
-###_The plugin formally known as nativescript-intro-slides_
+### _The plugin formally known as nativescript-intro-slides_
 
-###Intro slides example:
+### Intro slides example:
 [![Nativescript Slides. Click to Play](https://img.youtube.com/vi/kGby8qtSDjM/0.jpg)](https://www.youtube.com/embed/kGby8qtSDjM)
 
-###Image carousel example:
+### Image carousel example:
 [![Nativescript Slides. Click to Play](https://img.youtube.com/vi/RsEqGAKm62k/0.jpg)](https://www.youtube.com/embed/RsEqGAKm62k)
 
 _videos by [Brad Martin](https://github.com/bradmartin)_
 
-##Example Usage:
-###XML
+## Example Usage:
+### XML
 ```xml
 
-	<Slides:SlideContainer>
-		<Slides:Slide class="slide-1">
-			<Label text="This is Panel 1"  />
-		</Slides:Slide>
-		<Slides:Slide class="slide-2">
-			<Label text="This is Panel 2"  />
-		</Slides:Slide>
-		<Slides:Slide class="slide-3">
-			<Label text="This is Panel 3"  />
-		</Slides:Slide>
-		<Slides:Slide class="slide-4">
-			<Label text="This is Panel 4"  />
-		</Slides:Slide>
-		<Slides:Slide class="slide-5">
-			<Label text="This is Panel 5"  />
-		</Slides:Slide>
+	<Slides:SlideContainer id="slides" pageIndicators="true" indicatorsColor="#fff">
+			<Slides:Slide class="slide-1">
+				<Label text="This is Panel 1"  />
+			</Slides:Slide>
+			<Slides:Slide class="slide-2">
+				<Label text="This is Panel 2"  />
+			</Slides:Slide>
+			<Slides:Slide class="slide-3">
+				<Label text="This is Panel 3"  />
+			</Slides:Slide>
+			<Slides:Slide class="slide-4">
+				<Label text="This is Panel 4"  />
+			</Slides:Slide>
+			<Slides:Slide class="slide-5">
+				<Label text="This is Panel 5"  />
+			</Slides:Slide>
 	</Slides:SlideContainer>
 
 ```
-###CSS
+### CSS
 ```css
 .slide-1{
   background-color: darkslateblue;
@@ -67,24 +67,31 @@ when using the intro slide plugin you need at least two ``<Slides:Slide>`` views
 
 add as many ``<Slides:Slide>`` as you want.
 
-the `SlideContainer` class also has public `nextSlide` and `previousSlide` functions so you can add your own previous and next buttons as needed.
+### Methods for SlideContainer
 
-the `<Slides:SlideContainer>` element also has a property called `loop` which is a boolean value and if set to 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.
+- **nextSlide()** - navigate to the next slide (right direction)
+- **previousSlide()** - navigate to the previous slide (left direction)
 
-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.
+### Attributes for SlideContainer
 
-the `<Slides:SlideContainer>` element also has a property called `pageIndicators` which will add indicator dots to the bottom of your slides.
+-  **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.
 
-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`.
+- **velocityScrolling : boolean** - If true will calculate transitions speeds based on the finger movement speed.
 
-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.
+- **pageIndicators : boolean** - If true adds indicator dots to the bottom of your slides.
+
+- **indicatorsColor : string** -  color of the indicator dots.
+
+- **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`.
+
+- **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.
 
 #### 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).
+- **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:
 
@@ -138,7 +145,7 @@ to
 _please note this will change the panning gesture for your entire project._
 
 
-###Thanks to these awesome contributors!
+### Thanks to these awesome contributors!
 
 [Brad Martin](https://github.com/bradmartin)
 
@@ -149,10 +156,10 @@ _please note this will change the panning gesture for your entire project._
 And thanks to [Nathan Walker](https://github.com/NathanWalker) for setting up the {N} plugin seed that was used to help get this plugin up and running. More info can be found about it here:
 https://github.com/NathanWalker/nativescript-plugin-seed
 
-##Contributing guidelines
+## Contributing guidelines
 [Contributing guidelines](https://github.com/TheOriginalJosh/nativescript-swiss-army-knife/blob/master/CONTRIBUTING.md)
 
-##License
+## License
 
 [MIT](/LICENSE)
 

demo/package.json

@@ -1,24 +1,24 @@
 {
-  "nativescript": {
-    "id": "org.nativescript.demo",
-    "tns-android": {
-      "version": "2.0.0"
-    },
-    "tns-ios": {
-      "version": "2.0.0"
-    }
-  },
-  "dependencies": {
-    "nativescript-slides": "file:..",
-    "tns-core-modules": "^2.0.1"
-  },
-  "devDependencies": {
-    "babel-traverse": "6.9.0",
-    "babel-types": "6.9.0",
-    "babylon": "6.8.0",
-    "filewalker": "0.1.2",
-    "lazy": "1.0.11",
-    "nativescript-dev-typescript": "^0.3.1",
-    "typescript": "^1.8.7"
-  }
-}
+	"nativescript": {
+		"id": "org.nativescript.demo",
+		"tns-android": {
+			"version": "2.0.0"
+		},
+		"tns-ios": {
+			"version": "2.0.0"
+		}
+	},
+	"dependencies": {
+		"nativescript-slides": "file:..",
+		"tns-core-modules": "^2.0.1"
+	},
+	"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",
+		"typescript": "^1.8.7"
+	}
+}

nativescript-slides.d.ts

@@ -25,7 +25,9 @@ export declare class SlideContainer extends AbsoluteLayout {
     private _disablePan;
     private _footer;
     private _pageIndicators;
+    private _indicatorsColor;
     pageIndicators: boolean;
+    indicatorsColor: string;
     hasNext: boolean;
     hasPrevious: boolean;
     interval: number;
@@ -53,10 +55,10 @@ export declare class SlideContainer extends AbsoluteLayout {
     private applySwipe(pageWidth);
     private showRightSlide(panelMap, offset?, endingVelocity?);
     private showLeftSlide(panelMap, offset?, endingVelocity?);
-    private buildFooter(pageCount?, activeIndex?);
+    private buildFooter(pageCount, activeIndex, iColor);
     private setwidthPercent(view, percentage);
     private newFooterButton(name);
     private buildSlideMap(views);
-    createIndicator(): Label;
+    createIndicator(indicatorColor: string): Label;
     setActivePageIndicator(index: number): void;
 }

nativescript-slides.ts

@@ -50,6 +50,7 @@ export class SlideContainer extends AbsoluteLayout {
 	private _disablePan: boolean;
 	private _footer: StackLayout;
 	private _pageIndicators: boolean;
+	private _indicatorsColor: string;
 
 	/* page indicator stuff*/
 	get pageIndicators(): boolean {
@@ -59,6 +60,13 @@ export class SlideContainer extends AbsoluteLayout {
 		this._pageIndicators = value;
 	}
 
+	get indicatorsColor(): string {
+		return this._indicatorsColor;
+	}
+	set indicatorsColor(value: string) {
+		this._indicatorsColor = value;
+	}
+
 	get hasNext(): boolean {
 		return !!this.currentPanel.right;
 	}
@@ -211,7 +219,14 @@ export class SlideContainer extends AbsoluteLayout {
 				});
 
 				if (this.pageIndicators) {
-					this._footer = this.buildFooter(slides.length, 0);
+
+					let iColor = this.indicatorsColor;
+					//check if invalid and set to white (#fff)
+					if (!Color.isValid(iColor)) {
+						iColor = '#fff';
+					}
+					
+					this._footer = this.buildFooter(slides.length, 0, iColor);
 					this.insertChild(this._footer, this.getChildrenCount());
 					//	this.setActivePageIndicator(0);
 				}
@@ -479,7 +494,7 @@ export class SlideContainer extends AbsoluteLayout {
 	/**
 	 * currently deprecated.... will come back to life for navigation dots.
 	 *  */
-	private buildFooter(pageCount: number = 5, activeIndex: number = 0): StackLayout {
+	private buildFooter(pageCount: number = 5, activeIndex: number = 0, iColor: string): StackLayout {
 		let footerInnerWrap = new StackLayout();
 
 		footerInnerWrap.height = 50;
@@ -494,7 +509,7 @@ export class SlideContainer extends AbsoluteLayout {
 
 		let i = 0;
 		while (i < pageCount) {
-			footerInnerWrap.addChild(this.createIndicator());
+			footerInnerWrap.addChild(this.createIndicator(iColor));
 			i++;
 		}
 
@@ -541,9 +556,9 @@ export class SlideContainer extends AbsoluteLayout {
 		return slideMap[0];
 	}
 
-	createIndicator(): Label {
+	createIndicator(indicatorColor: string): Label {
 		let indicator = new Label();
-		indicator.backgroundColor = new Color('#fff');
+		indicator.backgroundColor = new Color(indicatorColor);
 		indicator.opacity = 0.4;
 		indicator.width = 10;
 		indicator.height = 10;