turbo_modal 0.3.1 → 0.3.4

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 (6) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/dist/turbo_modal.css +43 -16
  3. data/app/javascript/turbo_modal/modal_controller.js +3 -3
  4. data/app/javascript/turbo_modal/scrim_controller.js +26 -13
  5. data/lib/turbo_modal/version.rb +1 -1
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 44e01e6f2393f5d94f8bd717862f49e73e049f550a9916e58ede3b561e5f3f54
4
- data.tar.gz: 3abc1568da233389ace10ce3ca9c7b092f07833f9b46e45f588de7b4734a850a
3
+ metadata.gz: 109ad54770b4ca4dbf21878bc8c71b8cf26ab1419b94428c9b5e2f6f3039d6f6
4
+ data.tar.gz: 53074315c672b7872ddf00f7eb450ea1f211258ec846afd885e43867e80cd6fd
5
5
  SHA512:
6
- metadata.gz: dde473c24794b73d4991021b5a943619ed21c8ee3a5bdc01f61fe06e3fead2ac5de88c33eb509a3fe505f8aed5bbc1c951938eaa514461f6365f5cb4bc6ddacf
7
- data.tar.gz: 131c41b10b3eecc05f7a4854d2c478b58d8405f4709d21fd584e9854cf76da690076a5e0ece96ba82466bef2f61bf373f2e0072d5b842ba0615b71c03758cfc4
6
+ metadata.gz: c8b80f44d4a426e6b22e781c3b602c8a93b4e713e83ad5d19f2811fbdda5fb51534cc7e01a8fb708dece3dc8e1884f3c79b6bd56528f46a86875c48ef5bdd28b
7
+ data.tar.gz: b70024cf95327a99d3efe987c1f446031fb2b35e233f993a5cb7e8c35be851b7607fd47c9e2633d01d0f85f27bbde6dae6456ff7bf427f61368fefb53f57b9d9
data/app/assets/dist/turbo_modal.css CHANGED
@@ -1,29 +1,57 @@
1
- .modal {
1
+ .modal-wrapper {
2
2
  position: fixed;
3
- top: 50%;
4
- left: 50%;
3
+ top: 0;
4
+ bottom: 0;
5
+ left: 0;
6
+ right: 0;
5
7
  z-index: 11;
8
+ display: flex;
9
+ justify-content: center;
10
+ align-items: center;
11
+ pointer-events: none;
12
+ }
13
+ .bottom-sheet .modal-wrapper {
14
+ align-items: flex-end;
15
+ }
16
+
17
+ .modal {
18
+ min-width: 40rem;
19
+ max-height: 100%;
20
+ display: flex;
21
+ position: relative;
22
+ top: unset;
23
+ left: unset;
6
24
  background: white;
7
25
  border-radius: 4px;
8
- padding: 2rem;
26
+ padding: 0;
9
27
  --animation-in: slide-in;
10
28
  --animation-out: slide-out;
29
+ pointer-events: auto;
30
+ margin: 2rem;
31
+ }
32
+ @media screen and (max-width: 45rem) {
33
+ .modal {
34
+ min-width: 100%;
35
+ }
36
+ }
37
+ .modal .modal-content {
38
+ overflow-y: scroll;
39
+ padding: 2rem;
11
40
  }
12
41
  @media screen and (max-width: 45rem) {
13
42
  .fullscreen .modal {
14
- top: 0;
15
- left: 0;
16
- right: 0;
17
- bottom: 0;
43
+ margin: 0;
18
44
  border-radius: 0;
45
+ height: 100%;
46
+ flex-grow: 1;
19
47
  }
20
48
  }
21
49
  .bottom-sheet .modal {
22
50
  top: unset;
23
- bottom: 0;
24
- left: 0;
25
- right: 0;
51
+ width: 100%;
52
+ margin: 0;
26
53
  min-height: 40vh;
54
+ transform: unset;
27
55
  --animation-in: slide-up;
28
56
  --animation-out: slide-down;
29
57
  }
@@ -36,7 +64,6 @@
36
64
  .animate-in {
37
65
  animation: var(--animation-in);
38
66
  animation-duration: 0.25s;
39
- animation-fill-mode: forwards;
40
67
  }
41
68
  @media screen and (max-width: 45rem) {
42
69
  .fullscreen .animate-in {
@@ -58,21 +85,21 @@
58
85
  @keyframes slide-in {
59
86
  from {
60
87
  opacity: 0;
61
- transform: translate(-50%, -35%);
88
+ transform: translateY(35%);
62
89
  }
63
90
  to {
64
91
  opacity: 1;
65
- transform: translate(-50%, -50%);
92
+ transform: translateY(0%);
66
93
  }
67
94
  }
68
95
  @keyframes slide-out {
69
96
  from {
70
97
  opacity: 1;
71
- transform: translate(-50%, -50%);
98
+ transform: translateY(0%);
72
99
  }
73
100
  to {
74
101
  opacity: 0;
75
- transform: translate(-50%, -35%);
102
+ transform: translateY(35%);
76
103
  }
77
104
  }
78
105
  @keyframes slide-in-left {
data/app/javascript/turbo_modal/modal_controller.js CHANGED
@@ -19,7 +19,7 @@ class ModalController extends Controller {
19
19
  open(e) {
20
20
  this.turboFrameTarget.src = e.detail.url;
21
21
  this.typeValue = e.detail.type;
22
- showScrim();
22
+ showScrim(e.detail.dismiss);
23
23
  }
24
24
 
25
25
  close(e) {
@@ -50,8 +50,8 @@ class ModalController extends Controller {
50
50
  /**
51
51
  * Show a modal, requires a url for a page that renders a turbo-frame with id `modal`.
52
52
  */
53
- function openModal(url, type = "") {
54
- window.dispatchEvent(new CustomEvent("modal:open", { detail: { url: url, type: type }}));
53
+ function openModal(url, type = "", dismiss = true) {
54
+ window.dispatchEvent(new CustomEvent("modal:open", { detail: { url: url, type: type, dismiss: dismiss }}));
55
55
  }
56
56
 
57
57
  /**
data/app/javascript/turbo_modal/scrim_controller.js CHANGED
@@ -14,33 +14,36 @@ class ScrimController extends Controller {
14
14
  static targets = ["scrim"];
15
15
 
16
16
  show(event) {
17
+ clipScreen(this);
17
18
  delete this.scrimTarget.dataset.hidden;
18
- document.body.style.height = "100vh";
19
- document.body.style.overflow = "hidden";
19
+ if (event.detail.dismissable) {
20
+ this.scrimTarget.dataset.dismissable = "";
21
+ }
20
22
  }
21
23
 
22
- hide(event) {
24
+ hide(event = null) {
25
+ delete this.scrimTarget.dataset.dismissable;
23
26
  this.scrimTarget.dataset.hidden = "";
24
- unclipScreen();
27
+ unclipScreen(this);
25
28
  }
26
29
 
27
30
  onClick(event) {
28
- window.dispatchEvent(new Event("scrim:hide"));
31
+ if (this.scrimTarget.dataset.dismissable) {
32
+ window.dispatchEvent(new Event("scrim:hide"));
33
+ }
29
34
  }
30
35
 
31
36
  disconnect() {
32
- this.scrimTarget.dataset.hidden = "";
33
- unclipScreen();
37
+ this.hide();
34
38
  super.disconnect();
35
39
  }
36
-
37
40
  }
38
41
 
39
42
  /**
40
43
  * Show the scrim element
41
44
  */
42
- function showScrim() {
43
- window.dispatchEvent(new Event("scrim:show"));
45
+ function showScrim(dismiss = true) {
46
+ window.dispatchEvent(new CustomEvent("scrim:show", { detail: { dismissable: dismiss } }));
44
47
  }
45
48
 
46
49
  /**
@@ -50,12 +53,22 @@ function hideScrim() {
50
53
  window.dispatchEvent(new Event("scrim:hide"));
51
54
  }
52
55
 
56
+ /**
57
+ * Clips body to viewport size
58
+ */
59
+ function clipScreen(controller) {
60
+ controller.previousHeight = document.body.style.height || "unset";
61
+ controller.previousOverflow = document.body.style.overflow || "unset";
62
+ document.body.style.height = "100vh";
63
+ document.body.style.overflow = "hidden";
64
+ }
65
+
53
66
  /**
54
67
  * Unclips body to viewport size
55
68
  */
56
- function unclipScreen() {
57
- document.body.style.height = "unset";
58
- document.body.style.overflow = "unset";
69
+ function unclipScreen(controller) {
70
+ document.body.style.height = controller.previousHeight;
71
+ document.body.style.overflow = controller.previousOverflow;
59
72
  }
60
73
 
61
74
  export { ScrimController as default, showScrim, hideScrim }
data/lib/turbo_modal/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module TurboModal
2
- VERSION = "0.3.1".freeze
2
+ VERSION = "0.3.4".freeze
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.3.1
4
+ version: 0.3.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Alan Cornthwaite
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-05-09 00:00:00.000000000 Z
12
+ date: 2022-05-31 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails