nativescript-slides - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

nativescript-slides.d.ts

@@ -18,5 +18,8 @@ import { AbsoluteLayout } from 'ui/layouts/absolute-layout';
     private _interval;
+    private _velocityScrolling;
     private _androidTranslucentStatusBar;
     private _androidTranslucentNavBar;
     private timer_reference;
+    hasNext: boolean;
+    hasPrevious: boolean;
     interval: number;
@@ -26,2 +29,3 @@ loop: boolean;
     androidTranslucentNavBar: boolean;
+    velocityScrolling: boolean;
     pageWidth: number;
@@ -31,2 +35,3 @@ android: any;
     constructor();
+    private setupDefaultValues();
     constructView(): void;
@@ -40,7 +45,6 @@ private carousel(isenabled, time);
     resetAndroidTranslucentFlags(): void;
-    private setupLeftPanel();
-    private setupRightPanel();
+    private setupPanel(panel);
     private applySwipe(pageWidth);
-    private showRightSlide(panelMap, offset?);
-    private showLeftSlide(panelMap, offset?);
+    private showRightSlide(panelMap, offset?, endingVelocity?);
+    private showLeftSlide(panelMap, offset?, endingVelocity?);
     private buildFooter();
@@ -47,0 +51,0 @@ private setwidthPercent(view, percentage);

nativescript-slides.js

@@ -43,2 +43,16 @@ "use strict";
     }
+    Object.defineProperty(SlideContainer.prototype, "hasNext", {
+        get: function () {
+            return !!this.currentPanel.right;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SlideContainer.prototype, "hasPrevious", {
+        get: function () {
+            return !!this.currentPanel.left;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SlideContainer.prototype, "interval", {
@@ -84,2 +98,12 @@ get: function () {
     });
+    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", {
@@ -106,4 +130,3 @@ get: function () {
     });
-    SlideContainer.prototype.constructView = function () {
-        var _this = this;
+    SlideContainer.prototype.setupDefaultValues = function () {
         this._loaded = false;
@@ -118,2 +141,9 @@ if (this._loop == null) {
         }
+        if (this._velocityScrolling == null) {
+            this._velocityScrolling = false;
+        }
+    };
+    SlideContainer.prototype.constructView = function () {
+        var _this = this;
+        this.setupDefaultValues();
         this.on(absolute_layout_1.AbsoluteLayout.loadedEvent, function (data) {
@@ -189,6 +219,8 @@ if (!_this._loaded) {
         var _this = this;
+        if (!this.hasNext)
+            return;
         this.direction = direction.left;
         this.transitioning = true;
         this.showRightSlide(this.currentPanel).then(function () {
-            _this.setupRightPanel();
+            _this.setupPanel(_this.currentPanel.right);
         });
@@ -198,6 +230,8 @@ };
         var _this = this;
+        if (!this.hasPrevious)
+            return;
         this.direction = direction.right;
         this.transitioning = true;
         this.showLeftSlide(this.currentPanel).then(function () {
-            _this.setupLeftPanel();
+            _this.setupPanel(_this.currentPanel.left);
         });
@@ -214,23 +248,44 @@ };
     };
-    SlideContainer.prototype.setupLeftPanel = function () {
+    SlideContainer.prototype.setupPanel = function (panel) {
         this.direction = direction.none;
         this.transitioning = false;
         this.currentPanel.panel.off('pan');
-        this.currentPanel = this.currentPanel.left;
+        this.currentPanel = panel;
         this.applySwipe(this.pageWidth);
         this.rebindSlideShow();
     };
-    SlideContainer.prototype.setupRightPanel = function () {
-        this.direction = direction.none;
-        this.transitioning = false;
-        this.currentPanel.panel.off('pan');
-        this.currentPanel = this.currentPanel.right;
-        this.applySwipe(this.pageWidth);
-        this.rebindSlideShow();
-    };
     SlideContainer.prototype.applySwipe = function (pageWidth) {
         var _this = this;
         var previousDelta = -1;
+        var endingVelocity = 0;
+        var startTime, deltaTime;
         this.currentPanel.panel.on('pan', function (args) {
-            if (args.state === gestures.GestureStateTypes.ended) {
+            if (args.state === gestures.GestureStateTypes.began) {
+                startTime = Date.now();
+                previousDelta = 0;
+                endingVelocity = 250;
+            }
+            else if (args.state === gestures.GestureStateTypes.ended) {
+                deltaTime = Date.now() - startTime;
+                if (_this.velocityScrolling) {
+                    endingVelocity = (args.deltaX / deltaTime) * 100;
+                }
+                if (args.deltaX > (pageWidth / 3) || (_this.velocityScrolling && endingVelocity > 32)) {
+                    if (_this.hasPrevious) {
+                        _this.transitioning = true;
+                        _this.showLeftSlide(_this.currentPanel, args.deltaX, endingVelocity).then(function () {
+                            _this.setupPanel(_this.currentPanel.left);
+                        });
+                    }
+                    return;
+                }
+                else if (args.deltaX < (-pageWidth / 3) || (_this.velocityScrolling && endingVelocity < -32)) {
+                    if (_this.hasNext) {
+                        _this.transitioning = true;
+                        _this.showRightSlide(_this.currentPanel, args.deltaX, endingVelocity).then(function () {
+                            _this.setupPanel(_this.currentPanel.right);
+                        });
+                    }
+                    return;
+                }
                 if (_this.transitioning === false) {
@@ -240,10 +295,10 @@ _this.transitioning = true;
                         translate: { x: -_this.pageWidth, y: 0 },
-                        duration: 250,
-                        curve: enums_1.AnimationCurve.linear
+                        duration: 200,
+                        curve: enums_1.AnimationCurve.easeOut
                     });
-                    if (_this.currentPanel.right != null) {
+                    if (_this.hasNext) {
                         _this.currentPanel.right.panel.animate({
                             translate: { x: 0, y: 0 },
-                            duration: 250,
-                            curve: enums_1.AnimationCurve.linear
+                            duration: 200,
+                            curve: enums_1.AnimationCurve.easeOut
                         });
@@ -253,7 +308,7 @@ if (app.ios)
                     }
-                    if (_this.currentPanel.left != null) {
+                    if (_this.hasPrevious) {
                         _this.currentPanel.left.panel.animate({
                             translate: { x: -_this.pageWidth * 2, y: 0 },
-                            duration: 250,
-                            curve: enums_1.AnimationCurve.linear
+                            duration: 200,
+                            curve: enums_1.AnimationCurve.easeOut
                         });
@@ -269,27 +324,20 @@ if (app.ios)
             else {
-                if (!_this.transitioning && previousDelta !== args.deltaX && args.deltaX != null && args.deltaX < -5) {
-                    if (_this.currentPanel.right != null) {
+                if (!_this.transitioning
+                    && previousDelta !== args.deltaX
+                    && args.deltaX != null
+                    && args.deltaX < 0) {
+                    if (_this.hasNext) {
                         _this.direction = direction.left;
                         _this.currentPanel.panel.translateX = args.deltaX - _this.pageWidth;
                         _this.currentPanel.right.panel.translateX = args.deltaX;
-                        if (args.deltaX < ((pageWidth / 3) * -1)) {
-                            _this.transitioning = true;
-                            _this.showRightSlide(_this.currentPanel, args.deltaX).then(function () {
-                                _this.setupRightPanel();
-                            });
-                            ;
-                        }
                     }
                 }
-                if (!_this.transitioning && previousDelta !== args.deltaX && args.deltaX != null && args.deltaX > 5) {
-                    if (_this.currentPanel.left != null) {
+                else if (!_this.transitioning
+                    && previousDelta !== args.deltaX
+                    && args.deltaX != null
+                    && args.deltaX > 0) {
+                    if (_this.hasPrevious) {
                         _this.direction = direction.right;
                         _this.currentPanel.panel.translateX = args.deltaX - _this.pageWidth;
                         _this.currentPanel.left.panel.translateX = -(_this.pageWidth * 2) + args.deltaX;
-                        if (args.deltaX > pageWidth / 3) {
-                            _this.transitioning = true;
-                            _this.showLeftSlide(_this.currentPanel, args.deltaX).then(function () {
-                                _this.setupLeftPanel();
-                            });
-                        }
                     }
@@ -303,4 +351,13 @@ }
     };
-    SlideContainer.prototype.showRightSlide = function (panelMap, offset) {
-        if (offset === void 0) { offset = 0; }
+    SlideContainer.prototype.showRightSlide = function (panelMap, offset, endingVelocity) {
+        if (offset === void 0) { offset = this.pageWidth; }
+        if (endingVelocity === void 0) { endingVelocity = 32; }
+        var animationDuration;
+        if (this.velocityScrolling) {
+            var elapsedTime = Math.abs(offset / endingVelocity) * 100;
+            animationDuration = Math.max(Math.min(elapsedTime, 100), 64);
+        }
+        else {
+            animationDuration = 300;
+        }
         var transition = new Array();
@@ -310,4 +367,4 @@ transition.push({
             translate: { x: -this.pageWidth, y: 0 },
-            duration: 300,
-            curve: enums_1.AnimationCurve.linear
+            duration: animationDuration,
+            curve: enums_1.AnimationCurve.easeOut
         });
@@ -317,4 +374,4 @@ transition.push({
             translate: { x: -this.pageWidth * 2, y: 0 },
-            duration: 300,
-            curve: enums_1.AnimationCurve.linear
+            duration: animationDuration,
+            curve: enums_1.AnimationCurve.easeOut
         });
@@ -324,4 +381,13 @@ var animationSet = new AnimationModule.Animation(transition, false);
     };
-    SlideContainer.prototype.showLeftSlide = function (panelMap, offset) {
-        if (offset === void 0) { offset = 0; }
+    SlideContainer.prototype.showLeftSlide = function (panelMap, offset, endingVelocity) {
+        if (offset === void 0) { offset = this.pageWidth; }
+        if (endingVelocity === void 0) { endingVelocity = 32; }
+        var animationDuration;
+        if (this.velocityScrolling) {
+            var elapsedTime = Math.abs(offset / endingVelocity) * 100;
+            animationDuration = Math.max(Math.min(elapsedTime, 100), 64);
+        }
+        else {
+            animationDuration = 300;
+        }
         var transition = new Array();
@@ -331,4 +397,4 @@ transition.push({
             translate: { x: -this.pageWidth, y: 0 },
-            duration: 300,
-            curve: enums_1.AnimationCurve.linear
+            duration: animationDuration,
+            curve: enums_1.AnimationCurve.easeOut
         });
@@ -338,4 +404,4 @@ transition.push({
             translate: { x: 0, y: 0 },
-            duration: 300,
-            curve: enums_1.AnimationCurve.linear
+            duration: animationDuration,
+            curve: enums_1.AnimationCurve.easeOut
         });
@@ -342,0 +408,0 @@ var animationSet = new AnimationModule.Animation(transition, false);

nativescript-slides.ts

@@ -41,2 +41,3 @@ import * as app from 'application';
 	private _interval: number;
+	private _velocityScrolling: boolean;
 	private _androidTranslucentStatusBar: boolean;
@@ -46,2 +47,10 @@ private _androidTranslucentNavBar: boolean;
 
+	get hasNext(): boolean {
+		return !!this.currentPanel.right;
+	}
+
+	get hasPrevious(): boolean {
+		return !!this.currentPanel.left;
+	}
+
 	get interval() {
@@ -79,2 +88,8 @@ return this._interval;
 
+	get velocityScrolling(): boolean {
+		return this._velocityScrolling;
+	}
+	set velocityScrolling(value: boolean) {
+		this._velocityScrolling = value;
+	}
 	get pageWidth() {
@@ -97,4 +112,3 @@ return this._pageWidth;
 
-	constructView(): void {
-
+	private setupDefaultValues(): void {
 		this._loaded = false;
@@ -112,2 +126,10 @@ if (this._loop == null) {
 
+		if (this._velocityScrolling == null) {
+			this._velocityScrolling = false;
+		}
+
+	}
+	constructView(): void {
+		this.setupDefaultValues();
+
 		this.on(AbsoluteLayout.loadedEvent, (data: any) => {
@@ -147,2 +169,3 @@ if (!this._loaded) {
 
+				//handles application orientation change
 				app.on(app.orientationChangedEvent, (args: app.OrientationChangedEventData) => {
@@ -194,13 +217,19 @@ this._pageWidth = Platform.screen.mainScreen.widthDIPs;
 	public nextSlide(): void {
+		if (!this.hasNext)
+			return;
+
 		this.direction = direction.left;
 		this.transitioning = true;
 		this.showRightSlide(this.currentPanel).then(() => {
-			this.setupRightPanel();
+			this.setupPanel(this.currentPanel.right);
 		});
 	}
 	public previousSlide(): void {
+		if (!this.hasPrevious)
+			return;
+
 		this.direction = direction.right;
 		this.transitioning = true;
 		this.showLeftSlide(this.currentPanel).then(() => {
-			this.setupLeftPanel();
+			this.setupPanel(this.currentPanel.left);
 		});
@@ -219,7 +248,7 @@ }
 
-	private setupLeftPanel(): void {
+	private setupPanel(panel: ISlideMap) {
 		this.direction = direction.none;
 		this.transitioning = false;
 		this.currentPanel.panel.off('pan');
-		this.currentPanel = this.currentPanel.left;
+		this.currentPanel = panel;
 		this.applySwipe(this.pageWidth);
@@ -229,16 +258,38 @@ this.rebindSlideShow();
 
-	private setupRightPanel(): void {
-		this.direction = direction.none;
-		this.transitioning = false;
-		this.currentPanel.panel.off('pan');
-		this.currentPanel = this.currentPanel.right;
-		this.applySwipe(this.pageWidth);
-		this.rebindSlideShow();
-	}
-
 	private applySwipe(pageWidth: number): void {
 		let previousDelta = -1; //hack to get around ios firing pan event after release
+		let endingVelocity = 0;
+		let startTime, deltaTime;
 
 		this.currentPanel.panel.on('pan', (args: gestures.PanGestureEventData): void => {
-			if (args.state === gestures.GestureStateTypes.ended) {
+
+			if (args.state === gestures.GestureStateTypes.began) {
+				startTime = Date.now();
+				previousDelta = 0;
+				endingVelocity = 250;
+			} else if (args.state === gestures.GestureStateTypes.ended) {
+				deltaTime = Date.now() - startTime;
+				// if velocityScrolling is enabled then calculate the velocitty
+				if (this.velocityScrolling) {
+					endingVelocity = (args.deltaX / deltaTime) * 100;
+				}
+
+				if (args.deltaX > (pageWidth / 3) || (this.velocityScrolling && endingVelocity > 32)) { ///swiping left to right.
+					if (this.hasPrevious) {
+						this.transitioning = true;
+						this.showLeftSlide(this.currentPanel, args.deltaX, endingVelocity).then(() => {
+							this.setupPanel(this.currentPanel.left);
+						});
+					}
+					return;
+				} else if (args.deltaX < (-pageWidth / 3) || (this.velocityScrolling && endingVelocity < -32)) {
+					if (this.hasNext) {
+						this.transitioning = true;
+						this.showRightSlide(this.currentPanel, args.deltaX, endingVelocity).then(() => {
+							this.setupPanel(this.currentPanel.right);
+						});
+					}
+					return;
+				}
+
 				if (this.transitioning === false) {
@@ -248,10 +299,10 @@ this.transitioning = true;
 						translate: { x: -this.pageWidth, y: 0 },
-						duration: 250,
-						curve: AnimationCurve.linear
+						duration: 200,
+						curve: AnimationCurve.easeOut
 					});
-					if (this.currentPanel.right != null) {
+					if (this.hasNext) {
 						this.currentPanel.right.panel.animate({
 							translate: { x: 0, y: 0 },
-							duration: 250,
-							curve: AnimationCurve.linear
+							duration: 200,
+							curve: AnimationCurve.easeOut
 						});
@@ -261,7 +312,7 @@ if (app.ios) //for some reason i have to set these in ios or there is some sort of bounce back.
 					}
-					if (this.currentPanel.left != null) {
+					if (this.hasPrevious) {
 						this.currentPanel.left.panel.animate({
 							translate: { x: -this.pageWidth * 2, y: 0 },
-							duration: 250,
-							curve: AnimationCurve.linear
+							duration: 200,
+							curve: AnimationCurve.easeOut
 						});
@@ -276,9 +327,10 @@ if (app.ios)
 					this.transitioning = false;
-
 				}
 			} else {
-				if (!this.transitioning && previousDelta !== args.deltaX && args.deltaX != null && args.deltaX < -5) {
-					// console.log('android ' + (<android.view.MotionEvent>(<gestures.tou>args).android).;
-					if (this.currentPanel.right != null) {
+				if (!this.transitioning
+					&& previousDelta !== args.deltaX
+					&& args.deltaX != null
+					&& args.deltaX < 0) {
 
+					if (this.hasNext) {
 						this.direction = direction.left;
@@ -288,24 +340,15 @@ this.currentPanel.panel.translateX = args.deltaX - this.pageWidth;
 
-						if (args.deltaX < ((pageWidth / 3) * -1)) {
-							this.transitioning = true;
-							this.showRightSlide(this.currentPanel, args.deltaX).then(() => {
-								this.setupRightPanel();
-							});;
-						}
 					}
-				}
+				} else if (!this.transitioning
+					&& previousDelta !== args.deltaX
+					&& args.deltaX != null
+					&& args.deltaX > 0) {
 
-				if (!this.transitioning && previousDelta !== args.deltaX && args.deltaX != null && args.deltaX > 5) {
-					if (this.currentPanel.left != null) {
+					if (this.hasPrevious) {
 						this.direction = direction.right;
 						this.currentPanel.panel.translateX = args.deltaX - this.pageWidth;
 						this.currentPanel.left.panel.translateX = -(this.pageWidth * 2) + args.deltaX;
-						if (args.deltaX > pageWidth / 3) { ///swiping left to right.
-							this.transitioning = true;
-							this.showLeftSlide(this.currentPanel, args.deltaX).then(() => {
-								this.setupLeftPanel();
-							});
-						}
 					}
 				}
+
 				if (args.deltaX !== 0) {
@@ -319,9 +362,18 @@ previousDelta = args.deltaX;
 
-	private showRightSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
+	private showRightSlide(panelMap: ISlideMap, offset: number = this.pageWidth, endingVelocity: number = 32): AnimationModule.AnimationPromise {
+		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
+		}
+
 		let transition = new Array();
+
 		transition.push({
 			target: panelMap.right.panel,
 			translate: { x: -this.pageWidth, y: 0 },
-			duration: 300,
-			curve: AnimationCurve.linear
+			duration: animationDuration,
+			curve: AnimationCurve.easeOut
 		});
@@ -331,4 +383,4 @@ transition.push({
 			translate: { x: -this.pageWidth * 2, y: 0 },
-			duration: 300,
-			curve: AnimationCurve.linear
+			duration: animationDuration,
+			curve: AnimationCurve.easeOut
 		});
@@ -340,9 +392,19 @@ let animationSet = new AnimationModule.Animation(transition, false);
 
-	private showLeftSlide(panelMap: ISlideMap, offset: number = 0): AnimationModule.AnimationPromise {
+	private showLeftSlide(panelMap: ISlideMap, offset: number = this.pageWidth, endingVelocity: number = 32): AnimationModule.AnimationPromise {
+
+		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
+		}
+
 		let transition = new Array();
+
 		transition.push({
 			target: panelMap.left.panel,
 			translate: { x: -this.pageWidth, y: 0 },
-			duration: 300,
-			curve: AnimationCurve.linear
+			duration: animationDuration,
+			curve: AnimationCurve.easeOut
 		});
@@ -352,4 +414,4 @@ transition.push({
 			translate: { x: 0, y: 0 },
-			duration: 300,
-			curve: AnimationCurve.linear
+			duration: animationDuration,
+			curve: AnimationCurve.easeOut
 		});
@@ -362,2 +424,5 @@ let animationSet = new AnimationModule.Animation(transition, false);
 
+	/**
+	 * currently deprecated.... will come back to life for navigation dots.
+	 *  */
 	private buildFooter(): AbsoluteLayout {
@@ -364,0 +429,0 @@ let footer = new AbsoluteLayout();

package.json

 {
   "name": "nativescript-slides",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "NativeScript Slides plugin.",
@@ -50,2 +50,7 @@ "main": "nativescript-slides.js",
       "url": "https://github.com/Obsessive"
+    },
+    {
+      "name": "Victor Nascimento",
+      "email": "[e-mail]",
+      "url": "https://github.com/vjoao"
     }
@@ -52,0 +57,0 @@ ],

README.md

@@ -74,2 +74,4 @@ # NativeScript Slides for iOS and Android
 
+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.
+
 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`.
@@ -88,3 +90,6 @@
 
+###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__).
@@ -137,2 +142,4 @@
 
+[Victor Nascimento](https://github.com/vjoao)
+
 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:
@@ -139,0 +146,0 @@ https://github.com/NathanWalker/nativescript-plugin-seed

No alert changes

Improved metrics

Total package byte prevSize

57836

increased by12.54%

Lines of code

1047

increased by13.31%

Number of lines in readme file

150

increased by4.9%

No dependency changes