simple_form_bs5_file_input 0.2.1 → 0.3.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.
Files changed (9) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +0 -1
  3. data/Gemfile.lock +144 -135
  4. data/README.md +1 -3
  5. data/assets/javascripts/polyfills/element_closest.js +18 -0
  6. data/assets/javascripts/simple_form_bs5_file_input.js +124 -101
  7. data/lib/has_one_attached_deletable.rb +4 -0
  8. data/lib/simple_form_bs5_file_input/version.rb +1 -1
  9. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8f3768368abae3e5c352f6cebc4fcf5d164c70382a91ef3c3aa4e79b69d1d8fe
4
- data.tar.gz: ccab858f139fa40fbd3299b284af68705088b31045e228e3e57979c8e7c2e9c8
3
+ metadata.gz: 571aeb22f6990e2036122289c282c284b6cabd709188d65860f51ab41da177b4
4
+ data.tar.gz: b859bb2e11e80a1f41df47c1e6a361798b23598a13a186dfbf60fd567ef4c626
5
5
  SHA512:
6
- metadata.gz: 95c21f322ffe355b636ebf2d2978a4fe1175401847b03830fdfdcdbf2fe351585247a601df7eb8e38885b0ac772893318793c73ce8dd80ce15fd3b78bd72c91d
7
- data.tar.gz: 23c71278b3ee98531b7799a4f8c51e477022669702ba7aea6d0d187ebd251dd59b405252cd552822c6d01fa8bcb225b53b0da1f99c46e5d89cf749ed1ea9d027
6
+ metadata.gz: 025d702681c9879c047c2f28c50fe71e8ebb9479a6c727b0bc895eeca6a82a933f63d7779f9a94e0aa776ca304716744b6aaa3a642183dea67936e1697861a3e
7
+ data.tar.gz: 8726bfd3e0f5b70a92ba71769252e2445e7f6fd3e8c5c4726920ea47d80cf96a688dbe2c80527131966e37b52ad07680e4b3eda7f50afedc136e41320cb4960d
data/Gemfile CHANGED
@@ -11,4 +11,3 @@ gem 'pg', '~> 1.1'
11
11
  gem 'bootsnap', '>= 1.4.4', require: false
12
12
  gem 'devise'
13
13
  gem 'bootstrap'
14
- gem 'jquery-rails'
data/Gemfile.lock CHANGED
@@ -1,225 +1,235 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- simple_form_bs5_file_input (0.2.1)
4
+ simple_form_bs5_file_input (0.3.1)
5
5
  rails
6
6
  simple_form
7
7
 
8
8
  GEM
9
9
  remote: https://rubygems.org/
10
10
  specs:
11
- actioncable (7.1.3.2)
12
- actionpack (= 7.1.3.2)
13
- activesupport (= 7.1.3.2)
11
+ action_text-trix (2.1.16)
12
+ railties
13
+ actioncable (8.1.2)
14
+ actionpack (= 8.1.2)
15
+ activesupport (= 8.1.2)
14
16
  nio4r (~> 2.0)
15
17
  websocket-driver (>= 0.6.1)
16
18
  zeitwerk (~> 2.6)
17
- actionmailbox (7.1.3.2)
18
- actionpack (= 7.1.3.2)
19
- activejob (= 7.1.3.2)
20
- activerecord (= 7.1.3.2)
21
- activestorage (= 7.1.3.2)
22
- activesupport (= 7.1.3.2)
23
- mail (>= 2.7.1)
24
- net-imap
25
- net-pop
26
- net-smtp
27
- actionmailer (7.1.3.2)
28
- actionpack (= 7.1.3.2)
29
- actionview (= 7.1.3.2)
30
- activejob (= 7.1.3.2)
31
- activesupport (= 7.1.3.2)
32
- mail (~> 2.5, >= 2.5.4)
33
- net-imap
34
- net-pop
35
- net-smtp
19
+ actionmailbox (8.1.2)
20
+ actionpack (= 8.1.2)
21
+ activejob (= 8.1.2)
22
+ activerecord (= 8.1.2)
23
+ activestorage (= 8.1.2)
24
+ activesupport (= 8.1.2)
25
+ mail (>= 2.8.0)
26
+ actionmailer (8.1.2)
27
+ actionpack (= 8.1.2)
28
+ actionview (= 8.1.2)
29
+ activejob (= 8.1.2)
30
+ activesupport (= 8.1.2)
31
+ mail (>= 2.8.0)
36
32
  rails-dom-testing (~> 2.2)
37
- actionpack (7.1.3.2)
38
- actionview (= 7.1.3.2)
39
- activesupport (= 7.1.3.2)
33
+ actionpack (8.1.2)
34
+ actionview (= 8.1.2)
35
+ activesupport (= 8.1.2)
40
36
  nokogiri (>= 1.8.5)
41
- racc
42
37
  rack (>= 2.2.4)
43
38
  rack-session (>= 1.0.1)
44
39
  rack-test (>= 0.6.3)
45
40
  rails-dom-testing (~> 2.2)
46
41
  rails-html-sanitizer (~> 1.6)
47
- actiontext (7.1.3.2)
48
- actionpack (= 7.1.3.2)
49
- activerecord (= 7.1.3.2)
50
- activestorage (= 7.1.3.2)
51
- activesupport (= 7.1.3.2)
42
+ useragent (~> 0.16)
43
+ actiontext (8.1.2)
44
+ action_text-trix (~> 2.1.15)
45
+ actionpack (= 8.1.2)
46
+ activerecord (= 8.1.2)
47
+ activestorage (= 8.1.2)
48
+ activesupport (= 8.1.2)
52
49
  globalid (>= 0.6.0)
53
50
  nokogiri (>= 1.8.5)
54
- actionview (7.1.3.2)
55
- activesupport (= 7.1.3.2)
51
+ actionview (8.1.2)
52
+ activesupport (= 8.1.2)
56
53
  builder (~> 3.1)
57
54
  erubi (~> 1.11)
58
55
  rails-dom-testing (~> 2.2)
59
56
  rails-html-sanitizer (~> 1.6)
60
- activejob (7.1.3.2)
61
- activesupport (= 7.1.3.2)
57
+ activejob (8.1.2)
58
+ activesupport (= 8.1.2)
62
59
  globalid (>= 0.3.6)
63
- activemodel (7.1.3.2)
64
- activesupport (= 7.1.3.2)
65
- activerecord (7.1.3.2)
66
- activemodel (= 7.1.3.2)
67
- activesupport (= 7.1.3.2)
60
+ activemodel (8.1.2)
61
+ activesupport (= 8.1.2)
62
+ activerecord (8.1.2)
63
+ activemodel (= 8.1.2)
64
+ activesupport (= 8.1.2)
68
65
  timeout (>= 0.4.0)
69
- activestorage (7.1.3.2)
70
- actionpack (= 7.1.3.2)
71
- activejob (= 7.1.3.2)
72
- activerecord (= 7.1.3.2)
73
- activesupport (= 7.1.3.2)
66
+ activestorage (8.1.2)
67
+ actionpack (= 8.1.2)
68
+ activejob (= 8.1.2)
69
+ activerecord (= 8.1.2)
70
+ activesupport (= 8.1.2)
74
71
  marcel (~> 1.0)
75
- activesupport (7.1.3.2)
72
+ activesupport (8.1.2)
76
73
  base64
77
74
  bigdecimal
78
- concurrent-ruby (~> 1.0, >= 1.0.2)
75
+ concurrent-ruby (~> 1.0, >= 1.3.1)
79
76
  connection_pool (>= 2.2.5)
80
77
  drb
81
78
  i18n (>= 1.6, < 2)
79
+ json
80
+ logger (>= 1.4.2)
82
81
  minitest (>= 5.1)
83
- mutex_m
84
- tzinfo (~> 2.0)
85
- autoprefixer-rails (10.4.16.0)
86
- execjs (~> 2)
87
- base64 (0.2.0)
88
- bcrypt (3.1.20)
89
- bigdecimal (3.1.7)
90
- bootsnap (1.18.3)
82
+ securerandom (>= 0.3)
83
+ tzinfo (~> 2.0, >= 2.0.5)
84
+ uri (>= 0.13.1)
85
+ base64 (0.3.0)
86
+ bcrypt (3.1.21)
87
+ bigdecimal (4.0.1)
88
+ bootsnap (1.21.1)
91
89
  msgpack (~> 1.2)
92
- bootstrap (5.3.2)
93
- autoprefixer-rails (>= 9.1.0)
90
+ bootstrap (5.3.8)
94
91
  popper_js (>= 2.11.8, < 3)
95
- builder (3.2.4)
96
- concurrent-ruby (1.2.3)
97
- connection_pool (2.4.1)
92
+ builder (3.3.0)
93
+ concurrent-ruby (1.3.6)
94
+ connection_pool (3.0.2)
98
95
  crass (1.0.6)
99
- date (3.3.4)
100
- devise (4.9.3)
96
+ date (3.5.1)
97
+ devise (5.0.0)
101
98
  bcrypt (~> 3.0)
102
99
  orm_adapter (~> 0.1)
103
- railties (>= 4.1.0)
100
+ railties (>= 7.0)
104
101
  responders
105
102
  warden (~> 1.2.3)
106
- drb (2.2.1)
107
- erubi (1.12.0)
108
- execjs (2.9.1)
109
- ffi (1.16.3)
110
- globalid (1.2.1)
103
+ drb (2.2.3)
104
+ erb (6.0.1)
105
+ erubi (1.13.1)
106
+ ffi (1.17.3)
107
+ globalid (1.3.0)
111
108
  activesupport (>= 6.1)
112
- i18n (1.14.4)
109
+ i18n (1.14.8)
113
110
  concurrent-ruby (~> 1.0)
114
- io-console (0.7.2)
115
- irb (1.12.0)
116
- rdoc
111
+ io-console (0.8.2)
112
+ irb (1.16.0)
113
+ pp (>= 0.6.0)
114
+ rdoc (>= 4.0.0)
117
115
  reline (>= 0.4.2)
118
- jquery-rails (4.6.0)
119
- rails-dom-testing (>= 1, < 3)
120
- railties (>= 4.2.0)
121
- thor (>= 0.14, < 2.0)
122
- listen (3.9.0)
116
+ json (2.18.0)
117
+ listen (3.10.0)
118
+ logger
123
119
  rb-fsevent (~> 0.10, >= 0.10.3)
124
120
  rb-inotify (~> 0.9, >= 0.9.10)
125
- loofah (2.22.0)
121
+ logger (1.7.0)
122
+ loofah (2.25.0)
126
123
  crass (~> 1.0.2)
127
124
  nokogiri (>= 1.12.0)
128
- mail (2.8.1)
125
+ mail (2.9.0)
126
+ logger
129
127
  mini_mime (>= 0.1.1)
130
128
  net-imap
131
129
  net-pop
132
130
  net-smtp
133
- marcel (1.0.4)
131
+ marcel (1.1.0)
134
132
  mini_mime (1.1.5)
135
- mini_portile2 (2.8.5)
136
- minitest (5.22.3)
137
- msgpack (1.7.2)
138
- mutex_m (0.2.0)
139
- net-imap (0.5.0)
133
+ mini_portile2 (2.8.9)
134
+ minitest (6.0.1)
135
+ prism (~> 1.5)
136
+ msgpack (1.8.0)
137
+ net-imap (0.6.2)
140
138
  date
141
139
  net-protocol
142
140
  net-pop (0.1.2)
143
141
  net-protocol
144
142
  net-protocol (0.2.2)
145
143
  timeout
146
- net-smtp (0.5.0)
144
+ net-smtp (0.5.1)
147
145
  net-protocol
148
- nio4r (2.7.3)
149
- nokogiri (1.16.2)
146
+ nio4r (2.7.5)
147
+ nokogiri (1.19.0)
150
148
  mini_portile2 (~> 2.8.2)
151
149
  racc (~> 1.4)
152
150
  orm_adapter (0.5.0)
153
- pg (1.5.6)
151
+ pg (1.6.3)
154
152
  popper_js (2.11.8)
155
- psych (5.1.2)
153
+ pp (0.6.3)
154
+ prettyprint
155
+ prettyprint (0.2.0)
156
+ prism (1.8.0)
157
+ psych (5.3.1)
158
+ date
156
159
  stringio
157
- racc (1.7.3)
158
- rack (3.0.9.1)
159
- rack-session (2.0.0)
160
+ racc (1.8.1)
161
+ rack (3.2.4)
162
+ rack-session (2.1.1)
163
+ base64 (>= 0.1.0)
160
164
  rack (>= 3.0.0)
161
- rack-test (2.1.0)
165
+ rack-test (2.2.0)
162
166
  rack (>= 1.3)
163
- rackup (2.1.0)
167
+ rackup (2.3.1)
164
168
  rack (>= 3)
165
- webrick (~> 1.8)
166
- rails (7.1.3.2)
167
- actioncable (= 7.1.3.2)
168
- actionmailbox (= 7.1.3.2)
169
- actionmailer (= 7.1.3.2)
170
- actionpack (= 7.1.3.2)
171
- actiontext (= 7.1.3.2)
172
- actionview (= 7.1.3.2)
173
- activejob (= 7.1.3.2)
174
- activemodel (= 7.1.3.2)
175
- activerecord (= 7.1.3.2)
176
- activestorage (= 7.1.3.2)
177
- activesupport (= 7.1.3.2)
169
+ rails (8.1.2)
170
+ actioncable (= 8.1.2)
171
+ actionmailbox (= 8.1.2)
172
+ actionmailer (= 8.1.2)
173
+ actionpack (= 8.1.2)
174
+ actiontext (= 8.1.2)
175
+ actionview (= 8.1.2)
176
+ activejob (= 8.1.2)
177
+ activemodel (= 8.1.2)
178
+ activerecord (= 8.1.2)
179
+ activestorage (= 8.1.2)
180
+ activesupport (= 8.1.2)
178
181
  bundler (>= 1.15.0)
179
- railties (= 7.1.3.2)
180
- rails-dom-testing (2.2.0)
182
+ railties (= 8.1.2)
183
+ rails-dom-testing (2.3.0)
181
184
  activesupport (>= 5.0.0)
182
185
  minitest
183
186
  nokogiri (>= 1.6)
184
- rails-html-sanitizer (1.6.0)
187
+ rails-html-sanitizer (1.6.2)
185
188
  loofah (~> 2.21)
186
- nokogiri (~> 1.14)
187
- railties (7.1.3.2)
188
- actionpack (= 7.1.3.2)
189
- activesupport (= 7.1.3.2)
190
- irb
189
+ nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
190
+ railties (8.1.2)
191
+ actionpack (= 8.1.2)
192
+ activesupport (= 8.1.2)
193
+ irb (~> 1.13)
191
194
  rackup (>= 1.0.0)
192
195
  rake (>= 12.2)
193
196
  thor (~> 1.0, >= 1.2.2)
197
+ tsort (>= 0.2)
194
198
  zeitwerk (~> 2.6)
195
- rake (13.1.0)
199
+ rake (13.3.1)
196
200
  rb-fsevent (0.11.2)
197
- rb-inotify (0.10.1)
201
+ rb-inotify (0.11.1)
198
202
  ffi (~> 1.0)
199
- rdoc (6.6.2)
203
+ rdoc (7.1.0)
204
+ erb
200
205
  psych (>= 4.0.0)
201
- reline (0.4.3)
206
+ tsort
207
+ reline (0.6.3)
202
208
  io-console (~> 0.5)
203
- responders (3.1.1)
204
- actionpack (>= 5.2)
205
- railties (>= 5.2)
206
- simple_form (5.3.0)
207
- actionpack (>= 5.2)
208
- activemodel (>= 5.2)
209
- sqlite3 (1.7.2)
209
+ responders (3.2.0)
210
+ actionpack (>= 7.0)
211
+ railties (>= 7.0)
212
+ securerandom (0.4.1)
213
+ simple_form (5.4.1)
214
+ actionpack (>= 7.0)
215
+ activemodel (>= 7.0)
216
+ sqlite3 (2.9.0)
210
217
  mini_portile2 (~> 2.8.0)
211
- stringio (3.1.0)
212
- thor (1.3.1)
213
- timeout (0.4.1)
218
+ stringio (3.2.0)
219
+ thor (1.5.0)
220
+ timeout (0.6.0)
221
+ tsort (0.2.0)
214
222
  tzinfo (2.0.6)
215
223
  concurrent-ruby (~> 1.0)
224
+ uri (1.1.1)
225
+ useragent (0.16.11)
216
226
  warden (1.2.9)
217
227
  rack (>= 2.0.9)
218
- webrick (1.8.1)
219
- websocket-driver (0.7.6)
228
+ websocket-driver (0.8.0)
229
+ base64
220
230
  websocket-extensions (>= 0.1.0)
221
231
  websocket-extensions (0.1.5)
222
- zeitwerk (2.6.13)
232
+ zeitwerk (2.7.4)
223
233
 
224
234
  PLATFORMS
225
235
  ruby
@@ -228,7 +238,6 @@ DEPENDENCIES
228
238
  bootsnap (>= 1.4.4)
229
239
  bootstrap
230
240
  devise
231
- jquery-rails
232
241
  listen
233
242
  pg (~> 1.1)
234
243
  simple_form
data/README.md CHANGED
@@ -110,15 +110,13 @@ Add `resize: true` to your field.
110
110
  You can also specify a ratio for the cropper. For example `resize: 1` will lock the aspect ratio to a square. Beware of the float constraints in rails. If you want a 4/3 ratio use `resize: 4/3.to_f` as 4/3 otherwise gives 1.
111
111
 
112
112
 
113
- The resizer is based on [CropperJS](https://github.com/fengyuanchen/cropperjs) so you have to add cropper and jquery-cropper to your dependencies:
113
+ The resizer is based on [CropperJS](https://github.com/fengyuanchen/cropperjs) so you have to add cropper to your dependencies:
114
114
  ```
115
115
  yarn add cropperjs
116
- yarn add jquery-cropper
117
116
  ```
118
117
  then include the js files in your application.js file:
119
118
  ```
120
119
  //= require cropperjs/dist/cropper
121
- //= require jquery-cropper/dist/jquery-cropper
122
120
  ```
123
121
  and include the css in your application.sass file:
124
122
  ```
data/assets/javascripts/polyfills/element_closest.js ADDED
@@ -0,0 +1,18 @@
1
+ if (typeof Element !== "undefined") {
2
+ if (!Element.prototype.matches) {
3
+ Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
4
+ }
5
+
6
+ if (!Element.prototype.closest) {
7
+ Element.prototype.closest = function (s) {
8
+ var el = this;
9
+
10
+ do {
11
+ if (el.matches(s)) return el;
12
+ el = el.parentElement || el.parentNode;
13
+ } while (el !== null && el.nodeType === 1);
14
+
15
+ return null;
16
+ };
17
+ }
18
+ }
data/assets/javascripts/simple_form_bs5_file_input.js CHANGED
@@ -1,26 +1,33 @@
1
- /*global $, document, window, bootstrap */
1
+ //= require polyfills/element_closest.js
2
+
3
+ /* eslint no-alert: 0 */
4
+ /*global Cropper, bootstrap */
5
+
2
6
  window.inputSingleDeletableFile = {
7
+ cropperInstances: [],
3
8
  onFileDelete: function (e) {
4
9
  'use strict';
5
- var $scope = $(this).parents('.js-sdfi-deletable-file');
10
+ var scope = this.closest('.js-sdfi-deletable-file');
11
+
6
12
  e.preventDefault();
7
13
  e.stopPropagation();
8
- $('.js-sdfi-deletable-file__infos-field', $scope).val('');
9
- $('.js-sdfi-deletable-file__delete-field', $scope).val('true');
10
- $('input[type="file"]', $scope).val('');
11
- $scope.removeClass('sdfi-deletable-file--with-file');
14
+
15
+ scope.querySelector('.js-sdfi-deletable-file__infos-field').value = '';
16
+ scope.querySelector('.js-sdfi-deletable-file__delete-field').value = true;
17
+ scope.querySelector('input[type="file"]').value = '';
18
+
19
+ scope.classList.remove('sdfi-deletable-file--with-file');
12
20
  },
13
21
 
14
22
  onFileSelected: function () {
15
23
  'use strict';
16
- var $scope = $(this).parents('.js-sdfi-deletable-file'),
17
- $resizeModal = $('.js-sdfi-deletable-file__resize', $scope),
24
+ var scope = this.closest('.js-sdfi-deletable-file'),
25
+ resizeModal = scope.querySelector('.js-sdfi-deletable-file__resize'),
26
+ preview = scope.querySelector('.js-sdfi-deletable-file__preview'),
18
27
  files = this.files,
19
28
  file,
20
29
  isResizable,
21
30
  isPreviewable,
22
- hasPreview = $('.js-sdfi-deletable-file__preview', $scope).length > 0,
23
- hasResize = $resizeModal.length > 0,
24
31
  modal,
25
32
  reader,
26
33
  size;
@@ -33,152 +40,168 @@ window.inputSingleDeletableFile = {
33
40
  isResizable = (/^image\/(png|jpeg)+$/).test(file.type);
34
41
  isPreviewable = (/^image\/[a-z+]+$/).test(file.type);
35
42
 
36
- if (isResizable && hasResize || isPreviewable && hasPreview) {
43
+ if (isResizable && resizeModal || isPreviewable && preview) {
37
44
  reader = new FileReader();
38
45
  reader.readAsDataURL(file);
39
- if (isResizable && hasResize) {
46
+ if (isResizable && resizeModal) {
40
47
  // Resizable images
41
48
  reader.onload = function () {
42
- modal = new bootstrap.Modal($resizeModal, {
49
+ modal = new bootstrap.Modal(resizeModal, {
43
50
  backdrop: 'static',
44
51
  keyboard: false
45
52
  });
46
- $resizeModal.attr('data-image-result', this.result);
47
- $resizeModal.attr('data-filename', file.name);
53
+ resizeModal.setAttribute('data-image-result', this.result);
54
+ resizeModal.setAttribute('data-filename', file.name);
48
55
  modal.show();
49
56
  };
50
57
  } else {
51
58
  // Previewable images
52
- $('.js-sdfi-deletable-file__infos-field', $scope).val('');
53
- $scope.addClass('sdfi-deletable-file--with-file');
54
- $('.js-sdfi-deletable-file__label', $scope).html(file.name);
55
- $('.js-sdfi-deletable-file__delete-field', $scope).val('');
56
- size = $('.js-sdfi-deletable-file__preview', $scope).attr('data-size')
57
- .split('x');
59
+ scope.querySelector('.js-sdfi-deletable-file__infos-field').value = '';
60
+ scope.classList.add('sdfi-deletable-file--with-file');
61
+ scope.querySelector('.js-sdfi-deletable-file__label').innerHTML = file.name;
62
+ scope.querySelector('.js-sdfi-deletable-file__delete-field').value = '';
63
+ size = preview.getAttribute('data-size').split('x');
58
64
  reader.onload = function (e) {
59
- $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + e.target.result + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
65
+ preview.innerHTML = '<img src="' + e.target.result + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">';
60
66
  };
61
67
  }
62
68
  } else {
63
69
  // Non-resizable and non-previewable files
64
- $('.js-sdfi-deletable-file__infos-field', $scope).val('');
65
- $scope.addClass('sdfi-deletable-file--with-file');
66
- $('.js-sdfi-deletable-file__label', $scope).html(file.name);
67
- $('.js-sdfi-deletable-file__delete-field', $scope).val('');
68
- $('.js-sdfi-deletable-file__preview', $scope).html('');
70
+ scope.querySelector('.js-sdfi-deletable-file__infos-field').value = '';
71
+ scope.classList.add('sdfi-deletable-file--with-file');
72
+ scope.querySelector('.js-sdfi-deletable-file__label').innerHTML = file.name;
73
+ scope.querySelector('.js-sdfi-deletable-file__delete-field').value = '';
74
+ preview.innerHTML = '';
69
75
  }
70
76
  },
71
77
 
72
78
  onResizeModalShown: function (e) {
73
79
  'use strict';
74
- var $modal = $(e.target),
75
- $scope = $modal.parents('.js-sdfi-deletable-file'),
76
- $imgContainer = $('.js-sdfi-sdfi-deletable-file__resize-image', $scope),
77
- $image,
78
- image = $modal.attr('data-image-result'),
79
- ratio = $imgContainer.attr('data-ratio');
80
+ var modal = e.target,
81
+ scope = modal.closest('.js-sdfi-deletable-file'),
82
+ imgContainer = scope.querySelector('.js-sdfi-sdfi-deletable-file__resize-image'),
83
+ imageElement,
84
+ image = modal.getAttribute('data-image-result'),
85
+ ratio = imgContainer.getAttribute('data-ratio'),
86
+ cropper;
87
+
88
+ imgContainer.innerHTML = '<img class="js-image" src="' + image + '">';
80
89
 
81
- $imgContainer.html('<img class="js-image" src="' + image + '">');
90
+ imageElement = imgContainer.querySelector('img');
91
+ imageElement.style.opacity = 0;
82
92
 
83
- $image = $('img', $imgContainer);
84
- $image.css('opacity', 0);
85
93
  setTimeout(function () {
86
94
  // init cropper with a small delay
87
- $image.cropper({
88
- aspectRatio: ratio,
89
- autoCropArea: 1,
90
- movable: false,
91
- guides: false,
92
- background: false,
93
- viewMode: 1,
94
- zoomable: false,
95
- crop: function (data) {
96
- $('.js-sdfi-deletable-file__infos-field', $scope).val(JSON.stringify(data.detail));
97
- }
98
- });
99
- $image.css('opacity', 1);
95
+ cropper = new Cropper(imageElement,
96
+ {
97
+ aspectRatio: ratio,
98
+ autoCropArea: 1,
99
+ movable: false,
100
+ guides: false,
101
+ background: false,
102
+ viewMode: 1,
103
+ zoomable: false,
104
+ crop: function (data) {
105
+ scope.querySelector('.js-sdfi-deletable-file__infos-field').value = JSON.stringify(data.detail);
106
+ }
107
+ });
108
+
109
+ window.inputSingleDeletableFile.cropperInstances.push(cropper);
110
+ imageElement.setAttribute('data-cropper-index', window.inputSingleDeletableFile.cropperInstances.length - 1);
111
+
112
+ imageElement.style.opacity = 1;
100
113
  }, 100);
101
114
  },
102
115
 
103
116
  onResizeModalRotate: function (e) {
104
117
  'use strict';
105
- var $scope = $(e.target).parents('.js-sdfi-deletable-file'),
106
- $imgContainer = $('.js-sdfi-sdfi-deletable-file__resize-image', $scope),
107
- $image = $('.js-image', $imgContainer);
108
- $image.cropper('rotate', 90);
118
+ var scope = e.target.closest('.js-sdfi-deletable-file'),
119
+ imgContainer = scope.querySelector('.js-sdfi-sdfi-deletable-file__resize-image'),
120
+ image = imgContainer.querySelector('img'),
121
+ cropperIndex = parseInt(image.getAttribute('data-cropper-index'), 10),
122
+ cropper = window.inputSingleDeletableFile.cropperInstances[cropperIndex];
123
+
124
+ cropper.rotate(90);
109
125
  },
110
126
 
111
127
  onResizeModalCancel: function (e) {
112
128
  'use strict';
113
- var $scope = $(e.target).parents('.js-sdfi-deletable-file');
114
- $('.js-sdfi-deletable-file__infos-field', $scope).val('');
115
- $('.js-sdfi-deletable-file__delete-field', $scope).val('true');
116
- $('input[type="file"]', $scope).val('');
117
- $scope.removeClass('sdfi-deletable-file--with-file');
129
+ var scope = e.target.closest('.js-sdfi-deletable-file');
130
+ scope.querySelector('.js-sdfi-deletable-file__infos-field').value = '';
131
+ scope.querySelector('.js-sdfi-deletable-file__delete-field').value = '';
132
+ scope.querySelector('input[type="file"]').value = '';
133
+ scope.classList.remove('sdfi-deletable-file--with-file');
118
134
  },
119
135
 
120
136
  onResizeModalValidate: function (e) {
121
137
  'use strict';
122
- var $scope = $(e.target).parents('.js-sdfi-deletable-file'),
123
- $resizeModal = $('.js-sdfi-deletable-file__resize', $scope),
124
- $imgContainer = $('.js-sdfi-sdfi-deletable-file__resize-image', $scope),
125
- $image = $('img', $imgContainer),
126
- filename = $resizeModal.attr('data-filename'),
127
- hasPreview = $('.js-sdfi-deletable-file__preview', $scope).length > 0,
138
+ var scope = e.target.closest('.js-sdfi-deletable-file'),
139
+ resizeModal = scope.querySelector('.js-sdfi-deletable-file__resize'),
140
+ imgContainer = scope.querySelector('.js-sdfi-sdfi-deletable-file__resize-image'),
141
+ image = imgContainer.querySelector('img'),
142
+ filename = resizeModal.getAttribute('data-filename'),
143
+ preview = scope.querySelector('.js-sdfi-deletable-file__preview'),
128
144
  imageData,
129
- resizeModal = $resizeModal[0],
130
145
  modal = bootstrap.Modal.getInstance(resizeModal),
131
- size;
146
+ size,
147
+ cropperIndex = parseInt(image.getAttribute('data-cropper-index'), 10),
148
+ cropper = window.inputSingleDeletableFile.cropperInstances[cropperIndex];
132
149
 
133
- $scope.addClass('sdfi-deletable-file--with-file');
134
- $('.js-sdfi-deletable-file__label', $scope).html(filename);
135
- $('.js-sdfi-deletable-file__delete-field', $scope).val('');
150
+ scope.classList.add('sdfi-deletable-file--with-file');
151
+ scope.querySelector('.js-sdfi-deletable-file__label').innerHTML = filename;
152
+ scope.querySelector('.js-sdfi-deletable-file__delete-field').value = '';
136
153
 
137
154
  // set the preview if we have preview
138
- if (hasPreview) {
139
- size = $('.js-sdfi-deletable-file__preview', $scope).attr('data-size')
155
+ if (preview) {
156
+ size = preview.getAttribute('data-size')
140
157
  .split('x');
141
- imageData = $image.data('cropper')
142
- .getCroppedCanvas()
143
- .toDataURL();
144
158
 
145
- $('.js-sdfi-deletable-file__preview', $scope).html('<img src="' + imageData + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">');
159
+ imageData = cropper.getCroppedCanvas().toDataURL();
160
+
161
+ preview.innerHTML = '<img src="' + imageData + '" width="' + size[0] + '" height="auto" class="img-fluid img-thumbnail">';
146
162
  }
147
163
  modal.hide();
148
164
  },
149
165
 
150
166
  bindEvents: function (field) {
151
167
  'use strict';
168
+ var resize = field.querySelector('.js-sdfi-deletable-file__resize');
152
169
  // click on the fake "replace file" btn launch the file input choice
153
- $('.js-sdfi-deletable-file__change-btn', $(field)).on('click', function () {
154
- $('input[type="file"]', $(field)).click();
170
+ field.querySelector('.js-sdfi-deletable-file__change-btn').addEventListener('click', function () {
171
+ field.querySelector('input[type="file"]').click();
155
172
  });
156
- $('.js-sdfi-deletable-file__delete-btn', $(field)).on('click', this.onFileDelete);
157
- $('input[type="file"]', $(field)).on('change', this.onFileSelected);
158
-
159
- $('.js-sdfi-deletable-file__resize', field).on('shown.bs.modal', this.onResizeModalShown);
160
- $('.js-sdfi-deletable-file__resize-rotate', field).on('click', this.onResizeModalRotate);
161
- $('.js-sdfi-deletable-file__resize-cancel', field).on('click', this.onResizeModalCancel);
162
- $('.js-sdfi-deletable-file__resize-validate', field).on('click', this.onResizeModalValidate);
173
+
174
+ field.querySelector('.js-sdfi-deletable-file__delete-btn').addEventListener('click', this.onFileDelete);
175
+ field.querySelector('input[type="file"]').addEventListener('change', this.onFileSelected);
176
+
177
+ if (resize) {
178
+ resize.addEventListener('shown.bs.modal', this.onResizeModalShown);
179
+ field.querySelector('.js-sdfi-deletable-file__resize-rotate').addEventListener('click', this.onResizeModalRotate);
180
+ field.querySelector('.js-sdfi-deletable-file__resize-cancel').addEventListener('click', this.onResizeModalCancel);
181
+ field.querySelector('.js-sdfi-deletable-file__resize-validate').addEventListener('click', this.onResizeModalValidate);
182
+ }
163
183
  }
164
184
  };
165
185
 
166
- $(document).ready(function () {
186
+ document.addEventListener('DOMContentLoaded', function () {
167
187
  'use strict';
168
- $('.js-sdfi-deletable-file').each(function () {
169
- window.inputSingleDeletableFile.bindEvents(this);
170
- });
188
+ var fileInputs = document.querySelectorAll('.js-sdfi-deletable-file'),
189
+ i;
190
+
191
+ for (i = 0; i < fileInputs.length; i += 1) {
192
+ window.inputSingleDeletableFile.bindEvents(fileInputs[i]);
193
+ }
171
194
  });
172
195
 
173
196
  /* Direct upload methods */
174
-
175
197
  window.addEventListener('direct-upload:initialize', function (event) {
176
198
  'use strict';
177
199
  var target = event.target,
178
- $scope = $(target).parents('.js-sdfi-deletable-file');
179
- if ($scope.length > 0) {
180
- $('.sdfi-deletable-file__upload-progress', $scope).css('width', '0%');
181
- $scope.addClass('sdfi-deletable-file--uploading');
200
+ scope = target.closest('.js-sdfi-deletable-file');
201
+
202
+ if (scope) {
203
+ scope.querySelector('.sdfi-deletable-file__upload-progress').style.width = '0%';
204
+ scope.classList.add('sdfi-deletable-file--uploading');
182
205
  }
183
206
  });
184
207
 
@@ -186,9 +209,9 @@ window.addEventListener('direct-upload:progress', function (event) {
186
209
  'use strict';
187
210
  var target = event.target,
188
211
  progress = event.detail.progress,
189
- $scope = $(target).parents('.js-sdfi-deletable-file');
190
- if ($scope.length > 0) {
191
- $('.sdfi-deletable-file__upload-progress', $scope).css('width', progress + '%');
212
+ scope = target.closest('.js-sdfi-deletable-file');
213
+ if (scope) {
214
+ scope.querySelector('.sdfi-deletable-file__upload-progress').style.width = progress + '%';
192
215
  }
193
216
  });
194
217
 
@@ -196,11 +219,11 @@ window.addEventListener('direct-upload:error', function (event) {
196
219
  'use strict';
197
220
  var target = event.target,
198
221
  error = event.detail.error,
199
- $scope = $(target).parents('.js-sdfi-deletable-file');
200
- if ($scope.length > 0) {
222
+ scope = target.closest('.js-sdfi-deletable-file');
223
+ if (scope) {
201
224
  event.preventDefault();
202
- $('.sdfi-deletable-file__upload-progress', $scope).css('width', '0%');
203
- $scope.removeClass('sdfi-deletable-file--uploading');
204
- alert(error);
225
+ scope.querySelector('.sdfi-deletable-file__upload-progress').style.width = '0%';
226
+ scope.classList.remove('sdfi-deletable-file--uploading');
227
+ window.alert(error);
205
228
  }
206
229
  });
data/lib/has_one_attached_deletable.rb CHANGED
@@ -34,10 +34,14 @@ class ActiveRecord::Base
34
34
  # reset the infos to prevent multiple resize if multiple save
35
35
  instance_variable_set :"@#{name}_infos", nil
36
36
 
37
+ # Skip if any of the required params are missing
38
+ return unless ['width', 'height', 'x', 'y'].all? { |k| params[k].present? }
37
39
  left = params['x'].round
38
40
  top = params['y'].round
39
41
  width = params['width'].round
40
42
  height = params['height'].round
43
+ # Skip if width or height are not > 0
44
+ return if width <= 0 || height <= 0
41
45
  rotation = params['rotate']
42
46
  transformations = {}
43
47
  if ActiveStorage.variant_processor == :mini_magick
data/lib/simple_form_bs5_file_input/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module SimpleFormBs5FileInput
2
- VERSION = "0.2.1".freeze
2
+ VERSION = "0.3.1".freeze
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: simple_form_bs5_file_input
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.1
4
+ version: 0.3.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Pierre-andré Boissinot
@@ -80,6 +80,7 @@ files:
80
80
  - README.md
81
81
  - Rakefile
82
82
  - assets/images/icon-cancel.svg
83
+ - assets/javascripts/polyfills/element_closest.js
83
84
  - assets/javascripts/simple_form_bs5_file_input.js
84
85
  - assets/stylesheets/simple_form_bs5_file_input.sass
85
86
  - config/locales/en.yml
@@ -107,7 +108,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
107
108
  - !ruby/object:Gem::Version
108
109
  version: '0'
109
110
  requirements: []
110
- rubygems_version: 3.6.9
111
+ rubygems_version: 4.0.3
111
112
  specification_version: 4
112
113
  summary: Simple Form BS5 File Input
113
114
  test_files: []