famous-carousel - npm Package Compare versions

Comparing version 0.9.6 to 0.9.7

dist/es5/Arrow.js

@@ -77,8 +77,10 @@ "use strict";
 		key: "emitPageChange",
-		value: function emitPageChange() {
-			this.context.emit("pageChange", {
-				direction: this.direction,
-				numSlidesToAdvance: this.manualSlidesToAdvance,
-				stopAutoPlay: true
-			});
+		value: function emitPageChange(e) {
+			if (e.status === "start") {
+				this.context.emit("pageChange", {
+					direction: this.direction,
+					numSlidesToAdvance: this.manualSlidesToAdvance,
+					stopAutoPlay: true
+				});
+			}
 		}
@@ -85,0 +87,0 @@ }, {

dist/es5/Carousel.js

@@ -32,4 +32,5 @@ "use strict";
 			break;
+		case "string":
+			document.querySelector(carouselOptions.selector).style.overflow = "hidden";
 		case "undefined":
-		case "string":
 			FamousEngine.init();
@@ -36,0 +37,0 @@ context = FamousEngine.createScene(carouselOptions.selector);

dist/es5/Pager.js

@@ -54,4 +54,3 @@ "use strict";
 		this.currentIndex = options.initialIndex || 0;
-		this.threshold = 4000;
-		this.force = new Vec3();
+		this.threshold = 0.3;
 		this.pageWidth = 0;
@@ -144,4 +143,26 @@
 
-			this.pages[newIndex].anchor.set(0, 0, 0);
-			this.pages[newIndex].node.setRotation(0, 0, 0);
+			var visibleSlides = this.adjacentSlides(newIndex);
+			var yRotation;
+			for (var i = 0; i < this.pages.length; i++) {
+				yRotation = hideAngle;
+				for (var key in visibleSlides) {
+					if (visibleSlides[key] === i) {
+						yRotation = 0;
+						switch (key) {
+							case "left":
+								xOffset = -1;
+								break;
+							case "center":
+								xOffset = 0;
+								break;
+							case "right":
+								xOffset = 1;
+								break;
+						}
+						this.pages[i].anchor.set(xOffset, 0, 0);
+					}
+				}
+				this.pages[i].node.setRotation(0, yRotation, 0);
+			}
+
 			this.currentIndex = newIndex;
@@ -200,18 +221,55 @@ }
 				gestureHandler.on("drag", (function (index, e) {
-					this.force.set(e.centerDelta.x, 0, 0); // Add a force equal to change in X direction
-					this.force.scale(20); // Scale the force up
-					this.pages[index].box.applyForce(this.force); // Apply the force to the `Box` body
+					switch (e.status) {
+						case "start":
+							this.draggedIndex = index;
+							return;
+						case "move":
+							if (this.draggedIndex !== index) {
+								return;
+							}
+							break;
+						case "end":
+							// Snap anchor back to center on release
+							if (this.draggedIndex === index) {
+								if (this.pages[index].anchor.x !== 0) {
+									this.pages[index].anchor.set(0, 0, 0);
+									var visibleSlides = this.adjacentSlides(index);
+									if (!isNaN(visibleSlides.left)) {
+										this.pages[visibleSlides.left].anchor.set(-1, 0, 0);
+									}
+									if (!isNaN(visibleSlides.right)) {
+										this.pages[visibleSlides.right].anchor.set(1, 0, 0);
+									}
+								}
+							}
+							this.draggedIndex = -1;
+							return;
+						default:
+							return;
+					}
 
+					var visibleSlides = this.adjacentSlides(index);
+					var anchorXoffset;
+					for (var key in visibleSlides) {
+						var idx = visibleSlides[key];
+						if (isNaN(idx)) {
+							continue;
+						}
+						anchorXoffset = e.centerDelta.x / this.pages[idx].node.getSize()[0];
+						anchorXoffset += this.pages[idx].anchor.x;
+						this.pages[idx].anchor.set(anchorXoffset, 0, 0);
+					}
+
+					// Fire page change event if slide has moved beyond threshold
 					var direction = 0;
-					if (e.centerVelocity.x > this.threshold) {
-						if (this.draggedIndex === index && this.currentIndex === index) {
-							// Move index to left
-							direction = -1;
+					if (this.draggedIndex === index && this.currentIndex === index) {
+						if (anchorXoffset >= this.threshold) {
+							direction = -1; // left
 						}
-					} else if (e.centerVelocity.x < -this.threshold) {
-						if (this.draggedIndex === index && this.currentIndex === index) {
-							direction = 1;
+						if (anchorXoffset <= -this.threshold) {
+							direction = 1; // right
 						}
 					}
 					if (direction !== 0) {
+						this.draggedIndex = -1;
 						this.options.context.emit("pageChange", {
@@ -223,6 +281,2 @@ direction: direction,
 					}
-
-					if (e.status === "start") {
-						this.draggedIndex = index;
-					}
 				}).bind(this, i));
@@ -270,2 +324,20 @@ /*eslint-enable */
 		}
+
+		// Find slides adjacent to the current index. Returns an object with keys
+		// left, center, right.
+		// If input slide is at either end, the left or right values are undefined.
+
+	}, {
+		key: "adjacentSlides",
+		value: function adjacentSlides(centerIndex) {
+			var slides = {};
+			slides.left = centerIndex - 1;
+			slides.right = centerIndex + 1;
+
+			slides.left = slides.left < 0 ? undefined : slides.left;
+			slides.right = slides.right >= this.pages.length ? undefined : slides.right;
+			slides.center = centerIndex;
+
+			return slides;
+		}
 	}]);
@@ -272,0 +344,0 @@

package.json

 {
   "name": "famous-carousel",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "author": "Peace Chen",
@@ -41,3 +41,9 @@ "contributors": ["Tony Alves (https://github.com/talves)"],
   },
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
   "devDependencies": {
+    "babel-preset-es2015": "^6.0.15",
     "babelify": "^6.0.1",
@@ -44,0 +50,0 @@ "browserify": "^10.1.3",

README.md

@@ -52,3 +52,3 @@ ## Famo.us Carousel
 As a string, _selector_ is a CSS selector of the element to render into.<BR>
-As an object, _selector_ is assumed to be a Famous node.
+As an object, _selector_ is assumed to be a Famous node. The node's container should have overflow set to hidden.
 
@@ -55,0 +55,0 @@ * #### carouselData (required)

src/Arrow.js

@@ -58,8 +58,10 @@ /**
 
-	emitPageChange() {
-		this.context.emit("pageChange", {
-			direction: this.direction,
-			numSlidesToAdvance: this.manualSlidesToAdvance,
-			stopAutoPlay: true
-		});
+	emitPageChange(e) {
+		if(e.status === "start") {
+			this.context.emit("pageChange", {
+				direction: this.direction,
+				numSlidesToAdvance: this.manualSlidesToAdvance,
+				stopAutoPlay: true
+			});
+		}
 	}
@@ -66,0 +68,0 @@

src/Carousel.js

@@ -19,4 +19,5 @@ /**
 				break;
+			case "string":
+				document.querySelector(carouselOptions.selector).style.overflow = "hidden";
 			case "undefined":
-			case "string":
 				FamousEngine.init();
@@ -23,0 +24,0 @@ context = FamousEngine.createScene(carouselOptions.selector);

src/Pager.js

@@ -23,4 +23,3 @@ /**
 		this.currentIndex = options.initialIndex || 0;
-		this.threshold = 4000;
-		this.force = new Vec3();
+		this.threshold = 0.3;
 		this.pageWidth = 0;
@@ -108,4 +107,26 @@
 
-		this.pages[newIndex].anchor.set(0, 0, 0);
-		this.pages[newIndex].node.setRotation(0, 0, 0);
+		var visibleSlides = this.adjacentSlides(newIndex);
+		var yRotation;
+		for (var i = 0; i < this.pages.length; i++) {
+			yRotation = hideAngle;
+			for (var key in visibleSlides) {
+				if (visibleSlides[key] === i) {
+					yRotation = 0;
+					switch(key) {
+						case "left":
+							xOffset = -1;
+							break;
+						case "center":
+							xOffset = 0;
+							break;
+						case "right":
+							xOffset = 1;
+							break;
+					}
+					this.pages[i].anchor.set(xOffset, 0, 0);
+				}
+			}
+			this.pages[i].node.setRotation(0, yRotation, 0);
+		}
+
 		this.currentIndex = newIndex;
@@ -162,18 +183,55 @@ }
 			gestureHandler.on("drag", function(index, e) {
-				this.force.set(e.centerDelta.x, 0, 0); // Add a force equal to change in X direction
-				this.force.scale(20); // Scale the force up
-				this.pages[index].box.applyForce(this.force); // Apply the force to the `Box` body
+				switch (e.status) {
+					case "start":
+						this.draggedIndex = index;
+						return;
+					case "move":
+						if(this.draggedIndex !== index) {
+							return;
+						}
+						break;
+					case "end":
+						// Snap anchor back to center on release
+						if(this.draggedIndex === index) {
+							if(this.pages[index].anchor.x !== 0) {
+								this.pages[index].anchor.set(0, 0, 0);
+								var visibleSlides = this.adjacentSlides(index);
+								if(!isNaN(visibleSlides.left)) {
+									this.pages[visibleSlides.left].anchor.set(-1, 0, 0);
+								}
+								if(!isNaN(visibleSlides.right)) {
+									this.pages[visibleSlides.right].anchor.set(1, 0, 0);
+								}
+							}
+						}
+						this.draggedIndex = -1;
+						return;
+					default:
+						return;
+				}
 
+				var visibleSlides = this.adjacentSlides(index);
+				var anchorXoffset;
+				for (var key in visibleSlides) {
+					var idx = visibleSlides[key];
+					if(isNaN(idx)) {
+						continue;
+					}
+					anchorXoffset = e.centerDelta.x / this.pages[idx].node.getSize()[0];
+					anchorXoffset += this.pages[idx].anchor.x;
+					this.pages[idx].anchor.set(anchorXoffset, 0, 0);
+				}
+
+				// Fire page change event if slide has moved beyond threshold
 				var direction = 0;
-				if (e.centerVelocity.x > this.threshold) {
-					if (this.draggedIndex === index && this.currentIndex === index) {
-						// Move index to left
-						direction = -1;
+				if (this.draggedIndex === index && this.currentIndex === index) {
+					if(anchorXoffset >= this.threshold) {
+						direction = -1; // left
 					}
-				} else if (e.centerVelocity.x < -this.threshold) {
-					if (this.draggedIndex === index && this.currentIndex === index) {
-						direction = 1;
+					if(anchorXoffset <= -this.threshold) {
+						direction = 1; // right
 					}
 				}
 				if (direction !== 0) {
+					this.draggedIndex = -1;
 					this.options.context.emit("pageChange", {
@@ -186,5 +244,2 @@ direction: direction,
 
-				if (e.status === "start") {
-					this.draggedIndex = index;
-				}
 			}.bind(this, i));
@@ -233,2 +288,17 @@ /*eslint-enable */
 
+	// Find slides adjacent to the current index. Returns an object with keys
+	// left, center, right.
+	// If input slide is at either end, the left or right values are undefined.
+	adjacentSlides(centerIndex) {
+		var slides = {};
+		slides.left = centerIndex - 1;
+		slides.right = centerIndex + 1;
+
+		slides.left = slides.left < 0 ? undefined : slides.left;
+		slides.right = slides.right >= this.pages.length ? undefined : slides.right;
+		slides.center = centerIndex;
+
+		return slides;
+	}
+
 }

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

Total package byte prevSize

78643

increased by5.34%

Lines of code

1566

increased by9.66%

Worsened metrics

Dev dependency count

8

increased by14.29%

Number of package files

27

decreased by-3.57%

No dependency changes