just-carousel - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

index.js

 /* global module, window, document */
 
-(function() {
-	window.requestAnimationFrame || function () {
-		'use strict';
-
-		window.requestAnimationFrame = window.msRequestAnimationFrame
-			|| window.mozRequestAnimationFrame
-			|| function () {
-
-				var fps = 60;
-				var delay = 1000 / fps;
-				var animationStartTime = Date.now();
-				var previousCallTime = animationStartTime;
-
-				return function requestAnimationFrame(callback) {
-					var requestTime = Date.now();
-					var timeout = Math.max(0, delay - (requestTime - previousCallTime));
-					var timeToCall = requestTime + timeout;
-
-					previousCallTime = timeToCall;
-
-					return window.setTimeout(function onAnimationFrame() {
-						callback(timeToCall - animationStartTime);
-
-					}, timeout);
-				};
-			}();
-
-		window.cancelAnimationFrame = window.mozCancelAnimationFrame
-			|| window.cancelRequestAnimationFrame
-			|| window.msCancelRequestAnimationFrame
-			|| window.mozCancelRequestAnimationFrame
-			|| function cancelAnimationFrame(id) {
-				window.clearTimeout(id);
-			};
-
-	}();
-}());
-
-(function(){
-	if (!window.performance || !window.performance.now) {
-		Date.now || ( Date.now = function () {
-			return new this().getTime();
-		});
-
-		( window.performance ||
-			( window.performance = {} ) ).now = function () {
-			return Date.now() - offset;
-		};
-
-		var offset = ( window.performance.timing ||
-			( window.performance.timing = {} ) ).navigatorStart ||
-			( window.performance.timing.navigatorStart = Date.now() );
-	}
-})();
-
 var JustCarousel = (function() {
@@ -93,2 +38,4 @@ function Carousel(options){
 		this._onChangePos = (options.onChangePos || nope).bind(this);
+		this._onMovingStart = (options.onMovingStart || nope).bind(this);
+		this._onMovingEnd = (options.onMovingEnd || nope).bind(this);
 
@@ -116,2 +63,3 @@ if (typeof exports === 'object') {
 			checkForUpdate.call(this);
+			onMovingStart.call(this);
 
@@ -126,3 +74,5 @@ this.isMoving = false;
 				this._animate(1, 80, function () {
-					self._animate(0, 80);
+					self._animate(0, 80, function () {
+						onMovingEnd.call(self);
+					});
 				});
@@ -137,3 +87,5 @@
 				this._animate(rightPoint - 1, 80, function () {
-					self._animate(rightPoint, 80);
+					self._animate(rightPoint, 80, function () {
+						onMovingEnd.call(self);
+					});
 				});
@@ -175,2 +127,4 @@
 
+		onMovingEnd.call(this);
+
 		this._onChangePos({
@@ -202,4 +156,2 @@ prevSlide: this.currentSlideIdx,
 		this.inner.style.webkitTouchCallout = 'none';
-		this.inner.style.userSelect = 'none';
-		this.inner.style.webkitUserSelect = 'none';
 
@@ -245,2 +197,6 @@ for (var i = 0; i < this.slides.length; i++) {
 			this.justTouched = false;
+
+			if (this.scrollingHorizontally) {
+				onMovingStart.call(this);
+			}
 		}
@@ -462,4 +418,20 @@
 		}
+
+		this.currentOffset = 100 / this.slides.length * this.currentSlideIdx * -1;
+		this.inner.style.width = 100 * this.slides.length + '%';
+		this.inner.style.webkitTransform = 'translate3d(' + this.currentOffset + '%,0,0)';
 	}
 
+	function onMovingStart() {
+		if (!this._isAnimating) {
+			this._isAnimating = true;
+			this._onMovingStart();
+		}
+	}
+
+	function onMovingEnd() {
+		this._isAnimating = false;
+		this._onMovingEnd();
+	}
+
 	function nope() {}
@@ -473,1 +445,56 @@
 }
+
+(function() {
+	window.requestAnimationFrame || function () {
+		'use strict';
+
+		window.requestAnimationFrame = window.msRequestAnimationFrame
+			|| window.mozRequestAnimationFrame
+			|| function () {
+
+				var fps = 60;
+				var delay = 1000 / fps;
+				var animationStartTime = Date.now();
+				var previousCallTime = animationStartTime;
+
+				return function requestAnimationFrame(callback) {
+					var requestTime = Date.now();
+					var timeout = Math.max(0, delay - (requestTime - previousCallTime));
+					var timeToCall = requestTime + timeout;
+
+					previousCallTime = timeToCall;
+
+					return window.setTimeout(function onAnimationFrame() {
+						callback(timeToCall - animationStartTime);
+
+					}, timeout);
+				};
+			}();
+
+		window.cancelAnimationFrame = window.mozCancelAnimationFrame
+			|| window.cancelRequestAnimationFrame
+			|| window.msCancelRequestAnimationFrame
+			|| window.mozCancelRequestAnimationFrame
+			|| function cancelAnimationFrame(id) {
+				window.clearTimeout(id);
+			};
+
+	}();
+}());
+
+(function(){
+	if (!window.performance || !window.performance.now) {
+		Date.now || ( Date.now = function () {
+			return new this().getTime();
+		});
+
+		( window.performance ||
+			( window.performance = {} ) ).now = function () {
+			return Date.now() - offset;
+		};
+
+		var offset = ( window.performance.timing ||
+			( window.performance.timing = {} ) ).navigatorStart ||
+			( window.performance.timing.navigatorStart = Date.now() );
+	}
+})();

package.json

 {
 	"name": "just-carousel",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Just an 1-item-on-screen carousel that works naturally like an iOS/android desktops and nothing else.",
@@ -5,0 +5,0 @@ "license": "MIT",

readme.md

@@ -84,2 +84,9 @@ # just-carousel
 
+### onMovingStart
+Calls whenever any animation is started, including calling slideTo and user touch moving. Useful to optimize FPS.
+(For example, you can stop video playing inside of slide when carousel animating.)  
+
+### onMovingEnd
+Calls whenever any animation is stopped.
+
 ## Instance methods
@@ -86,0 +93,0 @@

No alert changes

Improved metrics

Total package byte prevSize

17683

5.85%

Lines of code

379

6.16%

Number of lines in readme file

108

6.93%

No dependency changes