cable_modal 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +115 -0
- data/Rakefile +18 -0
- data/lib/cable_modal.rb +6 -0
- data/lib/cable_modal/engine.rb +13 -0
- data/lib/cable_modal/version.rb +3 -0
- data/lib/generators/cable_modal/install_generator.rb +44 -0
- data/lib/generators/cable_modal/templates/init_bootstrap.js +5 -0
- data/lib/generators/cable_modal/templates/layouts/cable_modal/bootstrap.html.erb +14 -0
- data/lib/tasks/cable_modal_tasks.rake +4 -0
- metadata +114 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: f0bbdd38fb8edb2a7fda04b883f73a5194e5367886ddbb276b1e5b03d190d835
|
4
|
+
data.tar.gz: 1fa914c7baa60f73a33dffca06bbf97eab726b27d56bd7cdae8e1f82f3112141
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 1a74de7c534c22bdc69477378e847de1372911d1c07c6b8a55f701010256d21e34215aa1bc7e2b787a78910986b115099bd820d49ab0ea1486c0fc5919494a26
|
7
|
+
data.tar.gz: 74c207904600ef061b4f243114f36d512d42e728368eb43be8964909c98bd2e3e3d0253f08037767dcc23fe7b0f33954af3dcdbefce05c4709a4f40fcd0f98b6
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2021 Rafe Rosen
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,115 @@
|
|
1
|
+
# CableModal
|
2
|
+
This plugin facilitates creating server-rendered modal workflows in Rails using [CableReady](https://cableready.stimulusreflex.com) custom operations. A plugin system is provided to allow you to use your modal provider of choice. A plugin for Bootstrap 5 is provided and used in these examples.
|
3
|
+
|
4
|
+
The plugin provides a `<cable-modal>` web component and a set of custom CableReady operations for controlling it. Once the `<cable-modal>` element is on the page, you can control it with the following operations:
|
5
|
+
|
6
|
+
- `openModal()`
|
7
|
+
- `closeModal()`
|
8
|
+
- `updateModal({html: "HTML string for modal content"})`
|
9
|
+
|
10
|
+
![Demo screencast](/demo.gif)
|
11
|
+
|
12
|
+
## Installation
|
13
|
+
First install the gem
|
14
|
+
|
15
|
+
```bash
|
16
|
+
$ bundle add cable_modal
|
17
|
+
```
|
18
|
+
|
19
|
+
Next install the npm package
|
20
|
+
|
21
|
+
```bash
|
22
|
+
$ yarn add cable_modal
|
23
|
+
```
|
24
|
+
|
25
|
+
Finally, run the generator
|
26
|
+
|
27
|
+
```
|
28
|
+
$ bin/rails g cable_modal:install
|
29
|
+
```
|
30
|
+
|
31
|
+
The generator does three things:
|
32
|
+
|
33
|
+
1. installs a `<cable-modal>` web component into your `application.html.erb` layout
|
34
|
+
3. installs a `cable_modal.html.erb` template into `app/views/layouts`. Use this layout to assist with rendering modal content.
|
35
|
+
2. adds intialization code to `application.js`
|
36
|
+
|
37
|
+
## Usage with Mrujs / CableCar
|
38
|
+
|
39
|
+
This gem adds 3 custom operations you can use anywhere you use CableReady:
|
40
|
+
- openModal
|
41
|
+
- closeModal
|
42
|
+
- updateModal
|
43
|
+
|
44
|
+
A great way to to use these to control the custom modal is with [mrujs](https://mrujs.com) and the [cable_car feature](https://cableready.stimulusreflex.com/v/v5/cable-car) added in CableReady 5. Here's an example.
|
45
|
+
|
46
|
+
First you'll want to set up mrujs with the CableCar plugin. Follow the [instructions in the mrujs docs](https://mrujs.com/how-tos/integrate-cablecar).
|
47
|
+
|
48
|
+
Now you can add `data-cable-car` to any links or forms you want to use to control the modal.
|
49
|
+
|
50
|
+
```html
|
51
|
+
<a href="/confirmations/new" data-cable-car>Open Confirmation in Modal</a>
|
52
|
+
|
53
|
+
<!-- OR -->
|
54
|
+
|
55
|
+
<form action="/confirmations" data-cable-car>
|
56
|
+
<button>Submit form and process result in modal</button>
|
57
|
+
</form>
|
58
|
+
```
|
59
|
+
|
60
|
+
Then in your controllers, process the request and use `render operations:` to send CableReady operations back to the client.
|
61
|
+
|
62
|
+
```ruby
|
63
|
+
# confirmations_controller.rb
|
64
|
+
|
65
|
+
def new
|
66
|
+
@confirmation = Confirmation.new
|
67
|
+
render operations: cable_car
|
68
|
+
.update_modal(
|
69
|
+
html: self.class.render(
|
70
|
+
template: "confirmations/new",
|
71
|
+
assigns: {confirmation: @confirmation},
|
72
|
+
layout: "cable_modal",
|
73
|
+
))
|
74
|
+
.open_modal
|
75
|
+
end
|
76
|
+
|
77
|
+
def create
|
78
|
+
@confirmation = Confirmation.new(confirmation_params)
|
79
|
+
if @confirmation.save
|
80
|
+
render operations: cable_car.close_modal
|
81
|
+
else
|
82
|
+
render operations: cable_car.update_modal(
|
83
|
+
html: self.class.render(
|
84
|
+
template: "confirmations/new",
|
85
|
+
assigns: {confirmation: @confirmation},
|
86
|
+
layout: "cable_modal",
|
87
|
+
))
|
88
|
+
end
|
89
|
+
end
|
90
|
+
```
|
91
|
+
|
92
|
+
## Customization
|
93
|
+
|
94
|
+
If you don't want to use Bootstrap's modals, you can write your own plugin and then pass it to `CableModal.use(plugin)` in your javascript initializion.
|
95
|
+
|
96
|
+
Plugins are plain javascript objects with the following properties:
|
97
|
+
|
98
|
+
```javascript
|
99
|
+
{
|
100
|
+
connect() {}, // runs when the <cable-modal> component is added
|
101
|
+
disconnect() {}, // runs when the <cable-modal> component is removed
|
102
|
+
openModal: (operation) -> {}, // open the modal
|
103
|
+
closeModal: (operation) -> {}, // close the modal
|
104
|
+
updateModal: (operation) -> {}, // update the modal's content
|
105
|
+
defaultContent: string // default innerHTML of the <cable-modal> component
|
106
|
+
}
|
107
|
+
```
|
108
|
+
|
109
|
+
Note that all functions will run bound to the `<cable-modal>` DOM node. You can access the original plugin object inside these bound functions by calling `this.plugin`.
|
110
|
+
|
111
|
+
## Contributing
|
112
|
+
Issues and pull requests are welcome.
|
113
|
+
|
114
|
+
## License
|
115
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
require "bundler/setup"
|
2
|
+
|
3
|
+
APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
|
4
|
+
load "rails/tasks/engine.rake"
|
5
|
+
|
6
|
+
load "rails/tasks/statistics.rake"
|
7
|
+
|
8
|
+
require "bundler/gem_tasks"
|
9
|
+
|
10
|
+
require "rake/testtask"
|
11
|
+
|
12
|
+
Rake::TestTask.new(:test) do |t|
|
13
|
+
t.libs << "test"
|
14
|
+
t.pattern = "test/**/*_test.rb"
|
15
|
+
t.verbose = false
|
16
|
+
end
|
17
|
+
|
18
|
+
task default: :test
|
data/lib/cable_modal.rb
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
require "cable_ready"
|
2
|
+
|
3
|
+
module CableModal
|
4
|
+
class Engine < ::Rails::Engine
|
5
|
+
initializer "cable_modal.operations" do
|
6
|
+
CableReady.configure do |config|
|
7
|
+
config.add_operation_name :open_modal
|
8
|
+
config.add_operation_name :update_modal
|
9
|
+
config.add_operation_name :close_modal
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
@@ -0,0 +1,44 @@
|
|
1
|
+
class CableModal::InstallGenerator < Rails::Generators::Base
|
2
|
+
class_option :skip_application_layout, type: "boolean", default: false, desc: "Don't modify application layout"
|
3
|
+
class_option :skip_javascript, type: "boolean", default: false, desc: "Don't modify application javascript"
|
4
|
+
class_option :skip_modal_layout, type: "boolean", default: false, desc: "Don't install a custom layout for your modal content"
|
5
|
+
class_option :application_layout, type: "string", default: "app/views/layouts/application.html.erb", desc: "Specify a custom layout install target"
|
6
|
+
class_option :javascript, type: "string", default: "app/javascript/packs/application.js", desc: "Specify a custom javascript install target"
|
7
|
+
class_option :plugin, type: "string", default: "bootstrap", desc: "Specify your modal provider plugin. Currently bootstrap (5) is the only provided option. You can always configure custom plugins in your application scripts."
|
8
|
+
|
9
|
+
source_root File.expand_path("../templates", __FILE__)
|
10
|
+
|
11
|
+
def install
|
12
|
+
install_application_layout unless options.skip_application_layout?
|
13
|
+
install_modal_content_layout unless options.skip_modal_layout?
|
14
|
+
install_javascript unless options.skip_javascript?
|
15
|
+
end
|
16
|
+
|
17
|
+
private
|
18
|
+
|
19
|
+
def install_application_layout
|
20
|
+
insert_into_file options.application_layout, " <cable-modal></cable-modal>\n ", before: "</body>"
|
21
|
+
end
|
22
|
+
|
23
|
+
def install_javascript
|
24
|
+
append_to_file "app/javascript/packs/application.js", File.read(javascript_template)
|
25
|
+
end
|
26
|
+
|
27
|
+
def install_modal_content_layout
|
28
|
+
copy_file modal_layout_template, "app/views/layouts/cable_modal.html.erb"
|
29
|
+
end
|
30
|
+
|
31
|
+
def javascript_template
|
32
|
+
case options.plugin
|
33
|
+
when "bootstrap" then File.expand_path("../templates/init_bootstrap.js", __FILE__)
|
34
|
+
else raise "Unrecognized plugin `#{options.plugin}`"
|
35
|
+
end
|
36
|
+
end
|
37
|
+
|
38
|
+
def modal_layout_template
|
39
|
+
case options.plugin
|
40
|
+
when "bootstrap" then "layouts/cable_modal/bootstrap.html.erb"
|
41
|
+
else raise "Unrecognized plugin `#{options.plugin}`"
|
42
|
+
end
|
43
|
+
end
|
44
|
+
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<% if content_for?(:cable_modal_header) %>
|
2
|
+
<div class="modal-header">
|
3
|
+
<%= content_for(:cable_modal_header) %>
|
4
|
+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
5
|
+
</div>
|
6
|
+
<% end %>
|
7
|
+
<div class="modal-body">
|
8
|
+
<%= yield %>
|
9
|
+
</div>
|
10
|
+
<% if content_for?(:cable_modal_footer) %>
|
11
|
+
<div class="modal-footer">
|
12
|
+
<%= content_for(:cable_modal_footer) %>
|
13
|
+
</div>
|
14
|
+
<% end %>
|
metadata
ADDED
@@ -0,0 +1,114 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: cable_modal
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Rafe Rosen
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2021-08-22 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 6.1.4
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 6.1.4
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: cable_ready
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 5.0.0pre2
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: 5.0.0pre2
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: rubocop
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - ">="
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '0'
|
48
|
+
type: :development
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - ">="
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: '0'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: standard
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - ">="
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '0'
|
62
|
+
type: :development
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - ">="
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: '0'
|
69
|
+
description: This library provides a set of CableReady operations for driving server-rendered
|
70
|
+
modal form workflows in Rails. Right now it provides an adapter for Bootstrap 5.
|
71
|
+
Plugins for other modal libraries may be added in the future.
|
72
|
+
email:
|
73
|
+
- rafe@existentialmutt.com
|
74
|
+
executables: []
|
75
|
+
extensions: []
|
76
|
+
extra_rdoc_files: []
|
77
|
+
files:
|
78
|
+
- MIT-LICENSE
|
79
|
+
- README.md
|
80
|
+
- Rakefile
|
81
|
+
- lib/cable_modal.rb
|
82
|
+
- lib/cable_modal/engine.rb
|
83
|
+
- lib/cable_modal/version.rb
|
84
|
+
- lib/generators/cable_modal/install_generator.rb
|
85
|
+
- lib/generators/cable_modal/templates/init_bootstrap.js
|
86
|
+
- lib/generators/cable_modal/templates/layouts/cable_modal/bootstrap.html.erb
|
87
|
+
- lib/tasks/cable_modal_tasks.rake
|
88
|
+
homepage: https://github.com/existentialmutt/cable_modal
|
89
|
+
licenses:
|
90
|
+
- MIT
|
91
|
+
metadata:
|
92
|
+
homepage_uri: https://github.com/existentialmutt/cable_modal
|
93
|
+
source_code_uri: https://github.com/existentialmutt/cable_modal
|
94
|
+
changelog_uri: https://github.com/existentialmutt/cable_modal/releases
|
95
|
+
post_install_message:
|
96
|
+
rdoc_options: []
|
97
|
+
require_paths:
|
98
|
+
- lib
|
99
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
100
|
+
requirements:
|
101
|
+
- - ">="
|
102
|
+
- !ruby/object:Gem::Version
|
103
|
+
version: '0'
|
104
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
105
|
+
requirements:
|
106
|
+
- - ">="
|
107
|
+
- !ruby/object:Gem::Version
|
108
|
+
version: '0'
|
109
|
+
requirements: []
|
110
|
+
rubygems_version: 3.1.6
|
111
|
+
signing_key:
|
112
|
+
specification_version: 4
|
113
|
+
summary: "Modal form workflows, powered by CableReady operations and \U0001F9E1"
|
114
|
+
test_files: []
|