turbo_modal 0.1.1 → 0.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -9
  3. data/app/assets/dist/turbo_modal.css +4 -5
  4. data/app/assets/stylesheets/turbo_modal/_modal.scss +4 -5
  5. data/app/helpers/modal_helper.rb +13 -7
  6. data/app/helpers/scrim_helper.rb +5 -1
  7. data/app/javascript/turbo_modal/index.js +3 -3
  8. data/app/javascript/turbo_modal/modal_controller.js +34 -7
  9. data/app/javascript/turbo_modal/scrim_controller.js +30 -3
  10. data/lib/turbo_modal/version.rb +1 -1
  11. metadata +8 -14
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 486a73b0741ef4b281dccae887aaafbddb19e523fb1af08004cc5f5a89512b2a
4
- data.tar.gz: a447a48602b34351111934c794bcea834af6913aed49e12555e1bbe4d29f9b08
3
+ metadata.gz: 9c0eb4e00b2e857f8a2c7a27073e9507b29e7ab7430ba8455762fa3d6054933f
4
+ data.tar.gz: 48349847ff7cc01d3e94d0d991a6d4c956b8810fc9eb31d242a349a1d8839693
5
5
  SHA512:
6
- metadata.gz: b642136bf41429454a2b03229cba52923608162822d1627ac5b08bbe9e5ef62e14e3f038e6bd040ada635c785949ec8c6be195aee5204096ee272e05c9fae53e
7
- data.tar.gz: fce574173273f78864d6a3a97ab2711479b9d06da63aca5d4278ce736f1e7196247c9c852532245161eafde46c4e8d4b1db241ca48c8828ba290da7b6de6aabe
6
+ metadata.gz: f0fb28b89fc0e1d2b4a15a07a95dc858a315ac1690828cd5560303d1908088de61eb3fba53b2b06e8e118862a1d458a259e1a4fb43cd309fe0ae2ad7f6afccf4
7
+ data.tar.gz: e06d8cc1eee309eaa9349d0309a5131d2c162ba09ced2163302c7bfa6d249007d6ade6df293d6b90154beabe2fff0be2dec17569ff1aaddc9b9dbe1a0586b9b8
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/assets/dist/turbo_modal.css CHANGED
@@ -8,9 +8,8 @@
8
8
  padding: 2rem;
9
9
  --animation-in: slide-in;
10
10
  --animation-out: slide-out;
11
- --mobile-breakpoint: 45rem;
12
11
  }
13
- @media screen and (max-width: var(--mobile-breakpoint)) {
12
+ @media screen and (max-width: 45rem) {
14
13
  .fullscreen .modal {
15
14
  top: 0;
16
15
  left: 0;
@@ -28,7 +27,7 @@
28
27
  --animation-in: slide-up;
29
28
  --animation-out: slide-down;
30
29
  }
31
- @media screen and (max-width: var(--mobile-breakpoint)) {
30
+ @media screen and (max-width: 45rem) {
32
31
  .bottom-sheet .modal {
33
32
  min-height: 65vh;
34
33
  }
@@ -39,7 +38,7 @@
39
38
  animation-duration: 0.25s;
40
39
  animation-fill-mode: forwards;
41
40
  }
42
- @media screen and (max-width: var(--mobile-breakpoint)) {
41
+ @media screen and (max-width: 45rem) {
43
42
  .fullscreen .animate-in {
44
43
  --animation-in: slide-in-left;
45
44
  }
@@ -50,7 +49,7 @@
50
49
  animation-duration: 0.25s;
51
50
  animation-fill-mode: forwards;
52
51
  }
53
- @media screen and (max-width: var(--mobile-breakpoint)) {
52
+ @media screen and (max-width: 45rem) {
54
53
  .fullscreen .animate-out {
55
54
  --animation-out: slide-out-right;
56
55
  }
data/app/assets/stylesheets/turbo_modal/_modal.scss CHANGED
@@ -8,10 +8,9 @@
8
8
  padding: 2rem;
9
9
  --animation-in : slide-in;
10
10
  --animation-out : slide-out;
11
- --mobile-breakpoint: 45rem;
12
11
 
13
12
  .fullscreen & {
14
- @media screen and(max-width: var(--mobile-breakpoint)) {
13
+ @media screen and(max-width: 45rem) {
15
14
  top: 0;
16
15
  left: 0;
17
16
  right: 0;
@@ -29,7 +28,7 @@
29
28
  --animation-in : slide-up;
30
29
  --animation-out : slide-down;
31
30
 
32
- @media screen and(max-width: var(--mobile-breakpoint)) {
31
+ @media screen and(max-width: 45rem) {
33
32
  min-height: 65vh;
34
33
  }
35
34
  }
@@ -41,7 +40,7 @@
41
40
  animation-fill-mode: forwards;
42
41
 
43
42
  .fullscreen & {
44
- @media screen and(max-width: var(--mobile-breakpoint)) {
43
+ @media screen and(max-width: 45rem) {
45
44
  --animation-in: slide-in-left;
46
45
  }
47
46
  }
@@ -53,7 +52,7 @@
53
52
  animation-fill-mode: forwards;
54
53
 
55
54
  .fullscreen & {
56
- @media screen and(max-width: var(--mobile-breakpoint)) {
55
+ @media screen and(max-width: 45rem) {
57
56
  --animation-out: slide-out-right;
58
57
  }
59
58
  }
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.1'
2
+ VERSION = '0.2.1'
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.1
4
+ version: 0.2.1
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-11 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