turbo_modal 0.1.0 → 0.2.0

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.
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.