ultimate_turbo_modal 1.0.0 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/README.md +33 -19
- data/lib/ultimate_turbo_modal/base.rb +10 -10
- data/lib/ultimate_turbo_modal/flavors/tailwind.rb +1 -1
- data/lib/ultimate_turbo_modal/flavors/vanilla.rb +99 -0
- data/lib/ultimate_turbo_modal/version.rb +1 -1
- metadata +4 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: acd3d63c952dd65a1f01d7cba82e4f3d9a86f0ab0873db34a69d9c39f4163798
|
4
|
+
data.tar.gz: dc7cb74c01338495576c5e69dbb583f39119b5a90832338ed4b8ccfb1eac123c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2c2f8afbe1c7bd889ec807df58b46bba7db466d65986b86646aa3e66530b8259860f1f2921861548cb3190ad3b4ad7b053f2f61b8a6de9eed995f15d92420f09
|
7
|
+
data.tar.gz: eb43ed0e8628317334ba37c15712aac05924a4b9b9d5dc53d53b181c2f209d149181f768b350495094da614891e39d6ef5e1e06a7c586e8008285eaa7b16afcd
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -6,7 +6,7 @@ UTMR aims to be the be-all and end-all of Turbo Modals. I believe it is the best
|
|
6
6
|
|
7
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 optionally [Idiomorph](https://github.com/bigskysoftware/idiomorph).
|
8
8
|
|
9
|
-
It currently ships in a
|
9
|
+
It currently ships in a two flavors: Tailwind CSS, and regular, vanilla CSS. It is easy to create your own to suit your needs such as vanilla CSS or any other CSS framework you may prefer. See `lib/ultimate_turbo_modal/flavors/vanilla.rb` for an example code.
|
10
10
|
|
11
11
|
|
12
12
|
|
@@ -51,7 +51,7 @@ A demo application can be found at https://github.com/cmer/ultimate_turbo_modal-
|
|
51
51
|
|
52
52
|
- or -
|
53
53
|
|
54
|
-
$ bin/
|
54
|
+
$ bin/importmap pin ultimate_turbo_modal
|
55
55
|
|
56
56
|
3. Add the following as the first element in the `body` tag of `views/layouts/application.html.erb`:
|
57
57
|
|
@@ -59,14 +59,20 @@ A demo application can be found at https://github.com/cmer/ultimate_turbo_modal-
|
|
59
59
|
<%= turbo_frame_tag "modal" %>
|
60
60
|
``````
|
61
61
|
|
62
|
-
4.
|
62
|
+
4. Set your desired flavor at `app/config/initializers/modal.rb`. The default is `:tailwind`.
|
63
|
+
|
64
|
+
```ruby
|
65
|
+
UltimateTurboModal.flavor = :tailwind # or :vanilla
|
66
|
+
```
|
67
|
+
|
68
|
+
5. Register the Stimulus controller in `app/javascript/controllers/index.js` adding the following lines at the end.
|
63
69
|
|
64
70
|
```js
|
65
71
|
import setupUltimateTurboModal from "ultimate_turbo_modal";
|
66
72
|
setupUltimateTurboModal(application);
|
67
73
|
```
|
68
74
|
|
69
|
-
|
75
|
+
6. Optionally (but recommended), configure UTMR to use Idiomorph. See below for details.
|
70
76
|
|
71
77
|
|
72
78
|
|
@@ -110,35 +116,42 @@ Adds padding inside the modal.
|
|
110
116
|
|
111
117
|
Shows or hide a close button (X) at the top right of the modal.
|
112
118
|
|
113
|
-
### `
|
119
|
+
### `advance`, default: `true`
|
114
120
|
|
115
121
|
When opening the modal, the URL in the URL bar will change to the URL of the view being shown in the modal. The Back button dismisses the modal and navigates back.
|
116
122
|
|
117
|
-
|
118
|
-
|
119
|
-
Override for the URL being shown in the URL bar when `advance_history` is enabled. Default is the actual URL.
|
123
|
+
If a URL is specified as a String, the browser history will advance, and the URL shown in the URL bad will be replaced by the URL specified.
|
120
124
|
|
121
125
|
|
122
126
|
### Example usage with options
|
123
127
|
|
124
128
|
```erb
|
125
|
-
<%= modal(padding: true, close_button: false,
|
129
|
+
<%= modal(padding: true, close_button: false, advance: false) do %>
|
130
|
+
Hello World!
|
131
|
+
<% end %>
|
132
|
+
```
|
133
|
+
|
134
|
+
```erb
|
135
|
+
<%= modal(padding: true, close_button: false, advance: "/foo/bar") do %>
|
126
136
|
Hello World!
|
127
137
|
<% end %>
|
128
138
|
```
|
129
139
|
|
130
140
|
## Installing & Configuring Idiomorph
|
131
141
|
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
+
Idiomorph can morph Turbo Frame responses to allow seemless navigation within Turbo Frames
|
143
|
+
without having to hide and reopen the modal. This is needed to prevent
|
144
|
+
the fade out / fade in animations from repeating when navigating within the modal.
|
145
|
+
|
146
|
+
You could optionally not use the code below if you do not intend to allow navigation within the modal.
|
147
|
+
|
148
|
+
Note that Turbo 8 will include Idiomorph by default.
|
149
|
+
|
150
|
+
In the meantime, add `<script src="https://unpkg.com/idiomorph"></script>` to your HTML <head>.
|
151
|
+
|
152
|
+
And the following code to `application.js`:
|
153
|
+
|
154
|
+
```js
|
142
155
|
addEventListener("turbo:before-frame-render", (event) => {
|
143
156
|
event.detail.render = (currentElement, newElement) => {
|
144
157
|
Idiomorph.morph(currentElement, newElement, {
|
@@ -146,6 +159,7 @@ addEventListener("turbo:before-frame-render", (event) => {
|
|
146
159
|
})
|
147
160
|
}
|
148
161
|
})
|
162
|
+
```
|
149
163
|
|
150
164
|
|
151
165
|
|
@@ -9,14 +9,14 @@ class UltimateTurboModal::Base < Phlex::HTML
|
|
9
9
|
|
10
10
|
# @param padding [Boolean] Whether to add padding around the modal content
|
11
11
|
# @param close_button [Boolean] Whether to show a close button.
|
12
|
-
# @param
|
13
|
-
# @param
|
12
|
+
# @param advance [Boolean] Whether to update the browser history when opening and closing the modal
|
13
|
+
# @param advance_url [String] Override the URL to use when advancing the history
|
14
14
|
# @param request [ActionDispatch::Request] The current Rails request object
|
15
|
-
def initialize(padding: true, close_button: true,
|
15
|
+
def initialize(padding: true, close_button: true, advance: true, request: nil)
|
16
16
|
@padding = padding
|
17
17
|
@close_button = close_button
|
18
|
-
@
|
19
|
-
@
|
18
|
+
@advance = advance
|
19
|
+
@advance_url = advance if advance && advance.is_a?(String)
|
20
20
|
@request = request
|
21
21
|
|
22
22
|
self.class.include Turbo::FramesHelper
|
@@ -46,8 +46,8 @@ class UltimateTurboModal::Base < Phlex::HTML
|
|
46
46
|
!!@padding
|
47
47
|
end
|
48
48
|
|
49
|
-
def
|
50
|
-
!!@
|
49
|
+
def advance?
|
50
|
+
!!@advance
|
51
51
|
end
|
52
52
|
|
53
53
|
def close_button?
|
@@ -66,9 +66,9 @@ class UltimateTurboModal::Base < Phlex::HTML
|
|
66
66
|
turbo_stream? || turbo_frame?
|
67
67
|
end
|
68
68
|
|
69
|
-
def
|
70
|
-
return nil unless
|
71
|
-
@
|
69
|
+
def advance_url
|
70
|
+
return nil unless advance?
|
71
|
+
@advance_url || request.original_url
|
72
72
|
end
|
73
73
|
|
74
74
|
def method_missing(method, *, &block)
|
@@ -27,7 +27,7 @@ module UltimateTurboModal::Flavors
|
|
27
27
|
data: {
|
28
28
|
controller: "modal",
|
29
29
|
modal_target: "container",
|
30
|
-
|
30
|
+
modal_advance_url_value: advance_url,
|
31
31
|
action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
|
32
32
|
transition_enter: "ease-out duration-300",
|
33
33
|
transition_enter_start: "opacity-0",
|
@@ -0,0 +1,99 @@
|
|
1
|
+
module UltimateTurboModal::Flavors
|
2
|
+
class Vanilla < UltimateTurboModal::Base
|
3
|
+
private
|
4
|
+
|
5
|
+
def modal(&)
|
6
|
+
div_dialog do
|
7
|
+
div_overlay
|
8
|
+
div_outer_container do
|
9
|
+
div_inner_container do
|
10
|
+
div_border do
|
11
|
+
button_close if close_button?
|
12
|
+
yield
|
13
|
+
end
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
18
|
+
|
19
|
+
def div_dialog(&)
|
20
|
+
div(id: "modal-container",
|
21
|
+
class: "modal-container",
|
22
|
+
role: "dialog",
|
23
|
+
aria: {
|
24
|
+
labeled_by: "modal-title",
|
25
|
+
modal: true
|
26
|
+
},
|
27
|
+
data: {
|
28
|
+
controller: "modal",
|
29
|
+
modal_target: "container",
|
30
|
+
modal_advance_url_value: advance_url,
|
31
|
+
action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
|
32
|
+
transition_enter: "ease-out duration-300",
|
33
|
+
transition_enter_start: "opacity-0",
|
34
|
+
transition_enter_end: "opacity-100",
|
35
|
+
transition_leave: "ease-in duration-200",
|
36
|
+
transition_leave_start: "opacity-100",
|
37
|
+
transition_leave_end: "opacity-0"
|
38
|
+
}, &)
|
39
|
+
end
|
40
|
+
|
41
|
+
def div_overlay(&)
|
42
|
+
div(id: "modal-overlay",
|
43
|
+
class: "modal-overlay",
|
44
|
+
data: {
|
45
|
+
modal_target: "overlay",
|
46
|
+
action: "click->modal#outsideModalClicked"
|
47
|
+
})
|
48
|
+
end
|
49
|
+
|
50
|
+
def div_outer_container(&)
|
51
|
+
div(id: "modal-outer",
|
52
|
+
class: "modal-outer",
|
53
|
+
data: {
|
54
|
+
modal_target: "modal"
|
55
|
+
}, &)
|
56
|
+
end
|
57
|
+
|
58
|
+
def div_inner_container(&)
|
59
|
+
div(id: "modal-inner",
|
60
|
+
class: "modal-inner",
|
61
|
+
data: {
|
62
|
+
modal_target: "innerModal"
|
63
|
+
}, &)
|
64
|
+
end
|
65
|
+
|
66
|
+
def div_border(&)
|
67
|
+
klass = "modal-border"
|
68
|
+
klass = "#{klass} modal-padding" if @padding == true
|
69
|
+
klass = "#{klass} #{@padding}" if @padding.is_a?(String)
|
70
|
+
div(id: "modal-border", class: klass, &)
|
71
|
+
end
|
72
|
+
|
73
|
+
def button_close(&)
|
74
|
+
div(class: "modal-close") do
|
75
|
+
button(type: "button",
|
76
|
+
aria: {label: "close"},
|
77
|
+
data: {
|
78
|
+
action: "modal#hideModal"
|
79
|
+
}) { icon_close }
|
80
|
+
end
|
81
|
+
end
|
82
|
+
|
83
|
+
def icon_close
|
84
|
+
svg(
|
85
|
+
xmlns: "http://www.w3.org/2000/svg",
|
86
|
+
fill: "none",
|
87
|
+
viewbox: "0 0 24 24",
|
88
|
+
stroke_width: "1.5",
|
89
|
+
stroke: "currentColor",
|
90
|
+
) do |s|
|
91
|
+
s.path(
|
92
|
+
stroke_linecap: "round",
|
93
|
+
stroke_linejoin: "round",
|
94
|
+
d: "M6 18L18 6M6 6l12 12"
|
95
|
+
)
|
96
|
+
end
|
97
|
+
end
|
98
|
+
end
|
99
|
+
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ultimate_turbo_modal
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Carl Mercier
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-
|
11
|
+
date: 2023-11-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: phlex-rails
|
@@ -73,7 +73,7 @@ dependencies:
|
|
73
73
|
- !ruby/object:Gem::Version
|
74
74
|
version: '0'
|
75
75
|
description: An easy-to-use, flexible, and powerful Turbo Modal solution for Rails
|
76
|
-
7+ built with Stimulus.js, Tailwind CSS and Hotwire.
|
76
|
+
7+ built with Stimulus.js, Tailwind CSS (or vanilla CSS) and Hotwire.
|
77
77
|
email:
|
78
78
|
- foss@carlmercier.com
|
79
79
|
executables: []
|
@@ -93,6 +93,7 @@ files:
|
|
93
93
|
- lib/ultimate_turbo_modal.rb
|
94
94
|
- lib/ultimate_turbo_modal/base.rb
|
95
95
|
- lib/ultimate_turbo_modal/flavors/tailwind.rb
|
96
|
+
- lib/ultimate_turbo_modal/flavors/vanilla.rb
|
96
97
|
- lib/ultimate_turbo_modal/helpers/controller_helper.rb
|
97
98
|
- lib/ultimate_turbo_modal/helpers/stream_helper.rb
|
98
99
|
- lib/ultimate_turbo_modal/helpers/view_helper.rb
|