turbo_modal 0.1.2 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
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.