croppie_rails 2.3.0 → 2.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.ruby-gemset +1 -0
- data/.ruby-version +1 -0
- data/.travis.yml +4 -0
- data/lib/croppie_rails/version.rb +1 -1
- data/vendor/assets/javascripts/croppie.js +126 -53
- data/vendor/assets/javascripts/demo_croppie.js +114 -41
- data/vendor/assets/stylesheets/croppie.css +44 -32
- data/vendor/assets/stylesheets/demo_croppie.css +320 -0
- metadata +7 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8b3ccb5ff2f87ad1e158d64ef1094f5c74a1243e
|
4
|
+
data.tar.gz: 6fbe5ad29a8b255e8f64a9662075353eae816ff6
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5529ce2cf1bae9b5b359b160bbb1ed1a2609fd6a979c8e0cc6160332f73acb695b79635a3796c631c040c86942ba40f992bb17986b88331677153e5a2f56d84f
|
7
|
+
data.tar.gz: 7eefd47c295a4e87623f385b50079a6cfec85feffda78f12ba9e9f73d93a72780c306a657e52fb134dc5831f489447ce7877345fe53db74d524c35954b5ff908
|
data/.ruby-gemset
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
croppie_rails
|
data/.ruby-version
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
2.2.1
|
data/.travis.yml
ADDED
@@ -2,7 +2,7 @@
|
|
2
2
|
* Croppie
|
3
3
|
* Copyright 2016
|
4
4
|
* Foliotek
|
5
|
-
* Version: 2.
|
5
|
+
* Version: 2.4.0
|
6
6
|
*************************/
|
7
7
|
(function (root, factory) {
|
8
8
|
if (typeof define === 'function' && define.amd) {
|
@@ -35,6 +35,22 @@
|
|
35
35
|
window.CustomEvent = CustomEvent;
|
36
36
|
}());
|
37
37
|
}
|
38
|
+
|
39
|
+
if (!HTMLCanvasElement.prototype.toBlob) {
|
40
|
+
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
|
41
|
+
value: function (callback, type, quality) {
|
42
|
+
var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
|
43
|
+
len = binStr.length,
|
44
|
+
arr = new Uint8Array(len);
|
45
|
+
|
46
|
+
for (var i=0; i<len; i++ ) {
|
47
|
+
arr[i] = binStr.charCodeAt(i);
|
48
|
+
}
|
49
|
+
|
50
|
+
callback( new Blob( [arr], {type: type || 'image/png'} ) );
|
51
|
+
}
|
52
|
+
});
|
53
|
+
}
|
38
54
|
/* End Polyfills */
|
39
55
|
|
40
56
|
var cssPrefixes = ['Webkit', 'Moz', 'ms'],
|
@@ -134,8 +150,12 @@
|
|
134
150
|
}
|
135
151
|
}
|
136
152
|
|
153
|
+
function num(v) {
|
154
|
+
return parseInt(v, 10);
|
155
|
+
}
|
156
|
+
|
137
157
|
/* Utilities */
|
138
|
-
function loadImage(src, imageEl) {
|
158
|
+
function loadImage(src, imageEl, useCanvas) {
|
139
159
|
var img = imageEl || new Image(),
|
140
160
|
prom;
|
141
161
|
|
@@ -146,7 +166,7 @@
|
|
146
166
|
});
|
147
167
|
} else {
|
148
168
|
prom = new Promise(function (resolve, reject) {
|
149
|
-
if (src.substring(0,4).toLowerCase() === 'http') {
|
169
|
+
if (useCanvas && src.substring(0,4).toLowerCase() === 'http') {
|
150
170
|
img.setAttribute('crossOrigin', 'anonymous');
|
151
171
|
}
|
152
172
|
img.onload = function () {
|
@@ -191,7 +211,7 @@
|
|
191
211
|
vals = [1, 0, 0, 1, 0, 0];
|
192
212
|
}
|
193
213
|
|
194
|
-
return new Transform(
|
214
|
+
return new Transform(num(vals[4]), num(vals[5]), parseFloat(vals[0]));
|
195
215
|
};
|
196
216
|
|
197
217
|
Transform.fromString = function (v) {
|
@@ -297,7 +317,7 @@
|
|
297
317
|
var self = this,
|
298
318
|
contClass = 'croppie-container',
|
299
319
|
customViewportClass = self.options.viewport.type ? 'cr-vp-' + self.options.viewport.type : null,
|
300
|
-
boundary, img, viewport, overlay, canvas;
|
320
|
+
boundary, img, viewport, overlay, canvas, bw, bh;
|
301
321
|
|
302
322
|
self.options.useCanvas = self.options.enableOrientation || _hasExif.call(self);
|
303
323
|
// Properties on class
|
@@ -319,9 +339,11 @@
|
|
319
339
|
}
|
320
340
|
|
321
341
|
addClass(boundary, 'cr-boundary');
|
342
|
+
bw = self.options.boundary.width;
|
343
|
+
bh = self.options.boundary.height;
|
322
344
|
css(boundary, {
|
323
|
-
width:
|
324
|
-
height:
|
345
|
+
width: (bw + (isNaN(bw) ? '' : 'px')),
|
346
|
+
height: (bh + (isNaN(bh) ? '' : 'px'))
|
325
347
|
});
|
326
348
|
|
327
349
|
addClass(viewport, 'cr-viewport');
|
@@ -444,7 +466,7 @@
|
|
444
466
|
delta = 0;
|
445
467
|
}
|
446
468
|
|
447
|
-
targetZoom = self._currentZoom + delta;
|
469
|
+
targetZoom = self._currentZoom + (delta * self._currentZoom);
|
448
470
|
|
449
471
|
ev.preventDefault();
|
450
472
|
_setZoomerVal.call(self, targetZoom);
|
@@ -514,8 +536,8 @@
|
|
514
536
|
scale = self._currentZoom,
|
515
537
|
vpWidth = viewport.width,
|
516
538
|
vpHeight = viewport.height,
|
517
|
-
centerFromBoundaryX = self.
|
518
|
-
centerFromBoundaryY = self.
|
539
|
+
centerFromBoundaryX = self.elements.boundary.clientWidth / 2,
|
540
|
+
centerFromBoundaryY = self.elements.boundary.clientHeight / 2,
|
519
541
|
imgRect = self.elements.preview.getBoundingClientRect(),
|
520
542
|
curImgWidth = imgRect.width,
|
521
543
|
curImgHeight = imgRect.height,
|
@@ -760,7 +782,7 @@
|
|
760
782
|
function _triggerUpdate() {
|
761
783
|
var self = this,
|
762
784
|
data = self.get(),
|
763
|
-
ev;
|
785
|
+
ev;
|
764
786
|
|
765
787
|
if (!_isVisible.call(self)) {
|
766
788
|
return;
|
@@ -842,7 +864,7 @@
|
|
842
864
|
else {
|
843
865
|
self._currentZoom = initialZoom;
|
844
866
|
}
|
845
|
-
|
867
|
+
|
846
868
|
transformReset.scale = self._currentZoom;
|
847
869
|
cssReset[CSS_TRANSFORM] = transformReset.toString();
|
848
870
|
css(img, cssReset);
|
@@ -914,7 +936,7 @@
|
|
914
936
|
|
915
937
|
if (exif) {
|
916
938
|
getExifOrientation(img, function (orientation) {
|
917
|
-
drawCanvas(canvas, img,
|
939
|
+
drawCanvas(canvas, img, num(orientation, 10));
|
918
940
|
if (customOrientation) {
|
919
941
|
drawCanvas(canvas, img, customOrientation);
|
920
942
|
}
|
@@ -924,39 +946,20 @@
|
|
924
946
|
}
|
925
947
|
}
|
926
948
|
|
927
|
-
function
|
928
|
-
var
|
929
|
-
|
930
|
-
|
931
|
-
|
932
|
-
height = points[3] - points[1];
|
933
|
-
|
934
|
-
addClass(div, 'croppie-result');
|
935
|
-
div.appendChild(img);
|
936
|
-
css(img, {
|
937
|
-
left: (-1 * points[0]) + 'px',
|
938
|
-
top: (-1 * points[1]) + 'px'
|
939
|
-
});
|
940
|
-
img.src = data.url;
|
941
|
-
css(div, {
|
942
|
-
width: width + 'px',
|
943
|
-
height: height + 'px'
|
944
|
-
});
|
945
|
-
|
946
|
-
return div;
|
947
|
-
}
|
948
|
-
|
949
|
-
function _getCanvasResult(img, data) {
|
950
|
-
var points = data.points,
|
951
|
-
left = points[0],
|
952
|
-
top = points[1],
|
949
|
+
function _getCanvas(data) {
|
950
|
+
var self = this,
|
951
|
+
points = data.points,
|
952
|
+
left = num(points[0]),
|
953
|
+
top = num(points[1]),
|
953
954
|
width = (points[2] - points[0]),
|
954
955
|
height = (points[3] - points[1]),
|
955
956
|
circle = data.circle,
|
956
957
|
canvas = document.createElement('canvas'),
|
957
958
|
ctx = canvas.getContext('2d'),
|
958
959
|
outWidth = width,
|
959
|
-
outHeight = height
|
960
|
+
outHeight = height,
|
961
|
+
startX = 0,
|
962
|
+
startY = 0;
|
960
963
|
|
961
964
|
if (data.outputWidth && data.outputHeight) {
|
962
965
|
outWidth = data.outputWidth;
|
@@ -970,7 +973,25 @@
|
|
970
973
|
ctx.fillStyle = data.backgroundColor;
|
971
974
|
ctx.fillRect(0, 0, outWidth, outHeight);
|
972
975
|
}
|
973
|
-
|
976
|
+
// start fixing data to send to draw image for enforceBoundary: false
|
977
|
+
if (left < 0) {
|
978
|
+
startX = Math.abs(left);
|
979
|
+
left = 0;
|
980
|
+
}
|
981
|
+
if (top < 0) {
|
982
|
+
startY = Math.abs(top);
|
983
|
+
top = 0;
|
984
|
+
}
|
985
|
+
if ((left + width) > self._originalImageWidth) {
|
986
|
+
width = self._originalImageWidth - left;
|
987
|
+
outWidth = width;
|
988
|
+
}
|
989
|
+
if ((top + height) > self._originalImageHeight) {
|
990
|
+
height = self._originalImageHeight - top;
|
991
|
+
outHeight = height;
|
992
|
+
}
|
993
|
+
|
994
|
+
ctx.drawImage(this.elements.preview, left, top, width, height, startX, startY, outWidth, outHeight);
|
974
995
|
if (circle) {
|
975
996
|
ctx.fillStyle = '#fff';
|
976
997
|
ctx.globalCompositeOperation = 'destination-in';
|
@@ -979,7 +1000,42 @@
|
|
979
1000
|
ctx.closePath();
|
980
1001
|
ctx.fill();
|
981
1002
|
}
|
982
|
-
return canvas
|
1003
|
+
return canvas;
|
1004
|
+
}
|
1005
|
+
|
1006
|
+
function _getHtmlResult(data) {
|
1007
|
+
var points = data.points,
|
1008
|
+
div = document.createElement('div'),
|
1009
|
+
img = document.createElement('img'),
|
1010
|
+
width = points[2] - points[0],
|
1011
|
+
height = points[3] - points[1];
|
1012
|
+
|
1013
|
+
addClass(div, 'croppie-result');
|
1014
|
+
div.appendChild(img);
|
1015
|
+
css(img, {
|
1016
|
+
left: (-1 * points[0]) + 'px',
|
1017
|
+
top: (-1 * points[1]) + 'px'
|
1018
|
+
});
|
1019
|
+
img.src = data.url;
|
1020
|
+
css(div, {
|
1021
|
+
width: width + 'px',
|
1022
|
+
height: height + 'px'
|
1023
|
+
});
|
1024
|
+
|
1025
|
+
return div;
|
1026
|
+
}
|
1027
|
+
|
1028
|
+
function _getBase64Result(data) {
|
1029
|
+
return _getCanvas.call(this, data).toDataURL(data.format, data.quality);
|
1030
|
+
}
|
1031
|
+
|
1032
|
+
function _getBlobResult(data) {
|
1033
|
+
var self = this;
|
1034
|
+
return new Promise(function (resolve, reject) {
|
1035
|
+
_getCanvas.call(self, data).toBlob(function (blob) {
|
1036
|
+
resolve(blob);
|
1037
|
+
}, data.format, data.quality);
|
1038
|
+
});
|
983
1039
|
}
|
984
1040
|
|
985
1041
|
function _bind(options, cb) {
|
@@ -1012,7 +1068,7 @@
|
|
1012
1068
|
return parseFloat(p);
|
1013
1069
|
});
|
1014
1070
|
self.data.boundZoom = zoom;
|
1015
|
-
var prom = loadImage(url, self.elements.img);
|
1071
|
+
var prom = loadImage(url, self.elements.img, self.options.useCanvas);
|
1016
1072
|
prom.then(function () {
|
1017
1073
|
if (self.options.useCanvas) {
|
1018
1074
|
self.elements.img.exifdata = null;
|
@@ -1070,7 +1126,7 @@
|
|
1070
1126
|
var self = this,
|
1071
1127
|
data = _get.call(self),
|
1072
1128
|
opts = deepExtend(RESULT_DEFAULTS, deepExtend({}, options)),
|
1073
|
-
|
1129
|
+
resultType = (typeof (options) === 'string' ? options : (opts.type || 'base64')),
|
1074
1130
|
size = opts.size,
|
1075
1131
|
format = opts.format,
|
1076
1132
|
quality = opts.quality,
|
@@ -1106,11 +1162,21 @@
|
|
1106
1162
|
data.backgroundColor = backgroundColor;
|
1107
1163
|
|
1108
1164
|
prom = new Promise(function (resolve, reject) {
|
1109
|
-
|
1110
|
-
|
1111
|
-
|
1112
|
-
|
1113
|
-
|
1165
|
+
switch(resultType.toLowerCase())
|
1166
|
+
{
|
1167
|
+
case 'rawcanvas':
|
1168
|
+
resolve(_getCanvas.call(self, data));
|
1169
|
+
break;
|
1170
|
+
case 'canvas':
|
1171
|
+
case 'base64':
|
1172
|
+
resolve(_getBase64Result.call(self, data));
|
1173
|
+
break;
|
1174
|
+
case 'blob':
|
1175
|
+
_getBlobResult.call(self, data).then(resolve);
|
1176
|
+
break;
|
1177
|
+
default:
|
1178
|
+
resolve(_getHtmlResult.call(self, data));
|
1179
|
+
break;
|
1114
1180
|
}
|
1115
1181
|
});
|
1116
1182
|
return prom;
|
@@ -1203,6 +1269,16 @@
|
|
1203
1269
|
this.element = element;
|
1204
1270
|
this.options = deepExtend(deepExtend({}, Croppie.defaults), opts);
|
1205
1271
|
|
1272
|
+
if (this.element.tagName.toLowerCase() === 'img') {
|
1273
|
+
var origImage = this.element;
|
1274
|
+
addClass(origImage, 'cr-original-image');
|
1275
|
+
var replacementDiv = document.createElement('div');
|
1276
|
+
this.element.parentNode.appendChild(replacementDiv);
|
1277
|
+
replacementDiv.appendChild(origImage);
|
1278
|
+
this.element = replacementDiv;
|
1279
|
+
this.options.url = this.options.url || origImage.src;
|
1280
|
+
}
|
1281
|
+
|
1206
1282
|
_create.call(this);
|
1207
1283
|
if (this.options.url) {
|
1208
1284
|
var bindOpts = {
|
@@ -1221,10 +1297,7 @@
|
|
1221
1297
|
height: 100,
|
1222
1298
|
type: 'square'
|
1223
1299
|
},
|
1224
|
-
boundary: {
|
1225
|
-
width: 300,
|
1226
|
-
height: 300
|
1227
|
-
},
|
1300
|
+
boundary: { },
|
1228
1301
|
orientationControls: {
|
1229
1302
|
enabled: true,
|
1230
1303
|
leftClass: '',
|
@@ -34,65 +34,103 @@ var Demo = (function() {
|
|
34
34
|
}, 1);
|
35
35
|
}
|
36
36
|
|
37
|
-
function demoMain(
|
37
|
+
function demoMain () {
|
38
38
|
var mc = $('#cropper-1');
|
39
39
|
mc.croppie({
|
40
40
|
viewport: {
|
41
41
|
width: 150,
|
42
42
|
height: 150,
|
43
43
|
type: 'circle'
|
44
|
-
}
|
44
|
+
},
|
45
|
+
boundary: {
|
46
|
+
width: 300,
|
47
|
+
height: 300
|
48
|
+
},
|
49
|
+
// url: 'demo/demo-1.jpg',
|
50
|
+
// enforceBoundary: false
|
45
51
|
// mouseWheelZoom: false
|
46
52
|
});
|
47
|
-
mc.
|
53
|
+
mc.on('update', function (ev, data) {
|
54
|
+
// console.log('jquery update', ev, data);
|
55
|
+
});
|
48
56
|
$('.js-main-image').on('click', function (ev) {
|
49
57
|
mc.croppie('result', {
|
50
|
-
type: '
|
51
|
-
format: '
|
52
|
-
}).then(function (
|
58
|
+
type: 'rawcanvas',
|
59
|
+
format: 'png'
|
60
|
+
}).then(function (canvas) {
|
53
61
|
popupResult({
|
54
|
-
src:
|
62
|
+
src: canvas.toDataURL()
|
55
63
|
});
|
56
64
|
});
|
57
65
|
});
|
58
66
|
}
|
59
67
|
|
60
|
-
function demoBasic(
|
61
|
-
var
|
68
|
+
function demoBasic() {
|
69
|
+
var $w = $('.basic-width'),
|
70
|
+
$h = $('.basic-height'),
|
71
|
+
basic = $('#demo-basic').croppie({
|
62
72
|
viewport: {
|
63
73
|
width: 150,
|
64
74
|
height: 200
|
75
|
+
},
|
76
|
+
boundary: {
|
77
|
+
width: 300,
|
78
|
+
height: 300
|
65
79
|
}
|
66
80
|
});
|
67
81
|
basic.croppie('bind', {
|
68
|
-
url:
|
82
|
+
url: 'demo/cat.jpg',
|
69
83
|
points: [77,469,280,739]
|
70
84
|
});
|
85
|
+
|
71
86
|
$('.basic-result').on('click', function() {
|
72
|
-
|
87
|
+
var w = parseInt($w.val(), 10),
|
88
|
+
h = parseInt($h.val(), 10),s
|
89
|
+
size = 'viewport';
|
90
|
+
if (w || h) {
|
91
|
+
size = { width: w, height: h };
|
92
|
+
}
|
93
|
+
basic.croppie('result', {
|
94
|
+
type: 'canvas',
|
95
|
+
size: size
|
96
|
+
}).then(function (resp) {
|
73
97
|
popupResult({
|
74
|
-
|
98
|
+
src: resp
|
75
99
|
});
|
76
100
|
});
|
77
101
|
});
|
78
102
|
}
|
79
103
|
|
80
|
-
function demoVanilla(
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
104
|
+
function demoVanilla() {
|
105
|
+
var vEl = document.getElementById('vanilla-demo'),
|
106
|
+
vanilla = new Croppie(vEl, {
|
107
|
+
viewport: { width: 100, height: 100 },
|
108
|
+
boundary: { width: 300, height: 300 },
|
109
|
+
showZoomer: false,
|
110
|
+
enableOrientation: true
|
111
|
+
});
|
112
|
+
vanilla.bind({
|
113
|
+
url: 'demo/demo-2.jpg',
|
114
|
+
orientation: 4,
|
115
|
+
zoom: 0
|
116
|
+
});
|
117
|
+
vEl.addEventListener('update', function (ev) {
|
118
|
+
console.log('vanilla update', ev);
|
119
|
+
});
|
120
|
+
document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
|
121
|
+
vanilla.result({
|
122
|
+
type: 'blob'
|
123
|
+
}).then(function (blob) {
|
124
|
+
window.open(window.URL.createObjectURL(blob));
|
125
|
+
popupResult({
|
126
|
+
src: src
|
93
127
|
});
|
94
128
|
});
|
95
|
-
}
|
129
|
+
});
|
130
|
+
|
131
|
+
$('.vanilla-rotate').on('click', function(ev) {
|
132
|
+
vanilla.rotate(parseInt($(this).data('deg')));
|
133
|
+
});
|
96
134
|
}
|
97
135
|
|
98
136
|
function demoUpload() {
|
@@ -103,10 +141,13 @@ var Demo = (function() {
|
|
103
141
|
var reader = new FileReader();
|
104
142
|
|
105
143
|
reader.onload = function (e) {
|
144
|
+
$('.upload-demo').addClass('ready');
|
106
145
|
$uploadCrop.croppie('bind', {
|
107
146
|
url: e.target.result
|
147
|
+
}).then(function(){
|
148
|
+
console.log('jQuery bind complete');
|
108
149
|
});
|
109
|
-
|
150
|
+
|
110
151
|
}
|
111
152
|
|
112
153
|
reader.readAsDataURL(input.files[0]);
|
@@ -118,15 +159,11 @@ var Demo = (function() {
|
|
118
159
|
|
119
160
|
$uploadCrop = $('#upload-demo').croppie({
|
120
161
|
viewport: {
|
121
|
-
width:
|
122
|
-
height:
|
162
|
+
width: 100,
|
163
|
+
height: 100,
|
123
164
|
type: 'circle'
|
124
165
|
},
|
125
|
-
|
126
|
-
width: 300,
|
127
|
-
height: 300
|
128
|
-
},
|
129
|
-
exif: true
|
166
|
+
enableExif: true
|
130
167
|
});
|
131
168
|
|
132
169
|
$('#upload').on('change', function () { readFile(this); });
|
@@ -142,7 +179,7 @@ var Demo = (function() {
|
|
142
179
|
});
|
143
180
|
}
|
144
181
|
|
145
|
-
function demoHidden(
|
182
|
+
function demoHidden() {
|
146
183
|
var $hid = $('#hidden-demo');
|
147
184
|
|
148
185
|
$hid.croppie({
|
@@ -156,7 +193,7 @@ var Demo = (function() {
|
|
156
193
|
height: 200
|
157
194
|
}
|
158
195
|
});
|
159
|
-
$hid.croppie('bind',
|
196
|
+
$hid.croppie('bind', 'demo/demo-3.jpg');
|
160
197
|
$('.show-hidden').on('click', function () {
|
161
198
|
$hid.toggle();
|
162
199
|
$hid.croppie('bind');
|
@@ -175,16 +212,52 @@ var Demo = (function() {
|
|
175
212
|
});
|
176
213
|
}
|
177
214
|
|
178
|
-
function init(
|
215
|
+
function init() {
|
179
216
|
bindNavigation();
|
180
|
-
demoMain(
|
181
|
-
demoBasic(
|
182
|
-
demoVanilla(
|
217
|
+
demoMain();
|
218
|
+
demoBasic();
|
219
|
+
demoVanilla();
|
183
220
|
demoUpload();
|
184
|
-
demoHidden(
|
221
|
+
demoHidden();
|
185
222
|
}
|
186
223
|
|
187
224
|
return {
|
188
225
|
init: init
|
189
226
|
};
|
190
227
|
})();
|
228
|
+
|
229
|
+
|
230
|
+
// Full version of `log` that:
|
231
|
+
// * Prevents errors on console methods when no console present.
|
232
|
+
// * Exposes a global 'log' function that preserves line numbering and formatting.
|
233
|
+
(function () {
|
234
|
+
var method;
|
235
|
+
var noop = function () { };
|
236
|
+
var methods = [
|
237
|
+
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
238
|
+
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
239
|
+
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
240
|
+
'timeStamp', 'trace', 'warn'
|
241
|
+
];
|
242
|
+
var length = methods.length;
|
243
|
+
var console = (window.console = window.console || {});
|
244
|
+
|
245
|
+
while (length--) {
|
246
|
+
method = methods[length];
|
247
|
+
|
248
|
+
// Only stub undefined methods.
|
249
|
+
if (!console[method]) {
|
250
|
+
console[method] = noop;
|
251
|
+
}
|
252
|
+
}
|
253
|
+
|
254
|
+
|
255
|
+
if (Function.prototype.bind) {
|
256
|
+
window.log = Function.prototype.bind.call(console.log, console);
|
257
|
+
}
|
258
|
+
else {
|
259
|
+
window.log = function() {
|
260
|
+
Function.prototype.apply.call(console.log, console, arguments);
|
261
|
+
};
|
262
|
+
}
|
263
|
+
})();
|
@@ -1,53 +1,64 @@
|
|
1
1
|
.croppie-container {
|
2
|
-
|
2
|
+
width: 100%;
|
3
|
+
height: 100%;
|
3
4
|
}
|
4
5
|
.croppie-container .cr-image {
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
6
|
+
z-index: -1;
|
7
|
+
position: absolute;
|
8
|
+
top: 0;
|
9
|
+
left: 0;
|
10
|
+
transform-origin: 0 0;
|
10
11
|
max-width: none;
|
11
12
|
}
|
12
|
-
|
13
13
|
.croppie-container .cr-boundary {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
14
|
+
position: relative;
|
15
|
+
overflow: hidden;
|
16
|
+
margin: 0 auto;
|
17
|
+
z-index: 1;
|
18
|
+
width: 100%;
|
19
|
+
height: 100%;
|
18
20
|
}
|
19
|
-
|
20
21
|
.croppie-container .cr-viewport {
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
box-shadow:
|
29
|
-
|
22
|
+
position: absolute;
|
23
|
+
border: 2px solid #fff;
|
24
|
+
margin: auto;
|
25
|
+
top: 0;
|
26
|
+
bottom: 0;
|
27
|
+
right: 0;
|
28
|
+
left: 0;
|
29
|
+
box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
|
30
|
+
z-index: 0;
|
31
|
+
}
|
32
|
+
.croppie-container .cr-original-image {
|
33
|
+
display: none;
|
30
34
|
}
|
31
35
|
.croppie-container .cr-vp-circle {
|
32
|
-
|
36
|
+
border-radius: 50%;
|
33
37
|
}
|
34
38
|
.croppie-container .cr-overlay {
|
35
|
-
|
36
|
-
|
37
|
-
|
39
|
+
z-index: 1;
|
40
|
+
position: absolute;
|
41
|
+
cursor: move;
|
38
42
|
}
|
39
43
|
.croppie-container .cr-slider-wrap {
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
text-align: center;
|
44
|
+
width: 75%;
|
45
|
+
margin: 15px auto;
|
46
|
+
text-align: center;
|
44
47
|
}
|
45
48
|
.croppie-result {
|
46
|
-
|
47
|
-
|
49
|
+
position: relative;
|
50
|
+
overflow: hidden;
|
48
51
|
}
|
49
52
|
.croppie-result img {
|
50
|
-
|
53
|
+
position: absolute;
|
54
|
+
}
|
55
|
+
.croppie-container .cr-image,
|
56
|
+
.croppie-container .cr-overlay,
|
57
|
+
.croppie-container .cr-viewport {
|
58
|
+
-webkit-transform: translateZ(0);
|
59
|
+
-moz-transform: translateZ(0);
|
60
|
+
-ms-transform: translateZ(0);
|
61
|
+
transform: translateZ(0);
|
51
62
|
}
|
52
63
|
|
53
64
|
/*************************************/
|
@@ -131,6 +142,7 @@
|
|
131
142
|
width: 16px;
|
132
143
|
border-radius: 50%;
|
133
144
|
background: #ddd;
|
145
|
+
margin-top:1px;
|
134
146
|
}
|
135
147
|
.cr-slider:focus::-ms-fill-lower {
|
136
148
|
background: rgba(0, 0, 0, 0.5);
|
@@ -0,0 +1,320 @@
|
|
1
|
+
/*
|
2
|
+
Colors
|
3
|
+
#20C1C7
|
4
|
+
#204648
|
5
|
+
#189094
|
6
|
+
#61CED2
|
7
|
+
#0C4648
|
8
|
+
*/
|
9
|
+
html,
|
10
|
+
body {
|
11
|
+
height: 100%;
|
12
|
+
padding: 0;
|
13
|
+
margin: 0;
|
14
|
+
}
|
15
|
+
|
16
|
+
body {
|
17
|
+
font-size: 14px;
|
18
|
+
color: #222;
|
19
|
+
min-height: 100%;
|
20
|
+
height: auto;
|
21
|
+
}
|
22
|
+
|
23
|
+
body,
|
24
|
+
button,
|
25
|
+
input {
|
26
|
+
font-family: 'Open Sans', sans-serif;
|
27
|
+
}
|
28
|
+
|
29
|
+
h1 {
|
30
|
+
font-size: 42px;
|
31
|
+
font-weight: 300;
|
32
|
+
padding-top: 30px;
|
33
|
+
margin: 15px 0;
|
34
|
+
}
|
35
|
+
|
36
|
+
nav {
|
37
|
+
position: absolute;
|
38
|
+
top: 0;
|
39
|
+
right: 0;
|
40
|
+
}
|
41
|
+
|
42
|
+
nav a {
|
43
|
+
color: white;
|
44
|
+
text-decoration: none;
|
45
|
+
padding: 0 10px;
|
46
|
+
}
|
47
|
+
|
48
|
+
footer {
|
49
|
+
text-align: center;
|
50
|
+
color: #555;
|
51
|
+
font-size: 12px;
|
52
|
+
padding: 5px;
|
53
|
+
}
|
54
|
+
|
55
|
+
section {
|
56
|
+
margin-bottom: 25px;
|
57
|
+
}
|
58
|
+
|
59
|
+
section.hero {
|
60
|
+
background: #20C1C7;
|
61
|
+
background: linear-gradient(#189094, #20C1C7);
|
62
|
+
color: white;
|
63
|
+
text-shadow: 0 1px 1px rgba(20,20,20,0.6);
|
64
|
+
margin-bottom: 0;
|
65
|
+
min-height: 450px;
|
66
|
+
}
|
67
|
+
.hero h2 {
|
68
|
+
font-size: 16px;
|
69
|
+
font-weight: 400;
|
70
|
+
}
|
71
|
+
|
72
|
+
section.who {
|
73
|
+
margin-bottom: 30px;
|
74
|
+
}
|
75
|
+
.section-header {
|
76
|
+
background: #204648;
|
77
|
+
padding: 5px 0;
|
78
|
+
}
|
79
|
+
|
80
|
+
input[type="number"],
|
81
|
+
input[type="text"] {
|
82
|
+
border: 1px solid #aaa;
|
83
|
+
padding: 5px;
|
84
|
+
font-size: 18px;
|
85
|
+
width: 100px;
|
86
|
+
}
|
87
|
+
|
88
|
+
button,
|
89
|
+
a.btn {
|
90
|
+
background-color: #189094;
|
91
|
+
color: white;
|
92
|
+
padding: 10px 15px;
|
93
|
+
border-radius: 3px;
|
94
|
+
border: 1px solid rgba(255, 255, 255, 0.5);
|
95
|
+
font-size: 16px;
|
96
|
+
cursor: pointer;
|
97
|
+
text-decoration: none;
|
98
|
+
text-shadow: none;
|
99
|
+
display: inline-block;
|
100
|
+
cursor: pointer;
|
101
|
+
}
|
102
|
+
input[type="file"] {
|
103
|
+
cursor: pointer;
|
104
|
+
}
|
105
|
+
button:focus {
|
106
|
+
outline: 0;
|
107
|
+
}
|
108
|
+
|
109
|
+
.file-btn {
|
110
|
+
position: relative;
|
111
|
+
}
|
112
|
+
.file-btn input[type="file"] {
|
113
|
+
position: absolute;
|
114
|
+
top: 0;
|
115
|
+
left: 0;
|
116
|
+
width: 100%;
|
117
|
+
height: 100%;
|
118
|
+
opacity: 0;
|
119
|
+
}
|
120
|
+
|
121
|
+
.actions {
|
122
|
+
padding: 5px 0;
|
123
|
+
}
|
124
|
+
.actions button {
|
125
|
+
margin-right: 5px;
|
126
|
+
}
|
127
|
+
|
128
|
+
pre[class*="language"] {
|
129
|
+
margin: 10px 0;
|
130
|
+
padding-top: 0;
|
131
|
+
border-left-color: #189094;
|
132
|
+
}
|
133
|
+
|
134
|
+
.container,
|
135
|
+
.section-header h2 {
|
136
|
+
position: relative;
|
137
|
+
max-width: 1000px;
|
138
|
+
margin: 0 auto;
|
139
|
+
min-width: 500px;
|
140
|
+
padding: 0 10px;
|
141
|
+
}
|
142
|
+
|
143
|
+
.hero p {
|
144
|
+
font-size: 16px;
|
145
|
+
}
|
146
|
+
|
147
|
+
.hero .grid {
|
148
|
+
padding-top: 50px;
|
149
|
+
}
|
150
|
+
|
151
|
+
h2 {
|
152
|
+
color: white;
|
153
|
+
font-size: 23px;
|
154
|
+
font-weight: 300;
|
155
|
+
}
|
156
|
+
|
157
|
+
.demo-wrap {
|
158
|
+
border-bottom: 1px solid #ddd;
|
159
|
+
padding-top: 20px;
|
160
|
+
}
|
161
|
+
|
162
|
+
.demo-wrap .container {
|
163
|
+
padding-bottom: 10px;
|
164
|
+
}
|
165
|
+
|
166
|
+
.demo-wrap strong {
|
167
|
+
font-size: 16px;
|
168
|
+
display: block;
|
169
|
+
font-weight: 400;
|
170
|
+
color: #aaa;
|
171
|
+
margin: 0 0 5px 0;
|
172
|
+
}
|
173
|
+
|
174
|
+
.documentation h3 {
|
175
|
+
font-size: 18px;
|
176
|
+
font-weight: 400;
|
177
|
+
border-bottom: 1px solid #0C4648;
|
178
|
+
margin: 15px 0 10px;
|
179
|
+
}
|
180
|
+
.documentation ul {
|
181
|
+
list-style: none;
|
182
|
+
padding: 0;
|
183
|
+
margin: 0;
|
184
|
+
}
|
185
|
+
|
186
|
+
.documentation section > ul > li {
|
187
|
+
margin-bottom: 1.5em;
|
188
|
+
}
|
189
|
+
|
190
|
+
.documentation p {
|
191
|
+
margin: 5px 0 10px;
|
192
|
+
}
|
193
|
+
|
194
|
+
.documentation .parameter-list li {
|
195
|
+
padding-left: 5px;
|
196
|
+
line-height: 28px;
|
197
|
+
}
|
198
|
+
.documentation .parameter-list li.values {
|
199
|
+
padding-left: 20px;
|
200
|
+
}
|
201
|
+
.documentation em {
|
202
|
+
color: #aaa;
|
203
|
+
font-style: normal;
|
204
|
+
padding: 0 10px;
|
205
|
+
}
|
206
|
+
.documentation i {
|
207
|
+
color: #666;
|
208
|
+
}
|
209
|
+
|
210
|
+
.documentation strong.focus {
|
211
|
+
font-size: 18px;
|
212
|
+
color: #189094;
|
213
|
+
font-weight: 700;
|
214
|
+
}
|
215
|
+
.documentation span.default {
|
216
|
+
padding-right: 10px;
|
217
|
+
font-weight: 600;
|
218
|
+
color: #777;
|
219
|
+
}
|
220
|
+
|
221
|
+
.upload-demo .upload-demo-wrap,
|
222
|
+
.upload-demo .upload-result,
|
223
|
+
.upload-demo.ready .upload-msg {
|
224
|
+
display: none;
|
225
|
+
}
|
226
|
+
.upload-demo.ready .upload-demo-wrap {
|
227
|
+
display: block;
|
228
|
+
}
|
229
|
+
.upload-demo.ready .upload-result {
|
230
|
+
display: inline-block;
|
231
|
+
}
|
232
|
+
.upload-demo-wrap {
|
233
|
+
width: 300px;
|
234
|
+
height: 300px;
|
235
|
+
margin: 0 auto;
|
236
|
+
}
|
237
|
+
|
238
|
+
.upload-msg {
|
239
|
+
text-align: center;
|
240
|
+
padding: 50px;
|
241
|
+
font-size: 22px;
|
242
|
+
color: #aaa;
|
243
|
+
width: 260px;
|
244
|
+
margin: 50px auto;
|
245
|
+
border: 1px solid #aaa;
|
246
|
+
}
|
247
|
+
|
248
|
+
/* Sweet alert modifications */
|
249
|
+
.sweet-alert {
|
250
|
+
width: auto;
|
251
|
+
max-width: 85%;
|
252
|
+
}
|
253
|
+
|
254
|
+
/* Grid - subset */
|
255
|
+
*, *:after, *:before {
|
256
|
+
-webkit-box-sizing: border-box;
|
257
|
+
-moz-box-sizing: border-box;
|
258
|
+
box-sizing: border-box;
|
259
|
+
}
|
260
|
+
[class*='col-'] {
|
261
|
+
float: left;
|
262
|
+
padding-right: 20px; /* column-space */
|
263
|
+
}
|
264
|
+
|
265
|
+
.grid {
|
266
|
+
width: 100%;
|
267
|
+
max-width: 1140px;
|
268
|
+
min-width: 755px;
|
269
|
+
margin: 0 auto;
|
270
|
+
overflow: hidden;
|
271
|
+
}
|
272
|
+
.grid:after {
|
273
|
+
content: "";
|
274
|
+
display: table;
|
275
|
+
clear: both;
|
276
|
+
}
|
277
|
+
|
278
|
+
.col-1-2 {
|
279
|
+
width: 50%;
|
280
|
+
}
|
281
|
+
|
282
|
+
.col-1-3 {
|
283
|
+
width: 33.33%;
|
284
|
+
}
|
285
|
+
.col-2-3 {
|
286
|
+
width: 66.66%;
|
287
|
+
}
|
288
|
+
.col-1-4 {
|
289
|
+
width: 25%;
|
290
|
+
}
|
291
|
+
.col-3-4 {
|
292
|
+
width: 75%;
|
293
|
+
}
|
294
|
+
|
295
|
+
@media handheld, only screen and (max-width: 767px) {
|
296
|
+
.grid {
|
297
|
+
width: 100%;
|
298
|
+
min-width: 0;
|
299
|
+
margin-left: 0;
|
300
|
+
margin-right: 0;
|
301
|
+
padding-left: 20px; /* grid-space to left */
|
302
|
+
padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */
|
303
|
+
}
|
304
|
+
|
305
|
+
[class*='col-'] {
|
306
|
+
width: auto;
|
307
|
+
float: none;
|
308
|
+
margin: 10px 0;
|
309
|
+
padding-left: 0;
|
310
|
+
padding-right: 10px; /* column-space */
|
311
|
+
}
|
312
|
+
.container,
|
313
|
+
.section-header h2 {
|
314
|
+
min-width: 0;
|
315
|
+
}
|
316
|
+
|
317
|
+
.croppie-container {
|
318
|
+
padding: 30px 0;
|
319
|
+
}
|
320
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: croppie_rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.
|
4
|
+
version: 2.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Luiz Picolo
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-
|
11
|
+
date: 2016-11-06 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -75,6 +75,9 @@ extra_rdoc_files: []
|
|
75
75
|
files:
|
76
76
|
- ".gitignore"
|
77
77
|
- ".rspec"
|
78
|
+
- ".ruby-gemset"
|
79
|
+
- ".ruby-version"
|
80
|
+
- ".travis.yml"
|
78
81
|
- CODE_OF_CONDUCT.md
|
79
82
|
- Gemfile
|
80
83
|
- LICENSE.txt
|
@@ -89,6 +92,7 @@ files:
|
|
89
92
|
- vendor/assets/javascripts/croppie.js
|
90
93
|
- vendor/assets/javascripts/demo_croppie.js
|
91
94
|
- vendor/assets/stylesheets/croppie.css
|
95
|
+
- vendor/assets/stylesheets/demo_croppie.css
|
92
96
|
homepage: https://github.com/luizpicolo/croppie_rails
|
93
97
|
licenses:
|
94
98
|
- MIT
|
@@ -109,7 +113,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
109
113
|
version: '0'
|
110
114
|
requirements: []
|
111
115
|
rubyforge_project:
|
112
|
-
rubygems_version: 2.4.
|
116
|
+
rubygems_version: 2.4.6
|
113
117
|
signing_key:
|
114
118
|
specification_version: 4
|
115
119
|
summary: A gem to automate using Croppie with Rails
|