turbo_modal 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +42 -13
- data/lib/tasks/turbo_modal_tasks.rake +1 -1
- data/lib/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: 486a73b0741ef4b281dccae887aaafbddb19e523fb1af08004cc5f5a89512b2a
|
|
4
|
+
data.tar.gz: a447a48602b34351111934c794bcea834af6913aed49e12555e1bbe4d29f9b08
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b642136bf41429454a2b03229cba52923608162822d1627ac5b08bbe9e5ef62e14e3f038e6bd040ada635c785949ec8c6be195aee5204096ee272e05c9fae53e
|
|
7
|
+
data.tar.gz: fce574173273f78864d6a3a97ab2711479b9d06da63aca5d4278ce736f1e7196247c9c852532245161eafde46c4e8d4b1db241ca48c8828ba290da7b6de6aabe
|
data/README.md
CHANGED
|
@@ -1,28 +1,57 @@
|
|
|
1
1
|
# TurboModal
|
|
2
|
-
|
|
2
|
+
Turbo Frame driven modal
|
|
3
3
|
|
|
4
4
|
## Usage
|
|
5
|
-
|
|
5
|
+
Add the following to the body tag to link controllers required to trigger scrim + modal transitions
|
|
6
|
+
```html
|
|
7
|
+
<body data-controller="scrim modal" data-action="hide-scrim@window->scrim#hide show-scrim@window->show"></body>
|
|
8
|
+
```
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
10
|
+
Turbo modal provides helpers to add a basic scrim and modal target frame. These should be placed inside the body:
|
|
11
|
+
```html
|
|
12
|
+
<body data-controller="scrim modal" data-action="hide-scrim@window->scrim#hide show-scrim@window->show">
|
|
13
|
+
<%= scrim_tag %>
|
|
14
|
+
<%= modal_tag %>
|
|
15
|
+
</body>
|
|
16
|
+
```
|
|
9
17
|
|
|
10
|
-
|
|
11
|
-
|
|
18
|
+
###Import tubo_modal styles
|
|
19
|
+
```css
|
|
20
|
+
/* application.css */
|
|
21
|
+
|
|
22
|
+
@import "~@katalyst-interactive/turbo_modal";
|
|
12
23
|
```
|
|
13
24
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
25
|
+
To get a modal displaying you will need 2 things:
|
|
26
|
+
1. A `modal_link`
|
|
27
|
+
2. Some `modal_content`
|
|
28
|
+
|
|
29
|
+
`modal_link`'s are similar to a `link_to` in rails but it will point the path of the link to target the modal turbo frame.
|
|
30
|
+
The resulting path will need to wrap some content in a `modal_content` helper tag.
|
|
31
|
+
|
|
32
|
+
eg:
|
|
33
|
+
```html
|
|
34
|
+
<!-- app/views/homepage/index.html.erb -->
|
|
35
|
+
<%= modal_link "click to open modal", modal_path("example") %>
|
|
17
36
|
```
|
|
18
37
|
|
|
19
|
-
|
|
38
|
+
```html
|
|
39
|
+
<!-- app/views/modals/show.html.erb -->
|
|
40
|
+
<%= modal_content do %>
|
|
41
|
+
<div>
|
|
42
|
+
<h1>Modal title</h1>
|
|
43
|
+
</div>
|
|
44
|
+
<% end %>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Installation
|
|
48
|
+
Run these commands:
|
|
20
49
|
```bash
|
|
21
|
-
$
|
|
50
|
+
$ bundle add 'turbo_modal'
|
|
51
|
+
$ rails turbo_modal:install
|
|
22
52
|
```
|
|
23
53
|
|
|
24
|
-
|
|
25
|
-
Contribution directions go here.
|
|
54
|
+
`rails turbo_modal:install` will add the `turbo_modal` npm packages required. It also sets up stimulus and turbo packages.
|
|
26
55
|
|
|
27
56
|
## License
|
|
28
57
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/lib/turbo_modal/version.rb
CHANGED