react-draggable - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

@@ -34,1 +34,7 @@ # Changelog
 - Fixing issue with server side rendering
+
+### 0.4.1 (Apr 30, 2015)
+
+- Remove react/addons dependency (now depending on `react` directly)
+- Add MIT License file
+- Fix an issue where browser may be detected as touch-enabled but touch event isn't thrown.

dist/react-draggable.js

@@ -155,3 +155,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	function getControlPosition(e) {
-	  var position = !isTouchDevice ? e : e.touches[0];
+	  var position = (e.touches && e.touches[0]) || e;
 	  return {
@@ -513,7 +513,8 @@ clientX: position.clientX,
 			}
-			
-			var className = CX({
-				'react-draggable': true,
-				'react-draggable-dragging': this.state.dragging
-			});
+	
+			var className = 'react-draggable';
+			if (this.state.dragging) {
+				className += ' react-draggable-dragging';
+			}
+	
 			// Reuse the child provided
@@ -549,3 +550,3 @@ // This makes it flexible to use whatever element is wanted (div, ul, etc)
 	/**
-	 * Copyright 2013-2014, Facebook, Inc.
+	 * Copyright 2013-2015, Facebook, Inc.
 	 * All rights reserved.
@@ -552,0 +553,0 @@ *

dist/react-draggable.min.js

@@ -1,2 +0,2 @@
-!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("React")):"function"==typeof define&&define.amd?define(["React"],factory):"object"==typeof exports?exports.ReactDraggable=factory(require("React")):root.ReactDraggable=factory(root.React)}(this,function(__WEBPACK_EXTERNAL_MODULE_2__){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:!1};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.p="",__webpack_require__(0)}([function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)},function(module,exports,__webpack_require__){"use strict";function createUIEvent(draggable){return{position:{top:draggable.state.clientY,left:draggable.state.clientX}}}function canDragY(draggable){return"both"===draggable.props.axis||"y"===draggable.props.axis}function canDragX(draggable){return"both"===draggable.props.axis||"x"===draggable.props.axis}function isFunction(func){return"function"==typeof func||"[object Function]"===Object.prototype.toString.call(func)}function findInArray(array,callback){for(var i=0,element=(array.length,null);element=array[i];i++)if(callback.apply(callback,[element,i,array]))return element}function matchesSelector(el,selector){var method=findInArray(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(method){return isFunction(el[method])});return el[method].call(el,selector)}function getControlPosition(e){var position=isTouchDevice?e.touches[0]:e;return{clientX:position.clientX,clientY:position.clientY}}function addEvent(el,event,handler){el&&(el.attachEvent?el.attachEvent("on"+event,handler):el.addEventListener?el.addEventListener(event,handler,!0):el["on"+event]=handler)}function removeEvent(el,event,handler){el&&(el.detachEvent?el.detachEvent("on"+event,handler):el.removeEventListener?el.removeEventListener(event,handler,!0):el["on"+event]=null)}var React=__webpack_require__(2),emptyFunction=__webpack_require__(3),CX=React.addons.classSet;if("undefined"==typeof window)var isTouchDevice=!1;else var isTouchDevice="ontouchstart"in window||"onmsgesturechange"in window;var dragEventFor=function(){var eventsFor={touch:{start:"touchstart",move:"touchmove",end:"touchend"},mouse:{start:"mousedown",move:"mousemove",end:"mouseup"}};return eventsFor[isTouchDevice?"touch":"mouse"]}();module.exports=React.createClass({displayName:"Draggable",propTypes:{axis:React.PropTypes.oneOf(["both","x","y"]),handle:React.PropTypes.string,cancel:React.PropTypes.string,grid:React.PropTypes.arrayOf(React.PropTypes.number),start:React.PropTypes.object,zIndex:React.PropTypes.number,onStart:React.PropTypes.func,onDrag:React.PropTypes.func,onStop:React.PropTypes.func,onMouseDown:React.PropTypes.func},componentWillUnmount:function(){removeEvent(window,dragEventFor.move,this.handleDrag),removeEvent(window,dragEventFor.end,this.handleDragEnd)},getDefaultProps:function(){return{axis:"both",handle:null,cancel:null,grid:null,start:{x:0,y:0},zIndex:0/0,onStart:emptyFunction,onDrag:emptyFunction,onStop:emptyFunction,onMouseDown:emptyFunction}},getInitialState:function(){return{dragging:!1,startX:0,startY:0,offsetX:0,offsetY:0,clientX:this.props.start.x,clientY:this.props.start.y}},handleDragStart:function(e){this.props.onMouseDown(e);var node=this.getDOMNode();if(!(this.props.handle&&!matchesSelector(e.target,this.props.handle)||this.props.cancel&&matchesSelector(e.target,this.props.cancel))){var dragPoint=getControlPosition(e);this.setState({dragging:!0,offsetX:parseInt(dragPoint.clientX,10),offsetY:parseInt(dragPoint.clientY,10),startX:parseInt(node.style.left,10)||0,startY:parseInt(node.style.top,10)||0}),this.props.onStart(e,createUIEvent(this)),addEvent(window,dragEventFor.move,this.handleDrag),addEvent(window,dragEventFor.end,this.handleDragEnd)}},handleDragEnd:function(e){this.state.dragging&&(this.setState({dragging:!1}),this.props.onStop(e,createUIEvent(this)),removeEvent(window,dragEventFor.move,this.handleDrag),removeEvent(window,dragEventFor.end,this.handleDragEnd))},handleDrag:function(e){var dragPoint=getControlPosition(e),clientX=this.state.startX+(dragPoint.clientX-this.state.offsetX),clientY=this.state.startY+(dragPoint.clientY-this.state.offsetY);if(Array.isArray(this.props.grid)){var directionX=clientX<parseInt(this.state.clientX,10)?-1:1,directionY=clientY<parseInt(this.state.clientY,10)?-1:1;clientX=Math.abs(clientX-parseInt(this.state.clientX,10))>=this.props.grid[0]?parseInt(this.state.clientX,10)+this.props.grid[0]*directionX:this.state.clientX,clientY=Math.abs(clientY-parseInt(this.state.clientY,10))>=this.props.grid[1]?parseInt(this.state.clientY,10)+this.props.grid[1]*directionY:this.state.clientY}this.setState({clientX:clientX,clientY:clientY}),this.props.onDrag(e,createUIEvent(this))},render:function(){var style={top:canDragY(this)?this.state.clientY:this.state.startY,left:canDragX(this)?this.state.clientX:this.state.startX};this.state.dragging&&!isNaN(this.props.zIndex)&&(style.zIndex=this.props.zIndex);var className=CX({"react-draggable":!0,"react-draggable-dragging":this.state.dragging});return React.addons.cloneWithProps(React.Children.only(this.props.children),{style:style,className:className,onMouseDown:this.handleDragStart,onTouchStart:function(ev){return ev.preventDefault(),this.handleDragStart.apply(this,arguments)}.bind(this),onMouseUp:this.handleDragEnd,onTouchEnd:this.handleDragEnd})}})},function(module){module.exports=__WEBPACK_EXTERNAL_MODULE_2__},function(module){function makeEmptyFunction(arg){return function(){return arg}}function emptyFunction(){}emptyFunction.thatReturns=makeEmptyFunction,emptyFunction.thatReturnsFalse=makeEmptyFunction(!1),emptyFunction.thatReturnsTrue=makeEmptyFunction(!0),emptyFunction.thatReturnsNull=makeEmptyFunction(null),emptyFunction.thatReturnsThis=function(){return this},emptyFunction.thatReturnsArgument=function(arg){return arg},module.exports=emptyFunction}])});
+!function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory(require("React")):"function"==typeof define&&define.amd?define(["React"],factory):"object"==typeof exports?exports.ReactDraggable=factory(require("React")):root.ReactDraggable=factory(root.React)}(this,function(__WEBPACK_EXTERNAL_MODULE_2__){return function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:!1};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.p="",__webpack_require__(0)}([function(module,exports,__webpack_require__){module.exports=__webpack_require__(1)},function(module,exports,__webpack_require__){"use strict";function createUIEvent(draggable){return{position:{top:draggable.state.clientY,left:draggable.state.clientX}}}function canDragY(draggable){return"both"===draggable.props.axis||"y"===draggable.props.axis}function canDragX(draggable){return"both"===draggable.props.axis||"x"===draggable.props.axis}function isFunction(func){return"function"==typeof func||"[object Function]"===Object.prototype.toString.call(func)}function findInArray(array,callback){for(var i=0,element=(array.length,null);element=array[i];i++)if(callback.apply(callback,[element,i,array]))return element}function matchesSelector(el,selector){var method=findInArray(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],function(method){return isFunction(el[method])});return el[method].call(el,selector)}function getControlPosition(e){var position=e.touches&&e.touches[0]||e;return{clientX:position.clientX,clientY:position.clientY}}function addEvent(el,event,handler){el&&(el.attachEvent?el.attachEvent("on"+event,handler):el.addEventListener?el.addEventListener(event,handler,!0):el["on"+event]=handler)}function removeEvent(el,event,handler){el&&(el.detachEvent?el.detachEvent("on"+event,handler):el.removeEventListener?el.removeEventListener(event,handler,!0):el["on"+event]=null)}{var React=__webpack_require__(2),emptyFunction=__webpack_require__(3);React.addons.classSet}if("undefined"==typeof window)var isTouchDevice=!1;else var isTouchDevice="ontouchstart"in window||"onmsgesturechange"in window;var dragEventFor=function(){var eventsFor={touch:{start:"touchstart",move:"touchmove",end:"touchend"},mouse:{start:"mousedown",move:"mousemove",end:"mouseup"}};return eventsFor[isTouchDevice?"touch":"mouse"]}();module.exports=React.createClass({displayName:"Draggable",propTypes:{axis:React.PropTypes.oneOf(["both","x","y"]),handle:React.PropTypes.string,cancel:React.PropTypes.string,grid:React.PropTypes.arrayOf(React.PropTypes.number),start:React.PropTypes.object,zIndex:React.PropTypes.number,onStart:React.PropTypes.func,onDrag:React.PropTypes.func,onStop:React.PropTypes.func,onMouseDown:React.PropTypes.func},componentWillUnmount:function(){removeEvent(window,dragEventFor.move,this.handleDrag),removeEvent(window,dragEventFor.end,this.handleDragEnd)},getDefaultProps:function(){return{axis:"both",handle:null,cancel:null,grid:null,start:{x:0,y:0},zIndex:0/0,onStart:emptyFunction,onDrag:emptyFunction,onStop:emptyFunction,onMouseDown:emptyFunction}},getInitialState:function(){return{dragging:!1,startX:0,startY:0,offsetX:0,offsetY:0,clientX:this.props.start.x,clientY:this.props.start.y}},handleDragStart:function(e){this.props.onMouseDown(e);var node=this.getDOMNode();if(!(this.props.handle&&!matchesSelector(e.target,this.props.handle)||this.props.cancel&&matchesSelector(e.target,this.props.cancel))){var dragPoint=getControlPosition(e);this.setState({dragging:!0,offsetX:parseInt(dragPoint.clientX,10),offsetY:parseInt(dragPoint.clientY,10),startX:parseInt(node.style.left,10)||0,startY:parseInt(node.style.top,10)||0}),this.props.onStart(e,createUIEvent(this)),addEvent(window,dragEventFor.move,this.handleDrag),addEvent(window,dragEventFor.end,this.handleDragEnd)}},handleDragEnd:function(e){this.state.dragging&&(this.setState({dragging:!1}),this.props.onStop(e,createUIEvent(this)),removeEvent(window,dragEventFor.move,this.handleDrag),removeEvent(window,dragEventFor.end,this.handleDragEnd))},handleDrag:function(e){var dragPoint=getControlPosition(e),clientX=this.state.startX+(dragPoint.clientX-this.state.offsetX),clientY=this.state.startY+(dragPoint.clientY-this.state.offsetY);if(Array.isArray(this.props.grid)){var directionX=clientX<parseInt(this.state.clientX,10)?-1:1,directionY=clientY<parseInt(this.state.clientY,10)?-1:1;clientX=Math.abs(clientX-parseInt(this.state.clientX,10))>=this.props.grid[0]?parseInt(this.state.clientX,10)+this.props.grid[0]*directionX:this.state.clientX,clientY=Math.abs(clientY-parseInt(this.state.clientY,10))>=this.props.grid[1]?parseInt(this.state.clientY,10)+this.props.grid[1]*directionY:this.state.clientY}this.setState({clientX:clientX,clientY:clientY}),this.props.onDrag(e,createUIEvent(this))},render:function(){var style={top:canDragY(this)?this.state.clientY:this.state.startY,left:canDragX(this)?this.state.clientX:this.state.startX};this.state.dragging&&!isNaN(this.props.zIndex)&&(style.zIndex=this.props.zIndex);var className="react-draggable";return this.state.dragging&&(className+=" react-draggable-dragging"),React.addons.cloneWithProps(React.Children.only(this.props.children),{style:style,className:className,onMouseDown:this.handleDragStart,onTouchStart:function(ev){return ev.preventDefault(),this.handleDragStart.apply(this,arguments)}.bind(this),onMouseUp:this.handleDragEnd,onTouchEnd:this.handleDragEnd})}})},function(module){module.exports=__WEBPACK_EXTERNAL_MODULE_2__},function(module){function makeEmptyFunction(arg){return function(){return arg}}function emptyFunction(){}emptyFunction.thatReturns=makeEmptyFunction,emptyFunction.thatReturnsFalse=makeEmptyFunction(!1),emptyFunction.thatReturnsTrue=makeEmptyFunction(!0),emptyFunction.thatReturnsNull=makeEmptyFunction(null),emptyFunction.thatReturnsThis=function(){return this},emptyFunction.thatReturnsArgument=function(arg){return arg},module.exports=emptyFunction}])});
 //# sourceMappingURL=react-draggable.min.map

lib/draggable.js

 'use strict';
 
 /** @jsx React.DOM */
-var React = require('react/addons');
+var React = require('react');
 var emptyFunction = require('react/lib/emptyFunction');
@@ -92,3 +92,3 @@ var CX = React.addons.classSet;
 function getControlPosition(e) {
-  var position = !isTouchDevice ? e : e.touches[0];
+  var position = (e.touches && e.touches[0]) || e;
   return {
@@ -450,7 +450,8 @@ clientX: position.clientX,
 		}
-		
-		var className = CX({
-			'react-draggable': true,
-			'react-draggable-dragging': this.state.dragging
-		});
+
+		var className = 'react-draggable';
+		if (this.state.dragging) {
+			className += ' react-draggable-dragging';
+		}
+
 		// Reuse the child provided
@@ -457,0 +458,0 @@ // This makes it flexible to use whatever element is wanted (div, ul, etc)

package.json

 {
   "name": "react-draggable",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React draggable component",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-draggable [![Build Status](https://travis-ci.org/mzabriskie/react-draggable.svg?branch=master)](https://travis-ci.org/mzabriskie/react-draggable)
 
-React draggable component
+A simple component for making elements draggable.
 
+[View the Changelog](CHANGELOG.md)
+
+## Demo
+
+http://mzabriskie.github.io/react-draggable/example/
+
+
 ## Installing
@@ -13,6 +20,2 @@
 
-## Demo
-
-http://mzabriskie.github.io/react-draggable/example/
-
 ## Example
@@ -102,2 +105,2 @@
 
-MIT
+MIT

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

71357

increased by1.9%

Number of package files

11

increased by10%

Number of lines in readme file

105

increased by3.96%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes