ultimate_turbo_modal 1.4.1 → 1.5.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/Gemfile.lock +1 -1
- data/README.md +7 -0
- data/lib/ultimate_turbo_modal/base.rb +22 -18
- data/lib/ultimate_turbo_modal/configuration.rb +4 -1
- data/lib/ultimate_turbo_modal/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a3b7775a51eebbcb891533ad98c37aa6399017092a1ee4218c74e8d2e552880b
|
4
|
+
data.tar.gz: 8eb9ede61100f91d1e0f716e0cba3a477d224431b84d70bc36fb6e1d62132bfb
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ebba9d4ae554dbceed25f2064b58ccb44ccfe5a98f826d57d0c15ae7d491d4b81348b9de8b4191f7eb807358b48b62a376297096c1fece1c9ab56e3331e00a11
|
7
|
+
data.tar.gz: b1d72d8ceba435dc770e219536a2dfbdd1613809fb4a65f10c25c1fa22829f88ef38b6b7f10442d07f8162dd4fa59aa534d095d21d9a1564f9098609bc71d490
|
data/CHANGELOG.md
CHANGED
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -26,6 +26,7 @@ It currently ships in a two flavors: Tailwind CSS, and regular, vanilla CSS. It
|
|
26
26
|
- Support for long, scrollable modals
|
27
27
|
- Properly locks the background page when scrolling a long modal
|
28
28
|
- Click outside the modal to dismiss
|
29
|
+
- Option to whitelist CSS selectors that won't dismiss the modal when clicked outside the modal (ie: datepicker)
|
29
30
|
- Keyboard control; ESC to dismiss
|
30
31
|
- Automatic (or not) close button
|
31
32
|
|
@@ -70,6 +71,7 @@ UltimateTurboModal.configure do |config|
|
|
70
71
|
config.header = true
|
71
72
|
config.header_divider = true
|
72
73
|
config.footer_divider = true
|
74
|
+
config.allowed_click_outside_selector = nil
|
73
75
|
end
|
74
76
|
```
|
75
77
|
|
@@ -173,6 +175,11 @@ Whether to display a divider below the header.
|
|
173
175
|
|
174
176
|
Whether to display a divider above the footer. The divider will not appear if no footer was specified.
|
175
177
|
|
178
|
+
### `allowed_click_outside_selector`, default: `nil`
|
179
|
+
|
180
|
+
A string of CSS selectors that can be clicked outside of the modal without dismissing the modal. Useful for elements
|
181
|
+
such as datepickers.
|
182
|
+
|
176
183
|
### Example usage with options
|
177
184
|
|
178
185
|
```erb
|
@@ -2,37 +2,40 @@
|
|
2
2
|
|
3
3
|
class UltimateTurboModal::Base < Phlex::HTML
|
4
4
|
prepend Phlex::DeferredRenderWithMainContent
|
5
|
-
# @param
|
5
|
+
# @param advance [Boolean] Whether to update the browser history when opening and closing the modal
|
6
|
+
# @param allowed_click_outside_selector [String] CSS selectors for elements that are allowed to be clicked outside of the modal without dismissing the modal
|
6
7
|
# @param close_button [Boolean] Whether to show a close button
|
7
|
-
# @param close_button_sr_label [String] Close button label for screen readers
|
8
8
|
# @param close_button_data_action [String] `data-action` attribute for the close button
|
9
|
-
# @param
|
10
|
-
# @param header_divider [Boolean] Whether to show a divider between the header and the main content
|
9
|
+
# @param close_button_sr_label [String] Close button label for screen readers
|
11
10
|
# @param footer_divider [Boolean] Whether to show a divider between the main content and the footer
|
12
|
-
# @param
|
11
|
+
# @param header_divider [Boolean] Whether to show a divider between the header and the main content
|
12
|
+
# @param padding [Boolean] Whether to add padding around the modal content
|
13
13
|
# @param request [ActionDispatch::Request] The current Rails request object
|
14
|
+
# @param title [String] The title of the modal
|
14
15
|
def initialize(
|
15
|
-
|
16
|
+
advance: UltimateTurboModal.configuration.advance,
|
17
|
+
allowed_click_outside_selector: UltimateTurboModal.configuration.allowed_click_outside_selector,
|
16
18
|
close_button: UltimateTurboModal.configuration.close_button,
|
17
|
-
close_button_sr_label: "Close modal",
|
18
19
|
close_button_data_action: "modal#hideModal",
|
19
|
-
|
20
|
+
close_button_sr_label: "Close modal",
|
21
|
+
footer_divider: UltimateTurboModal.configuration.footer_divider,
|
20
22
|
header: UltimateTurboModal.configuration.header,
|
21
23
|
header_divider: UltimateTurboModal.configuration.header_divider,
|
22
|
-
|
23
|
-
|
24
|
+
padding: UltimateTurboModal.configuration.padding,
|
25
|
+
request: nil, title: nil
|
24
26
|
)
|
25
|
-
@padding = padding
|
26
|
-
@close_button = close_button
|
27
|
-
@close_button_sr_label = close_button_sr_label
|
28
|
-
@close_button_data_action = close_button_data_action
|
29
27
|
@advance = !!advance
|
30
28
|
@advance_url = advance if advance.present? && advance.is_a?(String)
|
31
|
-
@
|
29
|
+
@allowed_click_outside_selector = allowed_click_outside_selector
|
30
|
+
@close_button = close_button
|
31
|
+
@close_button_data_action = close_button_data_action
|
32
|
+
@close_button_sr_label = close_button_sr_label
|
33
|
+
@footer_divider = footer_divider
|
32
34
|
@header = header
|
33
35
|
@header_divider = header_divider
|
34
|
-
@
|
36
|
+
@padding = padding
|
35
37
|
@request = request
|
38
|
+
@title = title
|
36
39
|
|
37
40
|
unless self.class.include?(Turbo::FramesHelper)
|
38
41
|
self.class.include Turbo::FramesHelper
|
@@ -67,7 +70,7 @@ class UltimateTurboModal::Base < Phlex::HTML
|
|
67
70
|
|
68
71
|
private
|
69
72
|
|
70
|
-
attr_accessor :request
|
73
|
+
attr_accessor :request, :allowed_click_outside_selector
|
71
74
|
|
72
75
|
def padding? = !!@padding
|
73
76
|
|
@@ -81,7 +84,7 @@ class UltimateTurboModal::Base < Phlex::HTML
|
|
81
84
|
|
82
85
|
def footer? = @footer.present?
|
83
86
|
|
84
|
-
def header_divider? = !!@header_divider && (@title_block || title?)
|
87
|
+
def header_divider? = !!@header_divider && (@title_block.present? || title?)
|
85
88
|
|
86
89
|
def footer_divider? = !!@footer_divider && footer?
|
87
90
|
|
@@ -135,6 +138,7 @@ class UltimateTurboModal::Base < Phlex::HTML
|
|
135
138
|
controller: "modal",
|
136
139
|
modal_target: "container",
|
137
140
|
modal_advance_url_value: advance_url,
|
141
|
+
modal_allowed_click_outside_selector_value: allowed_click_outside_selector,
|
138
142
|
action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
|
139
143
|
transition_enter: "ease-out duration-100",
|
140
144
|
transition_enter_start: "opacity-0",
|
@@ -11,10 +11,12 @@ module UltimateTurboModal
|
|
11
11
|
end
|
12
12
|
|
13
13
|
delegate :flavor, :flavor=, :close_button, :close_button=,
|
14
|
-
:advance, :advance=, :padding, :padding=,
|
14
|
+
:advance, :advance=, :padding, :padding=,
|
15
|
+
:allowed_click_outside_selector, :allowed_click_outside_selector=, to: :configuration
|
15
16
|
|
16
17
|
class Configuration
|
17
18
|
attr_reader :flavor, :close_button, :advance, :padding, :header, :header_divider, :footer_divider
|
19
|
+
attr_accessor :allowed_click_outside_selector
|
18
20
|
|
19
21
|
def initialize
|
20
22
|
@flavor = :tailwind
|
@@ -24,6 +26,7 @@ module UltimateTurboModal
|
|
24
26
|
@header = true
|
25
27
|
@header_divider = true
|
26
28
|
@footer_divider = true
|
29
|
+
@allowed_click_outside_selector = []
|
27
30
|
end
|
28
31
|
|
29
32
|
def flavor=(flavor)
|
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.5.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-28 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: phlex-rails
|