turbo_modal 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +38 -13
  3. data/app/helpers/modal_helper.rb +13 -7
  4. data/app/helpers/scrim_helper.rb +5 -1
  5. data/app/javascript/turbo_modal/index.js +3 -3
  6. data/app/javascript/turbo_modal/modal_controller.js +34 -7
  7. data/app/javascript/turbo_modal/scrim_controller.js +30 -3
  8. data/lib/tasks/turbo_modal_tasks.rake +1 -1
  9. data/lib/turbo_modal/version.rb +1 -1
  10. metadata +9 -15
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d1a0c324d77710010d3d592e4c12f4978aebe32db754dcd6b9b9ca98c2de0d8d
4
- data.tar.gz: '028ea286edf98dda94c3eab35135fb9f7a9052793cd46864f7a654f1e30934d8'
3
+ metadata.gz: e835c5dd7c4b03134438032640085f017fda7a93143c2db85c0eb5a5a4e5d518
4
+ data.tar.gz: a2272f1546ca9584244c062df4e62fbdca5e9e72316fb18aaceefda69500afbc
5
5
  SHA512:
6
- metadata.gz: b40bde5c79717d35e361292ec4a1bee89ccae813891656352cb47220110c1fe39e16885627821a9e56bb836343489ba4c1dd97efab71143f322761517b3b7710
7
- data.tar.gz: 140066b0316bdd7e8ce3a69f3bc349395cae2b38e34a4dc64d500fd175147e9821fa4c5110792ca4e756d0572f7e861ad6f7548297e65364d551e12bf8e0a198
6
+ metadata.gz: 98ef6f9ff6f44877811222effdc0858f076ef3ef42b4f28d88dd2d83639e0fa5bfb370b57b27e9db8080ece7e452e16dcb00b16c41458b96fc33671179f0895a
7
+ data.tar.gz: 45d2e51df5a761c24719fb9e1fd068820738d9a1a4f95540c1ef48fa4569bf6aa0b902a30e9f1623d17c1ac70c048fd7492c1f1ee36315fcd1b80cdee5d657e6
data/README.md CHANGED
@@ -1,28 +1,53 @@
1
1
  # TurboModal
2
- Short description and motivation.
2
+ Turbo Frame driven modal
3
3
 
4
4
  ## Usage
5
- How to use my plugin.
6
5
 
7
- ## Installation
8
- Add this line to your application's Gemfile:
6
+ Turbo modal provides helpers to add a basic scrim and modal target frame. These should be placed inside the body:
7
+ ```html
8
+ <body>
9
+ <%= scrim_tag %>
10
+ <%= modal_tag %>
11
+ </body>
12
+ ```
13
+
14
+ ### Import turbo_modal styles
15
+ ```css
16
+ /* application.scss */
9
17
 
10
- ```ruby
11
- gem 'turbo_modal'
18
+ @import "~@katalyst-interactive/turbo-modal";
12
19
  ```
13
20
 
14
- And then execute:
15
- ```bash
16
- $ bundle
21
+ To get a modal displaying you will need 2 things:
22
+ 1. A `modal_link` (or programmatic trigger)
23
+ 2. Some `modal_content`
24
+
25
+ `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.
26
+ The resulting path will need to wrap some content in a `modal_content` helper tag.
27
+
28
+ eg:
29
+ ```html
30
+ <!-- app/views/homepage/index.html.erb -->
31
+ <%= modal_link "click to open modal", modal_path("example") %>
32
+ ```
33
+
34
+ ```html
35
+ <!-- app/views/modals/show.html.erb -->
36
+ <%= modal_content do %>
37
+ <div>
38
+ <h1>Modal title</h1>
39
+ </div>
40
+ <% end %>
17
41
  ```
18
42
 
19
- Or install it yourself as:
43
+ ## Installation
44
+ Run these commands:
20
45
  ```bash
21
- $ gem install turbo_modal
46
+ $ bundle add 'turbo_modal'
47
+ $ rails turbo_modal:install
22
48
  ```
23
49
 
24
- ## Contributing
25
- Contribution directions go here.
50
+ `rails turbo_modal:install` will add the `turbo_modal` npm packages required. It also sets up stimulus and turbo packages.
26
51
 
27
52
  ## License
28
53
  The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
data/app/helpers/modal_helper.rb CHANGED
@@ -2,17 +2,20 @@
2
2
 
3
3
  module ModalHelper
4
4
  MODAL_ID = "modal"
5
- DEFAULT_OPTIONS = { data: { turbo_frame: MODAL_ID, action: "modal#showModal", modal_type: "" } }.freeze
5
+ LINK_OPTIONS = { data: { turbo_frame: MODAL_ID, action: "modal#onLinkClick", modal_type: "" } }.freeze
6
6
 
7
7
  def modal_tag(modal_id = MODAL_ID)
8
- turbo_frame_tag modal_id, data: { modal_target: "turboFrame" }
8
+ turbo_frame_tag modal_id, data: { controller: "modal", modal_target: "turboFrame", action: <<~ACTIONS }
9
+ modal:open@window->modal#open
10
+ modal:close@window->modal#close
11
+ ACTIONS
9
12
  end
10
13
 
11
14
  def modal_link_to(name = nil, options = nil, html_options = nil, &block)
12
15
  if block
13
- link_to name, DEFAULT_OPTIONS.deep_merge(options || {}), html_options, &block
16
+ link_to name, LINK_OPTIONS.deep_merge(options || {}), html_options, &block
14
17
  else
15
- link_to name, options, DEFAULT_OPTIONS.deep_merge(html_options || {}), &block
18
+ link_to name, options, LINK_OPTIONS.deep_merge(html_options || {}), &block
16
19
  end
17
20
  end
18
21
 
@@ -27,10 +30,13 @@ module ModalHelper
27
30
 
28
31
  def modal_content(options = {}, &block)
29
32
  modal_id = options.fetch(:modal_id, MODAL_ID)
30
- turbo_frame_tag modal_id, class: "hidden" do
33
+ turbo_frame_tag modal_id, data: { hidden: "" } do
31
34
  tag.div(class: "modal animate-in #{options.delete(:modal_classes)}",
32
- data: {
33
- action: "keyup@document->modal#keyup scrim-hide@window->modal#close",
35
+ data: {
36
+ action: <<~ACTIONS
37
+ keyup@window->modal#keyup
38
+ scrim:hide@window->modal#close
39
+ ACTIONS
34
40
  }) do
35
41
  yield if block
36
42
  end
data/app/helpers/scrim_helper.rb CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  module ScrimHelper
4
4
  def scrim_tag
5
- tag.div(class: "scrim", data: { scrim_target: "scrim", action: "click->scrim#hide", hidden: true })
5
+ tag.div(class: "scrim", data: { controller: "scrim", scrim_target: "scrim", action: <<~ACTIONS, hidden: true })
6
+ click->scrim#onClick
7
+ scrim:hide@window->scrim#hide
8
+ scrim:show@window->scrim#show
9
+ ACTIONS
6
10
  end
7
11
  end
data/app/javascript/turbo_modal/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import ModalController from "./modal_controller";
2
- import ScrimController from "./scrim_controller";
1
+ import ModalController, { openModal, closeModal } from "./modal_controller";
2
+ import ScrimController, { showScrim, hideScrim } from "./scrim_controller";
3
3
 
4
- export { ModalController, ScrimController }
4
+ export { ModalController, openModal, closeModal, ScrimController, showScrim, hideScrim };
data/app/javascript/turbo_modal/modal_controller.js CHANGED
@@ -1,6 +1,10 @@
1
1
  import { Controller } from "stimulus";
2
+ import { hideScrim, showScrim } from "./scrim_controller";
2
3
 
3
- export default class ModalController extends Controller {
4
+ /**
5
+ * Shows a Turbo modal when triggered by a `modal_link` click or a call to `openModal`.
6
+ */
7
+ class ModalController extends Controller {
4
8
  static targets = ["turboFrame"];
5
9
 
6
10
  static values = {
@@ -12,7 +16,13 @@ export default class ModalController extends Controller {
12
16
  this.turboFrameTarget.classList.add(value);
13
17
  }
14
18
 
15
- close() {
19
+ open(e) {
20
+ this.turboFrameTarget.src = e.detail.url;
21
+ this.typeValue = e.detail.type;
22
+ showScrim();
23
+ }
24
+
25
+ close(e) {
16
26
  if (this.turboFrameTarget.src === null) return;
17
27
 
18
28
  const modal_element = this.turboFrameTarget.querySelector(".modal")
@@ -26,17 +36,34 @@ export default class ModalController extends Controller {
26
36
  this.turboFrameTarget.classList.remove(this.typeValue);
27
37
  this.typeValue = "";
28
38
  }
29
- window.dispatchEvent(new Event("hide-scrim", { bubbles: true }))
39
+ hideScrim();
30
40
  }, 250);
31
41
  }
32
42
 
33
43
  keyup(event) {
34
- if (event.key === 'Escape') this.close();
44
+ if (event.key === "Escape") {
45
+ closeModal();
46
+ }
35
47
  }
36
48
 
37
- showModal(e) {
49
+ onLinkClick(e) {
38
50
  const modal_link = e.target.closest("a[data-modal-type]")
39
- this.typeValue = modal_link.dataset.modalType
40
- window.dispatchEvent(new Event("show-scrim", { bubbles: true }))
51
+ openModal(modal_link.href, modal_link.dataset.modalType);
41
52
  }
42
53
  }
54
+
55
+ /**
56
+ * Show a modal, requires a url for a page that renders a turbo-frame with id `modal`.
57
+ */
58
+ function openModal(url, type = "") {
59
+ window.dispatchEvent(new CustomEvent("modal:open", { detail: { url: url, type: type }}));
60
+ }
61
+
62
+ /**
63
+ * Hide the current modal (if any).
64
+ */
65
+ function closeModal() {
66
+ window.dispatchEvent(new Event("modal:close"));
67
+ }
68
+
69
+ export { ModalController as default, openModal, closeModal }
data/app/javascript/turbo_modal/scrim_controller.js CHANGED
@@ -1,5 +1,15 @@
1
1
  import { Controller } from "stimulus"
2
2
 
3
+ /**
4
+ * Scrim controller wraps an element that creates a whole page layer.
5
+ * It is intended to be used behind a modal or nav drawer.
6
+ *
7
+ * If the Scrim element receives a click event, it automatically triggers "scrim:hide".
8
+ *
9
+ * You can show and hide the scrim programmatically by sending "scrim:show" and "scrim:hide" events to the window or by
10
+ * calling the provided methods. If you need to respond to the scrim showing or hiding you should subscribe to these
11
+ * events.
12
+ */
3
13
  class ScrimController extends Controller {
4
14
  static targets = ["scrim"];
5
15
 
@@ -8,9 +18,26 @@ class ScrimController extends Controller {
8
18
  }
9
19
 
10
20
  hide(event) {
11
- this.scrimTarget.dataset.hidden = "hidden";
12
- window.dispatchEvent(new Event("scrim-hide", { bubbles: true }))
21
+ this.scrimTarget.dataset.hidden = "";
13
22
  }
23
+
24
+ onClick(event) {
25
+ window.dispatchEvent(new Event("scrim:hide"));
26
+ }
27
+ }
28
+
29
+ /**
30
+ * Show the scrim element
31
+ */
32
+ function showScrim() {
33
+ window.dispatchEvent(new Event("scrim:show"));
34
+ }
35
+
36
+ /**
37
+ * Hide the scrim element programmatically.
38
+ */
39
+ function hideScrim() {
40
+ window.dispatchEvent(new Event("scrim:hide"));
14
41
  }
15
42
 
16
- export default ScrimController;
43
+ export { ScrimController as default, showScrim, hideScrim }
data/lib/tasks/turbo_modal_tasks.rake CHANGED
@@ -12,7 +12,7 @@ def stimulus_installed?
12
12
  end
13
13
 
14
14
  def switch_on_stimulus
15
- system "yarn add stimulus@2.0.0"
15
+ Rake::Task["webpacker:install:stimulus"].invoke
16
16
  end
17
17
 
18
18
  def switch_on_turbo
data/lib/turbo_modal/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module TurboModal
2
- VERSION = '0.1.0'
2
+ VERSION = '0.2.0'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: turbo_modal
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Alan Cornthwaite
@@ -9,42 +9,36 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-10-29 00:00:00.000000000 Z
12
+ date: 2022-03-10 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
16
16
  requirement: !ruby/object:Gem::Requirement
17
17
  requirements:
18
- - - "~>"
19
- - !ruby/object:Gem::Version
20
- version: 6.1.3
21
18
  - - ">="
22
19
  - !ruby/object:Gem::Version
23
- version: 6.1.3.1
20
+ version: '0'
24
21
  type: :runtime
25
22
  prerelease: false
26
23
  version_requirements: !ruby/object:Gem::Requirement
27
24
  requirements:
28
- - - "~>"
29
- - !ruby/object:Gem::Version
30
- version: 6.1.3
31
25
  - - ">="
32
26
  - !ruby/object:Gem::Version
33
- version: 6.1.3.1
27
+ version: '0'
34
28
  - !ruby/object:Gem::Dependency
35
29
  name: turbo-rails
36
30
  requirement: !ruby/object:Gem::Requirement
37
31
  requirements:
38
- - - "~>"
32
+ - - ">="
39
33
  - !ruby/object:Gem::Version
40
- version: 7.1.1
34
+ version: '0'
41
35
  type: :runtime
42
36
  prerelease: false
43
37
  version_requirements: !ruby/object:Gem::Requirement
44
38
  requirements:
45
- - - "~>"
39
+ - - ">="
46
40
  - !ruby/object:Gem::Version
47
- version: 7.1.1
41
+ version: '0'
48
42
  description: ''
49
43
  email:
50
44
  - alan.cornthwaite@katalyst.com.au
@@ -96,7 +90,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
96
90
  - !ruby/object:Gem::Version
97
91
  version: '0'
98
92
  requirements: []
99
- rubygems_version: 3.1.6
93
+ rubygems_version: 3.2.32
100
94
  signing_key:
101
95
  specification_version: 4
102
96
  summary: Modal library that uses Turbo and Stimulus because we are in the future now.