react-slider - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

package.json

 {
   "name": "react-slider",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Slider component for React",
@@ -5,0 +5,0 @@ "main": "react-slider.js",

react-slider.js

@@ -77,2 +77,14 @@ (function (root, factory) {
 
+  /**
+   * If `v` is an array, returns a copy of `v` with the `i`th element set to `newv`. Otherwise returns `newv`.
+   */
+  function insteadOf(v, i, newv) {
+    if (v.length) {
+      v = v.slice();
+      v[i] = newv;
+      return v;
+    } else
+      return newv;
+  }
+
   var ReactSlider = React.createClass({
@@ -192,3 +204,3 @@ displayName: 'ReactSlider',
       var sliderMax = rect[this._max()] - handle[size];
-      var sliderMin = rect[this._min()];
+      var sliderMin = this._sliderMin = rect[this._min()];
 
@@ -207,2 +219,8 @@ this.setState({
 
+    // Calculates the value corresponding to a given pixel offset, i.e. the inverse of `_calcOffset`.
+    _calcValue: function (offset) {
+      var ratio = offset / this.state.upperBound;
+      return ratio * (this.props.max - this.props.min) + this.props.min;
+    },
+
     _buildHandleStyle: function (offset, i) {
@@ -230,32 +248,32 @@ var transform = 'translate' + this._axis() + '(' + offset + 'px)';
 
-    /*
-     _getClosestIndex: function (clickOffset) {
-     var self = this;
+    _getClosestIndex: function (pixelOffset) {
+      var self = this;
 
-     // TODO: No need to iterate all
-     return reduce(this.state.value, function (min, value, i) {
-     var minDist = min[1];
+      // TODO: No need to iterate all
+      return reduce(this.state.value, function (min, value, i) {
+        var minDist = min[1];
 
-     var offset = self._calcOffset(value);
-     var dist = Math.abs(clickOffset - offset);
+        var offset = self._calcOffset(value);
+        var dist = Math.abs(pixelOffset - offset);
 
-     return (dist < minDist) ? [i, dist] : min;
+        return (dist < minDist) ? [i, dist] : min;
 
-     }, [-1, Number.MAX_VALUE])[0];
-     },
+      }, [-1, Number.MAX_VALUE])[0];
+    },
 
-     _onClick: function (e) {
-     var position = e['page' + this._axis()];
+    // Snaps the nearest handle to the value corresponding to `position` and calls `callback` with that handle's index.
+    _forceValueFromPosition: function (position, callback) {
+      var pixelOffset = position - this._sliderMin;
+      var closestIndex = this._getClosestIndex(pixelOffset);
 
-     var clickOffset = position - this.state.sliderMin;
-     var closestIndex = this._getClosestIndex(clickOffset);
+      var nextValue = this._trimAlignValue(this._calcValue(pixelOffset));
 
-     this._move(closestIndex, position);
+      this.setState({
+        value: insteadOf(this.state.value, closestIndex, nextValue)
+      }, function () {
+        if (typeof callback === 'function')
+          callback(closestIndex);
+      });
+    },
 
-     if (this.props.onChanged) {
-     this.props.onChanged(this.state.value);
-     }
-     },
-     */
-
     _dragStart: function (i) {
@@ -512,2 +530,43 @@ if (this.props.disabled) return;
 
+      // Handle mouseDown events on the slider.
+    _onSliderMouseDown: function (e) {
+      if (this.props.disabled) return;
+      console.log('_onSliderTouchStart');
+      var position = e['page' + this._axis()];
+
+      this._forceValueFromPosition(position, function (i) {
+        // Set up a drag operation.
+        if (this.props.onChange) {
+          this.props.onChange(this.state.value);
+        }
+
+        this._start(i, position);
+
+        document.addEventListener('mousemove', this._dragMove, false);
+        document.addEventListener('mouseup', this._dragEnd, false);
+      }.bind(this));
+      pauseEvent(e);
+    },
+
+    // Handle touchStart events on the slider.
+    _onSliderTouchStart: function (e) {
+      if (this.props.disabled) return;
+      console.log('_onSliderTouchStart');
+      var last = e.changedTouches[e.changedTouches.length - 1];
+      var position = last['page' + this._axis()];
+      this._forceValueFromPosition(position, function (i) {
+        // Set up a drag operation.
+        if (this.props.onChange) {
+          this.props.onChange(this.state.value);
+        }
+
+        this._start(i, position);
+
+        document.addEventListener('touchmove', this._touchMove, false);
+        document.addEventListener('touchend', this._onTouchEnd, false);
+      }.bind(this));
+      pauseEvent(e);
+    },
+
+
     render: function () {
@@ -523,4 +582,5 @@ var offset = map(this.state.value, this._calcOffset, this);
             style: {position: 'relative'},
-            className: this.props.className
-            //onClick: this._onClick
+            className: this.props.className,
+            onMouseDown: this._onSliderMouseDown,
+            onTouchStart: this._onSliderTouchStart
           },
@@ -527,0 +587,0 @@ bars,

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

26313

increased by9.14%

Lines of code

497

increased by11.43%

No dependency changes