turbo_modal 0.1.2 → 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 (9) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -9
  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/turbo_modal/version.rb +1 -1
  9. metadata +9 -21
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 77a591f89ca40dded4ff7259712fd93dc72d55410dc3b5929bf151982172554f
4
- data.tar.gz: 2eeb0845851c2d09edd97b9ee87e640389d8b91f8bc70d0627fd44797fc44492
3
+ metadata.gz: e835c5dd7c4b03134438032640085f017fda7a93143c2db85c0eb5a5a4e5d518
4
+ data.tar.gz: a2272f1546ca9584244c062df4e62fbdca5e9e72316fb18aaceefda69500afbc
5
5
  SHA512:
6
- metadata.gz: 0abb352a50abcf77ab2232cc0f188bb9207888cab1a1da31fd8012939326976448f9462e0e78bc18cdecdfd03bbb9de3bd915abcda9cb80d6ea058b2fa9681d4
7
- data.tar.gz: f8f86d1d9356c52b57951b14a9ba122539dccfa37ce857eb9cfbd091596a33f8ddd9dee463d42c2d329c29595ddf6a956526454bcfe253cb22a3686ca3b2b3e9
6
+ metadata.gz: 98ef6f9ff6f44877811222effdc0858f076ef3ef42b4f28d88dd2d83639e0fa5bfb370b57b27e9db8080ece7e452e16dcb00b16c41458b96fc33671179f0895a
7
+ data.tar.gz: 45d2e51df5a761c24719fb9e1fd068820738d9a1a4f95540c1ef48fa4569bf6aa0b902a30e9f1623d17c1ac70c048fd7492c1f1ee36315fcd1b80cdee5d657e6
data/README.md CHANGED
@@ -2,28 +2,24 @@
2
2
  Turbo Frame driven modal
3
3
 
4
4
  ## Usage
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
- ```
9
5
 
10
6
  Turbo modal provides helpers to add a basic scrim and modal target frame. These should be placed inside the body:
11
7
  ```html
12
- <body data-controller="scrim modal" data-action="hide-scrim@window->scrim#hide show-scrim@window->show">
8
+ <body>
13
9
  <%= scrim_tag %>
14
10
  <%= modal_tag %>
15
11
  </body>
16
12
  ```
17
13
 
18
- ###Import tubo_modal styles
14
+ ### Import turbo_modal styles
19
15
  ```css
20
- /* application.css */
16
+ /* application.scss */
21
17
 
22
- @import "~@katalyst-interactive/turbo_modal";
18
+ @import "~@katalyst-interactive/turbo-modal";
23
19
  ```
24
20
 
25
21
  To get a modal displaying you will need 2 things:
26
- 1. A `modal_link`
22
+ 1. A `modal_link` (or programmatic trigger)
27
23
  2. Some `modal_content`
28
24
 
29
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.
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/turbo_modal/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module TurboModal
2
- VERSION = '0.1.2'
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.2
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Alan Cornthwaite
@@ -9,48 +9,36 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-11-30 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
- - - "~>"
39
- - !ruby/object:Gem::Version
40
- version: '0.7'
41
- - - "<"
32
+ - - ">="
42
33
  - !ruby/object:Gem::Version
43
- version: '1.0'
34
+ version: '0'
44
35
  type: :runtime
45
36
  prerelease: false
46
37
  version_requirements: !ruby/object:Gem::Requirement
47
38
  requirements:
48
- - - "~>"
49
- - !ruby/object:Gem::Version
50
- version: '0.7'
51
- - - "<"
39
+ - - ">="
52
40
  - !ruby/object:Gem::Version
53
- version: '1.0'
41
+ version: '0'
54
42
  description: ''
55
43
  email:
56
44
  - alan.cornthwaite@katalyst.com.au
@@ -102,7 +90,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
102
90
  - !ruby/object:Gem::Version
103
91
  version: '0'
104
92
  requirements: []
105
- rubygems_version: 3.1.6
93
+ rubygems_version: 3.2.32
106
94
  signing_key:
107
95
  specification_version: 4
108
96
  summary: Modal library that uses Turbo and Stimulus because we are in the future now.