diff --git a/package.json b/package.json index f48cdd3..8cef9d9 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-touch", "version": "0.0.6", "description": "React component library for building inertial touch applications.", - "main": "lib/ReactTouch.js", + "main": "src/ReactTouch.js", "peerDependencies": { "react": "~0.9" }, diff --git a/src/ReactTouch.js b/src/ReactTouch.js index 0da975e..b163169 100644 --- a/src/ReactTouch.js +++ b/src/ReactTouch.js @@ -5,11 +5,9 @@ var Router = require('./routing/Router'); var ReactTouch = { start: function(componentClass, domNode, routes, useHistory) { var EventPluginHub = require('react/lib/EventPluginHub'); - var ResponderEventPlugin = require('./thirdparty/ResponderEventPlugin'); var TapEventPlugin = require('./thirdparty/TapEventPlugin'); EventPluginHub.injection.injectEventPluginsByName({ - ResponderEventPlugin: ResponderEventPlugin, TapEventPlugin: TapEventPlugin }); @@ -19,4 +17,4 @@ var ReactTouch = { } }; -module.exports = ReactTouch; \ No newline at end of file +module.exports = ReactTouch; diff --git a/src/primitives/TouchableArea.js b/src/primitives/TouchableArea.js index 197b0f8..0800663 100644 --- a/src/primitives/TouchableArea.js +++ b/src/primitives/TouchableArea.js @@ -10,6 +10,43 @@ var TouchableArea = React.createClass({ }; }, + handleMouseStart: function(e) { + if (!this.props.scroller || !this.props.touchable) { + return; + } + + // TODO: what’s the best way to handle this with React? + // The problem is if your mouse gets away from the target element it will + // no longer receive the mousemove or mouseup events so we need to capture + // these events at the document level. + document.body.addEventListener('mousemove', this.handleMouseMove, false); + document.body.addEventListener('mouseup', this.handleMouseEnd, false); + + this.props.scroller.doTouchStart([e], e.timeStamp); + e.preventDefault(); + }, + + handleMouseMove: function(e) { + if (!this.props.scroller || !this.props.touchable) { + return; + } + + this.props.scroller.doTouchMove([e], e.timeStamp); + e.preventDefault(); + }, + + handleMouseEnd: function(e) { + if (!this.props.scroller || !this.props.touchable) { + return; + } + + document.body.removeEventListener('mousemove', this.handleMouseMove); + document.body.removeEventListener('mouseup', this.handleMouseEnd); + + this.props.scroller.doTouchEnd(e.timeStamp); + e.preventDefault(); + }, + handleTouchStart: function(e) { if (!this.props.scroller || !this.props.touchable) { return; @@ -41,6 +78,7 @@ var TouchableArea = React.createClass({ var component = this.props.component; return this.transferPropsTo(