Minimize use of unneeded browser prefixes

Author: STRML

lib/draggable.js

@@ -4,6 +4,7 @@ var React = require('react');
 var emptyFunction = function(){};
 var assign = require('object-assign');
 var classNames = require('classnames');
+var browserPrefix = require('./getPrefix')();
 
 //
 // Helpers. See Element definition below this section.
@@ -21,14 +22,12 @@ function createUIEvent(draggable) {
   };
 }
 
-function canDragY(draggable) {
-  return draggable.props.axis === 'both' ||
-      draggable.props.axis === 'y';
+function canDragX(draggable) {
+  return draggable.props.axis === 'both' || draggable.props.axis === 'x';
 }
 
-function canDragX(draggable) {
-  return draggable.props.axis === 'both' ||
-      draggable.props.axis === 'x';
+function canDragY(draggable) {
+  return draggable.props.axis === 'both' || draggable.props.axis === 'y';
 }
 
 function isFunction(func) {
@@ -44,14 +43,14 @@ function findInArray(array, callback) {
 
 function matchesSelector(el, selector) {
   var method = findInArray([
-    'matches',
-    'webkitMatchesSelector',
-    'mozMatchesSelector',
-    'msMatchesSelector',
-    'oMatchesSelector'
-  ], function(method){
-    return isFunction(el[method]);
-  });
+      'matches',
+      'webkitMatchesSelector',
+      'mozMatchesSelector',
+      'msMatchesSelector',
+      'oMatchesSelector'
+    ], function(method){
+      return isFunction(el[method]);
+    });
 
   return el[method].call(el, selector);
 }
@@ -73,7 +72,7 @@ var eventsFor = {
 };
 
 // Default to mouse events
-var dragEventFor = eventsFor['mouse'];
+var dragEventFor = eventsFor.mouse;
 
 /**
  * get {clientX, clientY} positions of control
@@ -214,7 +213,7 @@ function createCSSTransform(style) {
     msTransform: 'translate(' + x + ',' + y + ')',
     MozTransform: 'translate(' + x + ',' + y + ')'
   };
-}
+  }
 
 
 //
@@ -460,7 +459,7 @@ module.exports = React.createClass({
      * A workaround option which can be passed if onMouseDown needs to be accessed,
      * since it'll always be blocked (due to that there's internal use of onMouseDown)
      */
-    onMouseDown: React.PropTypes.func,
+    onMouseDown: React.PropTypes.func
   },
 
   componentWillReceiveProps: function(newProps) {
@@ -472,8 +471,8 @@ module.exports = React.createClass({
 
   componentWillUnmount: function() {
     // Remove any leftover event handlers
-    removeEvent(document, dragEventFor['move'], this.handleDrag);
-    removeEvent(document, dragEventFor['end'], this.handleDragEnd);
+    removeEvent(document, dragEventFor.move, this.handleDrag);
+    removeEvent(document, dragEventFor.end, this.handleDragEnd);
     removeUserSelectStyles(this);
   },
 
@@ -541,8 +540,8 @@ module.exports = React.createClass({
 
 
     // Add event handlers
-    addEvent(document, dragEventFor['move'], this.handleDrag);
-    addEvent(document, dragEventFor['end'], this.handleDragEnd);
+    addEvent(document, dragEventFor.move, this.handleDrag);
+    addEvent(document, dragEventFor.end, this.handleDragEnd);
   },
 
   handleDragEnd: function (e) {
@@ -562,8 +561,8 @@ module.exports = React.createClass({
     this.props.onStop(e, createUIEvent(this));
 
     // Remove event handlers
-    removeEvent(document, dragEventFor['move'], this.handleDrag);
-    removeEvent(document, dragEventFor['end'], this.handleDragEnd);
+    removeEvent(document, dragEventFor.move, this.handleDrag);
+    removeEvent(document, dragEventFor.end, this.handleDragEnd);
   },
 
   handleDrag: function (e) {
@@ -576,12 +575,14 @@ module.exports = React.createClass({
     // Snap to grid if prop has been provided
     if (Array.isArray(this.props.grid)) {
       var coords = snapToGrid(this.props.grid, clientX, clientY);
-      clientX = coords[0], clientY = coords[1];
+      clientX = coords[0];
+      clientY = coords[1];
     }
 
     if (this.props.bounds) {
       var pos = getBoundPosition(this, clientX, clientY);
-      clientX = pos[0], clientY = pos[1];
+      clientX = pos[0];
+      clientY = pos[1];
     }
 
     // Call event handler. If it returns explicit false, cancel.
@@ -599,7 +600,7 @@ module.exports = React.createClass({
     // Prevent 'ghost click' which happens 300ms after touchstart if the event isn't cancelled.
     // We don't cancel the event on touchstart because of #37; we might want to make a scrollable item draggable.
     // More on ghost clicks: http://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/
-    if (dragEventFor == eventsFor['touch']) {
+    if (dragEventFor === eventsFor.touch) {
       return ev.preventDefault();
     }
 
@@ -608,7 +609,7 @@ module.exports = React.createClass({
 
   onTouchStart: function(ev) {
     // We're on a touch device now, so change the event handlers
-    dragEventFor = eventsFor['touch'];
+    dragEventFor = eventsFor.touch;
 
     return this.handleDragStart.apply(this, arguments);
   },

lib/getPrefix.js

@@ -0,0 +1,13 @@
+module.exports = function() {
+  if (typeof window === 'undefined') return '';
+  // Thanks David Walsh
+  var styles = window.getComputedStyle(document.documentElement, ''),
+  pre = (Array.prototype.slice
+        .call(styles)
+        .join('')
+        .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
+      )[1];
+  // 'ms' is not titlecased
+  if (pre === 'ms') return pre;
+  return pre.slice(0, 1).toUpperCase() + pre.slice(1);
+};