ultimate_turbo_modal 1.7.0 → 2.0.0
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 +4 -4
- data/.tool-versions +2 -2
- data/CHANGELOG.md +7 -0
- data/Gemfile.lock +159 -156
- data/LICENSE.txt +1 -1
- data/README.md +26 -101
- data/VERSION +1 -0
- data/javascript/index.js +37 -0
- data/javascript/modal_controller.js +108 -0
- data/javascript/package.json +47 -0
- data/javascript/rollup.config.js +24 -0
- data/javascript/scripts/release-npm.sh +37 -0
- data/javascript/scripts/update-version.js +21 -0
- data/javascript/styles/vanilla.css +179 -0
- data/javascript/yarn.lock +611 -0
- data/lib/generators/ultimate_turbo_modal/install_generator.rb +224 -0
- data/lib/generators/ultimate_turbo_modal/templates/flavors/custom.rb +22 -0
- data/lib/{ultimate_turbo_modal → generators/ultimate_turbo_modal/templates}/flavors/tailwind.rb +5 -4
- data/lib/generators/ultimate_turbo_modal/templates/flavors/tailwind3.rb +21 -0
- data/lib/{ultimate_turbo_modal → generators/ultimate_turbo_modal/templates}/flavors/vanilla.rb +2 -1
- data/lib/generators/ultimate_turbo_modal/templates/ultimate_turbo_modal.rb +12 -0
- data/lib/ultimate_turbo_modal/base.rb +7 -0
- data/lib/ultimate_turbo_modal/railtie.rb +1 -1
- data/lib/ultimate_turbo_modal/version.rb +1 -1
- data/lib/ultimate_turbo_modal.rb +3 -3
- data/script/build_and_release.sh +22 -0
- data/yarn.lock +4 -0
- metadata +24 -18
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f3b5904322605f3b7396d94ded0bdc75811c650a60f2519a0146ae35264dba8d
|
4
|
+
data.tar.gz: c15e270e64dc9edd02dee5edaf34d628675939753652dda7ddee66350e5ea0ff
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b4201e5baf0af117cd4899ed12ade81dabc871766124922b5b37ff26eab65affcbeefeb9e41c0f4e9de314c7495f2e36c9ac65b8c95cff63dc4c415f66f93eb0
|
7
|
+
data.tar.gz: 30d25cd678cd64d36211043def154e5e8ec5c6c71fd4956b58b9fdd9be1bb75541aaa25332507283e0aebd78ef7b031a0eba268859894628b2a44525325a6d04
|
data/.tool-versions
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
ruby 3.
|
2
|
-
nodejs
|
1
|
+
ruby 3.4.2
|
2
|
+
nodejs 22.14.0
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,10 @@
|
|
1
|
+
## [2.0.0] - 2025-04-07 - Breaking changes!
|
2
|
+
|
3
|
+
- Much simplified installation with a Rails generator
|
4
|
+
- Support for Turbo 8
|
5
|
+
- Support for Phlex 2
|
6
|
+
- Support for Tailwind v4 (use the `tailwind3` flavor if you're still on Tailwind v3)
|
7
|
+
|
1
8
|
## [1.7.0] - 2024-12-28
|
2
9
|
|
3
10
|
- Fix Phlex deprecation warning
|
data/Gemfile.lock
CHANGED
@@ -1,114 +1,111 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
ultimate_turbo_modal (
|
5
|
-
phlex-rails
|
6
|
-
rails
|
4
|
+
ultimate_turbo_modal (2.0.0)
|
5
|
+
phlex-rails
|
6
|
+
rails
|
7
7
|
stimulus-rails
|
8
8
|
turbo-rails
|
9
9
|
|
10
10
|
GEM
|
11
11
|
remote: https://rubygems.org/
|
12
12
|
specs:
|
13
|
-
actioncable (
|
14
|
-
actionpack (=
|
15
|
-
activesupport (=
|
13
|
+
actioncable (8.0.2)
|
14
|
+
actionpack (= 8.0.2)
|
15
|
+
activesupport (= 8.0.2)
|
16
16
|
nio4r (~> 2.0)
|
17
17
|
websocket-driver (>= 0.6.1)
|
18
18
|
zeitwerk (~> 2.6)
|
19
|
-
actionmailbox (
|
20
|
-
actionpack (=
|
21
|
-
activejob (=
|
22
|
-
activerecord (=
|
23
|
-
activestorage (=
|
24
|
-
activesupport (=
|
25
|
-
mail (>= 2.
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
activejob (= 7.1.1)
|
33
|
-
activesupport (= 7.1.1)
|
34
|
-
mail (~> 2.5, >= 2.5.4)
|
35
|
-
net-imap
|
36
|
-
net-pop
|
37
|
-
net-smtp
|
19
|
+
actionmailbox (8.0.2)
|
20
|
+
actionpack (= 8.0.2)
|
21
|
+
activejob (= 8.0.2)
|
22
|
+
activerecord (= 8.0.2)
|
23
|
+
activestorage (= 8.0.2)
|
24
|
+
activesupport (= 8.0.2)
|
25
|
+
mail (>= 2.8.0)
|
26
|
+
actionmailer (8.0.2)
|
27
|
+
actionpack (= 8.0.2)
|
28
|
+
actionview (= 8.0.2)
|
29
|
+
activejob (= 8.0.2)
|
30
|
+
activesupport (= 8.0.2)
|
31
|
+
mail (>= 2.8.0)
|
38
32
|
rails-dom-testing (~> 2.2)
|
39
|
-
actionpack (
|
40
|
-
actionview (=
|
41
|
-
activesupport (=
|
33
|
+
actionpack (8.0.2)
|
34
|
+
actionview (= 8.0.2)
|
35
|
+
activesupport (= 8.0.2)
|
42
36
|
nokogiri (>= 1.8.5)
|
43
37
|
rack (>= 2.2.4)
|
44
38
|
rack-session (>= 1.0.1)
|
45
39
|
rack-test (>= 0.6.3)
|
46
40
|
rails-dom-testing (~> 2.2)
|
47
41
|
rails-html-sanitizer (~> 1.6)
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
42
|
+
useragent (~> 0.16)
|
43
|
+
actiontext (8.0.2)
|
44
|
+
actionpack (= 8.0.2)
|
45
|
+
activerecord (= 8.0.2)
|
46
|
+
activestorage (= 8.0.2)
|
47
|
+
activesupport (= 8.0.2)
|
53
48
|
globalid (>= 0.6.0)
|
54
49
|
nokogiri (>= 1.8.5)
|
55
|
-
actionview (
|
56
|
-
activesupport (=
|
50
|
+
actionview (8.0.2)
|
51
|
+
activesupport (= 8.0.2)
|
57
52
|
builder (~> 3.1)
|
58
53
|
erubi (~> 1.11)
|
59
54
|
rails-dom-testing (~> 2.2)
|
60
55
|
rails-html-sanitizer (~> 1.6)
|
61
|
-
activejob (
|
62
|
-
activesupport (=
|
56
|
+
activejob (8.0.2)
|
57
|
+
activesupport (= 8.0.2)
|
63
58
|
globalid (>= 0.3.6)
|
64
|
-
activemodel (
|
65
|
-
activesupport (=
|
66
|
-
activerecord (
|
67
|
-
activemodel (=
|
68
|
-
activesupport (=
|
59
|
+
activemodel (8.0.2)
|
60
|
+
activesupport (= 8.0.2)
|
61
|
+
activerecord (8.0.2)
|
62
|
+
activemodel (= 8.0.2)
|
63
|
+
activesupport (= 8.0.2)
|
69
64
|
timeout (>= 0.4.0)
|
70
|
-
activestorage (
|
71
|
-
actionpack (=
|
72
|
-
activejob (=
|
73
|
-
activerecord (=
|
74
|
-
activesupport (=
|
65
|
+
activestorage (8.0.2)
|
66
|
+
actionpack (= 8.0.2)
|
67
|
+
activejob (= 8.0.2)
|
68
|
+
activerecord (= 8.0.2)
|
69
|
+
activesupport (= 8.0.2)
|
75
70
|
marcel (~> 1.0)
|
76
|
-
activesupport (
|
71
|
+
activesupport (8.0.2)
|
77
72
|
base64
|
73
|
+
benchmark (>= 0.3)
|
78
74
|
bigdecimal
|
79
|
-
concurrent-ruby (~> 1.0, >= 1.
|
75
|
+
concurrent-ruby (~> 1.0, >= 1.3.1)
|
80
76
|
connection_pool (>= 2.2.5)
|
81
77
|
drb
|
82
78
|
i18n (>= 1.6, < 2)
|
79
|
+
logger (>= 1.4.2)
|
83
80
|
minitest (>= 5.1)
|
84
|
-
|
85
|
-
tzinfo (~> 2.0)
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
81
|
+
securerandom (>= 0.3)
|
82
|
+
tzinfo (~> 2.0, >= 2.0.5)
|
83
|
+
uri (>= 0.13.1)
|
84
|
+
ast (2.4.3)
|
85
|
+
base64 (0.2.0)
|
86
|
+
benchmark (0.4.0)
|
87
|
+
bigdecimal (3.1.9)
|
88
|
+
builder (3.3.0)
|
89
|
+
concurrent-ruby (1.3.5)
|
90
|
+
connection_pool (2.5.0)
|
93
91
|
crass (1.0.6)
|
94
|
-
date (3.
|
95
|
-
drb (2.
|
96
|
-
|
97
|
-
erb (4.0.3)
|
98
|
-
cgi (>= 0.3.3)
|
99
|
-
erubi (1.12.0)
|
92
|
+
date (3.4.1)
|
93
|
+
drb (2.2.1)
|
94
|
+
erubi (1.13.1)
|
100
95
|
globalid (1.2.1)
|
101
96
|
activesupport (>= 6.1)
|
102
|
-
i18n (1.14.
|
97
|
+
i18n (1.14.7)
|
103
98
|
concurrent-ruby (~> 1.0)
|
104
|
-
io-console (0.
|
105
|
-
irb (1.
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
99
|
+
io-console (0.8.0)
|
100
|
+
irb (1.15.2)
|
101
|
+
pp (>= 0.6.0)
|
102
|
+
rdoc (>= 4.0.0)
|
103
|
+
reline (>= 0.4.2)
|
104
|
+
json (2.10.2)
|
105
|
+
language_server-protocol (3.17.0.4)
|
110
106
|
lint_roller (1.1.0)
|
111
|
-
|
107
|
+
logger (1.7.0)
|
108
|
+
loofah (2.24.0)
|
112
109
|
crass (~> 1.0.2)
|
113
110
|
nokogiri (>= 1.12.0)
|
114
111
|
mail (2.8.1)
|
@@ -116,141 +113,147 @@ GEM
|
|
116
113
|
net-imap
|
117
114
|
net-pop
|
118
115
|
net-smtp
|
119
|
-
marcel (1.0.
|
116
|
+
marcel (1.0.4)
|
120
117
|
mini_mime (1.1.5)
|
121
|
-
minitest (5.
|
122
|
-
|
123
|
-
net-imap (0.4.2)
|
118
|
+
minitest (5.25.5)
|
119
|
+
net-imap (0.5.6)
|
124
120
|
date
|
125
121
|
net-protocol
|
126
122
|
net-pop (0.1.2)
|
127
123
|
net-protocol
|
128
|
-
net-protocol (0.2.
|
124
|
+
net-protocol (0.2.2)
|
129
125
|
timeout
|
130
|
-
net-smtp (0.
|
126
|
+
net-smtp (0.5.1)
|
131
127
|
net-protocol
|
132
|
-
nio4r (2.
|
133
|
-
nokogiri (1.
|
128
|
+
nio4r (2.7.4)
|
129
|
+
nokogiri (1.18.7-arm64-darwin)
|
134
130
|
racc (~> 1.4)
|
135
|
-
parallel (1.
|
136
|
-
parser (3.
|
131
|
+
parallel (1.26.3)
|
132
|
+
parser (3.3.7.4)
|
137
133
|
ast (~> 2.4.1)
|
138
134
|
racc
|
139
|
-
phlex (
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
135
|
+
phlex (2.2.1)
|
136
|
+
zeitwerk (~> 2.7)
|
137
|
+
phlex-rails (2.2.0)
|
138
|
+
phlex (~> 2.2.1)
|
139
|
+
railties (>= 7.1, < 9)
|
140
|
+
pp (0.6.2)
|
141
|
+
prettyprint
|
142
|
+
prettyprint (0.2.0)
|
143
|
+
prism (1.4.0)
|
144
|
+
psych (5.2.3)
|
145
|
+
date
|
148
146
|
stringio
|
149
|
-
racc (1.
|
150
|
-
rack (3.
|
151
|
-
rack-session (2.
|
147
|
+
racc (1.8.1)
|
148
|
+
rack (3.1.12)
|
149
|
+
rack-session (2.1.0)
|
150
|
+
base64 (>= 0.1.0)
|
152
151
|
rack (>= 3.0.0)
|
153
|
-
rack-test (2.
|
152
|
+
rack-test (2.2.0)
|
154
153
|
rack (>= 1.3)
|
155
|
-
rackup (2.1
|
154
|
+
rackup (2.2.1)
|
156
155
|
rack (>= 3)
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
activesupport (= 7.1.1)
|
156
|
+
rails (8.0.2)
|
157
|
+
actioncable (= 8.0.2)
|
158
|
+
actionmailbox (= 8.0.2)
|
159
|
+
actionmailer (= 8.0.2)
|
160
|
+
actionpack (= 8.0.2)
|
161
|
+
actiontext (= 8.0.2)
|
162
|
+
actionview (= 8.0.2)
|
163
|
+
activejob (= 8.0.2)
|
164
|
+
activemodel (= 8.0.2)
|
165
|
+
activerecord (= 8.0.2)
|
166
|
+
activestorage (= 8.0.2)
|
167
|
+
activesupport (= 8.0.2)
|
170
168
|
bundler (>= 1.15.0)
|
171
|
-
railties (=
|
169
|
+
railties (= 8.0.2)
|
172
170
|
rails-dom-testing (2.2.0)
|
173
171
|
activesupport (>= 5.0.0)
|
174
172
|
minitest
|
175
173
|
nokogiri (>= 1.6)
|
176
|
-
rails-html-sanitizer (1.6.
|
174
|
+
rails-html-sanitizer (1.6.2)
|
177
175
|
loofah (~> 2.21)
|
178
|
-
nokogiri (
|
179
|
-
railties (
|
180
|
-
actionpack (=
|
181
|
-
activesupport (=
|
182
|
-
irb
|
176
|
+
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)
|
177
|
+
railties (8.0.2)
|
178
|
+
actionpack (= 8.0.2)
|
179
|
+
activesupport (= 8.0.2)
|
180
|
+
irb (~> 1.13)
|
183
181
|
rackup (>= 1.0.0)
|
184
182
|
rake (>= 12.2)
|
185
183
|
thor (~> 1.0, >= 1.2.2)
|
186
184
|
zeitwerk (~> 2.6)
|
187
185
|
rainbow (3.1.1)
|
188
|
-
rake (13.1
|
189
|
-
rdoc (6.
|
186
|
+
rake (13.2.1)
|
187
|
+
rdoc (6.13.1)
|
190
188
|
psych (>= 4.0.0)
|
191
|
-
regexp_parser (2.
|
192
|
-
reline (0.
|
189
|
+
regexp_parser (2.10.0)
|
190
|
+
reline (0.6.1)
|
193
191
|
io-console (~> 0.5)
|
194
|
-
|
195
|
-
rubocop (1.56.4)
|
196
|
-
base64 (~> 0.1.1)
|
192
|
+
rubocop (1.73.2)
|
197
193
|
json (~> 2.3)
|
198
|
-
language_server-protocol (
|
194
|
+
language_server-protocol (~> 3.17.0.2)
|
195
|
+
lint_roller (~> 1.1.0)
|
199
196
|
parallel (~> 1.10)
|
200
|
-
parser (>= 3.
|
197
|
+
parser (>= 3.3.0.2)
|
201
198
|
rainbow (>= 2.2.2, < 4.0)
|
202
|
-
regexp_parser (>=
|
203
|
-
|
204
|
-
rubocop-ast (>= 1.28.1, < 2.0)
|
199
|
+
regexp_parser (>= 2.9.3, < 3.0)
|
200
|
+
rubocop-ast (>= 1.38.0, < 2.0)
|
205
201
|
ruby-progressbar (~> 1.7)
|
206
|
-
unicode-display_width (>= 2.4.0, <
|
207
|
-
rubocop-ast (1.
|
208
|
-
parser (>= 3.
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
202
|
+
unicode-display_width (>= 2.4.0, < 4.0)
|
203
|
+
rubocop-ast (1.44.0)
|
204
|
+
parser (>= 3.3.7.2)
|
205
|
+
prism (~> 1.4)
|
206
|
+
rubocop-performance (1.24.0)
|
207
|
+
lint_roller (~> 1.1)
|
208
|
+
rubocop (>= 1.72.1, < 2.0)
|
209
|
+
rubocop-ast (>= 1.38.0, < 2.0)
|
210
|
+
rubocop-rails (2.26.2)
|
213
211
|
activesupport (>= 4.2.0)
|
214
212
|
rack (>= 1.1)
|
215
|
-
rubocop (>= 1.
|
213
|
+
rubocop (>= 1.52.0, < 2.0)
|
214
|
+
rubocop-ast (>= 1.31.1, < 2.0)
|
216
215
|
ruby-progressbar (1.13.0)
|
217
|
-
|
218
|
-
standard (1.
|
216
|
+
securerandom (0.4.1)
|
217
|
+
standard (1.47.0)
|
219
218
|
language_server-protocol (~> 3.17.0.2)
|
220
219
|
lint_roller (~> 1.0)
|
221
|
-
rubocop (~> 1.
|
220
|
+
rubocop (~> 1.73.0)
|
222
221
|
standard-custom (~> 1.0.0)
|
223
|
-
standard-performance (~> 1.
|
222
|
+
standard-performance (~> 1.7)
|
224
223
|
standard-custom (1.0.2)
|
225
224
|
lint_roller (~> 1.0)
|
226
225
|
rubocop (~> 1.50)
|
227
|
-
standard-performance (1.
|
226
|
+
standard-performance (1.7.0)
|
228
227
|
lint_roller (~> 1.1)
|
229
|
-
rubocop-performance (~> 1.
|
230
|
-
standard-rails (
|
228
|
+
rubocop-performance (~> 1.24.0)
|
229
|
+
standard-rails (1.2.0)
|
231
230
|
lint_roller (~> 1.0)
|
232
|
-
rubocop-rails (~> 2.
|
233
|
-
stimulus-rails (1.3.
|
234
|
-
railties (>= 6.0.0)
|
235
|
-
stringio (3.0.8)
|
236
|
-
thor (1.3.0)
|
237
|
-
timeout (0.4.0)
|
238
|
-
turbo-rails (1.5.0)
|
239
|
-
actionpack (>= 6.0.0)
|
240
|
-
activejob (>= 6.0.0)
|
231
|
+
rubocop-rails (~> 2.26.0)
|
232
|
+
stimulus-rails (1.3.4)
|
241
233
|
railties (>= 6.0.0)
|
234
|
+
stringio (3.1.6)
|
235
|
+
thor (1.3.2)
|
236
|
+
timeout (0.4.3)
|
237
|
+
turbo-rails (2.0.13)
|
238
|
+
actionpack (>= 7.1.0)
|
239
|
+
railties (>= 7.1.0)
|
242
240
|
tzinfo (2.0.6)
|
243
241
|
concurrent-ruby (~> 1.0)
|
244
|
-
unicode-display_width (
|
245
|
-
|
246
|
-
|
242
|
+
unicode-display_width (3.1.4)
|
243
|
+
unicode-emoji (~> 4.0, >= 4.0.4)
|
244
|
+
unicode-emoji (4.0.4)
|
245
|
+
uri (1.0.3)
|
246
|
+
useragent (0.16.11)
|
247
|
+
websocket-driver (0.7.7)
|
248
|
+
base64
|
247
249
|
websocket-extensions (>= 0.1.0)
|
248
250
|
websocket-extensions (0.1.5)
|
249
|
-
zeitwerk (2.
|
251
|
+
zeitwerk (2.7.2)
|
250
252
|
|
251
253
|
PLATFORMS
|
252
254
|
arm64-darwin-22
|
253
255
|
arm64-darwin-23
|
256
|
+
arm64-darwin-24
|
254
257
|
|
255
258
|
DEPENDENCIES
|
256
259
|
rake (~> 13.0)
|
data/LICENSE.txt
CHANGED
data/README.md
CHANGED
@@ -2,15 +2,37 @@
|
|
2
2
|
|
3
3
|
There are MANY Turbo/Hotwire/Stimulus modal dialog implementations out there, and it seems like everyone goes about it a different way. However, as you may have learned the hard way, the majority fall short in different, often subtle ways. They generally cover the basics quite well, but do not check all the boxes for real-world use.
|
4
4
|
|
5
|
-
UTMR aims to be the be-all and end-all of Turbo Modals. I believe it is the best implementation and checks all the boxes. It is feature-rich, yet extremely easy to use.
|
5
|
+
UTMR aims to be the be-all and end-all of Turbo Modals. I believe it is the best (only?) full-featured implementation and checks all the boxes. It is feature-rich, yet extremely easy to use.
|
6
6
|
|
7
|
-
Under the hood, it uses [Stimulus](https://stimulus.hotwired.dev), [Turbo](https://turbo.hotwired.dev/), [el-transition](https://github.com/mmccall10/el-transition), and
|
7
|
+
Under the hood, it uses [Stimulus](https://stimulus.hotwired.dev), [Turbo](https://turbo.hotwired.dev/), [el-transition](https://github.com/mmccall10/el-transition), and [Idiomorph](https://github.com/bigskysoftware/idiomorph).
|
8
8
|
|
9
|
-
It currently ships in a
|
9
|
+
It currently ships in a three flavors: Tailwind v3, Tailwind v4 and regular, vanilla CSS. It is easy to create your own variant to suit your needs.
|
10
10
|
|
11
|
+
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
## Installation
|
16
|
+
|
17
|
+
```
|
18
|
+
$ bundle add ultimate_turbo_modal
|
19
|
+
$ bundle exec rails g ultimate_turbo_modal:install
|
20
|
+
```
|
11
21
|
|
12
22
|
|
13
23
|
|
24
|
+
|
25
|
+
### Upgrading from version 1.x
|
26
|
+
|
27
|
+
- Remove the two `setupUltimateTurboModal`-related lines from `app/javascript/controllers/index.js`:
|
28
|
+
|
29
|
+
- Remove anything UTMR-specific in `tailwind.config.js`.
|
30
|
+
|
31
|
+
- Remove the optional Idiomorph tweaks:
|
32
|
+
- `<script src="https://unpkg.com/idiomorph"></script>` from your HTML
|
33
|
+
- `addEventListener("turbo:before-frame-render", (event) => {...` from `application.js`
|
34
|
+
- Update the gem to the newest version and follow the installation instructions above.
|
35
|
+
|
14
36
|
## Features and capabilities
|
15
37
|
|
16
38
|
- Extremely easy to use
|
@@ -38,79 +60,6 @@ It currently ships in a two flavors: Tailwind CSS, and regular, vanilla CSS. It
|
|
38
60
|
A demo application can be found at https://github.com/cmer/ultimate_turbo_modal-demo. A video demo can be seen here: [https://youtu.be/BVRDXLN1I78](https://youtu.be/BVRDXLN1I78).
|
39
61
|
|
40
62
|
|
41
|
-
|
42
|
-
|
43
|
-
## Installation
|
44
|
-
|
45
|
-
1. Install the gem and add to the application's Gemfile by executing:
|
46
|
-
|
47
|
-
$ bundle add ultimate_turbo_modal
|
48
|
-
|
49
|
-
2. Install the npm package:
|
50
|
-
|
51
|
-
$ yarn add ultimate_turbo_modal
|
52
|
-
|
53
|
-
- or -
|
54
|
-
|
55
|
-
$ bin/importmap pin ultimate_turbo_modal
|
56
|
-
|
57
|
-
3. Add the following as the first element in the `body` tag of `views/layouts/application.html.erb`:
|
58
|
-
|
59
|
-
```erb
|
60
|
-
<%= turbo_frame_tag "modal" %>
|
61
|
-
``````
|
62
|
-
|
63
|
-
4. Set your desired flavor and default configuration at `app/config/initializers/ultimate_turbo_modal.rb`.
|
64
|
-
|
65
|
-
```ruby
|
66
|
-
UltimateTurboModal.configure do |config|
|
67
|
-
config.flavor = :tailwind
|
68
|
-
config.padding = true
|
69
|
-
config.advance = true
|
70
|
-
config.close_button = true
|
71
|
-
config.header = true
|
72
|
-
config.header_divider = true
|
73
|
-
config.footer_divider = true
|
74
|
-
config.allowed_click_outside_selector = nil
|
75
|
-
end
|
76
|
-
```
|
77
|
-
|
78
|
-
5. Register the Stimulus controller in `app/javascript/controllers/index.js` adding the following lines at the end.
|
79
|
-
|
80
|
-
```javascript
|
81
|
-
import setupUltimateTurboModal from "ultimate_turbo_modal";
|
82
|
-
setupUltimateTurboModal(application);
|
83
|
-
```
|
84
|
-
|
85
|
-
6. If using the Tailwind flavor, add the following to `tailwind.config.js`:
|
86
|
-
|
87
|
-
```javascript
|
88
|
-
// For npm/yarn
|
89
|
-
const { getUltimateTurboModalPath } = require('ultimate_turbo_modal/gemPath');
|
90
|
-
|
91
|
-
// If using Importmaps, use the following instead:
|
92
|
-
// const { execSync } = require('child_process');
|
93
|
-
//
|
94
|
-
// function getUltimateTurboModalPath() {
|
95
|
-
// const path = execSync('bundle show ultimate_turbo_modal').toString().trim();
|
96
|
-
// return `${path}/**/*.{erb,html,rb}`;
|
97
|
-
//}
|
98
|
-
```
|
99
|
-
|
100
|
-
and then in the `content` section, add `getUltimateTurboModalPath()` as follow:
|
101
|
-
|
102
|
-
```javascript
|
103
|
-
content: [
|
104
|
-
'./public/*.html',
|
105
|
-
'./app/helpers/**/*.rb',
|
106
|
-
'./app/javascript/**/*.js',
|
107
|
-
'./app/views/**/*.{erb,haml,html,slim,rb}',
|
108
|
-
getUltimateTurboModalPath()
|
109
|
-
]
|
110
|
-
```
|
111
|
-
|
112
|
-
1. Optionally (but recommended), configure UTMR to use Idiomorph. See below for details.
|
113
|
-
|
114
63
|
|
115
64
|
|
116
65
|
## Usage
|
@@ -212,35 +161,11 @@ You can set a custom title and footer by passing a block. For example
|
|
212
161
|
<% end %>
|
213
162
|
```
|
214
163
|
|
215
|
-
## Installing & Configuring Idiomorph
|
216
|
-
|
217
|
-
Idiomorph can morph Turbo Frame responses to allow seemless navigation within Turbo Frames
|
218
|
-
without having to hide and reopen the modal. This is needed to prevent
|
219
|
-
the fade out / fade in animations from repeating when navigating within the modal.
|
220
|
-
|
221
|
-
You could optionally not use the code below if you do not intend to allow navigation within the modal.
|
222
|
-
|
223
|
-
Note that Turbo 8 will include Idiomorph by default.
|
224
|
-
|
225
|
-
In the meantime, add `<script src="https://unpkg.com/idiomorph"></script>` to your HTML <head>.
|
226
|
-
|
227
|
-
And the following code to `application.js`:
|
228
|
-
|
229
|
-
```javascript
|
230
|
-
addEventListener("turbo:before-frame-render", (event) => {
|
231
|
-
event.detail.render = (currentElement, newElement) => {
|
232
|
-
Idiomorph.morph(currentElement, newElement, {
|
233
|
-
morphStyle: 'innerHTML'
|
234
|
-
})
|
235
|
-
}
|
236
|
-
})
|
237
|
-
```
|
238
|
-
|
239
164
|
|
240
165
|
|
241
166
|
## Thanks
|
242
167
|
|
243
|
-
Thanks to [@joeldrapper](https://github.com/
|
168
|
+
Thanks to [@joeldrapper](https://github.com/joeldrapper) and [@konnorrogers](https://github.com/KonnorRogers) for all the help!
|
244
169
|
|
245
170
|
|
246
171
|
|
data/VERSION
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
2.0.0
|
data/javascript/index.js
ADDED
@@ -0,0 +1,37 @@
|
|
1
|
+
import UltimateTurboModalController from './modal_controller.js';
|
2
|
+
import { Idiomorph } from 'idiomorph';
|
3
|
+
import './styles/vanilla.css';
|
4
|
+
|
5
|
+
Turbo.StreamActions.modal = function () {
|
6
|
+
const message = this.getAttribute("message");
|
7
|
+
if (message == "hide") window.modal?.hide();
|
8
|
+
if (message == "close") window.modal?.hide();
|
9
|
+
};
|
10
|
+
|
11
|
+
// Escape modal from the backend on redirects
|
12
|
+
const handleTurboFrameMissing = (event) => {
|
13
|
+
if (event.detail.response.redirected &&
|
14
|
+
event.target == document.querySelector("turbo-frame#modal")) {
|
15
|
+
event.preventDefault()
|
16
|
+
event.detail.visit(event.detail.response)
|
17
|
+
}
|
18
|
+
};
|
19
|
+
|
20
|
+
// Morph the innerHTML of the modal to prevent flickering and transition animations
|
21
|
+
const handleTurboBeforeFrameRender = (event) => {
|
22
|
+
if (event.target.id === "modal") {
|
23
|
+
event.detail.render = (currentElement, newElement) => {
|
24
|
+
Idiomorph.morph(currentElement, newElement, {
|
25
|
+
morphstyle: 'innerHTML'
|
26
|
+
})
|
27
|
+
}
|
28
|
+
}
|
29
|
+
};
|
30
|
+
|
31
|
+
document.removeEventListener("turbo:frame-missing", handleTurboFrameMissing);
|
32
|
+
document.addEventListener("turbo:frame-missing", handleTurboFrameMissing);
|
33
|
+
|
34
|
+
document.removeEventListener("turbo:before-frame-render", handleTurboBeforeFrameRender);
|
35
|
+
document.addEventListener("turbo:before-frame-render", handleTurboBeforeFrameRender);
|
36
|
+
|
37
|
+
export { UltimateTurboModalController };
|