jquery-cropper 0.3.4 → 0.3.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +8 -8
- data/app/assets/javascripts/cropper.js +62 -70
- data/app/assets/stylesheets/cropper.scss +5 -10
- data/lib/jquery/cropper/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
MGRkOWE3NTdjYmVhNzZiYTAxNzJkNGUyMTliNGYzM2IwYTVkNzhjOA==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
ZjI5NWM4MzRlZmExMzM3NmYyODhlMTcyOWYwY2E0ZDM5MWY5M2IxYw==
|
7
7
|
SHA512:
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
YmVmN2Q2ZGUwODQ4OTUzNmFmZTQwMTJhZDYzMWUyZTgzY2MxMzM1NjMzNGNl
|
10
|
+
YmZiNDIzODZlYjliMjBhMDM0Mjk5NGZjZDcwY2Q1Nzg2YzcyYWNhZWVhODdk
|
11
|
+
NTAxMjgyMzliNDczZTJlMGM0YTNiY2YzZmMwYTFkNjdjMWI2NGQ=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
OWM1MTE2OWY2ZjdjZmQyOTkzN2Q5MjhkNDcyMTBhYjllYjYzMzIwYzQ0ZGI1
|
14
|
+
ZDc3MTYzMDBmNDU3NDg1ZGNkZTM4ZjYwMTI1ZTA3NDlhNTg3OTMzYzFhMDMx
|
15
|
+
Y2U2OWY2MDdjNTEzYjMzOGZlNDliMjk5OGEzMTgzYzg2YjMwOWE=
|
@@ -1,4 +1,4 @@
|
|
1
|
-
(function
|
1
|
+
(function(factory) {
|
2
2
|
if (typeof define === "function" && define.amd) {
|
3
3
|
// AMD. Register as anonymous module.
|
4
4
|
define(["jquery"], factory);
|
@@ -6,12 +6,12 @@
|
|
6
6
|
// Browser globals.
|
7
7
|
factory(jQuery);
|
8
8
|
}
|
9
|
-
}
|
9
|
+
}(function($) {
|
10
10
|
|
11
11
|
"use strict";
|
12
12
|
|
13
13
|
var $window = $(window),
|
14
|
-
Cropper = function
|
14
|
+
Cropper = function(element, options) {
|
15
15
|
options = $.isPlainObject(options) ? options : {};
|
16
16
|
this.$image = $(element);
|
17
17
|
this.defaults = $.extend({}, Cropper.defaults, this.$image.data(), options);
|
@@ -21,13 +21,13 @@
|
|
21
21
|
Cropper.prototype = {
|
22
22
|
construstor: Cropper,
|
23
23
|
|
24
|
-
init: function
|
24
|
+
init: function() {
|
25
25
|
this.setAspectRatio(this.defaults.aspectRatio);
|
26
26
|
this.render();
|
27
27
|
},
|
28
28
|
|
29
|
-
render: function
|
30
|
-
var
|
29
|
+
render: function(callback) {
|
30
|
+
var that = this,
|
31
31
|
$image = this.$image,
|
32
32
|
$clone,
|
33
33
|
src;
|
@@ -43,7 +43,7 @@
|
|
43
43
|
src = $image.attr("src"); // Don't use "prop"
|
44
44
|
$clone = $('<img src="' + src + '">');
|
45
45
|
|
46
|
-
$clone.on("load", function
|
46
|
+
$clone.on("load", function() {
|
47
47
|
var image;
|
48
48
|
|
49
49
|
$clone.off("load");
|
@@ -72,10 +72,10 @@
|
|
72
72
|
});
|
73
73
|
|
74
74
|
image.aspectRatio = image.naturalWidth / image.naturalHeight;
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
75
|
+
that.src = src;
|
76
|
+
that.image = image;
|
77
|
+
that.active = true;
|
78
|
+
that.createCropper();
|
79
79
|
});
|
80
80
|
|
81
81
|
if ($.isFunction(callback)) {
|
@@ -86,7 +86,7 @@
|
|
86
86
|
$image.after($clone);
|
87
87
|
},
|
88
88
|
|
89
|
-
unrender: function
|
89
|
+
unrender: function() {
|
90
90
|
if (this.active) {
|
91
91
|
this.active = false;
|
92
92
|
this.removeCropper();
|
@@ -95,27 +95,19 @@
|
|
95
95
|
this.cropper = null;
|
96
96
|
this.dragger = null;
|
97
97
|
}
|
98
|
-
|
99
|
-
return this;
|
100
98
|
},
|
101
99
|
|
102
|
-
rerender: function
|
103
|
-
|
104
|
-
|
105
|
-
this.unrender().render(function () {
|
106
|
-
if (!reset) {
|
107
|
-
_this.setData(_this.data); // Restore
|
108
|
-
}
|
109
|
-
});
|
100
|
+
rerender: function() {
|
101
|
+
this.unrender();
|
102
|
+
this.render();
|
110
103
|
},
|
111
104
|
|
112
|
-
resize: function
|
113
|
-
this.data = this.getData(); // Record the current data
|
105
|
+
resize: function() {
|
114
106
|
clearTimeout(this.resizing);
|
115
107
|
this.resizing = setTimeout($.proxy(this.rerender, this), 200);
|
116
108
|
},
|
117
109
|
|
118
|
-
createCropper: function
|
110
|
+
createCropper: function() {
|
119
111
|
this.$cropper = $(Cropper.template);
|
120
112
|
this.$dragger = this.$cropper.find(".cropper-dragger");
|
121
113
|
Cropper.fn.toggle(this.$image);
|
@@ -130,7 +122,7 @@
|
|
130
122
|
this.addListener();
|
131
123
|
},
|
132
124
|
|
133
|
-
removeCropper: function
|
125
|
+
removeCropper: function() {
|
134
126
|
this.removeListener();
|
135
127
|
this.$preview = null;
|
136
128
|
this.$clone.remove();
|
@@ -141,21 +133,21 @@
|
|
141
133
|
Cropper.fn.toggle(this.$image);
|
142
134
|
},
|
143
135
|
|
144
|
-
addListener: function
|
136
|
+
addListener: function() {
|
145
137
|
this.$cropper.bind("mousedown touchstart", $.proxy(this.dragstart, this));
|
146
138
|
this.$cropper.bind("mousemove touchmove", $.proxy(this.dragmove, this));
|
147
139
|
this.$cropper.bind("mouseup mouseleave touchend touchleave", $.proxy(this.dragend, this));
|
148
140
|
$window.on("resize", $.proxy(this.resize, this));
|
149
141
|
},
|
150
142
|
|
151
|
-
removeListener: function
|
143
|
+
removeListener: function() {
|
152
144
|
this.$cropper.unbind("mousedown touchstart", this.dragstart);
|
153
145
|
this.$cropper.unbind("mousemove touchmove", this.dragmove);
|
154
146
|
this.$cropper.unbind("mouseup mouseleave touchend touchleave", this.dragend);
|
155
147
|
$window.off("resize", this.resize);
|
156
148
|
},
|
157
149
|
|
158
|
-
setPreview: function
|
150
|
+
setPreview: function() {
|
159
151
|
var preview = this.defaults.preview;
|
160
152
|
|
161
153
|
this.$preview = this.$cropper.find(".cropper-preview");
|
@@ -168,7 +160,7 @@
|
|
168
160
|
this.setCropper();
|
169
161
|
},
|
170
162
|
|
171
|
-
setCropper: function
|
163
|
+
setCropper: function() {
|
172
164
|
var $container = this.$image.parent(),
|
173
165
|
container = Cropper.fn.size($container),
|
174
166
|
image = this.image,
|
@@ -192,7 +184,7 @@
|
|
192
184
|
cropper.left = (container.width - cropper.width) / 2;
|
193
185
|
}
|
194
186
|
|
195
|
-
$.each(cropper, function
|
187
|
+
$.each(cropper, function(i, n) {
|
196
188
|
cropper[i] = Math.round(n);
|
197
189
|
});
|
198
190
|
|
@@ -212,7 +204,7 @@
|
|
212
204
|
this.setDragger();
|
213
205
|
},
|
214
206
|
|
215
|
-
setDragger: function
|
207
|
+
setDragger: function() {
|
216
208
|
var cropper = this.cropper,
|
217
209
|
// If not set, use the original aspect ratio of the image.
|
218
210
|
aspectRatio = this.defaults.aspectRatio || this.image.aspectRatio,
|
@@ -249,7 +241,7 @@
|
|
249
241
|
this.$image.trigger("ready.cropper").off("ready.cropper");
|
250
242
|
},
|
251
243
|
|
252
|
-
resetDragger: function
|
244
|
+
resetDragger: function() {
|
253
245
|
var dragger = this.dragger,
|
254
246
|
cropper = this.cropper;
|
255
247
|
|
@@ -276,7 +268,7 @@
|
|
276
268
|
this.output();
|
277
269
|
},
|
278
270
|
|
279
|
-
dragging: function
|
271
|
+
dragging: function() {
|
280
272
|
var direction = this.direction,
|
281
273
|
dragger = this.dragger,
|
282
274
|
aspectRatio = this.defaults.aspectRatio,
|
@@ -439,16 +431,16 @@
|
|
439
431
|
this.startY = this.endY;
|
440
432
|
},
|
441
433
|
|
442
|
-
output: function
|
434
|
+
output: function() {
|
443
435
|
this.defaults.done(this.getData());
|
444
436
|
},
|
445
437
|
|
446
|
-
preview: function
|
447
|
-
var
|
448
|
-
cropper =
|
449
|
-
dragger =
|
438
|
+
preview: function() {
|
439
|
+
var that = this,
|
440
|
+
cropper = that.cropper,
|
441
|
+
dragger = that.dragger;
|
450
442
|
|
451
|
-
this.$preview.each(function
|
443
|
+
this.$preview.each(function() {
|
452
444
|
var $this = $(this),
|
453
445
|
ratio = $this.width() / dragger.width,
|
454
446
|
styles = {
|
@@ -459,7 +451,7 @@
|
|
459
451
|
};
|
460
452
|
|
461
453
|
$this.css({overflow: "hidden"});
|
462
|
-
$this.find("img").css(Cropper.fn.round(styles, function
|
454
|
+
$this.find("img").css(Cropper.fn.round(styles, function(n) {
|
463
455
|
return n * ratio;
|
464
456
|
}));
|
465
457
|
});
|
@@ -467,15 +459,15 @@
|
|
467
459
|
|
468
460
|
// Public methods
|
469
461
|
|
470
|
-
enable: function
|
462
|
+
enable: function(callback) {
|
471
463
|
this.render(callback);
|
472
464
|
},
|
473
465
|
|
474
|
-
disable: function
|
466
|
+
disable: function() {
|
475
467
|
this.unrender();
|
476
468
|
},
|
477
469
|
|
478
|
-
setAspectRatio: function
|
470
|
+
setAspectRatio: function(aspectRatio) {
|
479
471
|
if (aspectRatio === "auto" || ($.isNumeric(aspectRatio) && aspectRatio > 0)) {
|
480
472
|
this.defaults.aspectRatio = aspectRatio === "auto" ? NaN : aspectRatio;
|
481
473
|
|
@@ -485,11 +477,11 @@
|
|
485
477
|
}
|
486
478
|
},
|
487
479
|
|
488
|
-
setData: function
|
480
|
+
setData: function(data) {
|
489
481
|
var cropper = this.cropper,
|
490
482
|
dragger = this.dragger,
|
491
483
|
aspectRatio = this.defaults.aspectRatio,
|
492
|
-
isNumber = function
|
484
|
+
isNumber = function(n) {
|
493
485
|
return typeof n === "number";
|
494
486
|
};
|
495
487
|
|
@@ -541,7 +533,7 @@
|
|
541
533
|
this.resetDragger();
|
542
534
|
},
|
543
535
|
|
544
|
-
getData: function
|
536
|
+
getData: function() {
|
545
537
|
var dragger = this.dragger,
|
546
538
|
data = {};
|
547
539
|
|
@@ -561,20 +553,20 @@
|
|
561
553
|
return data;
|
562
554
|
},
|
563
555
|
|
564
|
-
setImgSrc: function
|
556
|
+
setImgSrc: function(src) {
|
565
557
|
if (typeof src === "string" && src.length > 0 && src !== this.src) {
|
566
558
|
this.$image.attr("src", src);
|
567
|
-
this.rerender(
|
559
|
+
this.rerender();
|
568
560
|
}
|
569
561
|
},
|
570
562
|
|
571
|
-
getImgInfo: function
|
563
|
+
getImgInfo: function() {
|
572
564
|
return this.image || {};
|
573
565
|
},
|
574
566
|
|
575
567
|
// Public events
|
576
568
|
|
577
|
-
dragstart: function
|
569
|
+
dragstart: function(event) {
|
578
570
|
var touches = Cropper.fn.getOriginalEvent(event).touches,
|
579
571
|
e = event,
|
580
572
|
touching,
|
@@ -597,7 +589,7 @@
|
|
597
589
|
}
|
598
590
|
},
|
599
591
|
|
600
|
-
dragmove: function
|
592
|
+
dragmove: function(event) {
|
601
593
|
var touches = Cropper.fn.getOriginalEvent(event).changedTouches,
|
602
594
|
e = event,
|
603
595
|
touching;
|
@@ -620,7 +612,7 @@
|
|
620
612
|
}
|
621
613
|
},
|
622
614
|
|
623
|
-
dragend: function
|
615
|
+
dragend: function(event) {
|
624
616
|
var touches = Cropper.fn.getOriginalEvent(event).changedTouches,
|
625
617
|
e = event,
|
626
618
|
touching;
|
@@ -644,11 +636,11 @@
|
|
644
636
|
|
645
637
|
// Common methods
|
646
638
|
Cropper.fn = {
|
647
|
-
toggle: function
|
639
|
+
toggle: function($e) {
|
648
640
|
$e.toggleClass("cropper-hidden");
|
649
641
|
},
|
650
642
|
|
651
|
-
position: function
|
643
|
+
position: function($e, option) {
|
652
644
|
var position = $e.css("position");
|
653
645
|
|
654
646
|
if (position === "static") {
|
@@ -656,7 +648,7 @@
|
|
656
648
|
}
|
657
649
|
},
|
658
650
|
|
659
|
-
size: function
|
651
|
+
size: function($e, options) {
|
660
652
|
if ($.isPlainObject(options)) {
|
661
653
|
$e.css(options);
|
662
654
|
} else {
|
@@ -667,7 +659,7 @@
|
|
667
659
|
}
|
668
660
|
},
|
669
661
|
|
670
|
-
round: function
|
662
|
+
round: function(data, fn) {
|
671
663
|
var value,
|
672
664
|
i;
|
673
665
|
|
@@ -682,12 +674,12 @@
|
|
682
674
|
return data;
|
683
675
|
},
|
684
676
|
|
685
|
-
transformData: function
|
686
|
-
var
|
677
|
+
transformData: function(data, ratio) {
|
678
|
+
var that = this,
|
687
679
|
result = {};
|
688
680
|
|
689
|
-
$.each(data, function
|
690
|
-
if (
|
681
|
+
$.each(data, function(i, n) {
|
682
|
+
if (that.isDataOption(i) && $.isNumeric(n) && n >= 0) {
|
691
683
|
result[i] = Math.round(n * ratio);
|
692
684
|
}
|
693
685
|
});
|
@@ -695,7 +687,7 @@
|
|
695
687
|
return result;
|
696
688
|
},
|
697
689
|
|
698
|
-
getOriginalEvent: function
|
690
|
+
getOriginalEvent: function(event) {
|
699
691
|
if (event && typeof event.originalEvent !== "undefined") {
|
700
692
|
event = event.originalEvent;
|
701
693
|
}
|
@@ -703,11 +695,11 @@
|
|
703
695
|
return event;
|
704
696
|
},
|
705
697
|
|
706
|
-
isDataOption: function
|
698
|
+
isDataOption: function(s) {
|
707
699
|
return /^(x1|y1|x2|y2|width|height)$/i.test(s);
|
708
700
|
},
|
709
701
|
|
710
|
-
isDirection: function
|
702
|
+
isDirection: function(s) {
|
711
703
|
return /^(\*|e|n|w|s|ne|nw|sw|se)$/i.test(s);
|
712
704
|
}
|
713
705
|
};
|
@@ -739,20 +731,20 @@
|
|
739
731
|
Cropper.defaults = {
|
740
732
|
aspectRatio: "auto",
|
741
733
|
data: {},
|
742
|
-
done: function
|
734
|
+
done: function(/* data */) {},
|
743
735
|
modal: true,
|
744
736
|
preview: ""
|
745
737
|
};
|
746
738
|
|
747
|
-
Cropper.setDefaults = function
|
739
|
+
Cropper.setDefaults = function(options) {
|
748
740
|
$.extend(Cropper.defaults, options);
|
749
741
|
};
|
750
742
|
|
751
743
|
// Register as jQuery plugin
|
752
|
-
$.fn.cropper = function
|
744
|
+
$.fn.cropper = function(options, settings) {
|
753
745
|
var result = this;
|
754
746
|
|
755
|
-
this.each(function
|
747
|
+
this.each(function() {
|
756
748
|
var $this = $(this),
|
757
749
|
data = $this.data("cropper");
|
758
750
|
|
@@ -772,7 +764,7 @@
|
|
772
764
|
$.fn.cropper.Constructor = Cropper;
|
773
765
|
$.fn.cropper.setDefaults = Cropper.setDefaults;
|
774
766
|
|
775
|
-
$(function
|
767
|
+
$(function() {
|
776
768
|
$("img[cropper]").cropper();
|
777
769
|
});
|
778
|
-
});
|
770
|
+
}));
|
@@ -11,11 +11,6 @@
|
|
11
11
|
-webkit-touch-callout: none;
|
12
12
|
}
|
13
13
|
|
14
|
-
.cropper-container img {
|
15
|
-
max-width: none !important;
|
16
|
-
max-height: none !important;
|
17
|
-
}
|
18
|
-
|
19
14
|
.cropper-container .cropper-modal {
|
20
15
|
position: absolute;
|
21
16
|
top: 0;
|
@@ -43,25 +38,25 @@
|
|
43
38
|
-moz-box-sizing: border-box;
|
44
39
|
box-sizing: border-box;
|
45
40
|
overflow: hidden;
|
41
|
+
border-width: 1px;
|
46
42
|
border-color: #69f;
|
47
43
|
border-color: rgba(51, 102, 255, .75);
|
48
44
|
border-style: solid;
|
49
|
-
border-width: 1px;
|
50
45
|
}
|
51
46
|
|
52
47
|
.cropper-container .cropper-dashed {
|
53
48
|
position: absolute;
|
54
49
|
display: block;
|
55
50
|
filter: alpha(opacity=50);
|
56
|
-
border: 0 dashed #fff;
|
57
51
|
opacity: .5;
|
52
|
+
border: 0 dashed #fff;
|
58
53
|
}
|
59
54
|
|
60
55
|
.cropper-container .dashed-h {
|
61
56
|
top: 33.3%;
|
62
57
|
left: 0;
|
63
|
-
width: 100%;
|
64
58
|
height: 33.3%;
|
59
|
+
width: 100%;
|
65
60
|
border-top-width: 1px;
|
66
61
|
border-bottom-width: 1px;
|
67
62
|
}
|
@@ -69,8 +64,8 @@
|
|
69
64
|
.cropper-container .dashed-v {
|
70
65
|
top: 0;
|
71
66
|
left: 33.3%;
|
72
|
-
width: 33.3%;
|
73
67
|
height: 100%;
|
68
|
+
width: 33.3%;
|
74
69
|
border-right-width: 1px;
|
75
70
|
border-left-width: 1px;
|
76
71
|
}
|
@@ -190,8 +185,8 @@
|
|
190
185
|
right: -50%;
|
191
186
|
bottom: -50%;
|
192
187
|
display: block;
|
193
|
-
width: 200%;
|
194
188
|
height: 200%;
|
189
|
+
width: 200%;
|
195
190
|
content: " ";
|
196
191
|
background-color: #69f;
|
197
192
|
filter: alpha(opacity=0);
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jquery-cropper
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.3.
|
4
|
+
version: 0.3.31
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Vitaliy Yanchuk
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2014-
|
11
|
+
date: 2014-06-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|