Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-draggable
Advanced tools
react-draggable - npm Package Compare versions
Comparing version 0.3.0 to 0.4.0
@@ -25,2 +25,10 @@ # Changelog | ||
| - Adding support for touch devices | ||
| - Adding support for touch devices | ||
| ### 0.4.0 (Jan 03, 2015) | ||
| - Improving accuracy of snap to grid | ||
| - Updating to React 0.12 | ||
| - Adding dragging className | ||
| - Adding reactify support for browserify | ||
| - Fixing issue with server side rendering |
@@ -69,2 +69,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| var emptyFunction = __webpack_require__(3); | ||
| var CX = React.addons.classSet; | ||
@@ -116,5 +117,13 @@ function createUIEvent(draggable) { | ||
| // @credits: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886 | ||
| var isTouchDevice = 'ontouchstart' in window // works on most browsers | ||
| /* Conditional to fix node server side rendering of component */ | ||
| if (typeof window === 'undefined') { | ||
| // Do Node Stuff | ||
| var isTouchDevice = false; | ||
| } else { | ||
| // Do Browser Stuff | ||
| var isTouchDevice = 'ontouchstart' in window // works on most browsers | ||
| || 'onmsgesturechange' in window; // works on ie10 on ms surface | ||
| } | ||
| // look ::handleDragStart | ||
@@ -424,4 +433,4 @@ //function isMultiTouch(e) { | ||
| dragging: true, | ||
| offsetX: dragPoint.clientX, | ||
| offsetY: dragPoint.clientY, | ||
| offsetX: parseInt(dragPoint.clientX, 10), | ||
| offsetY: parseInt(dragPoint.clientY, 10), | ||
| startX: parseInt(node.style.left, 10) || 0, | ||
@@ -467,8 +476,11 @@ startY: parseInt(node.style.top, 10) || 0 | ||
| if (Array.isArray(this.props.grid)) { | ||
| clientX = Math.abs(clientX - this.state.clientX) >= this.props.grid[0] | ||
| ? clientX | ||
| var directionX = clientX < parseInt(this.state.clientX, 10) ? -1 : 1; | ||
| var 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 - this.state.clientY) >= this.props.grid[1] | ||
| ? clientY | ||
| 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; | ||
@@ -504,3 +516,7 @@ } | ||
| } | ||
| var className = CX({ | ||
| 'react-draggable': true, | ||
| 'react-draggable-dragging': this.state.dragging | ||
| }); | ||
| // Reuse the child provided | ||
@@ -510,3 +526,3 @@ // This makes it flexible to use whatever element is wanted (div, ul, etc) | ||
| style: style, | ||
| className: 'react-draggable', | ||
| className: className, | ||
@@ -537,21 +553,12 @@ onMouseDown: this.handleDragStart, | ||
| /** | ||
| * Copyright 2013-2014 Facebook, Inc. | ||
| * Copyright 2013-2014, Facebook, Inc. | ||
| * All rights reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * This source code is licensed under the BSD-style license found in the | ||
| * LICENSE file in the root directory of this source tree. An additional grant | ||
| * of patent rights can be found in the PATENTS file in the same directory. | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| * | ||
| * @providesModule emptyFunction | ||
| */ | ||
| var copyProperties = __webpack_require__(4); | ||
| function makeEmptyFunction(arg) { | ||
@@ -570,10 +577,8 @@ return function() { | ||
| copyProperties(emptyFunction, { | ||
| thatReturns: makeEmptyFunction, | ||
| thatReturnsFalse: makeEmptyFunction(false), | ||
| thatReturnsTrue: makeEmptyFunction(true), | ||
| thatReturnsNull: makeEmptyFunction(null), | ||
| thatReturnsThis: function() { return this; }, | ||
| thatReturnsArgument: function(arg) { return arg; } | ||
| }); | ||
| emptyFunction.thatReturns = makeEmptyFunction; | ||
| emptyFunction.thatReturnsFalse = makeEmptyFunction(false); | ||
| emptyFunction.thatReturnsTrue = makeEmptyFunction(true); | ||
| emptyFunction.thatReturnsNull = makeEmptyFunction(null); | ||
| emptyFunction.thatReturnsThis = function() { return this; }; | ||
| emptyFunction.thatReturnsArgument = function(arg) { return arg; }; | ||
@@ -583,136 +588,6 @@ module.exports = emptyFunction; | ||
| /***/ }, | ||
| /* 4 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| /* WEBPACK VAR INJECTION */(function(process) {/** | ||
| * Copyright 2013-2014 Facebook, Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| * | ||
| * @providesModule copyProperties | ||
| */ | ||
| /** | ||
| * Copy properties from one or more objects (up to 5) into the first object. | ||
| * This is a shallow copy. It mutates the first object and also returns it. | ||
| * | ||
| * NOTE: `arguments` has a very significant performance penalty, which is why | ||
| * we don't support unlimited arguments. | ||
| */ | ||
| function copyProperties(obj, a, b, c, d, e, f) { | ||
| obj = obj || {}; | ||
| if ("production" !== process.env.NODE_ENV) { | ||
| if (f) { | ||
| throw new Error('Too many arguments passed to copyProperties'); | ||
| } | ||
| } | ||
| var args = [a, b, c, d, e]; | ||
| var ii = 0, v; | ||
| while (args[ii]) { | ||
| v = args[ii++]; | ||
| for (var k in v) { | ||
| obj[k] = v[k]; | ||
| } | ||
| // IE ignores toString in object iteration.. See: | ||
| // webreflection.blogspot.com/2007/07/quick-fix-internet-explorer-and.html | ||
| if (v.hasOwnProperty && v.hasOwnProperty('toString') && | ||
| (typeof v.toString != 'undefined') && (obj.toString !== v.toString)) { | ||
| obj.toString = v.toString; | ||
| } | ||
| } | ||
| return obj; | ||
| } | ||
| module.exports = copyProperties; | ||
| /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(5))) | ||
| /***/ }, | ||
| /* 5 */ | ||
| /***/ function(module, exports, __webpack_require__) { | ||
| // shim for using process in browser | ||
| var process = module.exports = {}; | ||
| process.nextTick = (function () { | ||
| var canSetImmediate = typeof window !== 'undefined' | ||
| && window.setImmediate; | ||
| var canPost = typeof window !== 'undefined' | ||
| && window.postMessage && window.addEventListener | ||
| ; | ||
| if (canSetImmediate) { | ||
| return function (f) { return window.setImmediate(f) }; | ||
| } | ||
| if (canPost) { | ||
| var queue = []; | ||
| window.addEventListener('message', function (ev) { | ||
| var source = ev.source; | ||
| if ((source === window || source === null) && ev.data === 'process-tick') { | ||
| ev.stopPropagation(); | ||
| if (queue.length > 0) { | ||
| var fn = queue.shift(); | ||
| fn(); | ||
| } | ||
| } | ||
| }, true); | ||
| return function nextTick(fn) { | ||
| queue.push(fn); | ||
| window.postMessage('process-tick', '*'); | ||
| }; | ||
| } | ||
| return function nextTick(fn) { | ||
| setTimeout(fn, 0); | ||
| }; | ||
| })(); | ||
| process.title = 'browser'; | ||
| process.browser = true; | ||
| process.env = {}; | ||
| process.argv = []; | ||
| function noop() {} | ||
| process.on = noop; | ||
| process.addListener = noop; | ||
| process.once = noop; | ||
| process.off = noop; | ||
| process.removeListener = noop; | ||
| process.removeAllListeners = noop; | ||
| process.emit = noop; | ||
| process.binding = function (name) { | ||
| throw new Error('process.binding is not supported'); | ||
| } | ||
| // TODO(shtylman) | ||
| process.cwd = function () { return '/' }; | ||
| process.chdir = function (dir) { | ||
| throw new Error('process.chdir is not supported'); | ||
| }; | ||
| /***/ } | ||
| /******/ ]) | ||
| }) | ||
| }); | ||
| //# sourceMappingURL=react-draggable.map |
@@ -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),isTouchDevice="ontouchstart"in window||"onmsgesturechange"in window,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:dragPoint.clientX,offsetY:dragPoint.clientY,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);Array.isArray(this.props.grid)&&(clientX=Math.abs(clientX-this.state.clientX)>=this.props.grid[0]?clientX:this.state.clientX,clientY=Math.abs(clientY-this.state.clientY)>=this.props.grid[1]?clientY: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};return this.state.dragging&&!isNaN(this.props.zIndex)&&(style.zIndex=this.props.zIndex),React.addons.cloneWithProps(React.Children.only(this.props.children),{style:style,className:"react-draggable",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,exports,__webpack_require__){function makeEmptyFunction(arg){return function(){return arg}}function emptyFunction(){}var copyProperties=__webpack_require__(4);copyProperties(emptyFunction,{thatReturns:makeEmptyFunction,thatReturnsFalse:makeEmptyFunction(!1),thatReturnsTrue:makeEmptyFunction(!0),thatReturnsNull:makeEmptyFunction(null),thatReturnsThis:function(){return this},thatReturnsArgument:function(arg){return arg}}),module.exports=emptyFunction},function(module,exports,__webpack_require__){(function(process){function copyProperties(obj,a,b,c,d,e,f){if(obj=obj||{},"production"!==process.env.NODE_ENV&&f)throw new Error("Too many arguments passed to copyProperties");for(var v,args=[a,b,c,d,e],ii=0;args[ii];){v=args[ii++];for(var k in v)obj[k]=v[k];v.hasOwnProperty&&v.hasOwnProperty("toString")&&"undefined"!=typeof v.toString&&obj.toString!==v.toString&&(obj.toString=v.toString)}return obj}module.exports=copyProperties}).call(exports,__webpack_require__(5))},function(module){function noop(){}var process=module.exports={};process.nextTick=function(){var canSetImmediate="undefined"!=typeof window&&window.setImmediate,canPost="undefined"!=typeof window&&window.postMessage&&window.addEventListener;if(canSetImmediate)return function(f){return window.setImmediate(f)};if(canPost){var queue=[];return window.addEventListener("message",function(ev){var source=ev.source;if((source===window||null===source)&&"process-tick"===ev.data&&(ev.stopPropagation(),queue.length>0)){var fn=queue.shift();fn()}},!0),function(fn){queue.push(fn),window.postMessage("process-tick","*")}}return function(fn){setTimeout(fn,0)}}(),process.title="browser",process.browser=!0,process.env={},process.argv=[],process.on=noop,process.addListener=noop,process.once=noop,process.off=noop,process.removeListener=noop,process.removeAllListeners=noop,process.emit=noop,process.binding=function(){throw new Error("process.binding is not supported")},process.cwd=function(){return"/"},process.chdir=function(){throw new Error("process.chdir is not supported")}}])}); | ||
| !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}])}); | ||
| //# sourceMappingURL=react-draggable.min.map |
@@ -6,2 +6,3 @@ 'use strict'; | ||
| var emptyFunction = require('react/lib/emptyFunction'); | ||
| var CX = React.addons.classSet; | ||
@@ -53,5 +54,13 @@ function createUIEvent(draggable) { | ||
| // @credits: http://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886 | ||
| var isTouchDevice = 'ontouchstart' in window // works on most browsers | ||
| /* Conditional to fix node server side rendering of component */ | ||
| if (typeof window === 'undefined') { | ||
| // Do Node Stuff | ||
| var isTouchDevice = false; | ||
| } else { | ||
| // Do Browser Stuff | ||
| var isTouchDevice = 'ontouchstart' in window // works on most browsers | ||
| || 'onmsgesturechange' in window; // works on ie10 on ms surface | ||
| } | ||
| // look ::handleDragStart | ||
@@ -361,4 +370,4 @@ //function isMultiTouch(e) { | ||
| dragging: true, | ||
| offsetX: dragPoint.clientX, | ||
| offsetY: dragPoint.clientY, | ||
| offsetX: parseInt(dragPoint.clientX, 10), | ||
| offsetY: parseInt(dragPoint.clientY, 10), | ||
| startX: parseInt(node.style.left, 10) || 0, | ||
@@ -404,8 +413,11 @@ startY: parseInt(node.style.top, 10) || 0 | ||
| if (Array.isArray(this.props.grid)) { | ||
| clientX = Math.abs(clientX - this.state.clientX) >= this.props.grid[0] | ||
| ? clientX | ||
| var directionX = clientX < parseInt(this.state.clientX, 10) ? -1 : 1; | ||
| var 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 - this.state.clientY) >= this.props.grid[1] | ||
| ? clientY | ||
| 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; | ||
@@ -441,3 +453,7 @@ } | ||
| } | ||
| var className = CX({ | ||
| 'react-draggable': true, | ||
| 'react-draggable-dragging': this.state.dragging | ||
| }); | ||
| // Reuse the child provided | ||
@@ -447,3 +463,3 @@ // This makes it flexible to use whatever element is wanted (div, ul, etc) | ||
| style: style, | ||
| className: 'react-draggable', | ||
| className: className, | ||
@@ -450,0 +466,0 @@ onMouseDown: this.handleDragStart, |
| { | ||
| "name": "react-draggable", | ||
| "version": "0.3.0", | ||
| "version": "0.4.0", | ||
| "description": "React draggable component", | ||
@@ -30,17 +30,16 @@ "main": "index.js", | ||
| "homepage": "https://github.com/mzabriskie/react-draggable", | ||
| "dependencies": { | ||
| "react": "^0.11.1" | ||
| }, | ||
| "devDependencies": { | ||
| "jsx-loader": "^0.11.0", | ||
| "jsx-loader": "^0.12.0", | ||
| "karma": "^0.12.19", | ||
| "karma-chrome-launcher": "^0.1.4", | ||
| "karma-cli": "0.0.4", | ||
| "karma-firefox-launcher": "^0.1.3", | ||
| "karma-jasmine": "^0.1.5", | ||
| "karma-chrome-launcher": "^0.1.4", | ||
| "karma-firefox-launcher": "^0.1.3", | ||
| "karma-webpack": "^1.2.1", | ||
| "react": "^0.12.0", | ||
| "reactify": "^0.17.1", | ||
| "uglify-js": "^2.4.15", | ||
| "webpack": "^1.3.2-beta8", | ||
| "webpack-dev-server": "^1.4.7", | ||
| "karma-webpack": "^1.2.1", | ||
| "uglify-js": "^2.4.15" | ||
| "webpack-dev-server": "^1.4.7" | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Improved metrics
- Dependency count
- decreased by-100%
0
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-2.84%
70024
- Dev dependency count
- increased by20%
12
- Number of package files
- decreased by-9.09%
10
- Lines of code
- decreased by-8.86%
957
Dependency changes
- Removedreact@^0.11.1
- Removedamdefine@1.0.1(transitive)
- Removedbase62@0.1.1(transitive)
- Removedenvify@2.0.1(transitive)
- Removedesprima-fb@3001.1.0-dev-harmony-fb(transitive)
- Removedjstransform@3.0.0(transitive)
- Removedobject-keys@0.4.0(transitive)
- Removedreact@0.11.2(transitive)
- Removedsource-map@0.1.31(transitive)
- Removedthrough@2.3.8(transitive)
- Removedxtend@2.1.2(transitive)