react-easy-swipe - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

lib/react-swipe.js

@@ -76,2 +76,22 @@ (function (global, factory) {
 
+  /**
+   * [getPosition returns a position element that works for mouse or touch events]
+   * @param  {[Event]} event [the received event]
+   * @return {[Object]}      [x and y coords]
+   */
+  function getPosition(event) {
+    if ('touches' in event) {
+      var _event$touches$ = event.touches[0],
+          pageX = _event$touches$.pageX,
+          pageY = _event$touches$.pageY;
+
+      return { x: pageX, y: pageY };
+    }
+
+    var screenX = event.screenX,
+        screenY = event.screenY;
+
+    return { x: screenX, y: screenY };
+  }
+
   var ReactSwipe = function (_Component) {
@@ -81,9 +101,19 @@ _inherits(ReactSwipe, _Component);
     function ReactSwipe() {
+      var _ref;
+
       _classCallCheck(this, ReactSwipe);
 
-      var _this = _possibleConstructorReturn(this, (ReactSwipe.__proto__ || Object.getPrototypeOf(ReactSwipe)).call(this));
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
+      var _this = _possibleConstructorReturn(this, (_ref = ReactSwipe.__proto__ || Object.getPrototypeOf(ReactSwipe)).call.apply(_ref, [this].concat(args)));
+
       _this._handleSwipeStart = _this._handleSwipeStart.bind(_this);
       _this._handleSwipeMove = _this._handleSwipeMove.bind(_this);
       _this._handleSwipeEnd = _this._handleSwipeEnd.bind(_this);
+
+      _this._onMouseDown = _this._onMouseDown.bind(_this);
+      _this._onMouseMove = _this._onMouseMove.bind(_this);
+      _this._onMouseUp = _this._onMouseUp.bind(_this);
       return _this;
@@ -93,9 +123,42 @@ }
     _createClass(ReactSwipe, [{
+      key: '_onMouseDown',
+      value: function _onMouseDown(event) {
+        if (!this.props.allowMouseEvents) {
+          return;
+        }
+
+        this.mouseDown = true;
+
+        document.addEventListener('mouseup', this._onMouseUp);
+        document.addEventListener('mousemove', this._onMouseMove);
+
+        this._handleSwipeStart(event);
+      }
+    }, {
+      key: '_onMouseMove',
+      value: function _onMouseMove(event) {
+        if (!this.mouseDown) {
+          return;
+        }
+
+        this._handleSwipeMove(event);
+      }
+    }, {
+      key: '_onMouseUp',
+      value: function _onMouseUp(event) {
+        this.mouseDown = false;
+
+        document.removeEventListener('mouseup', this._onMouseUp);
+        document.removeEventListener('mousemove', this._onMouseMove);
+
+        this._handleSwipeEnd(event);
+      }
+    }, {
       key: '_handleSwipeStart',
       value: function _handleSwipeStart(event) {
-        var _event$touches$ = event.touches[0];
-        var pageX = _event$touches$.pageX;
-        var pageY = _event$touches$.pageY;
+        var _getPosition = getPosition(event),
+            x = _getPosition.x,
+            y = _getPosition.y;
 
-        this.touchStart = { pageX: pageX, pageY: pageY };
+        this.moveStart = { x: x, y: y };
         this.props.onSwipeStart(event);
@@ -106,6 +169,10 @@ }
       value: function _handleSwipeMove(event) {
-        var deltaX = event.touches[0].pageX - this.touchStart.pageX;
-        var deltaY = event.touches[0].pageY - this.touchStart.pageY;
-        this.swiping = true;
+        var _getPosition2 = getPosition(event),
+            x = _getPosition2.x,
+            y = _getPosition2.y;
 
+        var deltaX = x - this.moveStart.x;
+        var deltaY = y - this.moveStart.y;
+        this.moving = true;
+
         // handling the responsability of cancelling the scroll to
@@ -122,3 +189,3 @@ // the component handling the event
 
-        this.touchPosition = { deltaX: deltaX, deltaY: deltaY };
+        this.movePosition = { deltaX: deltaX, deltaY: deltaY };
       }
@@ -128,18 +195,20 @@ }, {
       value: function _handleSwipeEnd(event) {
-        if (this.swiping) {
-          if (this.touchPosition.deltaX < 0) {
+        this.props.onSwipeEnd(event);
+
+        if (this.moving) {
+          if (this.movePosition.deltaX < 0) {
             this.props.onSwipeLeft(1, event);
-          } else if (this.touchPosition.deltaX > 0) {
+          } else if (this.movePosition.deltaX > 0) {
             this.props.onSwipeRight(1, event);
           }
-          if (this.touchPosition.deltaY < 0) {
+          if (this.movePosition.deltaY < 0) {
             this.props.onSwipeUp(1, event);
-          } else if (this.touchPosition.deltaY > 0) {
+          } else if (this.movePosition.deltaY > 0) {
             this.props.onSwipeDown(1, event);
           }
         }
-        this.props.onSwipeEnd(event);
-        this.touchStart = null;
-        this.swiping = false;
-        this.touchPosition = null;
+
+        this.moveStart = null;
+        this.moving = false;
+        this.movePosition = null;
       }
@@ -152,2 +221,3 @@ }, {
           {
+            onMouseDown: this._onMouseDown,
             onTouchMove: this._handleSwipeMove,
@@ -172,2 +242,3 @@ onTouchStart: this._handleSwipeStart,
     children: _react.PropTypes.node,
+    allowMouseEvents: _react.PropTypes.bool,
     onSwipeUp: _react.PropTypes.func,
@@ -183,2 +254,3 @@ onSwipeDown: _react.PropTypes.func,
     tagName: 'div',
+    allowMouseEvents: false,
     onSwipeUp: function onSwipeUp() {},
@@ -185,0 +257,0 @@ onSwipeDown: function onSwipeDown() {},

package.json

 {
   "name": "react-easy-swipe",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "React easy swipe - Easy handler for common touch operations",
@@ -24,4 +24,2 @@ "main": "./lib/index.js",
     "tdd": "mocha --watch",
-    "coverage": "isparta cover _mocha --include-all-sources --report html --report lcovonly",
-    "coveralls": "cat coverage/lcov.info | coveralls",
     "prepublish-to-npm": "git pull && npm run build && git add . && git commit -m 'Prepare for publishing'",
@@ -36,3 +34,3 @@ "publish-to-npm": "(git pull origin master && npm version patch && git push origin master && npm publish && git push --tags)"
   "devDependencies": {
-    "babel-cli": "^6.3.15",
+    "babel-cli": "^6.22.2",
     "babel-core": "^6.3.15",
@@ -47,4 +45,8 @@ "babel-eslint": "^4.1.6",
     "chai": "^3.4.1",
+    "chai-enzyme": "^0.6.1",
+    "chai-sinon": "^2.8.1",
+    "cheerio": "^0.22.0",
     "coveralls": "^2.11.4",
     "del": "^2.2.0",
+    "enzyme": "^2.7.1",
     "eslint": "^1.10.3",
@@ -58,3 +60,2 @@ "eslint-config-airbnb": "^2.0.0",
     "gulp-sourcemaps": "^1.6.0",
-    "isparta": "^4.0.0",
     "jsdom": "^7.2.0",
@@ -65,2 +66,3 @@ "mocha": "^2.3.4",
     "react-dom": "^0.14.3",
+    "sinon": "^1.17.7",
     "watch": "^0.19.2",
@@ -67,0 +69,0 @@ "webpack": "^1.12.10"

README.md

@@ -12,4 +12,8 @@ # REACT EASY SWIPE
 
-Tip: To prevent scroll during swipe, return true from the handler passed to onSwipeMove
+## Tips:
 
+1) To prevent scroll during swipe, return true from the handler passed to onSwipeMove
+
+2) To allow mouse events to behave like touch, pass a prop allowMouseEvents
+
 ## Instalation
@@ -72,2 +76,3 @@ `npm install react-easy-swipe --save`
   children: PropTypes.node,
+  allowMouseEvents: PropTypes.bool,
   onSwipeUp: PropTypes.func,
@@ -86,6 +91,1 @@ onSwipeDown: PropTypes.func,
 Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!
-
-
-### TODOs
-- [ ] write tests
-- [ ] write docs

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

1249413

increased by5459.37%

Number of package files

25

increased by66.67%

Lines of code

800

increased by145.4%

Worsened metrics

Dev dependency count

32

increased by14.29%

No dependency changes