ultimate_turbo_modal 1.0.3 → 1.1.1
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/Gemfile.lock +1 -1
- data/README.md +9 -3
- 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: 1149adbc9b8dd940af463061bdfc46d09d1071531a0f08d73538a41c2d44ef52
|
4
|
+
data.tar.gz: d5ce0192c54ff6f731758515a9ed60f839315759b70e9ceaba57ce2847ed298f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 07b07aa40ab5c4000a6c06fa1d3ed410f7bebc3d44c46a670371e8e1044a168167cdd8a402865d26e3314b18c2e013b451a542c45a2a42e33d19cc8ce7b31f82
|
7
|
+
data.tar.gz: 5dc24349c452b9c7c8a9280d4f8dd8a0c36dd89efb261b5aa8ae6715f3921aab0e15a128e704ce2eb21f0a94158ba621ca7760289efc1df17fa7180a1e2cbc1f
|
data/CHANGELOG.md
CHANGED
data/Gemfile.lock
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
|
|
@@ -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
|
|
@@ -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.1
|
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
|