ultimate_turbo_modal 1.2.0 → 1.3.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 +8 -0
- data/Gemfile.lock +1 -1
- data/README.md +31 -14
- data/lib/phlex/deferred_render_with_main_content.rb +8 -0
- data/lib/ultimate_turbo_modal/base.rb +9 -2
- data/lib/ultimate_turbo_modal/flavors/tailwind.rb +11 -1
- data/lib/ultimate_turbo_modal/flavors/vanilla.rb +5 -1
- data/lib/ultimate_turbo_modal/version.rb +1 -1
- data/lib/ultimate_turbo_modal.rb +1 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b09b8cb53143af89cae066415021da467520342232aa61eec3c53b93fbc57b0d
|
4
|
+
data.tar.gz: b8c033322d1af2cf0117e7bbadf914668bdd8c7eb540487eadaccd31722a3473
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fbe3f49e69952e28b6fcd3b26d7423700d10f5703a6802acb5be6a9dbdf7cff0003e01a44c4afdae255fd314f78e9c008f1d40f95f78254d6d8c6600762b398d
|
7
|
+
data.tar.gz: 66a67b13c8dfc6e8b1b0b36a091d1595034cce465196aa73c03f8fedcf09db4f1e733b8c13041f8e923fd6ab52697adb54b0e33e8308a3092365af062b9fd6b5
|
data/CHANGELOG.md
CHANGED
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -75,14 +75,14 @@ end
|
|
75
75
|
|
76
76
|
5. Register the Stimulus controller in `app/javascript/controllers/index.js` adding the following lines at the end.
|
77
77
|
|
78
|
-
```
|
78
|
+
```javascript
|
79
79
|
import setupUltimateTurboModal from "ultimate_turbo_modal";
|
80
80
|
setupUltimateTurboModal(application);
|
81
81
|
```
|
82
82
|
|
83
83
|
6. If using the Tailwind flavor, add the following to `tailwind.config.js`:
|
84
84
|
|
85
|
-
```
|
85
|
+
```javascript
|
86
86
|
// For npm/yarn
|
87
87
|
const { getUltimateTurboModalPath } = require('ultimate_turbo_modal/gemPath');
|
88
88
|
|
@@ -97,16 +97,17 @@ const { getUltimateTurboModalPath } = require('ultimate_turbo_modal/gemPath');
|
|
97
97
|
|
98
98
|
and then in the `content` section, add `getUltimateTurboModalPath()` as follow:
|
99
99
|
|
100
|
-
```
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
100
|
+
```javascript
|
101
|
+
content: [
|
102
|
+
'./public/*.html',
|
103
|
+
'./app/helpers/**/*.rb',
|
104
|
+
'./app/javascript/**/*.js',
|
105
|
+
'./app/views/**/*.{erb,haml,html,slim,rb}',
|
106
|
+
getUltimateTurboModalPath()
|
107
|
+
]
|
107
108
|
```
|
108
109
|
|
109
|
-
|
110
|
+
1. Optionally (but recommended), configure UTMR to use Idiomorph. See below for details.
|
110
111
|
|
111
112
|
|
112
113
|
|
@@ -158,7 +159,7 @@ If a URL is specified as a String, the browser history will advance, and the URL
|
|
158
159
|
|
159
160
|
### `title`, default: `nil`
|
160
161
|
|
161
|
-
Title to display in the modal header.
|
162
|
+
Title to display in the modal header. Alternatively, you can set the title with a block.
|
162
163
|
|
163
164
|
### `header`, default: `true`
|
164
165
|
|
@@ -172,8 +173,6 @@ Whether to display a divider below the header.
|
|
172
173
|
|
173
174
|
Whether to display a divider above the footer. The divider will not appear if no footer was specified.
|
174
175
|
|
175
|
-
|
176
|
-
|
177
176
|
### Example usage with options
|
178
177
|
|
179
178
|
```erb
|
@@ -188,6 +187,24 @@ Whether to display a divider above the footer. The divider will not appear if no
|
|
188
187
|
<% end %>
|
189
188
|
```
|
190
189
|
|
190
|
+
### Title and Footer
|
191
|
+
|
192
|
+
You can set a custom title and footer by passing a block. For example
|
193
|
+
|
194
|
+
```erb
|
195
|
+
<%= modal do |m| %>
|
196
|
+
<% m.title do %>
|
197
|
+
<div>My Title</div>
|
198
|
+
<% end %>
|
199
|
+
|
200
|
+
Modal body
|
201
|
+
|
202
|
+
<% m.footer do %>
|
203
|
+
<input type="submit" form="myform">Submit</input>
|
204
|
+
<% end %>
|
205
|
+
<% end %>
|
206
|
+
```
|
207
|
+
|
191
208
|
## Installing & Configuring Idiomorph
|
192
209
|
|
193
210
|
Idiomorph can morph Turbo Frame responses to allow seemless navigation within Turbo Frames
|
@@ -202,7 +219,7 @@ In the meantime, add `<script src="https://unpkg.com/idiomorph"></script>` to yo
|
|
202
219
|
|
203
220
|
And the following code to `application.js`:
|
204
221
|
|
205
|
-
```
|
222
|
+
```javascript
|
206
223
|
addEventListener("turbo:before-frame-render", (event) => {
|
207
224
|
event.detail.render = (currentElement, newElement) => {
|
208
225
|
Idiomorph.morph(currentElement, newElement, {
|
@@ -1,4 +1,5 @@
|
|
1
1
|
class UltimateTurboModal::Base < Phlex::HTML
|
2
|
+
prepend Phlex::DeferredRenderWithMainContent
|
2
3
|
# @param padding [Boolean] Whether to add padding around the modal content
|
3
4
|
# @param close_button [Boolean] Whether to show a close button.
|
4
5
|
# @param advance [Boolean] Whether to update the browser history when opening and closing the modal
|
@@ -48,25 +49,31 @@ class UltimateTurboModal::Base < Phlex::HTML
|
|
48
49
|
end
|
49
50
|
end
|
50
51
|
|
52
|
+
def title(&block)
|
53
|
+
@title_block = block
|
54
|
+
end
|
55
|
+
|
51
56
|
def footer(&block)
|
52
57
|
@footer = block
|
53
58
|
end
|
54
59
|
|
55
60
|
private
|
56
61
|
|
57
|
-
attr_accessor :request
|
62
|
+
attr_accessor :request
|
58
63
|
|
59
64
|
def padding? = !!@padding
|
60
65
|
|
61
66
|
def close_button? = !!@close_button
|
62
67
|
|
68
|
+
def title_block? = !!@title_block
|
69
|
+
|
63
70
|
def title? = !!@title
|
64
71
|
|
65
72
|
def header? = !!@header
|
66
73
|
|
67
74
|
def footer? = @footer.present?
|
68
75
|
|
69
|
-
def header_divider? = !!@header_divider && title?
|
76
|
+
def header_divider? = !!@header_divider && (@title_block || title?)
|
70
77
|
|
71
78
|
def footer_divider? = !!@footer_divider && footer?
|
72
79
|
|
@@ -76,6 +76,12 @@ module UltimateTurboModal::Flavors
|
|
76
76
|
div(id: "modal-main", class: "group-data-[padding=true]:p-4 group-data-[padding=true]:pt-2", &)
|
77
77
|
end
|
78
78
|
|
79
|
+
def header_block
|
80
|
+
return if @header_block.blank?
|
81
|
+
render @header_block
|
82
|
+
nil
|
83
|
+
end
|
84
|
+
|
79
85
|
def div_header(&)
|
80
86
|
div(id: "modal-header", class: "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]:border-b group-data-[header=false]:absolute") do
|
81
87
|
div_title
|
@@ -85,7 +91,11 @@ module UltimateTurboModal::Flavors
|
|
85
91
|
|
86
92
|
def div_title
|
87
93
|
div(id: "modal-title", class: "pl-4") do
|
88
|
-
|
94
|
+
if @title_block.present?
|
95
|
+
render @title_block
|
96
|
+
else
|
97
|
+
h3(id: "modal-title-h", class: "group-data-[title=false]:hidden text-lg font-semibold text-gray-900 dark:text-white") { @title }
|
98
|
+
end
|
89
99
|
end
|
90
100
|
end
|
91
101
|
|
@@ -79,7 +79,11 @@ module UltimateTurboModal::Flavors
|
|
79
79
|
|
80
80
|
def div_title
|
81
81
|
div(id: "modal-title", class: "modal-title") do
|
82
|
-
|
82
|
+
if @title_block.present?
|
83
|
+
render @title_block
|
84
|
+
else
|
85
|
+
h3(id: "modal-title-h", class: "modal-title-h") { @title }
|
86
|
+
end
|
83
87
|
end
|
84
88
|
end
|
85
89
|
|
data/lib/ultimate_turbo_modal.rb
CHANGED
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.3.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-
|
11
|
+
date: 2023-11-15 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: phlex-rails
|
@@ -90,6 +90,7 @@ files:
|
|
90
90
|
- LICENSE.txt
|
91
91
|
- README.md
|
92
92
|
- Rakefile
|
93
|
+
- lib/phlex/deferred_render_with_main_content.rb
|
93
94
|
- lib/ultimate_turbo_modal.rb
|
94
95
|
- lib/ultimate_turbo_modal/base.rb
|
95
96
|
- lib/ultimate_turbo_modal/configuration.rb
|