ultimate_turbo_modal 1.0.0 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +24 -16
- data/lib/ultimate_turbo_modal/base.rb +10 -10
- data/lib/ultimate_turbo_modal/flavors/tailwind.rb +1 -1
- data/lib/ultimate_turbo_modal/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a9827e4a255b0b49e9ca3454c396e0ca2c043041705058562cd097ee55ded670
|
|
4
|
+
data.tar.gz: 0df6f286051741524dce4ebaa9602cd7b1e37b082960bc2886495c4a93b2286c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0f3f52eb646666e9088b89696f9689ed17b2bf69abe1ea2e7225d0e4e625ecc28d9ae05b391ae640ca096d43b8afd88479278324b84d2515583d303539fb4c89
|
|
7
|
+
data.tar.gz: be333d50d9e831bf94c60e382fd5b0e7ecad5dcfcc7b73236a103aae8a0356179bd52d38a8400a04ed036a81e195115e091a6bfe448c3214e1331d6f4a11c13f
|
data/README.md
CHANGED
|
@@ -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
|
|
|
@@ -110,35 +110,42 @@ Adds padding inside the modal.
|
|
|
110
110
|
|
|
111
111
|
Shows or hide a close button (X) at the top right of the modal.
|
|
112
112
|
|
|
113
|
-
### `
|
|
113
|
+
### `advance`, default: `true`
|
|
114
114
|
|
|
115
115
|
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
116
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
Override for the URL being shown in the URL bar when `advance_history` is enabled. Default is the actual URL.
|
|
117
|
+
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
118
|
|
|
121
119
|
|
|
122
120
|
### Example usage with options
|
|
123
121
|
|
|
124
122
|
```erb
|
|
125
|
-
<%= modal(padding: true, close_button: false,
|
|
123
|
+
<%= modal(padding: true, close_button: false, advance: false) do %>
|
|
124
|
+
Hello World!
|
|
125
|
+
<% end %>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
```erb
|
|
129
|
+
<%= modal(padding: true, close_button: false, advance: "/foo/bar") do %>
|
|
126
130
|
Hello World!
|
|
127
131
|
<% end %>
|
|
128
132
|
```
|
|
129
133
|
|
|
130
134
|
## Installing & Configuring Idiomorph
|
|
131
135
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
136
|
+
Idiomorph can morph Turbo Frame responses to allow seemless navigation within Turbo Frames
|
|
137
|
+
without having to hide and reopen the modal. This is needed to prevent
|
|
138
|
+
the fade out / fade in animations from repeating when navigating within the modal.
|
|
139
|
+
|
|
140
|
+
You could optionally not use the code below if you do not intend to allow navigation within the modal.
|
|
141
|
+
|
|
142
|
+
Note that Turbo 8 will include Idiomorph by default.
|
|
143
|
+
|
|
144
|
+
In the meantime, add `<script src="https://unpkg.com/idiomorph"></script>` to your HTML <head>.
|
|
145
|
+
|
|
146
|
+
And the following code to `application.js`:
|
|
147
|
+
|
|
148
|
+
```js
|
|
142
149
|
addEventListener("turbo:before-frame-render", (event) => {
|
|
143
150
|
event.detail.render = (currentElement, newElement) => {
|
|
144
151
|
Idiomorph.morph(currentElement, newElement, {
|
|
@@ -146,6 +153,7 @@ addEventListener("turbo:before-frame-render", (event) => {
|
|
|
146
153
|
})
|
|
147
154
|
}
|
|
148
155
|
})
|
|
156
|
+
```
|
|
149
157
|
|
|
150
158
|
|
|
151
159
|
|
|
@@ -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",
|