nativescript-slides - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

nativescript-slides.d.ts

 import { AbsoluteLayout } from 'ui/layouts/absolute-layout';
 import { StackLayout } from 'ui/layouts/stack-layout';
+import { Label } from 'ui/label';
 export declare class Slide extends StackLayout {
@@ -7,2 +8,3 @@ }
     panel: StackLayout;
+    index: number;
     left?: ISlideMap;
@@ -24,2 +26,10 @@ right?: ISlideMap;
     private _angular;
+    private _footer;
+    private _pageIndicators;
+    private _pageIndicatorsColor;
+    private _pageIndicatorsActiveImage;
+    private indicatorImage;
+    pageIndicators: boolean;
+    pageIndicatorsColor: string;
+    pageIndicatorsActiveImage: string;
     hasNext: boolean;
@@ -36,2 +46,3 @@ hasPrevious: boolean;
     ios: any;
+    currentIndex: number;
     constructor();
@@ -51,6 +62,8 @@ private setupDefaultValues();
     private showLeftSlide(panelMap, offset?, endingVelocity?);
-    private buildFooter();
+    private buildFooter(pageCount?, activeIndex?);
     private setwidthPercent(view, percentage);
     private newFooterButton(name);
     private buildSlideMap(views);
+    createIndicator(): Label;
+    setActivePageIndicator(index: number): void;
 }

nativescript-slides.js

@@ -12,5 +12,8 @@ "use strict";
 var button_1 = require('ui/button');
+var label_1 = require('ui/label');
 var AnimationModule = require('ui/animation');
 var gestures = require('ui/gestures');
 var enums_1 = require('ui/enums');
+var color_1 = require('color');
+var imageSource = require('image-source');
 var LayoutParams;
@@ -45,2 +48,33 @@ if (app.android) {
     }
+    Object.defineProperty(SlideContainer.prototype, "pageIndicators", {
+        get: function () {
+            return this._pageIndicators;
+        },
+        set: function (value) {
+            this._pageIndicators = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SlideContainer.prototype, "pageIndicatorsColor", {
+        get: function () {
+            return this._pageIndicatorsColor.hex;
+        },
+        set: function (value) {
+            this._pageIndicatorsColor = new color_1.Color(value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SlideContainer.prototype, "pageIndicatorsActiveImage", {
+        get: function () {
+            return this._pageIndicatorsActiveImage;
+        },
+        set: function (value) {
+            this.indicatorImage.imageSource = imageSource.fromFile(value);
+            this._pageIndicatorsActiveImage = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SlideContainer.prototype, "hasNext", {
@@ -141,2 +175,9 @@ get: function () {
     });
+    Object.defineProperty(SlideContainer.prototype, "currentIndex", {
+        get: function () {
+            return this.currentPanel.index;
+        },
+        enumerable: true,
+        configurable: true
+    });
     SlideContainer.prototype.setupDefaultValues = function () {
@@ -158,2 +199,10 @@ this._loaded = false;
         }
+        if (this._pageIndicators == null) {
+            this._pageIndicators = false;
+        }
+        else {
+            if (this._pageIndicatorsColor == null) {
+                this._pageIndicatorsColor = new color_1.Color('#fff');
+            }
+        }
     };
@@ -166,3 +215,2 @@ SlideContainer.prototype.constructView = function (constructor) {
                 _this._loaded = true;
-                console.log("angular = " + _this._angular);
                 if (_this.angular === true && constructor === true) {
@@ -189,2 +237,7 @@ return;
                 });
+                if (_this.pageIndicators) {
+                    _this._footer = _this.buildFooter(slides_1.length, 0);
+                    _this.addChild(_this._footer);
+                    _this.setActivePageIndicator(0);
+                }
                 _this.currentPanel = _this.buildSlideMap(slides_1);
@@ -202,2 +255,4 @@ _this.currentPanel.panel.translateX = -_this.pageWidth;
                     _this.applySwipe(_this.pageWidth);
+                    var topOffset = Platform.screen.mainScreen.heightDIPs - 105;
+                    absolute_layout_1.AbsoluteLayout.setTop(_this._footer, topOffset);
                     _this.currentPanel.panel.translateX = -_this.pageWidth;
@@ -272,2 +327,3 @@ });
         this.currentPanel = panel;
+        this.setActivePageIndicator(this.currentPanel.index);
         this.applySwipe(this.pageWidth);
@@ -421,21 +477,20 @@ this.rebindSlideShow();
     };
-    SlideContainer.prototype.buildFooter = function () {
-        var footer = new absolute_layout_1.AbsoluteLayout();
+    SlideContainer.prototype.buildFooter = function (pageCount, activeIndex) {
+        if (pageCount === void 0) { pageCount = 5; }
+        if (activeIndex === void 0) { activeIndex = 0; }
         var footerInnerWrap = new stack_layout_1.StackLayout();
-        var footerInnerWrapLeft = new stack_layout_1.StackLayout();
-        var footerInnerWrapMiddle = new stack_layout_1.StackLayout();
-        var footerInnerWrapRight = new stack_layout_1.StackLayout();
-        this.setwidthPercent(footer, 100);
+        var topOffset = Platform.screen.mainScreen.heightDIPs - 105;
+        footerInnerWrap.height = 20;
+        this.setwidthPercent(footerInnerWrap, 100);
+        absolute_layout_1.AbsoluteLayout.setLeft(footerInnerWrap, 0);
+        absolute_layout_1.AbsoluteLayout.setTop(footerInnerWrap, topOffset);
         footerInnerWrap.orientation = 'horizontal';
-        this.setwidthPercent(footerInnerWrap, 100);
-        footer.addChild(footerInnerWrap);
-        this.setwidthPercent(footerInnerWrapRight, 30);
-        this.setwidthPercent(footerInnerWrapLeft, 30);
-        this.setwidthPercent(footerInnerWrapMiddle, 40);
-        footerInnerWrapLeft.addChild(this.newFooterButton('Previous'));
-        footerInnerWrapRight.addChild(this.newFooterButton('Next'));
-        footerInnerWrap.addChild(footerInnerWrapLeft);
-        footerInnerWrap.addChild(footerInnerWrapMiddle);
-        footerInnerWrap.addChild(footerInnerWrapRight);
-        return footer;
+        footerInnerWrap.verticalAlignment = 'top';
+        footerInnerWrap.horizontalAlignment = 'center';
+        var i = 0;
+        while (i < pageCount) {
+            footerInnerWrap.addChild(this.createIndicator());
+            i++;
+        }
+        return footerInnerWrap;
     };
@@ -454,5 +509,6 @@ SlideContainer.prototype.setwidthPercent = function (view, percentage) {
         var slideMap = [];
-        views.forEach(function (view) {
+        views.forEach(function (view, index) {
             slideMap.push({
-                panel: view
+                panel: view,
+                index: index,
             });
@@ -473,2 +529,32 @@ });
     };
+    SlideContainer.prototype.createIndicator = function () {
+        var indicator = new label_1.Label();
+        indicator.backgroundColor = new color_1.Color('#fff');
+        indicator.width = 10;
+        indicator.height = 10;
+        indicator.marginLeft = 2.5;
+        indicator.marginRight = 2.5;
+        indicator.borderRadius = 5;
+        return indicator;
+    };
+    SlideContainer.prototype.setActivePageIndicator = function (index) {
+        var _this = this;
+        this._footer.eachLayoutChild(function (view) {
+            if (view instanceof label_1.Label) {
+                view.opacity = 0.4;
+                if (_this._pageIndicatorsActiveImage != null) {
+                    view.backgroundColor = new color_1.Color('#fff');
+                    view.className = 'slide-indicator-inactive';
+                    view.backgroundImage = null;
+                }
+            }
+        });
+        var activeIndicator = this._footer.getChildAt(index);
+        activeIndicator.className = 'slide-indicator-active';
+        activeIndicator.opacity = 0.9;
+        if (this._pageIndicatorsActiveImage != null) {
+            activeIndicator.backgroundColor = null;
+            activeIndicator.backgroundImage = this.pageIndicatorsActiveImage;
+        }
+    };
     return SlideContainer;
@@ -475,0 +561,0 @@ }(absolute_layout_1.AbsoluteLayout));

nativescript-slides.ts

@@ -10,3 +10,6 @@ import * as app from 'application';
 import * as gestures from 'ui/gestures';
-import {AnimationCurve} from 'ui/enums';
+import {AnimationCurve, Orientation} from 'ui/enums';
+import {Color} from 'color';
+import {Image} from 'ui/image';
+import * as imageSource from 'image-source';
 
@@ -30,2 +33,3 @@ let LayoutParams: any;
 	panel: StackLayout;
+	index: number;
 	left?: ISlideMap;
@@ -48,7 +52,35 @@ right?: ISlideMap;
 	private _angular: boolean;
+	private _footer: StackLayout;
+	private _pageIndicators: boolean;
+	private _pageIndicatorsColor: Color;
+	private _pageIndicatorsActiveImage: string;
+	private indicatorImage: Image;
+	/* page indicator stuff*/
+	get pageIndicators(): boolean {
+		return this._pageIndicators;
+	}
+	set pageIndicators(value: boolean) {
+		this._pageIndicators = value;
+	}
 
+	set pageIndicatorsColor(value: string) {
+		this._pageIndicatorsColor = new Color(value);
+	}
+	get pageIndicatorsColor() {
+		return this._pageIndicatorsColor.hex
+	}
+
+	get pageIndicatorsActiveImage(): string {
+		return this._pageIndicatorsActiveImage;
+	}
+	set pageIndicatorsActiveImage(value: string) {
+		this.indicatorImage.imageSource = imageSource.fromFile(value);
+		this._pageIndicatorsActiveImage = value;
+	}
+
+
+
 	get hasNext(): boolean {
 		return !!this.currentPanel.right;
 	}
-
 	get hasPrevious(): boolean {
@@ -116,2 +148,6 @@ return !!this.currentPanel.left;
 
+	get currentIndex(): number {
+		return this.currentPanel.index;
+	}
+
 	constructor() {
@@ -124,3 +160,2 @@ super();
 		this.constructView(true);
-
 	}
@@ -135,3 +170,2 @@
 		this.transitioning = false;
-
 		this._pageWidth = Platform.screen.mainScreen.widthDIPs;
@@ -150,2 +184,9 @@
 
+		if (this._pageIndicators == null) {
+			this._pageIndicators = false;
+		} else {
+			if (this._pageIndicatorsColor == null) {
+				this._pageIndicatorsColor = new Color('#fff')
+			}
+		}
 	}
@@ -188,2 +229,9 @@
 
+				if (this.pageIndicators) {
+					this._footer = this.buildFooter(slides.length, 0);
+					this.addChild(this._footer);
+					this.setActivePageIndicator(0);
+				}
+
+
 				this.currentPanel = this.buildSlideMap(slides);
@@ -203,2 +251,4 @@ this.currentPanel.panel.translateX = -this.pageWidth;
 					this.applySwipe(this.pageWidth);
+					let topOffset = Platform.screen.mainScreen.heightDIPs - 105;
+					AbsoluteLayout.setTop(this._footer, topOffset);
 					this.currentPanel.panel.translateX = -this.pageWidth;
@@ -276,2 +326,3 @@ });
 		this.currentPanel = panel;
+		this.setActivePageIndicator(this.currentPanel.index);
 		this.applySwipe(this.pageWidth);
@@ -441,27 +492,21 @@ this.rebindSlideShow();
 	 *  */
-	private buildFooter(): AbsoluteLayout {
-		let footer = new AbsoluteLayout();
+	private buildFooter(pageCount: number = 5, activeIndex: number = 0): StackLayout {
 		let footerInnerWrap = new StackLayout();
-		let footerInnerWrapLeft = new StackLayout();
-		let footerInnerWrapMiddle = new StackLayout();
-		let footerInnerWrapRight = new StackLayout();
-		this.setwidthPercent(footer, 100);
+		const topOffset = Platform.screen.mainScreen.heightDIPs - 105;
+		footerInnerWrap.height = 20;
 
-		footerInnerWrap.orientation = 'horizontal';
 		this.setwidthPercent(footerInnerWrap, 100);
+		AbsoluteLayout.setLeft(footerInnerWrap, 0);
+		AbsoluteLayout.setTop(footerInnerWrap, topOffset);
 
-		footer.addChild(footerInnerWrap);
+		footerInnerWrap.orientation = 'horizontal';
+		footerInnerWrap.verticalAlignment = 'top';
+		footerInnerWrap.horizontalAlignment = 'center';
 
-		this.setwidthPercent(footerInnerWrapRight, 30);
-		this.setwidthPercent(footerInnerWrapLeft, 30);
-		this.setwidthPercent(footerInnerWrapMiddle, 40);
-
-		footerInnerWrapLeft.addChild(this.newFooterButton('Previous'));
-		footerInnerWrapRight.addChild(this.newFooterButton('Next'));
-
-		footerInnerWrap.addChild(footerInnerWrapLeft);
-		footerInnerWrap.addChild(footerInnerWrapMiddle);
-		footerInnerWrap.addChild(footerInnerWrapRight);
-
-		return footer;
+		let i = 0;
+		while (i < pageCount) {
+			footerInnerWrap.addChild(this.createIndicator());
+			i++;
+		}
+		return footerInnerWrap;
 	}
@@ -483,5 +528,6 @@
 		let slideMap: ISlideMap[] = [];
-		views.forEach((view: StackLayout) => {
+		views.forEach((view: StackLayout, index: number) => {
 			slideMap.push({
-				panel: view
+				panel: view,
+				index: index,
 			});
@@ -503,2 +549,34 @@ });
 	}
+
+	createIndicator(): Label {
+		let indicator = new Label();
+		indicator.backgroundColor = new Color('#fff');
+		indicator.width = 10;
+		indicator.height = 10;
+		indicator.marginLeft = 2.5;
+		indicator.marginRight = 2.5;
+		indicator.borderRadius = 5;
+		return indicator;
+	}
+
+	setActivePageIndicator(index: number) {
+
+		this._footer.eachLayoutChild((view: View) => {
+			if (view instanceof Label) {
+				view.opacity = 0.4;
+				if (this._pageIndicatorsActiveImage != null) {
+					view.backgroundColor = new Color('#fff');
+					view.className = 'slide-indicator-inactive';
+					view.backgroundImage = null;
+				}
+			}
+		});
+		let activeIndicator = this._footer.getChildAt(index);
+		activeIndicator.className = 'slide-indicator-active';
+		activeIndicator.opacity = 0.9;
+		if (this._pageIndicatorsActiveImage != null) {
+			activeIndicator.backgroundColor = null;
+			activeIndicator.backgroundImage = this.pageIndicatorsActiveImage;
+		}
+	}
 }

package.json

 {
   "name": "nativescript-slides",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "NativeScript Slides plugin.",
@@ -5,0 +5,0 @@ "main": "nativescript-slides.js",

README.md

@@ -76,2 +76,4 @@ # NativeScript Slides for iOS and Android
 
+the `<Slides:SlideContainer>` element also has a property called `pageIndicators` which will add indicator dots to the bottom of your slides.
+
 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`.
@@ -78,0 +80,0 @@

No alert changes

Improved metrics

Total package byte prevSize

68136

increased by13.69%

Lines of code

1255

increased by15.99%

Number of lines in readme file

158

increased by1.28%

No dependency changes