croppie_rails 2.3.0 → 2.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f27c243945c0aa2a1fbf4d52c7f40d8164b80538
-  data.tar.gz: 0e3c4eab92f2cc22b4c54e0fe24c29d381846387
+  metadata.gz: 8b3ccb5ff2f87ad1e158d64ef1094f5c74a1243e
+  data.tar.gz: 6fbe5ad29a8b255e8f64a9662075353eae816ff6
 SHA512:
-  metadata.gz: d388751247a1cc70dd07d3dd0ff05f2b5b3f7d456419723144d85c4a54c48e7749711e22af1fdec58a6422126f7338696bb3c58f5645fb534899ec11ec726841
-  data.tar.gz: 3bac7216fc3dc34dd816a4169bfeb241d55194145ce9e4838c32c4d9460840ffca70a77d7b101a4e1ca87cd2e3b3eba27f7ad6c78d780a657a0e22ab00d25303
+  metadata.gz: 5529ce2cf1bae9b5b359b160bbb1ed1a2609fd6a979c8e0cc6160332f73acb695b79635a3796c631c040c86942ba40f992bb17986b88331677153e5a2f56d84f
+  data.tar.gz: 7eefd47c295a4e87623f385b50079a6cfec85feffda78f12ba9e9f73d93a72780c306a657e52fb134dc5831f489447ce7877345fe53db74d524c35954b5ff908

data/.ruby-gemset

@@ -0,0 +1 @@
+croppie_rails

data/.ruby-version

@@ -0,0 +1 @@
+2.2.1

data/.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 2.3.0
+script: bundle exec rspec

data/lib/croppie_rails/version.rb

@@ -1,3 +1,3 @@
 module CroppieRails
-  VERSION = "2.3.0"
+  VERSION = "2.4.0"
 end

data/vendor/assets/javascripts/croppie.js

@@ -2,7 +2,7 @@
  * Croppie
  * Copyright 2016
  * Foliotek
- * Version: 2.3.0
+ * Version: 2.4.0
  *************************/
 (function (root, factory) {
     if (typeof define === 'function' && define.amd) {
@@ -35,6 +35,22 @@
             window.CustomEvent = CustomEvent;
         }());
     }
+
+    if (!HTMLCanvasElement.prototype.toBlob) {
+        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+            value: function (callback, type, quality) {
+                var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+                len = binStr.length,
+                arr = new Uint8Array(len);
+
+                for (var i=0; i<len; i++ ) {
+                    arr[i] = binStr.charCodeAt(i);
+                }
+
+                callback( new Blob( [arr], {type: type || 'image/png'} ) );
+            }
+        });
+    }
     /* End Polyfills */
 
     var cssPrefixes = ['Webkit', 'Moz', 'ms'],
@@ -134,8 +150,12 @@
         }
     }
 
+    function num(v) {
+        return parseInt(v, 10);
+    }
+
     /* Utilities */
-    function loadImage(src, imageEl) {
+    function loadImage(src, imageEl, useCanvas) {
         var img = imageEl || new Image(),
             prom;
 
@@ -146,7 +166,7 @@
             });
         } else {
             prom = new Promise(function (resolve, reject) {
-                if (src.substring(0,4).toLowerCase() === 'http') {
+                if (useCanvas && src.substring(0,4).toLowerCase() === 'http') {
                     img.setAttribute('crossOrigin', 'anonymous');
                 }
                 img.onload = function () {
@@ -191,7 +211,7 @@
             vals = [1, 0, 0, 1, 0, 0];
         }
 
-        return new Transform(parseInt(vals[4], 10), parseInt(vals[5], 10), parseFloat(vals[0]));
+        return new Transform(num(vals[4]), num(vals[5]), parseFloat(vals[0]));
     };
 
     Transform.fromString = function (v) {
@@ -297,7 +317,7 @@
         var self = this,
             contClass = 'croppie-container',
             customViewportClass = self.options.viewport.type ? 'cr-vp-' + self.options.viewport.type : null,
-            boundary, img, viewport, overlay, canvas;
+            boundary, img, viewport, overlay, canvas, bw, bh;
 
         self.options.useCanvas = self.options.enableOrientation || _hasExif.call(self);
         // Properties on class
@@ -319,9 +339,11 @@
         }
 
         addClass(boundary, 'cr-boundary');
+        bw = self.options.boundary.width;
+        bh = self.options.boundary.height;
         css(boundary, {
-            width: self.options.boundary.width + 'px',
-            height: self.options.boundary.height + 'px'
+            width: (bw + (isNaN(bw) ? '' : 'px')),
+            height: (bh + (isNaN(bh) ? '' : 'px'))
         });
 
         addClass(viewport, 'cr-viewport');
@@ -444,7 +466,7 @@
                 delta = 0;
             }
 
-            targetZoom = self._currentZoom + delta;
+            targetZoom = self._currentZoom + (delta * self._currentZoom);
 
             ev.preventDefault();
             _setZoomerVal.call(self, targetZoom);
@@ -514,8 +536,8 @@
             scale = self._currentZoom,
             vpWidth = viewport.width,
             vpHeight = viewport.height,
-            centerFromBoundaryX = self.options.boundary.width / 2,
-            centerFromBoundaryY = self.options.boundary.height / 2,
+            centerFromBoundaryX = self.elements.boundary.clientWidth / 2,
+            centerFromBoundaryY = self.elements.boundary.clientHeight / 2,
             imgRect = self.elements.preview.getBoundingClientRect(),
             curImgWidth = imgRect.width,
             curImgHeight = imgRect.height,
@@ -760,7 +782,7 @@
     function _triggerUpdate() {
         var self = this,
             data = self.get(),
-            ev; 
+            ev;
 
         if (!_isVisible.call(self)) {
             return;
@@ -842,7 +864,7 @@
         else {
             self._currentZoom = initialZoom;
         }
-        
+
         transformReset.scale = self._currentZoom;
         cssReset[CSS_TRANSFORM] = transformReset.toString();
         css(img, cssReset);
@@ -914,7 +936,7 @@
 
         if (exif) {
             getExifOrientation(img, function (orientation) {
-                drawCanvas(canvas, img, parseInt(orientation));
+                drawCanvas(canvas, img, num(orientation, 10));
                 if (customOrientation) {
                     drawCanvas(canvas, img, customOrientation);
                 }
@@ -924,39 +946,20 @@
         }
     }
 
-    function _getHtmlResult(data) {
-        var points = data.points,
-            div = document.createElement('div'),
-            img = document.createElement('img'),
-            width = points[2] - points[0],
-            height = points[3] - points[1];
-
-        addClass(div, 'croppie-result');
-        div.appendChild(img);
-        css(img, {
-            left: (-1 * points[0]) + 'px',
-            top: (-1 * points[1]) + 'px'
-        });
-        img.src = data.url;
-        css(div, {
-            width: width + 'px',
-            height: height + 'px'
-        });
-
-        return div;
-    }
-
-    function _getCanvasResult(img, data) {
-        var points = data.points,
-            left = points[0],
-            top = points[1],
+    function _getCanvas(data) {
+        var self = this,
+            points = data.points,
+            left = num(points[0]),
+            top = num(points[1]),
             width = (points[2] - points[0]),
             height = (points[3] - points[1]),
             circle = data.circle,
             canvas = document.createElement('canvas'),
             ctx = canvas.getContext('2d'),
             outWidth = width,
-            outHeight = height;
+            outHeight = height,
+            startX = 0,
+            startY = 0;
 
         if (data.outputWidth && data.outputHeight) {
             outWidth = data.outputWidth;
@@ -970,7 +973,25 @@
             ctx.fillStyle = data.backgroundColor;
             ctx.fillRect(0, 0, outWidth, outHeight);
         }
-        ctx.drawImage(img, left, top, width, height, 0, 0, outWidth, outHeight);
+        // start fixing data to send to draw image for enforceBoundary: false
+        if (left < 0) {
+            startX = Math.abs(left);
+            left = 0;
+        }
+        if (top < 0) {
+            startY = Math.abs(top);
+            top = 0;
+        }
+        if ((left + width) > self._originalImageWidth) {
+            width = self._originalImageWidth - left;
+            outWidth = width;
+        }
+        if ((top + height) > self._originalImageHeight) {
+            height = self._originalImageHeight - top;
+            outHeight = height;
+        }
+
+        ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, outWidth, outHeight);
         if (circle) {
             ctx.fillStyle = '#fff';
             ctx.globalCompositeOperation = 'destination-in';
@@ -979,7 +1000,42 @@
             ctx.closePath();
             ctx.fill();
         }
-        return canvas.toDataURL(data.format, data.quality);
+        return canvas;
+    }
+
+    function _getHtmlResult(data) {
+        var points = data.points,
+            div = document.createElement('div'),
+            img = document.createElement('img'),
+            width = points[2] - points[0],
+            height = points[3] - points[1];
+
+        addClass(div, 'croppie-result');
+        div.appendChild(img);
+        css(img, {
+            left: (-1 * points[0]) + 'px',
+            top: (-1 * points[1]) + 'px'
+        });
+        img.src = data.url;
+        css(div, {
+            width: width + 'px',
+            height: height + 'px'
+        });
+
+        return div;
+    }
+
+    function _getBase64Result(data) {
+        return _getCanvas.call(this, data).toDataURL(data.format, data.quality);
+    }
+
+    function _getBlobResult(data) {
+        var self = this;
+        return new Promise(function (resolve, reject) {
+            _getCanvas.call(self, data).toBlob(function (blob) {
+                resolve(blob);
+            }, data.format, data.quality);
+        });
     }
 
     function _bind(options, cb) {
@@ -1012,7 +1068,7 @@
             return parseFloat(p);
         });
         self.data.boundZoom = zoom;
-        var prom = loadImage(url, self.elements.img);
+        var prom = loadImage(url, self.elements.img, self.options.useCanvas);
         prom.then(function () {
             if (self.options.useCanvas) {
                 self.elements.img.exifdata = null;
@@ -1070,7 +1126,7 @@
         var self = this,
             data = _get.call(self),
             opts = deepExtend(RESULT_DEFAULTS, deepExtend({}, options)),
-            type = (typeof (options) === 'string' ? options : (opts.type || 'viewport')),
+            resultType = (typeof (options) === 'string' ? options : (opts.type || 'base64')),
             size = opts.size,
             format = opts.format,
             quality = opts.quality,
@@ -1106,11 +1162,21 @@
         data.backgroundColor = backgroundColor;
 
         prom = new Promise(function (resolve, reject) {
-            if (type === 'canvas') {
-                resolve(_getCanvasResult.call(self, self.elements.preview, data));
-            }
-            else {
-                resolve(_getHtmlResult.call(self, data));
+            switch(resultType.toLowerCase())
+            {
+                case 'rawcanvas':
+                    resolve(_getCanvas.call(self, data));
+                    break;
+                case 'canvas':
+                case 'base64':
+                    resolve(_getBase64Result.call(self, data));
+                    break;
+                case 'blob':
+                    _getBlobResult.call(self, data).then(resolve);
+                    break;
+                default:
+                    resolve(_getHtmlResult.call(self, data));
+                    break;
             }
         });
         return prom;
@@ -1203,6 +1269,16 @@
         this.element = element;
         this.options = deepExtend(deepExtend({}, Croppie.defaults), opts);
 
+        if (this.element.tagName.toLowerCase() === 'img') {
+            var origImage = this.element;
+            addClass(origImage, 'cr-original-image');
+            var replacementDiv = document.createElement('div');
+            this.element.parentNode.appendChild(replacementDiv);
+            replacementDiv.appendChild(origImage);
+            this.element = replacementDiv;
+            this.options.url = this.options.url || origImage.src;
+        }
+
         _create.call(this);
         if (this.options.url) {
             var bindOpts = {
@@ -1221,10 +1297,7 @@
             height: 100,
             type: 'square'
         },
-        boundary: {
-            width: 300,
-            height: 300
-        },
+        boundary: { },
         orientationControls: {
             enabled: true,
             leftClass: '',

data/vendor/assets/javascripts/demo_croppie.js

@@ -34,65 +34,103 @@ var Demo = (function() {
 		}, 1);
 	}
 
-	function demoMain(img) {
+	function demoMain () {
 		var mc = $('#cropper-1');
 		mc.croppie({
 			viewport: {
 				width: 150,
 				height: 150,
 				type: 'circle'
-			}
+			},
+			boundary: {
+				width: 300,
+				height: 300
+			},
+			// url: 'demo/demo-1.jpg',
+			// enforceBoundary: false
 			// mouseWheelZoom: false
 		});
-		mc.croppie('bind', img);
+		mc.on('update', function (ev, data) {
+			// console.log('jquery update', ev, data);
+		});
 		$('.js-main-image').on('click', function (ev) {
             mc.croppie('result', {
-            	type: 'canvas',
-            	format: 'jpeg'
-            }).then(function (resp) {
+            	type: 'rawcanvas',
+            	format: 'png'
+            }).then(function (canvas) {
 				popupResult({
-					src: resp
+					src: canvas.toDataURL()
 				});
 			});
 		});
 	}
 
-	function demoBasic(img) {
-		var basic = $('#demo-basic').croppie({
+	function demoBasic() {
+		var $w = $('.basic-width'),
+			$h = $('.basic-height'),
+			basic = $('#demo-basic').croppie({
 			viewport: {
 				width: 150,
 				height: 200
+			},
+			boundary: {
+				width: 300,
+				height: 300
 			}
 		});
 		basic.croppie('bind', {
-			url: img,
+			url: 'demo/cat.jpg',
 			points: [77,469,280,739]
 		});
+
 		$('.basic-result').on('click', function() {
-			basic.croppie('result', 'html').then(function (resp) {
+			var w = parseInt($w.val(), 10),
+				h = parseInt($h.val(), 10),s
+				size = 'viewport';
+			if (w || h) {
+				size = { width: w, height: h };
+			}
+			basic.croppie('result', {
+				type: 'canvas',
+				size: size
+			}).then(function (resp) {
 				popupResult({
-					html: resp.outerHTML
+					src: resp
 				});
 			});
 		});
 	}
 
-	function demoVanilla(img) {
-		if ($('vanilla-demo').lenght){
-			var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
-				viewport: { width: 100, height: 100 },
-				boundary: { width: 300, height: 300 },
-				showZoomer: false
-			});
-			vanilla.bind(img);
-			document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
-				vanilla.result('canvas').then(function (src) {
-					popupResult({
-						src: src
-					});
+	function demoVanilla() {
+		var vEl = document.getElementById('vanilla-demo'),
+			vanilla = new Croppie(vEl, {
+			viewport: { width: 100, height: 100 },
+			boundary: { width: 300, height: 300 },
+			showZoomer: false,
+            enableOrientation: true
+		});
+		vanilla.bind({
+            url: 'demo/demo-2.jpg',
+            orientation: 4,
+            zoom: 0
+        });
+        vEl.addEventListener('update', function (ev) {
+        	console.log('vanilla update', ev);
+        });
+		document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
+			vanilla.result({
+				type: 'blob'
+			}).then(function (blob) {
+				window.open(window.URL.createObjectURL(blob));
+				popupResult({
+					src: src
 				});
 			});
-		}
+		});
+
+		$('.vanilla-rotate').on('click', function(ev) {
+			vanilla.rotate(parseInt($(this).data('deg')));
+		});
 	}
 
 	function demoUpload() {
@@ -103,10 +141,13 @@ var Demo = (function() {
 	            var reader = new FileReader();
 
 	            reader.onload = function (e) {
+					$('.upload-demo').addClass('ready');
 	            	$uploadCrop.croppie('bind', {
 	            		url: e.target.result
+	            	}).then(function(){
+	            		console.log('jQuery bind complete');
 	            	});
-	            	$('.upload-demo').addClass('ready');
+
 	            }
 
 	            reader.readAsDataURL(input.files[0]);
@@ -118,15 +159,11 @@ var Demo = (function() {
 
 		$uploadCrop = $('#upload-demo').croppie({
 			viewport: {
-				width: 200,
-				height: 200,
+				width: 100,
+				height: 100,
 				type: 'circle'
 			},
-			boundary: {
-				width: 300,
-				height: 300
-			},
-			exif: true
+			enableExif: true
 		});
 
 		$('#upload').on('change', function () { readFile(this); });
@@ -142,7 +179,7 @@ var Demo = (function() {
 		});
 	}
 
-	function demoHidden(img) {
+	function demoHidden() {
 		var $hid = $('#hidden-demo');
 
 		$hid.croppie({
@@ -156,7 +193,7 @@ var Demo = (function() {
 				height: 200
 			}
 		});
-		$hid.croppie('bind', img);
+		$hid.croppie('bind', 'demo/demo-3.jpg');
 		$('.show-hidden').on('click', function () {
 			$hid.toggle();
 			$hid.croppie('bind');
@@ -175,16 +212,52 @@ var Demo = (function() {
 		});
 	}
 
-	function init(img) {
+	function init() {
 		bindNavigation();
-		demoMain(img);
-		demoBasic(img);
-		demoVanilla(img);
+		demoMain();
+		demoBasic();
+		demoVanilla();
 		demoUpload();
-		demoHidden(img);
+		demoHidden();
 	}
 
 	return {
 		init: init
 	};
 })();
+
+
+// Full version of `log` that:
+//  * Prevents errors on console methods when no console present.
+//  * Exposes a global 'log' function that preserves line numbering and formatting.
+(function () {
+  var method;
+  var noop = function () { };
+  var methods = [
+      'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
+      'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
+      'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
+      'timeStamp', 'trace', 'warn'
+  ];
+  var length = methods.length;
+  var console = (window.console = window.console || {});
+
+  while (length--) {
+    method = methods[length];
+
+    // Only stub undefined methods.
+    if (!console[method]) {
+        console[method] = noop;
+    }
+  }
+
+
+  if (Function.prototype.bind) {
+    window.log = Function.prototype.bind.call(console.log, console);
+  }
+  else {
+    window.log = function() {
+      Function.prototype.apply.call(console.log, console, arguments);
+    };
+  }
+})();

data/vendor/assets/stylesheets/croppie.css

@@ -1,53 +1,64 @@
 .croppie-container {
-    padding: 30px;
+    width: 100%;
+    height: 100%;
 }
 .croppie-container .cr-image {
-    z-index: -1;
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform-origin: 0 0;
+	z-index: -1;
+	position: absolute;
+	top: 0;
+	left: 0;
+	transform-origin: 0 0;
     max-width: none;
 }
-
 .croppie-container .cr-boundary {
-    position: relative;
-    overflow: hidden;
-    margin: 0 auto;
-    z-index: 1;
+	position: relative;
+	overflow: hidden;
+	margin: 0 auto;
+	z-index: 1;
+    width: 100%;
+    height: 100%;
 }
-
 .croppie-container .cr-viewport {
-    position: absolute;
-    border: 2px solid #fff;
-    margin: auto;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    box-shadow:0 0 0 899px rgba(0, 0, 0, 0.5);
-    z-index: 0;
+	position: absolute;
+	border: 2px solid #fff;
+	margin: auto;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
+	z-index: 0;
+}
+.croppie-container .cr-original-image {
+    display: none;
 }
 .croppie-container .cr-vp-circle {
-    border-radius: 50%;
+	border-radius: 50%;
 }
 .croppie-container .cr-overlay {
-    z-index: 1;
-    position: absolute;
-    cursor: move;
+	z-index: 1;
+	position: absolute;
+	cursor: move;
 }
 .croppie-container .cr-slider-wrap {
-    width: 75%;
-    margin: 0 auto;
-    margin-top: 25px;
-    text-align: center;
+	width: 75%;
+	margin: 15px auto;
+	text-align: center;
 }
 .croppie-result {
-    position: relative;
-    overflow: hidden;
+	position: relative;
+	overflow: hidden;
 }
 .croppie-result img {
-    position: absolute;
+	position: absolute;
+}
+.croppie-container .cr-image,
+.croppie-container .cr-overlay,
+.croppie-container .cr-viewport {
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 /*************************************/
@@ -131,6 +142,7 @@
     width: 16px;
     border-radius: 50%;
     background: #ddd;
+    margin-top:1px;
 }
 .cr-slider:focus::-ms-fill-lower {
     background: rgba(0, 0, 0, 0.5);

data/vendor/assets/stylesheets/demo_croppie.css

@@ -0,0 +1,320 @@
+/* 
+Colors
+#20C1C7
+#204648
+#189094
+#61CED2
+#0C4648
+*/
+html,
+body {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    font-size: 14px;
+    color: #222;
+    min-height: 100%;
+    height: auto;
+}
+
+body,
+button,
+input {
+    font-family: 'Open Sans', sans-serif;
+}
+
+h1 {
+    font-size: 42px;
+    font-weight: 300;
+    padding-top: 30px;
+    margin: 15px 0;
+}
+
+nav {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+nav a {
+    color: white;
+    text-decoration: none;
+    padding: 0 10px;
+}
+
+footer {
+    text-align: center;
+    color: #555;
+    font-size: 12px;
+    padding: 5px;
+}
+
+section {
+    margin-bottom: 25px;
+}
+
+section.hero {
+    background: #20C1C7;
+    background: linear-gradient(#189094, #20C1C7);
+    color: white;
+    text-shadow: 0 1px 1px rgba(20,20,20,0.6);
+    margin-bottom: 0;
+    min-height: 450px;
+}
+.hero h2 {
+    font-size: 16px;
+    font-weight: 400;
+}
+
+section.who {
+    margin-bottom: 30px;
+}
+.section-header {
+    background: #204648;
+    padding: 5px 0;
+}
+
+input[type="number"],
+input[type="text"] {
+    border: 1px solid #aaa;
+    padding: 5px;
+    font-size: 18px;
+    width: 100px;
+}
+
+button,
+a.btn {
+    background-color: #189094;
+    color: white;
+    padding: 10px 15px;
+    border-radius: 3px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    font-size: 16px;
+    cursor: pointer;
+    text-decoration: none;
+    text-shadow: none;
+    display: inline-block;
+    cursor: pointer;
+}
+input[type="file"] {
+    cursor: pointer;
+}
+button:focus {
+    outline: 0;
+}
+
+.file-btn {
+    position: relative;
+}
+.file-btn input[type="file"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+.actions {
+    padding: 5px 0;
+}
+.actions button {
+    margin-right: 5px;
+}
+
+pre[class*="language"] {
+    margin: 10px 0;
+    padding-top: 0;
+    border-left-color: #189094;
+}
+
+.container,
+.section-header h2 {
+    position: relative;
+    max-width: 1000px;
+    margin: 0 auto;
+    min-width: 500px;
+    padding: 0 10px;
+}
+
+.hero p {
+    font-size: 16px;
+}
+
+.hero .grid {
+    padding-top: 50px;
+}
+
+h2 {
+    color: white;
+    font-size: 23px;
+    font-weight: 300;
+}
+
+.demo-wrap {
+    border-bottom: 1px solid #ddd;
+    padding-top: 20px;
+}
+
+.demo-wrap .container {
+    padding-bottom: 10px;
+}
+
+.demo-wrap strong {
+    font-size: 16px;
+    display: block;
+    font-weight: 400;
+    color: #aaa;
+    margin: 0 0 5px 0;
+}
+
+.documentation h3 {
+    font-size: 18px;
+    font-weight: 400;
+    border-bottom: 1px solid #0C4648;
+    margin: 15px 0 10px;
+}
+.documentation ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.documentation section > ul > li {
+    margin-bottom: 1.5em;
+}
+
+.documentation p {
+    margin: 5px 0 10px;
+}
+
+.documentation .parameter-list li {
+    padding-left: 5px;
+    line-height: 28px;
+}
+.documentation .parameter-list li.values {
+    padding-left: 20px;
+}
+.documentation em {
+    color: #aaa;
+    font-style: normal;
+    padding: 0 10px;
+}
+.documentation i {
+    color: #666;
+}
+
+.documentation strong.focus {
+    font-size: 18px;
+    color: #189094;
+    font-weight: 700;
+}
+.documentation span.default {
+    padding-right: 10px;
+    font-weight: 600;
+    color: #777;
+}
+
+.upload-demo .upload-demo-wrap,
+.upload-demo .upload-result,
+.upload-demo.ready .upload-msg {
+    display: none;
+}
+.upload-demo.ready .upload-demo-wrap {
+    display: block;
+}
+.upload-demo.ready .upload-result {
+    display: inline-block;
+}
+.upload-demo-wrap {
+    width: 300px;
+    height: 300px;
+    margin: 0 auto;
+}
+
+.upload-msg {
+    text-align: center;
+    padding: 50px;
+    font-size: 22px;
+    color: #aaa;
+    width: 260px;
+    margin: 50px auto;
+    border: 1px solid #aaa;
+}
+
+/* Sweet alert modifications */
+.sweet-alert {
+    width: auto;
+    max-width: 85%;
+}
+
+/* Grid - subset */
+*, *:after, *:before {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+[class*='col-'] {
+	float: left;
+	padding-right: 20px; /* column-space */
+}
+
+.grid {
+	width: 100%;
+	max-width: 1140px;
+	min-width: 755px;
+	margin: 0 auto;
+	overflow: hidden;
+}
+.grid:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+
+.col-1-2 {
+	width: 50%;
+}
+
+.col-1-3 {
+	width: 33.33%;
+}
+.col-2-3 {
+	width: 66.66%;
+}
+.col-1-4 {
+	width: 25%;
+}
+.col-3-4 {
+	width: 75%;
+}
+
+@media handheld, only screen and (max-width: 767px) {
+    .grid {
+        width: 100%;
+        min-width: 0;
+        margin-left: 0;
+        margin-right: 0;
+        padding-left: 20px; /* grid-space to left */
+        padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
+    }
+
+    [class*='col-'] {
+        width: auto;
+        float: none;
+        margin: 10px 0;
+        padding-left: 0;
+        padding-right: 10px; /* column-space */
+    }
+    .container,
+    .section-header h2 {
+        min-width: 0;
+    }
+
+    .croppie-container {
+        padding: 30px 0;
+    }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: croppie_rails
 version: !ruby/object:Gem::Version
-  version: 2.3.0
+  version: 2.4.0
 platform: ruby
 authors:
 - Luiz Picolo
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-08-08 00:00:00.000000000 Z
+date: 2016-11-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -75,6 +75,9 @@ extra_rdoc_files: []
 files:
 - ".gitignore"
 - ".rspec"
+- ".ruby-gemset"
+- ".ruby-version"
+- ".travis.yml"
 - CODE_OF_CONDUCT.md
 - Gemfile
 - LICENSE.txt
@@ -89,6 +92,7 @@ files:
 - vendor/assets/javascripts/croppie.js
 - vendor/assets/javascripts/demo_croppie.js
 - vendor/assets/stylesheets/croppie.css
+- vendor/assets/stylesheets/demo_croppie.css
 homepage: https://github.com/luizpicolo/croppie_rails
 licenses:
 - MIT
@@ -109,7 +113,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.8
+rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4
 summary: A gem to automate using Croppie with Rails