croppie_rails 0.1.1

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.
@@ -0,0 +1,190 @@
1
+ var Demo = (function() {
2
+
3
+ function output(node) {
4
+ var existing = $('#result .croppie-result');
5
+ if (existing.length > 0) {
6
+ existing[0].parentNode.replaceChild(node, existing[0]);
7
+ }
8
+ else {
9
+ $('#result')[0].appendChild(node);
10
+ }
11
+ }
12
+
13
+ function popupResult(result) {
14
+ var html;
15
+ if (result.html) {
16
+ html = result.html;
17
+ }
18
+ if (result.src) {
19
+ html = '<img src="' + result.src + '" />';
20
+ }
21
+ swal({
22
+ title: '',
23
+ html: true,
24
+ text: html,
25
+ allowOutsideClick: true
26
+ });
27
+ setTimeout(function(){
28
+ $('.sweet-alert').css('margin', function() {
29
+ var top = -1 * ($(this).height() / 2),
30
+ left = -1 * ($(this).width() / 2);
31
+
32
+ return top + 'px 0 0 ' + left + 'px';
33
+ });
34
+ }, 1);
35
+ }
36
+
37
+ function demoMain(img) {
38
+ var mc = $('#cropper-1');
39
+ mc.croppie({
40
+ viewport: {
41
+ width: 150,
42
+ height: 150,
43
+ type: 'circle'
44
+ }
45
+ // mouseWheelZoom: false
46
+ });
47
+ mc.croppie('bind', img);
48
+ $('.js-main-image').on('click', function (ev) {
49
+ mc.croppie('result', {
50
+ type: 'canvas',
51
+ format: 'jpeg'
52
+ }).then(function (resp) {
53
+ popupResult({
54
+ src: resp
55
+ });
56
+ });
57
+ });
58
+ }
59
+
60
+ function demoBasic(img) {
61
+ var basic = $('#demo-basic').croppie({
62
+ viewport: {
63
+ width: 150,
64
+ height: 200
65
+ }
66
+ });
67
+ basic.croppie('bind', {
68
+ url: img,
69
+ points: [77,469,280,739]
70
+ });
71
+ $('.basic-result').on('click', function() {
72
+ basic.croppie('result', 'html').then(function (resp) {
73
+ popupResult({
74
+ html: resp.outerHTML
75
+ });
76
+ });
77
+ });
78
+ }
79
+
80
+ function demoVanilla(img) {
81
+ if ($('vanilla-demo').lenght){
82
+ var vanilla = new Croppie(document.getElementById('vanilla-demo'), {
83
+ viewport: { width: 100, height: 100 },
84
+ boundary: { width: 300, height: 300 },
85
+ showZoomer: false
86
+ });
87
+ vanilla.bind(img);
88
+ document.querySelector('.vanilla-result').addEventListener('click', function (ev) {
89
+ vanilla.result('canvas').then(function (src) {
90
+ popupResult({
91
+ src: src
92
+ });
93
+ });
94
+ });
95
+ }
96
+ }
97
+
98
+ function demoUpload() {
99
+ var $uploadCrop;
100
+
101
+ function readFile(input) {
102
+ if (input.files && input.files[0]) {
103
+ var reader = new FileReader();
104
+
105
+ reader.onload = function (e) {
106
+ $uploadCrop.croppie('bind', {
107
+ url: e.target.result
108
+ });
109
+ $('.upload-demo').addClass('ready');
110
+ }
111
+
112
+ reader.readAsDataURL(input.files[0]);
113
+ }
114
+ else {
115
+ swal("Sorry - you're browser doesn't support the FileReader API");
116
+ }
117
+ }
118
+
119
+ $uploadCrop = $('#upload-demo').croppie({
120
+ viewport: {
121
+ width: 200,
122
+ height: 200,
123
+ type: 'circle'
124
+ },
125
+ boundary: {
126
+ width: 300,
127
+ height: 300
128
+ },
129
+ exif: true
130
+ });
131
+
132
+ $('#upload').on('change', function () { readFile(this); });
133
+ $('.upload-result').on('click', function (ev) {
134
+ $uploadCrop.croppie('result', {
135
+ type: 'canvas',
136
+ size: 'viewport'
137
+ }).then(function (resp) {
138
+ popupResult({
139
+ src: resp
140
+ });
141
+ });
142
+ });
143
+ }
144
+
145
+ function demoHidden(img) {
146
+ var $hid = $('#hidden-demo');
147
+
148
+ $hid.croppie({
149
+ viewport: {
150
+ width: 175,
151
+ height: 175,
152
+ type: 'circle'
153
+ },
154
+ boundary: {
155
+ width: 200,
156
+ height: 200
157
+ }
158
+ });
159
+ $hid.croppie('bind', img);
160
+ $('.show-hidden').on('click', function () {
161
+ $hid.toggle();
162
+ $hid.croppie('bind');
163
+ });
164
+ }
165
+
166
+ function bindNavigation () {
167
+ var $body = $('body');
168
+ $('nav a').on('click', function (ev) {
169
+ var lnk = $(ev.currentTarget),
170
+ href = lnk.attr('href'),
171
+ targetTop = $('a[name=' + href.substring(1) + ']').offset().top;
172
+
173
+ $body.animate({ scrollTop: targetTop });
174
+ ev.preventDefault();
175
+ });
176
+ }
177
+
178
+ function init(img) {
179
+ bindNavigation();
180
+ demoMain(img);
181
+ demoBasic(img);
182
+ demoVanilla(img);
183
+ demoUpload();
184
+ demoHidden(img);
185
+ }
186
+
187
+ return {
188
+ init: init
189
+ };
190
+ })();
@@ -0,0 +1,162 @@
1
+ .croppie-container {
2
+ padding: 30px;
3
+ }
4
+ .croppie-container .cr-image {
5
+ z-index: -1;
6
+ position: absolute;
7
+ top: 0;
8
+ left: 0;
9
+ transform-origin: 0 0;
10
+ max-width: none;
11
+ }
12
+
13
+ .croppie-container .cr-boundary {
14
+ position: relative;
15
+ overflow: hidden;
16
+ margin: 0 auto;
17
+ z-index: 1;
18
+ }
19
+
20
+ .croppie-container .cr-viewport {
21
+ position: absolute;
22
+ border: 2px solid #fff;
23
+ margin: auto;
24
+ top: 0;
25
+ bottom: 0;
26
+ right: 0;
27
+ left: 0;
28
+ box-shadow:0 0 0 899px rgba(0, 0, 0, 0.5);
29
+ z-index: 0;
30
+ }
31
+ .croppie-container .cr-vp-circle {
32
+ border-radius: 50%;
33
+ }
34
+ .croppie-container .cr-overlay {
35
+ z-index: 1;
36
+ position: absolute;
37
+ cursor: move;
38
+ }
39
+ .croppie-container .cr-slider-wrap {
40
+ width: 75%;
41
+ margin: 0 auto;
42
+ margin-top: 25px;
43
+ text-align: center;
44
+ }
45
+ .croppie-result {
46
+ position: relative;
47
+ overflow: hidden;
48
+ }
49
+ .croppie-result img {
50
+ position: absolute;
51
+ }
52
+
53
+ /*************************************/
54
+ /***** STYLING RANGE INPUT ***********/
55
+ /*************************************/
56
+ /*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
57
+ /*************************************/
58
+
59
+ .cr-slider {
60
+ -webkit-appearance: none;/*removes default webkit styles*/
61
+ /*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
62
+ width: 300px;/*required for proper track sizing in FF*/
63
+ max-width: 100%;
64
+ }
65
+ .cr-slider::-webkit-slider-runnable-track {
66
+ width: 100%;
67
+ height: 3px;
68
+ background: rgba(0, 0, 0, 0.5);
69
+ border: 0;
70
+ border-radius: 3px;
71
+ }
72
+ .cr-slider::-webkit-slider-thumb {
73
+ -webkit-appearance: none;
74
+ border: none;
75
+ height: 16px;
76
+ width: 16px;
77
+ border-radius: 50%;
78
+ background: #ddd;
79
+ margin-top: -6px;
80
+ }
81
+ .cr-slider:focus {
82
+ outline: none;
83
+ }
84
+ /*
85
+ .cr-slider:focus::-webkit-slider-runnable-track {
86
+ background: #ccc;
87
+ }
88
+ */
89
+
90
+ .cr-slider::-moz-range-track {
91
+ width: 100%;
92
+ height: 3px;
93
+ background: rgba(0, 0, 0, 0.5);
94
+ border: 0;
95
+ border-radius: 3px;
96
+ }
97
+ .cr-slider::-moz-range-thumb {
98
+ border: none;
99
+ height: 16px;
100
+ width: 16px;
101
+ border-radius: 50%;
102
+ background: #ddd;
103
+ margin-top: -6px;
104
+ }
105
+
106
+ /*hide the outline behind the border*/
107
+ .cr-slider:-moz-focusring{
108
+ outline: 1px solid white;
109
+ outline-offset: -1px;
110
+ }
111
+
112
+ .cr-slider::-ms-track {
113
+ width: 300px;
114
+ height: 5px;
115
+ background: transparent;/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
116
+ border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
117
+ border-width: 6px 0;
118
+ color: transparent;/*remove default tick marks*/
119
+ }
120
+ .cr-slider::-ms-fill-lower {
121
+ background: rgba(0, 0, 0, 0.5);
122
+ border-radius: 10px;
123
+ }
124
+ .cr-slider::-ms-fill-upper {
125
+ background: rgba(0, 0, 0, 0.5);
126
+ border-radius: 10px;
127
+ }
128
+ .cr-slider::-ms-thumb {
129
+ border: none;
130
+ height: 16px;
131
+ width: 16px;
132
+ border-radius: 50%;
133
+ background: #ddd;
134
+ }
135
+ .cr-slider:focus::-ms-fill-lower {
136
+ background: rgba(0, 0, 0, 0.5);
137
+ }
138
+ .cr-slider:focus::-ms-fill-upper {
139
+ background: rgba(0, 0, 0, 0.5);
140
+ }
141
+ /*******************************************/
142
+
143
+
144
+ /* Just cross hairs for debugging - can be removed upon release */
145
+ .croppie-container .cr-viewport.debug:before,
146
+ .croppie-container .cr-viewport.debug:after {
147
+ background: white;
148
+ width: 1px;
149
+ height: 1px;
150
+ content: '';
151
+ position: absolute;
152
+ }
153
+ .croppie-container .cr-viewport.debug:before {
154
+ top: 0;
155
+ height: 100%;
156
+ left: 50%;
157
+ }
158
+ .croppie-container .cr-viewport.debug:after {
159
+ top: 50%;
160
+ left: 0;
161
+ width: 100%;
162
+ }
metadata ADDED
@@ -0,0 +1,116 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: croppie_rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.1
5
+ platform: ruby
6
+ authors:
7
+ - Luiz Picolo
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2016-03-16 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.11'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.11'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: rspec
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - "~>"
46
+ - !ruby/object:Gem::Version
47
+ version: '3.0'
48
+ type: :development
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - "~>"
53
+ - !ruby/object:Gem::Version
54
+ version: '3.0'
55
+ - !ruby/object:Gem::Dependency
56
+ name: rails
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - "~>"
60
+ - !ruby/object:Gem::Version
61
+ version: '4.1'
62
+ type: :development
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - "~>"
67
+ - !ruby/object:Gem::Version
68
+ version: '4.1'
69
+ description: A gem to automate using Croppie with Rails
70
+ email:
71
+ - luizpicolo@gmail.com
72
+ executables: []
73
+ extensions: []
74
+ extra_rdoc_files: []
75
+ files:
76
+ - ".gitignore"
77
+ - ".rspec"
78
+ - CODE_OF_CONDUCT.md
79
+ - Gemfile
80
+ - LICENSE.txt
81
+ - README.md
82
+ - Rakefile
83
+ - bin/console
84
+ - bin/setup
85
+ - croppie_rails.gemspec
86
+ - lib/croppie_rails.rb
87
+ - lib/croppie_rails/engine.rb
88
+ - lib/croppie_rails/version.rb
89
+ - vendor/assets/javascripts/croppie.js
90
+ - vendor/assets/javascripts/demo_croppie.js
91
+ - vendor/assets/stylesheets/croppie.css
92
+ homepage: https://github.com/luizpicolo/croppie_rails
93
+ licenses:
94
+ - MIT
95
+ metadata: {}
96
+ post_install_message:
97
+ rdoc_options: []
98
+ require_paths:
99
+ - lib
100
+ required_ruby_version: !ruby/object:Gem::Requirement
101
+ requirements:
102
+ - - ">="
103
+ - !ruby/object:Gem::Version
104
+ version: '0'
105
+ required_rubygems_version: !ruby/object:Gem::Requirement
106
+ requirements:
107
+ - - ">="
108
+ - !ruby/object:Gem::Version
109
+ version: '0'
110
+ requirements: []
111
+ rubyforge_project:
112
+ rubygems_version: 2.4.8
113
+ signing_key:
114
+ specification_version: 4
115
+ summary: A gem to automate using Croppie with Rails
116
+ test_files: []