turbo_modal 0.3.2 → 0.3.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0078dc10ef887436764ed4b1dd676e73ada176603190f8d8eb8eb02bd19837c5'
-  data.tar.gz: 777a55c156dd52f49b66b8eec882a7d093dbd5e3b7f9884bf4999eacbdb00d38
+  metadata.gz: 1784474a3a799b2c623b1705a5cf0df011bd809287a81342ceb605fc29930ef3
+  data.tar.gz: 733288280786b1cd6c8463db2351101fbfe7e668f05ac4e0f6367a4309c8b438
 SHA512:
-  metadata.gz: 3f19861545c075e19cad1f516c05e022ee7fed7b64825e922b4c62fbc4f8a65ef59525db850fe6488cc26a89da3555c39493abc4fee8f78871025a0b503c7a2c
-  data.tar.gz: dd29b5c61a67d68721cc57a4806b0f62cf15c421444598981074d258767a727840774769e0d920655cccd40a4af2d6a474f42f82ebf88b1114aef9b4b15d0a7d
+  metadata.gz: 28206680aa24756513e5e593cc601cb55b56642b56d67ff826ffff8e55dd7dcaa23904e36aa7c74c1b40a22b2451bbf2edcfb4118766b9a2dab97d37549cbb46
+  data.tar.gz: fddf55d488c5a7f3b1e9953550c9b054cf47e42c0895ea342a2f9d6ffd6cef947a2037532d45d941012e7d689030ddb6a2288ef9e58a292b1196c41c1b4b38ba

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,6 +19,9 @@ class ModalController extends Controller {
   open(e) {
     this.turboFrameTarget.src = e.detail.url;
     this.typeValue = e.detail.type;
+    if (event.detail.dismissable) {
+      this.turboFrameTarget.dataset.dismissable = "";
+    }
     showScrim(e.detail.dismiss);
   }
 
@@ -31,6 +34,7 @@ class ModalController extends Controller {
     setTimeout(() => {
       modal_element.remove();
       this.turboFrameTarget.src = null;
+      delete this.turboFrameTarget.dataset.dismissable;
 
       if (this.typeValue !== "") {
         this.turboFrameTarget.classList.remove(this.typeValue);
@@ -41,7 +45,7 @@ class ModalController extends Controller {
   }
 
   keyup(event) {
-    if (event.key === "Escape") {
+    if (event.key === "Escape" && this.turboFrameTarget.dataset.dismissable === "") {
       closeModal();
     }
   }

data/app/javascript/turbo_modal/scrim_controller.js

@@ -14,37 +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.dismiss) {
-      this.scrimTarget.style.pointerEvents = "none";
+    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(dismiss = true) {
-  window.dispatchEvent(new CustomEvent("scrim:show", { detail: { dismiss: dismiss }}));
+  window.dispatchEvent(new CustomEvent("scrim:show", { detail: { dismissable: dismiss } }));
 }
 
 /**
@@ -54,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.2".freeze
+  VERSION = "0.3.5".freeze
 end

metadata

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