cropper-rails 2.2.1.1 → 2.3.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 18d109addd9bd9f6dfcb09582646d5584694bfba
-  data.tar.gz: 66b623b517132f47a24cbc479dc3c08314cff729
+  metadata.gz: e1ff6df294ba7bba894a943e74ce62cfd9c7f8bb
+  data.tar.gz: 3e8f319611b3fc50f2d93f632975907ae3f21670
 SHA512:
-  metadata.gz: 01f2bc23e589e3ab86f98df95bae68fca597968d3b9506099bb665f59c95dc7b308b20e52b549c44826aee57f6b5ee7ba3a1c13bb4578c3f5d9b027d3b332c85
-  data.tar.gz: a9eeb6fc980918288e1b0a9bd3e5a873213f88de6c2fc9f95fb815ad525b252cb0f5f661918d5b57293d19a4f79eb2f9f0382339a736ea7919328b74ca5d123f
+  metadata.gz: 3d233dc2dbcd7c7f85f5e76e2f9a45d52d5f62028885eeaebead68397a6ffa678e346f31c2fd61aca89322f430305b5974e52cb8f4de9dedba69be7f662d0c03
+  data.tar.gz: 718da9b48066fe2e862b19049ee36174dd61498e0ede12b882bca93b062797cafe91af9c7a5e7814b949dceae7df004daad0ebc52ce019355f68c542378a141d

data/lib/cropper/rails/version.rb

@@ -1,5 +1,5 @@
 module Cropper
   module Rails
-    VERSION = "2.2.1.1"
+    VERSION = "2.3.2.1"
   end
 end

data/vendor/assets/javascripts/cropper.js

@@ -1,11 +1,11 @@
 /*!
- * Cropper v2.2.1
+ * Cropper v2.3.2
  * https://github.com/fengyuanchen/cropper
  *
- * Copyright (c) 2014-2015 Fengyuan Chen and contributors
+ * Copyright (c) 2014-2016 Fengyuan Chen and contributors
  * Released under the MIT license
  *
- * Date: 2015-12-12T07:24:25.791Z
+ * Date: 2016-06-08T12:14:46.286Z
  */
 
 (function (factory) {
@@ -27,6 +27,7 @@
   var $window = $(window);
   var $document = $(document);
   var location = window.location;
+  var navigator = window.navigator;
   var ArrayBuffer = window.ArrayBuffer;
   var Uint8Array = window.Uint8Array;
   var DataView = window.DataView;
@@ -89,6 +90,7 @@
 
   // Supports
   var SUPPORT_CANVAS = $.isFunction($('<canvas>')[0].getContext);
+  var IS_SAFARI_OR_UIWEBVIEW = navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);
 
   // Maths
   var num = Number;
@@ -101,11 +103,7 @@
   var round = Math.round;
   var floor = Math.floor;
 
-  // Prototype
-  var prototype = {
-    version: '2.2.1'
-  };
-
+  // Utilities
   var fromCharCode = String.fromCharCode;
 
   function isNumber(n) {
@@ -159,8 +157,8 @@
   function getImageSize(image, callback) {
     var newImage;
 
-    // Modern browsers
-    if (image.naturalWidth) {
+    // Modern browsers (ignore Safari, #120 & #509)
+    if (image.naturalWidth && !IS_SAFARI_OR_UIWEBVIEW) {
       return callback(image.naturalWidth, image.naturalHeight);
     }
 
@@ -180,14 +178,15 @@
     var scaleX = options.scaleX;
     var scaleY = options.scaleY;
 
-    if (isNumber(rotate)) {
-      transforms.push('rotate(' + rotate + 'deg)');
-    }
-
+    // Scale should come first before rotate (#633)
     if (isNumber(scaleX) && isNumber(scaleY)) {
       transforms.push('scale(' + scaleX + ',' + scaleY + ')');
     }
 
+    if (isNumber(rotate)) {
+      transforms.push('rotate(' + rotate + 'deg)');
+    }
+
     return transforms.length ? transforms.join(' ') : 'none';
   }
 
@@ -219,61 +218,61 @@
   function getSourceCanvas(image, data) {
     var canvas = $('<canvas>')[0];
     var context = canvas.getContext('2d');
-    var x = 0;
-    var y = 0;
-    var width = data.naturalWidth;
-    var height = data.naturalHeight;
+    var dstX = 0;
+    var dstY = 0;
+    var dstWidth = data.naturalWidth;
+    var dstHeight = data.naturalHeight;
     var rotate = data.rotate;
     var scaleX = data.scaleX;
     var scaleY = data.scaleY;
     var scalable = isNumber(scaleX) && isNumber(scaleY) && (scaleX !== 1 || scaleY !== 1);
     var rotatable = isNumber(rotate) && rotate !== 0;
     var advanced = rotatable || scalable;
-    var canvasWidth = width;
-    var canvasHeight = height;
+    var canvasWidth = dstWidth * abs(scaleX || 1);
+    var canvasHeight = dstHeight * abs(scaleY || 1);
     var translateX;
     var translateY;
     var rotated;
 
     if (scalable) {
-      translateX = width / 2;
-      translateY = height / 2;
+      translateX = canvasWidth / 2;
+      translateY = canvasHeight / 2;
     }
 
     if (rotatable) {
       rotated = getRotatedSizes({
-        width: width,
-        height: height,
+        width: canvasWidth,
+        height: canvasHeight,
         degree: rotate
       });
 
       canvasWidth = rotated.width;
       canvasHeight = rotated.height;
-      translateX = rotated.width / 2;
-      translateY = rotated.height / 2;
+      translateX = canvasWidth / 2;
+      translateY = canvasHeight / 2;
     }
 
     canvas.width = canvasWidth;
     canvas.height = canvasHeight;
 
     if (advanced) {
-      x = -width / 2;
-      y = -height / 2;
+      dstX = -dstWidth / 2;
+      dstY = -dstHeight / 2;
 
       context.save();
       context.translate(translateX, translateY);
     }
 
-    if (rotatable) {
-      context.rotate(rotate * Math.PI / 180);
-    }
-
-    // Should call `scale` after rotated
+    // Scale should come first before rotate (#633, #709)
     if (scalable) {
       context.scale(scaleX, scaleY);
     }
 
-    context.drawImage(image, floor(x), floor(y), floor(width), floor(height));
+    if (rotatable) {
+      context.rotate(rotate * Math.PI / 180);
+    }
+
+    context.drawImage(image, floor(dstX), floor(dstY), floor(dstWidth), floor(dstHeight));
 
     if (advanced) {
       context.restore();
@@ -282,6 +281,27 @@
     return canvas;
   }
 
+  function getTouchesCenter(touches) {
+    var length = touches.length;
+    var pageX = 0;
+    var pageY = 0;
+
+    if (length) {
+      $.each(touches, function (i, touch) {
+        pageX += touch.pageX;
+        pageY += touch.pageY;
+      });
+
+      pageX /= length;
+      pageY /= length;
+    }
+
+    return {
+      pageX: pageX,
+      pageY: pageY
+    };
+  }
+
   function getStringFromCharCode(dataView, start, length) {
     var str = '';
     var i;
@@ -355,8 +375,11 @@
           // Get the original orientation value
           orientation = dataView.getUint16(offset, littleEndian);
 
-          // Override the orientation with the default value: 1
-          dataView.setUint16(offset, 1, littleEndian);
+          // Override the orientation with its default value for Safari (#120)
+          if (IS_SAFARI_OR_UIWEBVIEW) {
+            dataView.setUint16(offset, 1, littleEndian);
+          }
+
           break;
         }
       }
@@ -405,6 +428,7 @@
     this.isDisabled = false;
     this.isReplaced = false;
     this.isLimited = false;
+    this.wheeling = false;
     this.isImg = false;
     this.originalUrl = '';
     this.canvas = null;
@@ -412,7 +436,9 @@
     this.init();
   }
 
-  $.extend(prototype, {
+  Cropper.prototype = {
+    constructor: Cropper,
+
     init: function () {
       var $this = this.$element;
       var url;
@@ -489,6 +515,10 @@
         read(this.response);
       };
 
+      if (options.checkCrossOrigin && isCrossOriginURL(url) && $this.prop('crossOrigin')) {
+        url = addTimestamp(url);
+      }
+
       xhr.open('get', url);
       xhr.responseType = 'arraybuffer';
       xhr.send();
@@ -569,9 +599,12 @@
       if (options.checkCrossOrigin && isCrossOriginURL(url)) {
         crossOrigin = $this.prop('crossOrigin');
 
-        // Bust cache (#148), only when there was not a "crossOrigin" property
-        if (!crossOrigin) {
+        if (crossOrigin) {
+          crossOriginUrl = url;
+        } else {
           crossOrigin = 'anonymous';
+
+          // Bust cache (#148) when there is not a "crossOrigin" property
           crossOriginUrl = addTimestamp(url);
         }
       }
@@ -619,10 +652,8 @@
     stop: function () {
       this.$clone.remove();
       this.$clone = null;
-    }
-  });
+    },
 
-  $.extend(prototype, {
     build: function () {
       var options = this.options;
       var $this = this.$element;
@@ -706,6 +737,7 @@
       // Trigger the built event asynchronously to keep `data('cropper')` is defined
       setTimeout($.proxy(function () {
         this.trigger(EVENT_BUILT);
+        this.trigger(EVENT_CROP, this.getData());
         this.isCompleted = true;
       }, this), 0);
     },
@@ -740,10 +772,8 @@
 
       this.$cropper.remove();
       this.$cropper = null;
-    }
-  });
+    },
 
-  $.extend(prototype, {
     render: function () {
       this.initContainer();
       this.initCanvas();
@@ -1202,23 +1232,17 @@
 
       if (this.isCompleted) {
         this.trigger(EVENT_CROP, this.getData());
-      } else if (!this.isBuilt) {
-
-        // Only trigger one crop event before complete
-        this.$element.one(EVENT_BUILT, $.proxy(function () {
-          this.trigger(EVENT_CROP, this.getData());
-        }, this));
       }
-    }
-  });
+    },
 
-  $.extend(prototype, {
     initPreview: function () {
       var crossOrigin = getCrossOrigin(this.crossOrigin);
       var url = crossOrigin ? this.crossOriginUrl : this.url;
+      var $clone2;
 
       this.$preview = $(this.options.preview);
-      this.$viewBox.html('<img' + crossOrigin + ' src="' + url + '">');
+      this.$clone2 = $clone2 = $('<img' + crossOrigin + ' src="' + url + '">');
+      this.$viewBox.html($clone2);
       this.$preview.each(function () {
         var $this = $(this);
 
@@ -1271,7 +1295,7 @@
         return;
       }
 
-      this.$viewBox.find('img').css({
+      this.$clone2.css({
         width: width,
         height: height,
         marginLeft: -left,
@@ -1310,10 +1334,8 @@
           transform: getTransform(image)
         });
       });
-    }
-  });
+    },
 
-  $.extend(prototype, {
     bind: function () {
       var options = this.options;
       var $this = this.$element;
@@ -1400,10 +1422,8 @@
       if (options.responsive) {
         $window.off(EVENT_RESIZE, this._resize);
       }
-    }
-  });
+    },
 
-  $.extend(prototype, {
     resize: function () {
       var restore = this.options.restore;
       var $container = this.$container;
@@ -1452,8 +1472,7 @@
     },
 
     wheel: function (event) {
-      var originalEvent = event.originalEvent;
-      var e = originalEvent || event;
+      var e = event.originalEvent || event;
       var ratio = num(this.options.wheelZoomRatio) || 0.1;
       var delta = 1;
 
@@ -1463,6 +1482,17 @@
 
       event.preventDefault();
 
+      // Limit wheel speed to prevent zoom too fast
+      if (this.wheeling) {
+        return;
+      }
+
+      this.wheeling = true;
+
+      setTimeout($.proxy(function () {
+        this.wheeling = false;
+      }, this), 50);
+
       if (e.deltaY) {
         delta = e.deltaY > 0 ? 1 : -1;
       } else if (e.wheelDelta) {
@@ -1471,7 +1501,7 @@
         delta = e.detail > 0 ? 1 : -1;
       }
 
-      this.zoom(-delta * ratio, originalEvent);
+      this.zoom(-delta * ratio, event);
     },
 
     cropStart: function (event) {
@@ -1571,7 +1601,7 @@
         this.endX = e.pageX || originalEvent && originalEvent.pageX;
         this.endY = e.pageY || originalEvent && originalEvent.pageY;
 
-        this.change(e.shiftKey, action === ACTION_ZOOM ? originalEvent : null);
+        this.change(e.shiftKey, action === ACTION_ZOOM ? event : null);
       }
     },
 
@@ -1598,11 +1628,9 @@
           action: action
         });
       }
-    }
-  });
+    },
 
-  $.extend(prototype, {
-    change: function (shiftKey, originalEvent) {
+    change: function (shiftKey, event) {
       var options = this.options;
       var aspectRatio = options.aspectRatio;
       var action = this.action;
@@ -1628,11 +1656,11 @@
         aspectRatio = width && height ? width / height : 1;
       }
 
-      if (this.limited) {
+      if (this.isLimited) {
         minLeft = cropBox.minLeft;
         minTop = cropBox.minTop;
-        maxWidth = minLeft + min(container.width, canvas.width);
-        maxHeight = minTop + min(container.height, canvas.height);
+        maxWidth = minLeft + min(container.width, canvas.left + canvas.width);
+        maxHeight = minTop + min(container.height, canvas.top + canvas.height);
       }
 
       range = {
@@ -1945,7 +1973,7 @@
             abs(this.startY - this.startY2),
             abs(this.endX - this.endX2),
             abs(this.endY - this.endY2)
-          ), originalEvent);
+          ), event);
           this.startX2 = this.endX2;
           this.startY2 = this.endY2;
           renderable = false;
@@ -1980,7 +2008,7 @@
             this.$cropBox.removeClass(CLASS_HIDDEN);
             this.isCropped = true;
 
-            if (this.limited) {
+            if (this.isLimited) {
               this.limitCropBox(true, true);
             }
           }
@@ -2003,10 +2031,7 @@
       // Override
       this.startX = this.endX;
       this.startY = this.endY;
-    }
-  });
-
-  $.extend(prototype, {
+    },
 
     // Show the crop box manually
     crop: function () {
@@ -2074,17 +2099,30 @@
      * Replace the image's src and rebuild the cropper
      *
      * @param {String} url
+     * @param {Boolean} onlyColorChanged (optional)
      */
-    replace: function (url) {
+    replace: function (url, onlyColorChanged) {
       if (!this.isDisabled && url) {
         if (this.isImg) {
-          this.isReplaced = true;
           this.$element.attr('src', url);
         }
 
-        // Clear previous data
-        this.options.data = null;
-        this.load(url);
+        if (onlyColorChanged) {
+          this.url = url;
+          this.$clone.attr('src', url);
+
+          if (this.isBuilt) {
+            this.$preview.find('img').add(this.$clone2).attr('src', url);
+          }
+        } else {
+          if (this.isImg) {
+            this.isReplaced = true;
+          }
+
+          // Clear previous data
+          this.options.data = null;
+          this.load(url);
+        }
       }
     },
 
@@ -2180,9 +2218,9 @@
      * Zoom the canvas with a relative ratio
      *
      * @param {Number} ratio
-     * @param {Event} _originalEvent (private)
+     * @param {jQuery Event} _event (private)
      */
-    zoom: function (ratio, _originalEvent) {
+    zoom: function (ratio, _event) {
       var canvas = this.canvas;
 
       ratio = num(ratio);
@@ -2193,24 +2231,27 @@
         ratio = 1 + ratio;
       }
 
-      this.zoomTo(canvas.width * ratio / canvas.naturalWidth, _originalEvent);
+      this.zoomTo(canvas.width * ratio / canvas.naturalWidth, _event);
     },
 
     /**
      * Zoom the canvas to an absolute ratio
      *
      * @param {Number} ratio
-     * @param {Event} _originalEvent (private)
+     * @param {jQuery Event} _event (private)
      */
-    zoomTo: function (ratio, _originalEvent) {
+    zoomTo: function (ratio, _event) {
       var options = this.options;
       var canvas = this.canvas;
       var width = canvas.width;
       var height = canvas.height;
       var naturalWidth = canvas.naturalWidth;
       var naturalHeight = canvas.naturalHeight;
+      var originalEvent;
       var newWidth;
       var newHeight;
+      var offset;
+      var center;
 
       ratio = num(ratio);
 
@@ -2218,16 +2259,39 @@
         newWidth = naturalWidth * ratio;
         newHeight = naturalHeight * ratio;
 
+        if (_event) {
+          originalEvent = _event.originalEvent;
+        }
+
         if (this.trigger(EVENT_ZOOM, {
-          originalEvent: _originalEvent,
+          originalEvent: originalEvent,
           oldRatio: width / naturalWidth,
           ratio: newWidth / naturalWidth
         }).isDefaultPrevented()) {
           return;
         }
 
-        canvas.left -= (newWidth - width) / 2;
-        canvas.top -= (newHeight - height) / 2;
+        if (originalEvent) {
+          offset = this.$cropper.offset();
+          center = originalEvent.touches ? getTouchesCenter(originalEvent.touches) : {
+            pageX: _event.pageX || originalEvent.pageX || 0,
+            pageY: _event.pageY || originalEvent.pageY || 0
+          };
+
+          // Zoom from the triggering point of the event
+          canvas.left -= (newWidth - width) * (
+            ((center.pageX - offset.left) - canvas.left) / width
+          );
+          canvas.top -= (newHeight - height) * (
+            ((center.pageY - offset.top) - canvas.top) / height
+          );
+        } else {
+
+          // Zoom from the center of the canvas
+          canvas.left -= (newWidth - width) / 2;
+          canvas.top -= (newHeight - height) / 2;
+        }
+
         canvas.width = newWidth;
         canvas.height = newHeight;
         this.renderCanvas(true);
@@ -2556,12 +2620,12 @@
           cropBox.top = data.top;
         }
 
-        if (isNumber(data.width) && data.width !== cropBox.width) {
+        if (isNumber(data.width)) {
           isWidthChanged = true;
           cropBox.width = data.width;
         }
 
-        if (isNumber(data.height) && data.height !== cropBox.height) {
+        if (isNumber(data.height)) {
           isHeightChanged = true;
           cropBox.height = data.height;
         }
@@ -2597,10 +2661,14 @@
       var context;
       var data;
 
-      if (!this.isBuilt || !this.isCropped || !SUPPORT_CANVAS) {
+      if (!this.isBuilt || !SUPPORT_CANVAS) {
         return;
       }
 
+      if (!this.isCropped) {
+        return getSourceCanvas(this.$clone[0], this.image);
+      }
+
       if (!$.isPlainObject(options)) {
         options = {};
       }
@@ -2623,9 +2691,9 @@
         }
       }
 
-
-      canvasWidth = round(scaledWidth || originalWidth);
-      canvasHeight = round(scaledHeight || originalHeight);
+      // The canvas element will use `Math.floor` on a float number, so floor first
+      canvasWidth = floor(scaledWidth || originalWidth);
+      canvasHeight = floor(scaledHeight || originalHeight);
 
       canvas = $('<canvas>')[0];
       canvas.width = canvasWidth;
@@ -2642,11 +2710,12 @@
         var source = getSourceCanvas(this.$clone[0], this.image);
         var sourceWidth = source.width;
         var sourceHeight = source.height;
-        var args = [source];
+        var canvas = this.canvas;
+        var params = [source];
 
         // Source canvas
-        var srcX = data.x;
-        var srcY = data.y;
+        var srcX = data.x + canvas.naturalWidth * (abs(data.scaleX || 1) - 1) / 2;
+        var srcY = data.y + canvas.naturalHeight * (abs(data.scaleY || 1) - 1) / 2;
         var srcWidth;
         var srcHeight;
 
@@ -2679,7 +2748,7 @@
         }
 
         // All the numerical parameters should be integer for `drawImage` (#476)
-        args.push(floor(srcX), floor(srcY), floor(srcWidth), floor(srcHeight));
+        params.push(floor(srcX), floor(srcY), floor(srcWidth), floor(srcHeight));
 
         // Scale destination sizes
         if (scaledRatio) {
@@ -2691,10 +2760,10 @@
 
         // Avoid "IndexSizeError" in IE and Firefox
         if (dstWidth > 0 && dstHeight > 0) {
-          args.push(floor(dstX), floor(dstY), floor(dstWidth), floor(dstHeight));
+          params.push(floor(dstX), floor(dstY), floor(dstWidth), floor(dstHeight));
         }
 
-        return args;
+        return params;
       }).call(this));
 
       return canvas;
@@ -2753,9 +2822,7 @@
         }
       }
     }
-  });
-
-  $.extend(Cropper.prototype, prototype);
+  };
 
   Cropper.DEFAULTS = {
 
@@ -2891,24 +2958,26 @@
   Cropper.other = $.fn.cropper;
 
   // Register as jQuery plugin
-  $.fn.cropper = function (options) {
+  $.fn.cropper = function (option) {
     var args = toArray(arguments, 1);
     var result;
 
     this.each(function () {
       var $this = $(this);
       var data = $this.data(NAMESPACE);
+      var options;
       var fn;
 
       if (!data) {
-        if (/destroy/.test(options)) {
+        if (/destroy/.test(option)) {
           return;
         }
 
+        options = $.extend({}, $this.data(), $.isPlainObject(option) && option);
         $this.data(NAMESPACE, (data = new Cropper(this, options)));
       }
 
-      if (typeof options === 'string' && $.isFunction(fn = data[options])) {
+      if (typeof option === 'string' && $.isFunction(fn = data[option])) {
         result = fn.apply(data, args);
       }
     });

data/vendor/assets/stylesheets/cropper.css

@@ -1,36 +1,41 @@
 /*!
- * Cropper v2.2.1
+ * Cropper v2.3.2
  * https://github.com/fengyuanchen/cropper
  *
- * Copyright (c) 2014-2015 Fengyuan Chen and contributors
+ * Copyright (c) 2014-2016 Fengyuan Chen and contributors
  * Released under the MIT license
  *
- * Date: 2015-12-12T07:24:22.254Z
+ * Date: 2016-06-08T12:14:46.286Z
  */
 .cropper-container {
-  position: relative;
   font-size: 0;
   line-height: 0;
-  direction: ltr !important;
-  -ms-touch-action: none;
-      touch-action: none;
+
+  position: relative;
+
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+
+  direction: ltr !important;
+  -ms-touch-action: none;
+      touch-action: none;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
 }
 
 .cropper-container img {
   display: block;
-  image-orientation: 0deg !important;
+
+  width: 100%;
   min-width: 0 !important;
-  min-height: 0 !important;
   max-width: none !important;
-  max-height: none !important;
-  width: 100%;
   height: 100%;
+  min-height: 0 !important;
+  max-height: none !important;
+
+  image-orientation: 0deg !important;
 }
 
 .cropper-wrap-box,
@@ -50,73 +55,93 @@
 }
 
 .cropper-drag-box {
-  background-color: #fff;
   opacity: 0;
+  background-color: #fff;
+
   filter: alpha(opacity=0);
 }
 
 .cropper-modal {
+  opacity: .5;
   background-color: #000;
-  opacity: 0.5;
+
   filter: alpha(opacity=50);
 }
 
 .cropper-view-box {
   display: block;
   overflow: hidden;
-  outline: 1px solid #39f;
-  outline-color: rgba(51, 153, 255, 0.75);
+
   width: 100%;
   height: 100%;
+
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, .75);
 }
 
 .cropper-dashed {
   position: absolute;
+
   display: block;
+
+  opacity: .5;
   border: 0 dashed #eee;
-  opacity: 0.5;
+
   filter: alpha(opacity=50);
 }
 
 .cropper-dashed.dashed-h {
   top: 33.33333%;
   left: 0;
-  border-top-width: 1px;
-  border-bottom-width: 1px;
+
   width: 100%;
   height: 33.33333%;
+
+  border-top-width: 1px;
+  border-bottom-width: 1px;
 }
 
 .cropper-dashed.dashed-v {
   top: 0;
   left: 33.33333%;
-  border-right-width: 1px;
-  border-left-width: 1px;
+
   width: 33.33333%;
   height: 100%;
+
+  border-right-width: 1px;
+  border-left-width: 1px;
 }
 
 .cropper-center {
   position: absolute;
   top: 50%;
   left: 50%;
+
   display: block;
+
   width: 0;
   height: 0;
-  opacity: 0.75;
+
+  opacity: .75;
+
   filter: alpha(opacity=75);
 }
 
-.cropper-center:before, .cropper-center:after {
+.cropper-center:before,
+.cropper-center:after {
   position: absolute;
+
   display: block;
+
+  content: ' ';
+
   background-color: #eee;
-  content: " ";
 }
 
 .cropper-center:before {
   top: 0;
   left: -3px;
+
   width: 7px;
   height: 1px;
 }
@@ -124,6 +149,7 @@
 .cropper-center:after {
   top: -3px;
   left: 0;
+
   width: 1px;
   height: 7px;
 }
@@ -132,16 +158,21 @@
 .cropper-line,
 .cropper-point {
   position: absolute;
+
   display: block;
+
   width: 100%;
   height: 100%;
-  opacity: 0.1;
+
+  opacity: .1;
+
   filter: alpha(opacity=10);
 }
 
 .cropper-face {
   top: 0;
   left: 0;
+
   background-color: #fff;
 }
 
@@ -152,92 +183,117 @@
 .cropper-line.line-e {
   top: 0;
   right: -3px;
+
   width: 5px;
+
   cursor: e-resize;
 }
 
 .cropper-line.line-n {
   top: -3px;
   left: 0;
+
   height: 5px;
+
   cursor: n-resize;
 }
 
 .cropper-line.line-w {
   top: 0;
   left: -3px;
+
   width: 5px;
+
   cursor: w-resize;
 }
 
 .cropper-line.line-s {
   bottom: -3px;
   left: 0;
+
   height: 5px;
+
   cursor: s-resize;
 }
 
 .cropper-point {
-  background-color: #39f;
   width: 5px;
   height: 5px;
-  opacity: 0.75;
+
+  opacity: .75;
+  background-color: #39f;
+
   filter: alpha(opacity=75);
 }
 
 .cropper-point.point-e {
   top: 50%;
   right: -3px;
+
   margin-top: -3px;
+
   cursor: e-resize;
 }
 
 .cropper-point.point-n {
   top: -3px;
   left: 50%;
+
   margin-left: -3px;
+
   cursor: n-resize;
 }
 
 .cropper-point.point-w {
   top: 50%;
   left: -3px;
+
   margin-top: -3px;
+
   cursor: w-resize;
 }
 
 .cropper-point.point-s {
   bottom: -3px;
   left: 50%;
+
   margin-left: -3px;
+
   cursor: s-resize;
 }
 
 .cropper-point.point-ne {
   top: -3px;
   right: -3px;
+
   cursor: ne-resize;
 }
 
 .cropper-point.point-nw {
   top: -3px;
   left: -3px;
+
   cursor: nw-resize;
 }
 
 .cropper-point.point-sw {
   bottom: -3px;
   left: -3px;
+
   cursor: sw-resize;
 }
 
 .cropper-point.point-se {
   right: -3px;
   bottom: -3px;
-  cursor: se-resize;
+
   width: 20px;
   height: 20px;
+
+  cursor: se-resize;
+
   opacity: 1;
+
   filter: alpha(opacity=100);
 }
 
@@ -245,12 +301,17 @@
   position: absolute;
   right: -50%;
   bottom: -50%;
+
   display: block;
-  content: " ";
-  background-color: #39f;
+
   width: 200%;
   height: 200%;
+
+  content: ' ';
+
   opacity: 0;
+  background-color: #39f;
+
   filter: alpha(opacity=0);
 }
 
@@ -272,23 +333,28 @@
   .cropper-point.point-se {
     width: 5px;
     height: 5px;
-    opacity: 0.75;
+
+    opacity: .75;
+
     filter: alpha(opacity=75);
   }
 }
 
 .cropper-invisible {
   opacity: 0;
+
   filter: alpha(opacity=0);
 }
 
 .cropper-bg {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
 }
 
 .cropper-hide {
   position: absolute;
+
   display: block;
+
   width: 0;
   height: 0;
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cropper-rails
 version: !ruby/object:Gem::Version
-  version: 2.2.1.1
+  version: 2.3.2.1
 platform: ruby
 authors:
 - Cristian Bica
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-12-15 00:00:00.000000000 Z
+date: 2016-06-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -97,3 +97,4 @@ signing_key:
 specification_version: 4
 summary: Fengyuanchen's Cropper with Rails assets pipeline.
 test_files: []
+has_rdoc: