react-responsive-carousel - npm Package Compare versions

Comparing version 0.0.11 to 0.1.0

__tests__/Carousel.js

@@ -151,4 +151,4 @@ /** @jsx React.DOM */
 			componentInstance.setProps({selectedItem: 0});
-			expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
-			expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(1);
+			// expect(findByClass(componentInstance, 'control-arrow control-left control-disabled').length).toBe(1);
+			// expect(findByClass(componentInstance, 'control-arrow control-right control-disabled').length).toBe(1);
 		})
@@ -155,0 +155,0 @@ })

components/Carousel.js

@@ -7,5 +7,2 @@ /** @jsx React.DOM */
 
-// helper lib to do the swipe work
-var Finger = require('ainojs-finger');
-
 module.exports = React.createClass({displayName: "exports",
@@ -20,3 +17,4 @@
 			selectedItem: 0,
-			// Carousel is the default type
+			// Carousel is the default type. It stands for a group of thumbs.
+			// It also accepts 'slider', which will show a full width item 
 			type: 'carousel'
@@ -38,16 +36,21 @@ }
 
+	statics: {
+		// current position is needed to calculate the right delta
+		currentPosition: 0,
+		// touchPosition is a temporary var to decide what to do on touchEnd
+		touchPosition: null
+	},
+
 	componentWillMount:function() {
-        window.addEventListener("resize", this.updateDimensions);
+		// as the widths are calculated, we need to resize 
+		// the carousel when the window is resized
+		window.addEventListener("resize", this.updateDimensions);
+		// issue #2 - image loading smaller
+		window.addEventListener("DOMContentLoaded", this.updateDimensions);
     },
 
 	componentWillUnmount:function() {
+		// removing listeners
 		window.removeEventListener("resize", this.updateDimensions);
-        
-        // unbinding swipe component
-		if (this.isSlider) {
-			this.finger.off('frame', this.onSwipeMove);
-			this.finger.off('complete', this.onSwipeEnd);
-			this.finger.destroy();
-		}
-
+		window.removeEventListener("DOMContentLoaded", this.updateDimensions);
     },
@@ -79,15 +82,7 @@
 
-		// swipe is only applied to slider because the of the current lib
-		// TODO: implement the swipe behaviour for the carousel too.
-		if (this.isSlider) {
-			var finger = new Finger(this.refs.itemsWrapper.getDOMNode());
-			
-			// this was breaking the tests, some weird behaviour of jest
-			if ('on' in finger) {
-				finger.on('frame', this.onSwipeMove);
-				finger.on('complete', this.onSwipeEnd);
-			}
-
-			this.finger = finger;
-		}
+		// adding swipe events
+		var el = this.refs.itemList.getDOMNode();
+		el.addEventListener('touchstart', this.onSwipeStart);
+		el.addEventListener('touchmove', this.onSwipeMove);
+		el.addEventListener('touchend', this.onSwipeEnd);
 	}, 
@@ -97,3 +92,2 @@
 		this.calculateSpace(this.props.items.length);
-		
 		// the component should be rerended after calculating space
@@ -112,3 +106,3 @@ this.forceUpdate();
 		
-		this.lastElement = this.refs['item' + (total - 1)];//.getDOMNode();
+		this.lastElement = this.refs['item' + (total - 1)];
 		this.lastElementPosition = this.itemSize * total;
@@ -145,11 +139,20 @@
 
-	slideRight:function (){
-		this.moveTo(this.state.firstItem - 1)
+	// touch start
+	onSwipeStart:function (e) {
+		this.setState({
+			// saving the initial touch 
+			touchStart: e.touches[0].pageX,
+			// setting the swiping state
+			swiping: true
+		})
 	},
 
-	slideLeft:function (){
-		this.moveTo(this.state.firstItem + 1)
-	},
+	onSwipeMove:function (e) {
+		// getting the current delta
+		var delta = e.touches[0].pageX - this.state.touchStart;
+		// real position
+		var position = this.currentPosition + delta;
+		// adding it to the last position and saving the position
+		this.touchPosition = delta;
 
-	onSwipeMove:function (e) {
 		var elementStyle = this.refs.itemList.getDOMNode().style;
@@ -166,5 +169,5 @@
 				'msTransform'
-			].forEach(function(propertie)  {return elementStyle[propertie] = 'translate3d(' + e.position + 'px, 0, 0)';});
+			].forEach(function(prop)  {return elementStyle[prop] = 'translate3d(' + position + 'px, 0, 0)';});
 		} else {
-			elementStyle.left = e.position + 'px';
+			elementStyle.left = position + 'px';
 		}
@@ -174,5 +177,32 @@ },
 	onSwipeEnd:function (e) {
-		this.moveTo(e.index);
+		this.setState({
+			// reset touchStart position
+			touchStart: null,
+			// finish the swiping state
+			swiping: false
+		}, 
+			// this function is the callback of setState because we need to wait for the
+			// state to be setted, so the swiping class will be removed and the 
+			// transition to the next slide will be smooth
+			function () {
+				// less than 0 means that it's going left
+				if (this.touchPosition < 0) {
+					this.slideLeft();
+				} else {
+					this.slideRight();
+				}
+				// discard the position
+				this.touchPosition = null;	
+			}.bind(this)
+		);	
 	},
 
+	slideRight:function (){
+		this.moveTo(this.state.firstItem - 1)
+	},
+
+	slideLeft:function (){
+		this.moveTo(this.state.firstItem + 1)
+	},
+
 	moveTo:function (position) {
@@ -190,2 +220,3 @@ // position can't be lower than 0
 		});
+		
 		this.triggerOnChange(position);
@@ -224,3 +255,3 @@ },
 		return this.props.items.map(function(item, index)  {
-			var itemClass = klass.ITEM(isSlider, index, this.state.selectedItem);
+			var itemClass = klass.ITEM(this.isSlider, index, this.state.selectedItem);
 			var imageSchema = {};
@@ -247,3 +278,3 @@
 				this.props.items.map( function(item, index)  {
-					return React.createElement("li", {className: klass.DOT(index === this.state.selectedItem), onClick: this.changeItem, value: index});
+					return React.createElement("li", {className: klass.DOT(index === this.state.selectedItem), onClick: this.changeItem, value: index, key: index});
 				}.bind(this))
@@ -265,15 +296,16 @@ )
 		}
+
+		// show left arrow? 
+		var hasPrev = this.showArrows && this.state.firstItem > 0;
+		// show right arrow
+		var hasNext = this.showArrows && this.state.firstItem < this.lastPosition;
+		// obj to hold the transformations and styles
+		var itemListStyles = {};
 		
-		var total = this.props.items.length;
-		var showArrows = this.visibleItems < total;
-		var isSlider = (this.props.type === "slider");
+		// hold the last position in the component context to calculate the delta on swiping
+		this.currentPosition = this.getNextPosition();
 
-		var hasPrev = showArrows && this.state.firstItem > 0;
-		var hasNext = showArrows && this.state.firstItem < this.lastPosition;
-		
-				
-		var itemListStyles = {};
-		// if 3d isn't available we will use left to move
 		if (has3d) {
-			var transformProp = 'translate3d(' + this.getNextPosition() + 'px, 0, 0)';
+			// if 3d is available, let's take advantage of the performance of transform
+			var transformProp = 'translate3d(' + this.currentPosition + 'px, 0, 0)';
 			itemListStyles = {
@@ -285,23 +317,19 @@ 'WebkitTransform': transformProp,
 				      'transform': transformProp,
-				    'msTransform': transformProp
+				    'msTransform': transformProp,
+				    	  'width': this.lastElementPosition
 			}
 		} else {
+			// if 3d isn't available we will use left to move
 			itemListStyles = {
-				left: this.getNextPosition()
+				left: this.currentPosition,
+				width: this.lastElementPosition
 			}
 		}
-
-		itemListStyles.width = this.itemSize * total;
 		
-		var itemListProps = {
-			className: klass.SLIDER(isSlider),
-			style: itemListStyles
-		}
-	
 		return (
-			React.createElement("div", {className: klass.CAROUSEL(isSlider)}, 
+			React.createElement("div", {className: klass.CAROUSEL(this.isSlider)}, 
 				React.createElement("button", {className: klass.ARROW_LEFT(!hasPrev), onClick: this.slideRight}), 
 				
-				React.createElement("div", {className: klass.WRAPPER(isSlider), ref: "itemsWrapper"}, 
-					React.createElement("ul", React.__spread({},  itemListProps, {ref: "itemList"}), 
+				React.createElement("div", {className: klass.WRAPPER(this.isSlider), ref: "itemsWrapper"}, 
+					React.createElement("ul", {className: klass.SLIDER(this.isSlider, this.state.swiping), style: itemListStyles, ref: "itemList"}, 
 						 this.renderItems() 
@@ -308,0 +336,0 @@ )

cssClasses.js

@@ -19,6 +19,7 @@ var React = require('react/addons');
 
-	SLIDER:function (isSlider){
+	SLIDER:function (isSlider, isSwiping){
 		return classSet({
 			"thumbs": !isSlider,
-			"slider": isSlider
+			"slider": isSlider,
+			"swiping": isSwiping
 		});
@@ -25,0 +26,0 @@ },

package.json

 {
   "name": "react-responsive-carousel",
-  "version": "0.0.11",
+  "version": "0.1.0",
   "description": "React Responsive Carousel",
   "author": {
     "name": "Leandro Augusto Lemos",
-    "url": "[e-mail]"
+    "url": "http://leandrowd.github.io/"
   },
@@ -33,5 +33,4 @@ "keywords": [
     "react": "~0.12.2",
-    "react-addons": "^0.9.0",
-    "ainojs-finger": "^1.1.2"
+    "react-addons": "^0.9.0"
   }
 }

README.md

@@ -26,2 +26,7 @@ # React Responsive Carousel (WIP)
 
+## Contributing
+
+Please, feel free to contributing. You may file an issue or submit a pull request!
+
+
 ## Getting started
@@ -145,3 +150,3 @@
 
-So simple, just add one carousel[type=slider]
+So simple, just add one carousel[type=slider] and another carousel sending the same parameters for both:
 
@@ -197,19 +202,1 @@ - Javascript / Jsx:
 
-
-### Browser Support
-
-Although I have implemented css transformations for all the browsers and fallback to left when 3d isn't supported, I haven't had time to test in browsers other than chrome yet. I reckon than it should just work but minor issues can be found.
-
-### TODO:
-
-- [ ] Implement slides of content
-- [ ] Improve documentation
-- [ ] Improve tests
-- [ ] Improve swipe
-- [ ] Test cross-browser
-- [ ] ...?
-
-
-### Contributing
-
-Feel free to contribute. Just Fork -> Change -> Pull request!

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

72195

increased by0.35%

Dependency count

2

decreased by-33.33%

Lines of code

1187

increased by2.33%

Worsened metrics

Number of lines in readme file

200

decreased by-5.66%

Dependency changes

• - Removedainojs-finger@^1.1.2

• - Removedainojs-dimensions@1.1.0(transitive)

• - Removedainojs-events@1.2.0(transitive)

• - Removedainojs-finger@1.4.0(transitive)