react-range-slider - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

Cursor.js

 var React = require('react');
 var assign = require('object-assign');
 var PropTypes = React.PropTypes;
+var event = require('./event');
 
 var noop = function () {}
+var buildUnwrappingListener = function(listener) {
+  return function(e) {
+    var unwrappedEvent = e.changedTouches[e.changedTouches.length - 1];
+    unwrappedEvent.stopPropagation = e.stopPropagation.bind(e);
+    unwrappedEvent.preventDefault = e.preventDefault.bind(e);
+    return listener(unwrappedEvent);
+  };
+}
 
@@ -15,2 +24,3 @@ var Cursor = React.createClass({
     onDragStart: PropTypes.func,
+    onDrag: PropTypes.func,
     onDragEnd: PropTypes.func,
@@ -31,2 +41,5 @@ value: PropTypes.number
 
+  // Mixin events
+  mixins: [event],
+
   getStyle: function () {
@@ -49,9 +62,31 @@ var transform = 'translate' + this.props.axis + '(' + this.props.offset + 'px)';
     props.style = this.getStyle();
-    props.onMouseDown = this.props.onDragStart;
+
+    var mousemoveListener, touchmoveListener, mouseupListener, touchendListener;
+    props.onMouseDown = function () {
+      this.addEvent(window, 'mousemove', mousemoveListener);
+      this.addEvent(window, 'touchmove', touchmoveListener);
+      this.addEvent(window, 'mouseup', mouseupListener);
+      this.addEvent(window, 'touchend', touchendListener);
+
+      return props.onDragStart.apply(null, arguments);
+    }.bind(this);
+
     props.onTouchStart = function (e) {
       e.preventDefault(); // prevent for scroll
-      return this.props.onDragStart.apply(null, arguments);
+      return buildUnwrappingListener(props.onMouseDown)(e);
     }.bind(this);
-    props.onMouseUp = this.props.onDragEnd;
-    props.onTouchEnd = this.props.onDragEnd;
+
+    mousemoveListener = props.onDrag;
+    touchmoveListener = buildUnwrappingListener(mousemoveListener);
+
+    mouseupListener = function () {
+      this.removeEvent(window, 'mousemove', mousemoveListener);
+      this.removeEvent(window, 'touchmove', touchmoveListener);
+      this.removeEvent(window, 'mouseup', mouseupListener);
+      this.removeEvent(window, 'touchend', touchendListener);
+
+      return props.onDragEnd.apply(null, arguments);
+    }.bind(this);
+    touchendListener = buildUnwrappingListener(mouseupListener);
+
     props.zIndex = (i === 0 || i === l + 1) ? 0 : i + 1;
@@ -58,0 +93,0 @@ return props;

event.js

@@ -5,33 +5,2 @@ // @credits: https://github.com/mzabriskie/react-draggable/blob/master/lib/draggable.js#L51-L120
 
-// @credits: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886
-/* Conditional to fix node server side rendering of component */
-event.isTouchDevice = function () {
-  var isTouchDevice = false;
-  // Check if is Browser
-  if (typeof window !== 'undefined') {
-    isTouchDevice = 'ontouchstart' in window // works on most browsers
-      || 'onmsgesturechange' in window; // works on ie10 on ms surface
-  }
-  return isTouchDevice;
-}
-
-/**
- * simple abstraction for dragging events names
- * */
-event.dragEventFor = (function () {
-  var eventsFor = {
-    touch: {
-      start: 'touchstart',
-      move: 'touchmove',
-      end: 'touchend'
-    },
-    mouse: {
-      start: 'mousedown',
-      move: 'mousemove',
-      end: 'mouseup'
-    }
-  };
-  return eventsFor[event.isTouchDevice() ? 'touch' : 'mouse'];
-})()
-
 event.addEvent = function (el, event, handler) {
@@ -38,0 +7,0 @@ if (!el) {

index.js

@@ -304,3 +304,2 @@ /*
     this.props.onMouseDown(e);
-    e = this.isTouchDevice() ? e.changedTouches[e.changedTouches.length - 1] : e;
     var position = e['page' + this.state.axis];
@@ -323,5 +322,2 @@ var value = this.state.min,
 
-    // Add event handlers
-    this.addEvent(window, this.dragEventFor['move'], this.handleDrag);
-    this.addEvent(window, this.dragEventFor['end'], this.handleDragEnd);
     pauseEvent(e);
@@ -333,3 +329,2 @@ },
 
-    e = this.isTouchDevice() ? e.changedTouches[e.changedTouches.length - 1] : e;
     var position = e['page' + this.state.axis],
@@ -380,5 +375,2 @@ diffPosition = position - this.state.startPosition,
 
-    // Remove event handlers
-    this.removeEvent(window, this.dragEventFor['move'], this.handleDrag);
-    this.removeEvent(window, this.dragEventFor['end'], this.handleDragEnd);
     e.stopPropagation();
@@ -400,3 +392,4 @@ },
       size: l,
-      onDragEnd: this.handleDragEnd
+      onDragEnd: this.handleDragEnd,
+      onDrag: this.handleDrag,
     }
@@ -403,0 +396,0 @@ if (this.props.cursor) {

package.json

 {
   "name": "react-range-slider",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A flexible slider for reactjs.",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Worsened metrics

Total package byte prevSize

25451

decreased by-0.47%

Lines of code

709

decreased by-1.25%

No dependency changes