turbo_modal 0.1.2 → 0.2.2

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 +15 -9
  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 -20
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 77a591f89ca40dded4ff7259712fd93dc72d55410dc3b5929bf151982172554f
4
- data.tar.gz: 2eeb0845851c2d09edd97b9ee87e640389d8b91f8bc70d0627fd44797fc44492
3
+ metadata.gz: cc0f4ed0edea874e6b769fb7516c4daae96a428497202d80911b9c3fb0c1160c
4
+ data.tar.gz: e7d5fa95f4ca0bb2e7609e1a5a87b076b4d38b374047f91dc50a5f4eaea733ff
5
5
  SHA512:
6
- metadata.gz: 0abb352a50abcf77ab2232cc0f188bb9207888cab1a1da31fd8012939326976448f9462e0e78bc18cdecdfd03bbb9de3bd915abcda9cb80d6ea058b2fa9681d4
7
- data.tar.gz: f8f86d1d9356c52b57951b14a9ba122539dccfa37ce857eb9cfbd091596a33f8ddd9dee463d42c2d329c29595ddf6a956526454bcfe253cb22a3686ca3b2b3e9
6
+ metadata.gz: cd8b55e97ef967a916720d5506bb0b28ef72c7f5c464b9ab3d36830480617a8e4ca021f84357c8b949ccd35e37a11c109c563c6d1c86202b710367748dc6ad2a
7
+ data.tar.gz: 9b5f9abfb087b28726f58e2aa5b25a5ec527e8f33ea3e5ba724e4aa78a98de0b367bd8495117b7d5d74247be247205e613a4db25d34accac2f92938a4c3945e5
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
@@ -1,23 +1,26 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module ModalHelper
4
- MODAL_ID = "modal"
5
- DEFAULT_OPTIONS = { data: { turbo_frame: MODAL_ID, action: "modal#showModal", modal_type: "" } }.freeze
4
+ MODAL_ID = "modal"
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
 
19
22
  def modal_link(text = nil, path = nil, options = {}, &block)
20
- options = DEFAULT_OPTIONS.deep_merge(options)
23
+ options = LINK_OPTIONS.deep_merge(options)
21
24
  if block
22
25
  link_to text || path, options, &block
23
26
  else
@@ -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.2'
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.2
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-16 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