Merge pull request #25 from erichbehrens/min-swipe-offset

Minimum swipe offset

README.md

@@ -12,6 +12,7 @@ Animated slider component for react.
 ![Preview](https://res.cloudinary.com/riangle/image/upload/v1511700118/react-animated-slider_qqedfm.png)
 
 ## Features:
+
 - Ready to use slider component with animations
 - Easy customization
 - Horizontal or vertical navigation
@@ -41,7 +42,9 @@ import 'react-animated-slider/build/horizontal.css';
   </div>)}
 </Slider>
 ```
+
 ## Properties:
+
 **slideIndex** - `number`, default `0`
 
 Index of the slide that will be initially displayed.
@@ -58,6 +61,10 @@ Disable slider navigation
 
 Enable or disable infinite loop through slides. Sliders with only 2 children will have this option set to `false`
 
+**minSwipeOffset** - `number`, default `15`(px)
+
+Minimum distance to swipe for triggering a navigation event
+
 **previousButton** - `ReactElement`, default  `string "previous"`
 
 Will be rendered inside the previous button

build/index.js

@@ -157,9 +157,7 @@ var Slider = function (_React$PureComponent) {
 			var isDisabled = this.isDisabled();
 			return _react2.default.createElement(
 				'div',
-				{ className: className, ref: function ref(_ref) {
-						return _this2.sliderRef = _ref;
-					} },
+				{ className: className, ref: this.initTouchEvents },
 				_react2.default.createElement(
 					'button',
 					{
@@ -184,8 +182,6 @@ var Slider = function (_React$PureComponent) {
 					_react2.default.Children.map(children, function (item, index) {
 						return _react2.default.cloneElement(item, {
 							key: index,
-							onTouchStart: !isDisabled ? _this2.handleTouchStart : undefined,
-							onTouchEnd: !isDisabled ? _this2.handleTouchEnd : undefined,
 							className: [classNames.slide, _this2.getSlideClass(index), item.props.className].filter(function (v) {
 								return v;
 							}).join(' ')
@@ -271,6 +267,8 @@ var _initialiseProps = function _initialiseProps() {
 		return classNames.hidden;
 	};
 
+	this.isSwiping = false;
+
 	this.handleTouchStart = function (e) {
 		if (_this3.isDisabled()) return;
 
@@ -280,16 +278,14 @@ var _initialiseProps = function _initialiseProps() {
 		    next = _getClassNames.next;
 
 		var touch = e.touches[0];
+		_this3.isSwiping = true;
 		_this3.pageStartPosition = touch[_this3.swipeEventProperty];
 		_this3.currentElement = _this3.sliderRef.getElementsByClassName(current)[0];
 		_this3.previousElement = _this3.sliderRef.getElementsByClassName(previous)[0];
 		_this3.nextElement = _this3.sliderRef.getElementsByClassName(next)[0];
 		var touchDelta = _this3.currentElement.getBoundingClientRect()[_this3.swipeProperty];
 		_this3.currentElementStartPosition = 0;
 		_this3.currentElementPosition = 0;
-		_this3.sliderRef.addEventListener('touchmove', _this3.handleTouchMove, {
-			passive: false
-		});
 		_this3.currentElement.style.transition = 'none';
 		if (_this3.previousElement) {
 			_this3.previousElement.style.transition = 'none';
@@ -308,6 +304,10 @@ var _initialiseProps = function _initialiseProps() {
 	this.handleTouchMove = function (e) {
 		e.preventDefault();
 		_this3.animating = _this3.animating || requestAnimationFrame(function () {
+			if (!_this3.isSwiping) {
+				_this3.animating = false;
+				return;
+			}
 			var touch = e.touches[0];
 			var newLeft = touch[_this3.swipeEventProperty] - _this3.pageStartPosition;
 			_this3.currentElementPosition = _this3.currentElementStartPosition + newLeft;
@@ -325,7 +325,8 @@ var _initialiseProps = function _initialiseProps() {
 	};
 
 	this.handleTouchEnd = function () {
-		_this3.sliderRef.removeEventListener('touchmove', _this3.handleTouchMove);
+		_this3.animating = false;
+		_this3.isSwiping = false;
 		_this3.currentElement.style.removeProperty(_this3.swipeProperty);
 		_this3.currentElement.style.removeProperty('transition');
 		if (_this3.previousElement) {
@@ -338,26 +339,30 @@ var _initialiseProps = function _initialiseProps() {
 			_this3.nextElement.style.removeProperty('transition');
 			_this3.nextElement.style.removeProperty(_this3.swipeProperty);
 		}
-		if (_this3.currentElementStartPosition < _this3.currentElementPosition) {
-			_this3.previous();
-		} else {
-			_this3.next();
+		var touchDelta = _this3.currentElementStartPosition - _this3.currentElementPosition;
+		var minSwipeOffset = _this3.props.minSwipeOffset || 15;
+		if (Math.abs(touchDelta) > minSwipeOffset) {
+			if (touchDelta < 0) {
+				_this3.previous();
+			} else {
+				_this3.next();
+			}
 		}
-		_this3.pageStartPosition = undefined;
-		_this3.currentElement = undefined;
-		_this3.currentElementStartPosition = undefined;
-		_this3.currentElementPosition = undefined;
-		_this3.previousElement = undefined;
-		_this3.previousElementStartPosition = undefined;
-		_this3.previousElementPosition = undefined;
-		_this3.nextElement = undefined;
-		_this3.nextElementStartPosition = undefined;
-		_this3.nextElementPosition = undefined;
 	};
 
 	this.getClassNames = function () {
 		return _extends({}, DEFAULT_CLASSNAMES, _this3.props.classNames);
 	};
+
+	this.initTouchEvents = function (sliderRef) {
+		if (_this3.isDisabled() || !sliderRef) return;
+		_this3.sliderRef = sliderRef;
+		_this3.sliderRef.addEventListener('touchstart', _this3.handleTouchStart);
+		_this3.sliderRef.addEventListener('touchmove', _this3.handleTouchMove, {
+			passive: false
+		});
+		_this3.sliderRef.addEventListener('touchend', _this3.handleTouchEnd);
+	};
 };
 
 exports.default = Slider;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-slider",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Animated slider component for react",
   "main": "build/index.js",
   "scripts": {

src/index.js

@@ -187,10 +187,14 @@ class Slider extends React.PureComponent {
 			this.nextElement.style.removeProperty('transition');
 			this.nextElement.style.removeProperty(this.swipeProperty);
 		}
-		if (this.currentElementStartPosition < this.currentElementPosition) {
-			this.previous();
-		} else {
-			this.next();
+		const touchDelta = this.currentElementStartPosition - this.currentElementPosition;
+		const minSwipeOffset = this.props.minSwipeOffset || 15;
+		if (Math.abs(touchDelta) > minSwipeOffset) {
+			if (touchDelta < 0) {
+				this.previous();
+			} else {
+				this.next();
+			}
 		}
 	};