turbo_modal 0.3.1 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 44e01e6f2393f5d94f8bd717862f49e73e049f550a9916e58ede3b561e5f3f54
-  data.tar.gz: 3abc1568da233389ace10ce3ca9c7b092f07833f9b46e45f588de7b4734a850a
+  metadata.gz: 109ad54770b4ca4dbf21878bc8c71b8cf26ab1419b94428c9b5e2f6f3039d6f6
+  data.tar.gz: 53074315c672b7872ddf00f7eb450ea1f211258ec846afd885e43867e80cd6fd
 SHA512:
-  metadata.gz: dde473c24794b73d4991021b5a943619ed21c8ee3a5bdc01f61fe06e3fead2ac5de88c33eb509a3fe505f8aed5bbc1c951938eaa514461f6365f5cb4bc6ddacf
-  data.tar.gz: 131c41b10b3eecc05f7a4854d2c478b58d8405f4709d21fd584e9854cf76da690076a5e0ece96ba82466bef2f61bf373f2e0072d5b842ba0615b71c03758cfc4
+  metadata.gz: c8b80f44d4a426e6b22e781c3b602c8a93b4e713e83ad5d19f2811fbdda5fb51534cc7e01a8fb708dece3dc8e1884f3c79b6bd56528f46a86875c48ef5bdd28b
+  data.tar.gz: b70024cf95327a99d3efe987c1f446031fb2b35e233f993a5cb7e8c35be851b7607fd47c9e2633d01d0f85f27bbde6dae6456ff7bf427f61368fefb53f57b9d9

data/app/assets/dist/turbo_modal.css

@@ -1,29 +1,57 @@
-.modal {
+.modal-wrapper {
   position: fixed;
-  top: 50%;
-  left: 50%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   z-index: 11;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+}
+.bottom-sheet .modal-wrapper {
+  align-items: flex-end;
+}
+
+.modal {
+  min-width: 40rem;
+  max-height: 100%;
+  display: flex;
+  position: relative;
+  top: unset;
+  left: unset;
   background: white;
   border-radius: 4px;
-  padding: 2rem;
+  padding: 0;
   --animation-in: slide-in;
   --animation-out: slide-out;
+  pointer-events: auto;
+  margin: 2rem;
+}
+@media screen and (max-width: 45rem) {
+  .modal {
+    min-width: 100%;
+  }
+}
+.modal .modal-content {
+  overflow-y: scroll;
+  padding: 2rem;
 }
 @media screen and (max-width: 45rem) {
   .fullscreen .modal {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    margin: 0;
     border-radius: 0;
+    height: 100%;
+    flex-grow: 1;
   }
 }
 .bottom-sheet .modal {
   top: unset;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
+  margin: 0;
   min-height: 40vh;
+  transform: unset;
   --animation-in: slide-up;
   --animation-out: slide-down;
 }
@@ -36,7 +64,6 @@
 .animate-in {
   animation: var(--animation-in);
   animation-duration: 0.25s;
-  animation-fill-mode: forwards;
 }
 @media screen and (max-width: 45rem) {
   .fullscreen .animate-in {
@@ -58,21 +85,21 @@
 @keyframes slide-in {
   from {
     opacity: 0;
-    transform: translate(-50%, -35%);
+    transform: translateY(35%);
   }
   to {
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translateY(0%);
   }
 }
 @keyframes slide-out {
   from {
     opacity: 1;
-    transform: translate(-50%, -50%);
+    transform: translateY(0%);
   }
   to {
     opacity: 0;
-    transform: translate(-50%, -35%);
+    transform: translateY(35%);
   }
 }
 @keyframes slide-in-left {

data/app/javascript/turbo_modal/modal_controller.js

@@ -19,7 +19,7 @@ class ModalController extends Controller {
   open(e) {
     this.turboFrameTarget.src = e.detail.url;
     this.typeValue = e.detail.type;
-    showScrim();
+    showScrim(e.detail.dismiss);
   }
 
   close(e) {
@@ -50,8 +50,8 @@ class ModalController extends Controller {
 /**
  * Show a modal, requires a url for a page that renders a turbo-frame with id `modal`.
  */
-function openModal(url, type = "") {
-  window.dispatchEvent(new CustomEvent("modal:open", { detail: { url: url, type: type }}));
+function openModal(url, type = "", dismiss = true) {
+  window.dispatchEvent(new CustomEvent("modal:open", { detail: { url: url, type: type, dismiss: dismiss }}));
 }
 
 /**

data/app/javascript/turbo_modal/scrim_controller.js

@@ -14,33 +14,36 @@ class ScrimController extends Controller {
   static targets = ["scrim"];
 
   show(event) {
+    clipScreen(this);
     delete this.scrimTarget.dataset.hidden;
-    document.body.style.height = "100vh";
-    document.body.style.overflow = "hidden";
+    if (event.detail.dismissable) {
+      this.scrimTarget.dataset.dismissable = "";
+    }
   }
 
-  hide(event) {
+  hide(event = null) {
+    delete this.scrimTarget.dataset.dismissable;
     this.scrimTarget.dataset.hidden = "";
-    unclipScreen();
+    unclipScreen(this);
   }
 
   onClick(event) {
-    window.dispatchEvent(new Event("scrim:hide"));
+    if (this.scrimTarget.dataset.dismissable) {
+      window.dispatchEvent(new Event("scrim:hide"));
+    }
   }
 
   disconnect() {
-    this.scrimTarget.dataset.hidden = "";
-    unclipScreen();
+    this.hide();
     super.disconnect();
   }
-
 }
 
 /**
  * Show the scrim element
  */
-function showScrim() {
-  window.dispatchEvent(new Event("scrim:show"));
+function showScrim(dismiss = true) {
+  window.dispatchEvent(new CustomEvent("scrim:show", { detail: { dismissable: dismiss } }));
 }
 
 /**
@@ -50,12 +53,22 @@ function hideScrim() {
   window.dispatchEvent(new Event("scrim:hide"));
 }
 
+/**
+ * Clips body to viewport size
+ */
+function clipScreen(controller) {
+  controller.previousHeight = document.body.style.height || "unset";
+  controller.previousOverflow = document.body.style.overflow || "unset";
+  document.body.style.height = "100vh";
+  document.body.style.overflow = "hidden";
+}
+
 /**
  * Unclips body to viewport size
  */
-function unclipScreen() {
-  document.body.style.height = "unset";
-  document.body.style.overflow = "unset";
+function unclipScreen(controller) {
+  document.body.style.height = controller.previousHeight;
+  document.body.style.overflow = controller.previousOverflow;
 }
 
 export { ScrimController as default, showScrim, hideScrim }

data/lib/turbo_modal/version.rb

@@ -1,3 +1,3 @@
 module TurboModal
-  VERSION = "0.3.1".freeze
+  VERSION = "0.3.4".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbo_modal
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.4
 platform: ruby
 authors:
 - Alan Cornthwaite
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-05-09 00:00:00.000000000 Z
+date: 2022-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails