nativescript-slides - npm Package Compare versions

Comparing version 1.7.1 to 2.0.0

nativescript-slides.d.ts

@@ -19,8 +19,3 @@ import { AbsoluteLayout } from 'ui/layouts/absolute-layout';
     private _loop;
-    private _interval;
     private _pagerOffset;
-    private _velocityScrolling;
-    private _androidTranslucentStatusBar;
-    private _androidTranslucentNavBar;
-    private timer_reference;
     private _angular;
@@ -30,18 +25,12 @@ private _disablePan;
     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;
@@ -55,14 +44,10 @@ angular: boolean;
     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);
@@ -75,4 +60,4 @@ private newFooterButton(name);
     private triggerCancelEvent(cancelReason);
-    createIndicator(indicatorColor: string): Label;
+    createIndicator(index: number): Label;
     setActivePageIndicator(index: number): void;
 }

nativescript-slides.js

@@ -7,2 +7,3 @@ "use strict";
 };
+require("nativescript-dom");
 var app = require('application');
@@ -17,3 +18,4 @@ var Platform = require('platform');
 var enums_1 = require('ui/enums');
-var color_1 = require('color');
+var SLIDE_INDICATOR_INACTIVE = 'slide-indicator-inactive';
+var SLIDE_INDICATOR_ACTIVE = 'slide-indicator-active';
 var LayoutParams;
@@ -64,12 +66,2 @@ if (app.android) {
     });
-    Object.defineProperty(SlideContainer.prototype, "indicatorsColor", {
-        get: function () {
-            return this._indicatorsColor;
-        },
-        set: function (value) {
-            this._indicatorsColor = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SlideContainer.prototype, "pagerOffset", {
@@ -99,12 +91,2 @@ get: function () {
     });
-    Object.defineProperty(SlideContainer.prototype, "interval", {
-        get: function () {
-            return this._interval;
-        },
-        set: function (value) {
-            this._interval = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SlideContainer.prototype, "loop", {
@@ -130,32 +112,2 @@ get: function () {
     });
-    Object.defineProperty(SlideContainer.prototype, "androidTranslucentStatusBar", {
-        get: function () {
-            return this._androidTranslucentStatusBar;
-        },
-        set: function (value) {
-            this._androidTranslucentStatusBar = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SlideContainer.prototype, "androidTranslucentNavBar", {
-        get: function () {
-            return this._androidTranslucentNavBar;
-        },
-        set: function (value) {
-            this._androidTranslucentNavBar = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SlideContainer.prototype, "velocityScrolling", {
-        get: function () {
-            return this._velocityScrolling;
-        },
-        set: function (value) {
-            this._velocityScrolling = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(SlideContainer.prototype, "pageWidth", {
@@ -206,11 +158,5 @@ get: function () {
         this._pageWidth = Platform.screen.mainScreen.widthDIPs;
-        if (this._interval == null) {
-            this.interval = 0;
-        }
         if (this._disablePan == null) {
             this.disablePan = false;
         }
-        if (this._velocityScrolling == null) {
-            this._velocityScrolling = false;
-        }
         if (this._angular == null) {
@@ -222,7 +168,4 @@ this.angular = false;
         }
-        if (this.indicatorsColor == null) {
-            this.indicatorsColor = "#fff";
-        }
         if (this._pagerOffset == null) {
-            this._pagerOffset = "88%";
+            this._pagerOffset = '88%';
         }
@@ -239,11 +182,2 @@ };
                 }
-                if (app.android && _this.androidTranslucentStatusBar === true || _this._androidTranslucentNavBar === true && Platform.device.sdkVersion >= '19') {
-                    var window_1 = app.android.startActivity.getWindow();
-                    if (_this._androidTranslucentStatusBar === true) {
-                        window_1.addFlags(LayoutParams.FLAG_TRANSLUCENT_STATUS);
-                    }
-                    if (_this._androidTranslucentNavBar === true) {
-                        window_1.addFlags(LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
-                    }
-                }
                 var slides_1 = [];
@@ -259,11 +193,8 @@ _this.eachLayoutChild(function (view) {
                 if (_this.pageIndicators) {
-                    var iColor = _this.indicatorsColor;
-                    if (!color_1.Color.isValid(iColor)) {
-                        iColor = '#fff';
-                    }
-                    _this._footer = _this.buildFooter(slides_1.length, 0, iColor);
+                    _this._footer = _this.buildFooter(slides_1.length, 0);
+                    _this.setActivePageIndicator(0);
                     _this.insertChild(_this._footer, _this.getChildrenCount());
                 }
                 _this.currentPanel = _this.buildSlideMap(slides_1);
-                _this.currentPanel.panel.translateX = -_this.pageWidth;
+                _this.positionPanels(_this.currentPanel);
                 if (_this.disablePan === false) {
@@ -274,2 +205,3 @@ _this.applySwipe(_this.pageWidth);
                     setTimeout(function () {
+                        console.log('orientationChangedEvent');
                         _this._pageWidth = Platform.screen.mainScreen.widthDIPs;
@@ -289,4 +221,4 @@ _this.eachLayoutChild(function (view) {
                         }
-                        _this.currentPanel.panel.translateX = -_this.pageWidth;
-                    }, 100);
+                        _this.positionPanels(_this.currentPanel);
+                    }, 0);
                 });
@@ -296,32 +228,2 @@ }
     };
-    SlideContainer.prototype.carousel = function (isenabled, time) {
-        var _this = this;
-        if (isenabled) {
-            this.timer_reference = setInterval(function () {
-                if (typeof _this.currentPanel.right !== "undefined") {
-                    _this.nextSlide();
-                }
-                else {
-                    clearTimeout(_this.timer_reference);
-                }
-            }, time);
-        }
-        else {
-            clearTimeout(this.timer_reference);
-        }
-    };
-    SlideContainer.prototype.rebindSlideShow = function () {
-        if (this.timer_reference != null) {
-            this.stopSlideshow();
-            this.startSlideshow();
-        }
-    };
-    SlideContainer.prototype.stopSlideshow = function () {
-        this.carousel(false, 0);
-    };
-    SlideContainer.prototype.startSlideshow = function () {
-        if (this.interval !== 0) {
-            this.carousel(true, this.interval);
-        }
-    };
     SlideContainer.prototype.nextSlide = function () {
@@ -337,3 +239,3 @@ var _this = this;
         this.showRightSlide(this.currentPanel).then(function () {
-            _this.triggerChangeEventLeftToRight();
+            _this.triggerChangeEventRightToLeft();
             _this.setupPanel(_this.currentPanel.right);
@@ -352,15 +254,6 @@ });
         this.showLeftSlide(this.currentPanel).then(function () {
-            _this.triggerChangeEventRightToLeft();
+            _this.triggerChangeEventLeftToRight();
             _this.setupPanel(_this.currentPanel.left);
         });
     };
-    SlideContainer.prototype.resetAndroidTranslucentFlags = function () {
-        if (this._androidTranslucentStatusBar === true) {
-            var window_2 = app.android.startActivity.getWindow();
-            window_2.clearFlags(LayoutParams.FLAG_TRANSLUCENT_STATUS);
-        }
-        if (this._androidTranslucentNavBar === true) {
-            window.clearFlags(LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
-        }
-    };
     SlideContainer.prototype.setupPanel = function (panel) {
@@ -371,10 +264,21 @@ this.direction = direction.none;
         this.currentPanel = panel;
+        this.positionPanels(this.currentPanel);
         if (this.disablePan === false) {
             this.applySwipe(this.pageWidth);
         }
+        console.log('changed active ' + this.currentPanel.index + ' indicators ' + this.pageIndicators);
         if (this.pageIndicators) {
             this.setActivePageIndicator(this.currentPanel.index);
+            console.log('changed active ' + this.currentPanel.index);
         }
-        this.rebindSlideShow();
     };
+    SlideContainer.prototype.positionPanels = function (panel) {
+        if (panel.left != null) {
+            panel.left.panel.translateX = -this.pageWidth * 2;
+        }
+        panel.panel.translateX = -this.pageWidth;
+        if (panel.right != null) {
+            panel.right.panel.translateX = 0;
+        }
+    };
     SlideContainer.prototype.applySwipe = function (pageWidth) {
@@ -394,6 +298,3 @@ var _this = this;
                 deltaTime = Date.now() - startTime;
-                if (_this.velocityScrolling) {
-                    endingVelocity = (args.deltaX / deltaTime) * 100;
-                }
-                if (args.deltaX > (pageWidth / 3) || (_this.velocityScrolling && endingVelocity > 32)) {
+                if (args.deltaX > (pageWidth / 3)) {
                     if (_this.hasPrevious) {
@@ -411,3 +312,3 @@ _this.transitioning = true;
                 }
-                else if (args.deltaX < (-pageWidth / 3) || (_this.velocityScrolling && endingVelocity < -32)) {
+                else if (args.deltaX < (-pageWidth / 3)) {
                     if (_this.hasNext) {
@@ -420,3 +321,3 @@ _this.transitioning = true;
                                 _this.notify({
-                                    eventName: SlideContainer.finishedEvent,
+                                    eventName: SlideContainer.FINISHED_EVENT,
                                     object: _this
@@ -494,9 +395,3 @@ });
         var animationDuration;
-        if (this.velocityScrolling) {
-            var elapsedTime = Math.abs(offset / endingVelocity) * 100;
-            animationDuration = Math.max(Math.min(elapsedTime, 100), 64);
-        }
-        else {
-            animationDuration = 300;
-        }
+        animationDuration = 300;
         var transition = new Array();
@@ -522,9 +417,3 @@ transition.push({
         var animationDuration;
-        if (this.velocityScrolling) {
-            var elapsedTime = Math.abs(offset / endingVelocity) * 100;
-            animationDuration = Math.max(Math.min(elapsedTime, 100), 64);
-        }
-        else {
-            animationDuration = 300;
-        }
+        animationDuration = 300;
         var transition = new Array();
@@ -546,3 +435,3 @@ transition.push({
     };
-    SlideContainer.prototype.buildFooter = function (pageCount, activeIndex, iColor) {
+    SlideContainer.prototype.buildFooter = function (pageCount, activeIndex) {
         if (pageCount === void 0) { pageCount = 5; }
@@ -553,3 +442,2 @@ if (activeIndex === void 0) { activeIndex = 0; }
         this.setwidthPercent(footerInnerWrap, 100);
-        absolute_layout_1.AbsoluteLayout.setLeft(footerInnerWrap, 0);
         absolute_layout_1.AbsoluteLayout.setTop(footerInnerWrap, 0);
@@ -559,10 +447,10 @@ footerInnerWrap.orientation = 'horizontal';
         footerInnerWrap.horizontalAlignment = 'center';
-        var i = 0;
-        while (i < pageCount) {
-            footerInnerWrap.addChild(this.createIndicator(iColor));
-            i++;
+        footerInnerWrap.width = (this._pageWidth / 2);
+        var index = 0;
+        while (index < pageCount) {
+            footerInnerWrap.addChild(this.createIndicator(index));
+            index++;
         }
-        var activeIndicator = footerInnerWrap.getChildAt(0);
-        activeIndicator.className = 'slide-indicator-active';
-        activeIndicator.opacity = 0.9;
+        var pageIndicatorsLeftOffset = this.pageWidth / 4;
+        absolute_layout_1.AbsoluteLayout.setLeft(footerInnerWrap, pageIndicatorsLeftOffset);
         footerInnerWrap.marginTop = this._pagerOffset;
@@ -599,3 +487,2 @@ return footerInnerWrap;
         }
-        this.startSlideshow();
         return slideMap[0];
@@ -605,3 +492,3 @@ };
         this.notify({
-            eventName: SlideContainer.startEvent,
+            eventName: SlideContainer.START_EVENT,
             object: this,
@@ -615,3 +502,3 @@ eventData: {
         this.notify({
-            eventName: SlideContainer.changedEvent,
+            eventName: SlideContainer.CHANGED_EVENT,
             object: this,
@@ -627,3 +514,3 @@ eventData: {
         this.notify({
-            eventName: SlideContainer.changedEvent,
+            eventName: SlideContainer.CHANGED_EVENT,
             object: this,
@@ -639,3 +526,3 @@ eventData: {
         this.notify({
-            eventName: SlideContainer.cancelledEvent,
+            eventName: SlideContainer.CANCELLED_EVENT,
             object: this,
@@ -648,29 +535,21 @@ eventData: {
     };
-    SlideContainer.prototype.createIndicator = function (indicatorColor) {
+    SlideContainer.prototype.createIndicator = function (index) {
         var indicator = new label_1.Label();
-        indicator.backgroundColor = new color_1.Color(indicatorColor);
-        indicator.opacity = 0.4;
-        indicator.width = 10;
-        indicator.height = 10;
-        indicator.marginLeft = 2.5;
-        indicator.marginRight = 2.5;
-        indicator.marginTop = 0;
-        indicator.borderRadius = 5;
+        indicator.classList.add(SLIDE_INDICATOR_INACTIVE);
         return indicator;
     };
     SlideContainer.prototype.setActivePageIndicator = function (index) {
-        this._footer.eachLayoutChild(function (view) {
-            if (view instanceof label_1.Label) {
-                view.opacity = 0.4;
-                view.className = 'slide-indicator-inactive';
-            }
+        var indicatorsToDeactivate = this._footer.getElementsByClassName(SLIDE_INDICATOR_ACTIVE);
+        indicatorsToDeactivate.forEach(function (activeIndicator) {
+            activeIndicator.classList.remove(SLIDE_INDICATOR_ACTIVE);
+            activeIndicator.classList.add(SLIDE_INDICATOR_INACTIVE);
         });
-        var activeIndicator = this._footer.getChildAt(index);
-        activeIndicator.className = 'slide-indicator-active';
-        activeIndicator.opacity = 0.9;
+        var activeIndicator = this._footer.getElementsByClassName(SLIDE_INDICATOR_INACTIVE)[index];
+        activeIndicator.classList.remove(SLIDE_INDICATOR_INACTIVE);
+        activeIndicator.classList.add(SLIDE_INDICATOR_ACTIVE);
     };
-    SlideContainer.startEvent = "start";
-    SlideContainer.changedEvent = "changed";
-    SlideContainer.cancelledEvent = "cancelled";
-    SlideContainer.finishedEvent = "finished";
+    SlideContainer.START_EVENT = 'start';
+    SlideContainer.CHANGED_EVENT = 'changed';
+    SlideContainer.CANCELLED_EVENT = 'cancelled';
+    SlideContainer.FINISHED_EVENT = 'finished';
     return SlideContainer;
@@ -677,0 +556,0 @@ }(absolute_layout_1.AbsoluteLayout));

nativescript-slides.ts

@@ -0,4 +1,5 @@
+require("nativescript-dom");
 import * as app from 'application';
 import * as Platform from 'platform';
-import utils = require("utils/utils");
+import utils = require('utils/utils');
 import {AbsoluteLayout} from 'ui/layouts/absolute-layout';
@@ -15,5 +16,7 @@ import {StackLayout} from 'ui/layouts/stack-layout';
 
-declare var android: any;
-declare var com: any;
-declare var java: any;
+declare const android: any;
+declare const com: any;
+declare const java: any;
+const SLIDE_INDICATOR_INACTIVE = 'slide-indicator-inactive';
+const SLIDE_INDICATOR_ACTIVE = 'slide-indicator-active';
 
@@ -55,8 +58,3 @@ let LayoutParams: any;
 	private _loop: boolean;
-	private _interval: number;
 	private _pagerOffset: string;
-	private _velocityScrolling: boolean;
-	private _androidTranslucentStatusBar: boolean;
-	private _androidTranslucentNavBar: boolean;
-	private timer_reference: number;
 	private _angular: boolean;
@@ -66,8 +64,7 @@ private _disablePan: boolean;
 	private _pageIndicators: boolean;
-	private _indicatorsColor: string;
 
-	public static startEvent = "start";
-	public static changedEvent = "changed";
-	public static cancelledEvent = "cancelled";
-	public static finishedEvent = "finished";
+	public static START_EVENT = 'start';
+	public static CHANGED_EVENT = 'changed';
+	public static CANCELLED_EVENT = 'cancelled';
+	public static FINISHED_EVENT = 'finished';
 
@@ -82,9 +79,2 @@ /* page indicator stuff*/
 
-	get indicatorsColor(): string {
-		return this._indicatorsColor;
-	}
-	set indicatorsColor(value: string) {
-		this._indicatorsColor = value;
-	}
-
 	get pagerOffset(): string {
@@ -104,10 +94,2 @@ return this._pagerOffset;
 
-	get interval() {
-		return this._interval;
-	}
-
-	set interval(value: number) {
-		this._interval = value;
-	}
-
 	get loop() {
@@ -129,24 +111,2 @@ return this._loop;
 
-	get androidTranslucentStatusBar() {
-		return this._androidTranslucentStatusBar;
-	}
-
-	set androidTranslucentStatusBar(value: boolean) {
-		this._androidTranslucentStatusBar = value;
-	}
-
-	get androidTranslucentNavBar() {
-		return this._androidTranslucentNavBar;
-	}
-
-	set androidTranslucentNavBar(value: boolean) {
-		this._androidTranslucentNavBar = value;
-	}
-
-	get velocityScrolling(): boolean {
-		return this._velocityScrolling;
-	}
-	set velocityScrolling(value: boolean) {
-		this._velocityScrolling = value;
-	}
 	get pageWidth() {
@@ -194,6 +154,2 @@ return this._pageWidth;
 
-		if (this._interval == null) {
-			this.interval = 0;
-		}
-
 		if (this._disablePan == null) {
@@ -203,6 +159,2 @@ this.disablePan = false;
 
-		if (this._velocityScrolling == null) {
-			this._velocityScrolling = false;
-		}
-
 		if (this._angular == null) {
@@ -215,9 +167,5 @@ this.angular = false;
 		}
-		
-		if (this.indicatorsColor == null) {
-			this.indicatorsColor = "#fff"; //defaults to white.
-		}
 
 		if (this._pagerOffset == null) {
-			this._pagerOffset = "88%"; //defaults to white.
+			this._pagerOffset = '88%'; //defaults to white.
 		}
@@ -233,18 +181,3 @@ }
 				}
-				// Android Translucent bars API >= 19 only
 
-				if (app.android && this.androidTranslucentStatusBar === true || this._androidTranslucentNavBar === true && Platform.device.sdkVersion >= '19') {
-					let window = app.android.startActivity.getWindow();
-
-					// check for status bar
-					if (this._androidTranslucentStatusBar === true) {
-						window.addFlags(LayoutParams.FLAG_TRANSLUCENT_STATUS);
-					}
-
-					// check for nav bar
-					if (this._androidTranslucentNavBar === true) {
-						window.addFlags(LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
-					}
-				}
-
 				let slides: StackLayout[] = [];
@@ -262,17 +195,9 @@
 				if (this.pageIndicators) {
-
-					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._footer = this.buildFooter(slides.length, 0);
+					this.setActivePageIndicator(0);
 					this.insertChild(this._footer, this.getChildrenCount());
-					//	this.setActivePageIndicator(0);
 				}
 
-
 				this.currentPanel = this.buildSlideMap(slides);
-				this.currentPanel.panel.translateX = -this.pageWidth;
+				this.positionPanels(this.currentPanel);
 
@@ -282,3 +207,2 @@ if (this.disablePan === false) {
 				}
-
 				//handles application orientation change
@@ -288,2 +212,3 @@ app.on(app.orientationChangedEvent, (args: app.OrientationChangedEventData) => {
 					setTimeout(() => {
+						console.log('orientationChangedEvent');
 						this._pageWidth = Platform.screen.mainScreen.widthDIPs;
@@ -304,4 +229,4 @@ this.eachLayoutChild((view: View) => {
 						}
-						this.currentPanel.panel.translateX = -this.pageWidth;
-					}, 100);
+						this.positionPanels(this.currentPanel);
+					}, 0);
 				});
@@ -312,35 +237,4 @@ }
 
-	private carousel(isenabled: boolean, time: number) {
-		if (isenabled) {
-			this.timer_reference = setInterval(() => {
-				if (typeof this.currentPanel.right !== "undefined") {
-					this.nextSlide();
-					
-				} else {
-					clearTimeout(this.timer_reference);
-				}
-			}, time);
-		} else {
-			clearTimeout(this.timer_reference);
-		}
-	}
-	private rebindSlideShow(): void {
-		if (this.timer_reference != null) {
-			this.stopSlideshow();
-			this.startSlideshow();
-		}
-	}
-
-	public stopSlideshow(): void {
-		this.carousel(false, 0);
-	}
-
-	public startSlideshow(): void {
-		if (this.interval !== 0) {
-			this.carousel(true, this.interval);
-		}
-	}
-
 	public nextSlide(): void {
-		if (!this.hasNext){
+		if (!this.hasNext) {
 			this.triggerCancelEvent(cancellationReason.noMoreSlides);
@@ -354,3 +248,3 @@ return;
 		this.showRightSlide(this.currentPanel).then(() => {
-			this.triggerChangeEventLeftToRight();
+			this.triggerChangeEventRightToLeft();
 			this.setupPanel(this.currentPanel.right);
@@ -360,3 +254,3 @@ });
 	public previousSlide(): void {
-		if (!this.hasPrevious){
+		if (!this.hasPrevious) {
 			this.triggerCancelEvent(cancellationReason.noPrevSlides);
@@ -370,3 +264,3 @@ return;
 		this.showLeftSlide(this.currentPanel).then(() => {
-			this.triggerChangeEventRightToLeft();
+			this.triggerChangeEventLeftToRight();
 			this.setupPanel(this.currentPanel.left);
@@ -376,12 +270,2 @@ });
 
-	public resetAndroidTranslucentFlags(): void {
-		if (this._androidTranslucentStatusBar === true) {
-			let window = app.android.startActivity.getWindow();
-			window.clearFlags(LayoutParams.FLAG_TRANSLUCENT_STATUS);
-		}
-		if (this._androidTranslucentNavBar === true) {
-			(<any>window).clearFlags(LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
-		}
-	}
-
 	private setupPanel(panel: ISlideMap) {
@@ -393,11 +277,26 @@ this.direction = direction.none;
 
+		// sets up each panel so that they are positioned to transition either way.
+		this.positionPanels(this.currentPanel);
+
 		if (this.disablePan === false) {
 			this.applySwipe(this.pageWidth);
 		}
+		console.log('changed active ' + this.currentPanel.index + ' indicators ' + this.pageIndicators);
 		if (this.pageIndicators) {
 			this.setActivePageIndicator(this.currentPanel.index);
+			console.log('changed active ' + this.currentPanel.index);
 		}
-		this.rebindSlideShow();
 	}
 
+	private positionPanels(panel: ISlideMap) {
+		// sets up each panel so that they are positioned to transition either way.
+		if (panel.left != null) {
+			panel.left.panel.translateX = -this.pageWidth * 2;
+		}
+		panel.panel.translateX = -this.pageWidth;
+		if (panel.right != null) {
+			panel.right.panel.translateX = 0;
+		}
+	}
+
 	private applySwipe(pageWidth: number): void {
@@ -418,8 +317,5 @@ let previousDelta = -1; //hack to get around ios firing pan event after release
 				// if velocityScrolling is enabled then calculate the velocitty
-				if (this.velocityScrolling) {
-					endingVelocity = (args.deltaX / deltaTime) * 100;
-				}
 
 				// swiping left to right.
-				if (args.deltaX > (pageWidth / 3) || (this.velocityScrolling && endingVelocity > 32)) { 
+				if (args.deltaX > (pageWidth / 3)) {
 					if (this.hasPrevious) {
@@ -429,6 +325,6 @@ this.transitioning = true;
 							this.setupPanel(this.currentPanel.left);
-							
+
 							this.triggerChangeEventLeftToRight();
 						});
-					}else{
+					} else {
 						//We're at the start
@@ -439,5 +335,5 @@ //Notify no more slides
 					return;
-				} 
+				}
 				// swiping right to left
-				else if (args.deltaX < (-pageWidth / 3) || (this.velocityScrolling && endingVelocity < -32)) {
+				else if (args.deltaX < (-pageWidth / 3)) {
 					if (this.hasNext) {
@@ -451,6 +347,6 @@ this.transitioning = true;
 
-							if(!this.hasNext){
+							if (!this.hasNext) {
 								// Notify finsihed
 								this.notify({
-									eventName: SlideContainer.finishedEvent,
+									eventName: SlideContainer.FINISHED_EVENT,
 									object: this
@@ -460,3 +356,3 @@ });
 						});
-					}else{
+					} else {
 						// We're at the end
@@ -536,8 +432,3 @@ // Notify no more slides
 		let animationDuration: number;
-		if (this.velocityScrolling) {
-			let elapsedTime = Math.abs(offset / endingVelocity) * 100;
-			animationDuration = Math.max(Math.min(elapsedTime, 100), 64);
-		} else {
-			animationDuration = 300; // default value
-		}
+		animationDuration = 300; // default value
 
@@ -566,9 +457,3 @@ let transition = new Array();
 		let animationDuration: number;
-		if (this.velocityScrolling) {
-			let elapsedTime = Math.abs(offset / endingVelocity) * 100;
-			animationDuration = Math.max(Math.min(elapsedTime, 100), 64);
-		} else {
-			animationDuration = 300; // default value
-		}
-
+		animationDuration = 300; // default value
 		let transition = new Array();
@@ -594,6 +479,3 @@
 
-	/**
-	 * currently deprecated.... will come back to life for navigation dots.
-	 *  */
-	private buildFooter(pageCount: number = 5, activeIndex: number = 0, iColor: string): StackLayout {
+	private buildFooter(pageCount: number = 5, activeIndex: number = 0): StackLayout {
 		let footerInnerWrap = new StackLayout();
@@ -604,3 +486,2 @@
 		this.setwidthPercent(footerInnerWrap, 100);
-		AbsoluteLayout.setLeft(footerInnerWrap, 0);
 		AbsoluteLayout.setTop(footerInnerWrap, 0);
@@ -611,12 +492,12 @@
 		footerInnerWrap.horizontalAlignment = 'center';
+		footerInnerWrap.width = (this._pageWidth / 2);
 
-		let i = 0;
-		while (i < pageCount) {
-			footerInnerWrap.addChild(this.createIndicator(iColor));
-			i++;
+		let index = 0;
+		while (index < pageCount) {
+			footerInnerWrap.addChild(this.createIndicator(index));
+			index++;
 		}
 
-		let activeIndicator = footerInnerWrap.getChildAt(0);
-		activeIndicator.className = 'slide-indicator-active';
-		activeIndicator.opacity = 0.9;
+		let pageIndicatorsLeftOffset = this.pageWidth / 4;
+		AbsoluteLayout.setLeft(footerInnerWrap, pageIndicatorsLeftOffset);
 
@@ -656,23 +537,21 @@ footerInnerWrap.marginTop = <any>this._pagerOffset;
 		if (this.loop) {
-            slideMap[0].left = slideMap[slideMap.length - 1];
-            slideMap[slideMap.length - 1].right = slideMap[0];
-        }
-
-		this.startSlideshow();
+			slideMap[0].left = slideMap[slideMap.length - 1];
+			slideMap[slideMap.length - 1].right = slideMap[0];
+		}
 		return slideMap[0];
 	}
 
-	private triggerStartEvent(){
+	private triggerStartEvent() {
 		this.notify({
-					eventName: SlideContainer.startEvent,
-					object: this,
-					eventData: {
-						currentIndex: this.currentPanel.index
-					}
-				});
+			eventName: SlideContainer.START_EVENT,
+			object: this,
+			eventData: {
+				currentIndex: this.currentPanel.index
+			}
+		});
 	}
 
-	private triggerChangeEventLeftToRight(){
+	private triggerChangeEventLeftToRight() {
 		this.notify({
-			eventName: SlideContainer.changedEvent,
+			eventName: SlideContainer.CHANGED_EVENT,
 			object: this,
@@ -687,5 +566,5 @@ eventData: {
 
-	private triggerChangeEventRightToLeft(){
+	private triggerChangeEventRightToLeft() {
 		this.notify({
-			eventName: SlideContainer.changedEvent,
+			eventName: SlideContainer.CHANGED_EVENT,
 			object: this,
@@ -700,5 +579,5 @@ eventData: {
 
-	private triggerCancelEvent(cancelReason : cancellationReason){
+	private triggerCancelEvent(cancelReason: cancellationReason) {
 		this.notify({
-			eventName: SlideContainer.cancelledEvent,
+			eventName: SlideContainer.CANCELLED_EVENT,
 			object: this,
@@ -712,12 +591,5 @@ eventData: {
 
-	createIndicator(indicatorColor: string): Label {
+	createIndicator(index: number): Label {
 		let indicator = new Label();
-		indicator.backgroundColor = new Color(indicatorColor);
-		indicator.opacity = 0.4;
-		indicator.width = 10;
-		indicator.height = 10;
-		indicator.marginLeft = 2.5;
-		indicator.marginRight = 2.5;
-		indicator.marginTop = 0;
-		indicator.borderRadius = 5;
+		(<any>indicator).classList.add(SLIDE_INDICATOR_INACTIVE);
 		return indicator;
@@ -727,14 +599,13 @@ }
 	setActivePageIndicator(index: number) {
+		let indicatorsToDeactivate = (<any>this._footer).getElementsByClassName(SLIDE_INDICATOR_ACTIVE);
 
-		this._footer.eachLayoutChild((view: View) => {
-			if (view instanceof Label) {
-				view.opacity = 0.4;
-				view.className = 'slide-indicator-inactive';
-			}
+		indicatorsToDeactivate.forEach(activeIndicator => {
+			activeIndicator.classList.remove(SLIDE_INDICATOR_ACTIVE);
+			activeIndicator.classList.add(SLIDE_INDICATOR_INACTIVE);
 		});
-		let activeIndicator = this._footer.getChildAt(index);
-		activeIndicator.className = 'slide-indicator-active';
-		activeIndicator.opacity = 0.9;
 
+		let activeIndicator = (<any>this._footer).getElementsByClassName(SLIDE_INDICATOR_INACTIVE)[index];
+		activeIndicator.classList.remove(SLIDE_INDICATOR_INACTIVE);
+		activeIndicator.classList.add(SLIDE_INDICATOR_ACTIVE);
 	}
 }

package.json

 {
-	"name": "nativescript-slides",
-	"version": "1.7.1",
-	"description": "NativeScript Slides plugin.",
-	"main": "nativescript-slides.js",
-	"nativescript": {
-		"platforms": {
-			"android": "2.0.0",
-			"ios": "2.0.0"
-		},
-		"tns-ios": {
-			"version": "2.0.1"
-		}
-	},
-	"scripts": {
-		"build": "tsc",
-		"demo.ios": "npm run preparedemo && cd demo && tns emulate ios",
-		"demo.android": "npm run preparedemo && cd demo && tns run android",
-		"preparedemo": "npm run build && cd demo && tns plugin remove nativescript-slides && tns plugin add .. && tns install",
-		"setup": "npm install && cd demo && npm install && cd .. && npm run build && cd demo && tns plugin add .. && cd ..",
-		"livesync.ios": "cd demo  && tns livesync ios --watch",
-		"livesync.android": "cd demo  && tns livesync android --watch",
-		"ios": "xcproj --project platforms/ios/YourApp.xcodeproj touch; xcproj --project platforms/ios/Pods/Pods.xcodeproj touch; tns livesync ios --emulator --watch"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/TheOriginalJosh/nativescript-slides.git"
-	},
-	"keywords": [
-		"NativeScript",
-		"JavaScript",
-		"Android",
-		"iOS",
-		"TypeScript",
-		"swipe slides",
-		"Slides",
-		"Carousel"
-	],
-	"author": {
-		"name": "Josh Sommer",
-		"email": "[e-mail]"
-	},
-	"contributors": [
-		{
-			"name": "Brad Martin",
-			"email": "[e-mail]",
-			"url": "https://github.com/bradmartin"
-		},
-		{
-			"name": "Obsessive Inc/Abhijith Reddy",
-			"email": "[e-mail]",
-			"url": "https://github.com/Obsessive"
-		},
-		{
-			"name": "Victor Nascimento",
-			"email": "[e-mail]",
-			"url": "https://github.com/vjoao"
-		},
-		{
-			"name": "Steve McNiven-Scott",
-			"email": "[e-mail]",
-			"url": "https://github.com/sitefinitysteve"
-		}
-	],
-	"bugs": {
-		"url": "https://github.com/TheOriginalJosh/nativescript-slides/issues"
-	},
-	"license": {
-		"type": "MIT",
-		"url": "https://github.com/TheOriginalJosh/nativescript-slides/blob/master/LICENSE"
-	},
-	"homepage": "https://github.com/TheOriginalJosh/nativescript-slides",
-	"readmeFilename": "README.md",
-	"devDependencies": {
-		"typescript": "^1.8.7",
-		"tns-platform-declarations": "^2.0.0"
-	},
-	"dependencies": {}
-}
+  "name": "nativescript-slides",
+  "version": "2.0.0",
+  "description": "NativeScript Slides plugin.",
+  "main": "nativescript-slides.js",
+  "nativescript": {
+    "platforms": {
+      "android": "2.0.0",
+      "ios": "2.0.0"
+    },
+    "tns-ios": {
+      "version": "2.0.1"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "demo.ios": "npm run preparedemo && cd demo && tns emulate ios",
+    "demo.android": "npm run preparedemo && cd demo && tns run android",
+    "preparedemo": "npm run build && cd demo && tns plugin remove nativescript-slides && tns plugin add .. && tns install",
+    "setup": "npm install && cd demo && npm install && cd .. && npm run build && cd demo && tns plugin add .. && cd ..",
+    "livesync.ios": "cd demo  && tns livesync ios --watch",
+    "livesync.android": "cd demo  && tns livesync android --watch",
+    "ios": "xcproj --project platforms/ios/YourApp.xcodeproj touch; xcproj --project platforms/ios/Pods/Pods.xcodeproj touch; tns livesync ios --emulator --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TheOriginalJosh/nativescript-slides.git"
+  },
+  "keywords": [
+    "NativeScript",
+    "JavaScript",
+    "Android",
+    "iOS",
+    "TypeScript",
+    "swipe slides",
+    "Slides",
+    "Carousel"
+  ],
+  "author": {
+    "name": "Josh Sommer",
+    "email": "[e-mail]"
+  },
+  "contributors": [
+    {
+      "name": "Brad Martin",
+      "email": "[e-mail]",
+      "url": "https://github.com/bradmartin"
+    },
+    {
+      "name": "Obsessive Inc/Abhijith Reddy",
+      "email": "[e-mail]",
+      "url": "https://github.com/Obsessive"
+    },
+    {
+      "name": "Victor Nascimento",
+      "email": "[e-mail]",
+      "url": "https://github.com/vjoao"
+    },
+    {
+      "name": "Steve McNiven-Scott",
+      "email": "[e-mail]",
+      "url": "https://github.com/sitefinitysteve"
+    }
+  ],
+  "bugs": {
+    "url": "https://github.com/TheOriginalJosh/nativescript-slides/issues"
+  },
+  "license": {
+    "type": "MIT",
+    "url": "https://github.com/TheOriginalJosh/nativescript-slides/blob/master/LICENSE"
+  },
+  "homepage": "https://github.com/TheOriginalJosh/nativescript-slides",
+  "readmeFilename": "README.md",
+  "devDependencies": {
+    "typescript": "^1.8.7",
+    "tns-platform-declarations": "^2.0.0",
+    "tns-core-modules": "next"
+  },
+  "dependencies": {
+    "nativescript-dom": "^1.0.4"
+  }
+}

README.md

@@ -79,13 +79,35 @@ # NativeScript Slides for iOS and Android
 
-- **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;
+}
+```
 
@@ -102,6 +124,2 @@ #### Events
 
-#### 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:
@@ -116,3 +134,3 @@
 
-  * 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.
 
@@ -129,3 +147,3 @@ #### How To: Load slides dynamically
 
-export function onSlideContainerLoaded(args) {    
+export function onSlideContainerLoaded(args) {
     let slideContainer = <slides.SlideContainer>args.object;
@@ -132,0 +150,0 @@

tsconfig.json

@@ -12,3 +12,2 @@ {
         "demo/node_modules/tns-core-modules/tns-core-modules.d.ts",
-        "node_modules/tns-platform-declarations/android17.d.ts",
         "nativescript-slides.ts"
@@ -15,0 +14,0 @@ ],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

231

increased by8.45%

Worsened metrics

Total package byte prevSize

68487

decreased by-13.59%

Dependency count

1

increased byInfinity%

Dev dependency count

3

increased by50%

Lines of code

1227

decreased by-16.59%

Dependency changes

• + Addednativescript-dom@^1.0.4

• + Addednativescript-dom@1.1.0(transitive)