turbo_modal 0.2.2 → 0.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc0f4ed0edea874e6b769fb7516c4daae96a428497202d80911b9c3fb0c1160c
-  data.tar.gz: e7d5fa95f4ca0bb2e7609e1a5a87b076b4d38b374047f91dc50a5f4eaea733ff
+  metadata.gz: e8e72cdd25686a64f8cca7d141062e27cec69ae52e607a60a437ca1aad450cee
+  data.tar.gz: 29555235b607fc5f343e3f11643143c0233329cf1d210402999896afdb4cecc2
 SHA512:
-  metadata.gz: cd8b55e97ef967a916720d5506bb0b28ef72c7f5c464b9ab3d36830480617a8e4ca021f84357c8b949ccd35e37a11c109c563c6d1c86202b710367748dc6ad2a
-  data.tar.gz: 9b5f9abfb087b28726f58e2aa5b25a5ec527e8f33ea3e5ba724e4aa78a98de0b367bd8495117b7d5d74247be247205e613a4db25d34accac2f92938a4c3945e5
+  metadata.gz: 9380653ea1ff7ce20473b1b6e34b2324c3e4665f10abf4ff4f6e840bc7ae659c79d54bc9722c0714b8c9c2eaa469ee2f02a379148b1f1c2376f390df6d67cf0e
+  data.tar.gz: 7220766f0abdd58b4eb5c89ec44a63db814ef6acd7e299af5e354d680896cbd6e66307405386f4820c0e696378dfe7999fd8db755848193ae811491a0ac87135

data/README.md

@@ -18,6 +18,15 @@ Turbo modal provides helpers to add a basic scrim and modal target frame. These
 @import "~@katalyst-interactive/turbo-modal";
 ```
 
+### Import turbo_modal stimulus controllers
+```js
+/* application.js */
+import TurboModal from "@katalyst-interactive/turbo-modal"
+application.load(TurboModal)
+```
+
+### Show a modal
+
 To get a modal displaying you will need 2 things:
 1. A `modal_link` (or programmatic trigger)
 2. Some `modal_content`

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/assets/stylesheets/turbo_modal/_modal.scss

@@ -1,30 +1,59 @@
-.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 & {
+    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) {
+    min-width: 100%;
+  }
+
+  .modal-content {
+    overflow-y: scroll;
+    padding: 2rem;
+  }
 
   .fullscreen & {
     @media screen and(max-width: 45rem) {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+      margin: 0;
       border-radius: 0;
+      height: 100%;
+      flex-grow: 1;
     }
   }
 
   .bottom-sheet & {
     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;
 
@@ -37,7 +66,6 @@
 .animate-in {
   animation: var(--animation-in);
   animation-duration: 0.25s;
-  animation-fill-mode: forwards;
 
   .fullscreen & {
     @media screen and(max-width: 45rem) {
@@ -62,24 +90,24 @@
 @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%);
   }
 }
 

data/app/helpers/modal_helper.rb

@@ -2,7 +2,12 @@
 
 module ModalHelper
   MODAL_ID     = "modal"
-  LINK_OPTIONS = { data: { turbo_frame: MODAL_ID, action: "modal#onLinkClick", modal_type: "" } }.freeze
+  LINK_OPTIONS = { data: {
+    turbo_frame: MODAL_ID,
+    controller:  "modal-link",
+    action:      "modal-link#onClick",
+    modal_type:  "",
+  } }.freeze
 
   def modal_tag(modal_id = MODAL_ID)
     turbo_frame_tag modal_id, data: { controller: "modal", modal_target: "turboFrame", action: <<~ACTIONS }
@@ -11,34 +16,30 @@ module ModalHelper
     ACTIONS
   end
 
+  # @see ActionView::Helpers::UrlHelper#link_to for argument details
   def modal_link_to(name = nil, options = nil, html_options = nil, &block)
     if block
-      link_to name, LINK_OPTIONS.deep_merge(options || {}), html_options, &block
+      link_to name, LINK_OPTIONS.deep_merge(options || {}), &block
     else
-      link_to name, options, LINK_OPTIONS.deep_merge(html_options || {}), &block
+      link_to name, options, LINK_OPTIONS.deep_merge(html_options || {})
     end
   end
 
-  def modal_link(text = nil, path = nil, options = {}, &block)
-    options = LINK_OPTIONS.deep_merge(options)
-    if block
-      link_to text || path, options, &block
-    else
-      link_to text, path, options
-    end
-  end
+  alias modal_link modal_link_to
 
   def modal_content(options = {}, &block)
     modal_id = options.fetch(:modal_id, MODAL_ID)
     turbo_frame_tag modal_id, data: { hidden: "" } do
-      tag.div(class: "modal animate-in #{options.delete(:modal_classes)}",
-              data: {
-                action: <<~ACTIONS
-                  keyup@window->modal#keyup
-                  scrim:hide@window->modal#close
-                ACTIONS
-              }) do
-        yield if block
+      tag.div(class: "modal-wrapper") do
+        tag.div(class: "modal animate-in #{options.delete(:modal_classes)}",
+                data:  {
+                  action: <<~ACTIONS
+                    keyup@window->modal#keyup
+                    scrim:hide@window->modal#close
+                  ACTIONS
+                }) do
+          yield if block
+        end
       end
     end
   end

data/app/javascript/turbo_modal/index.js

@@ -1,4 +1,16 @@
 import ModalController, { openModal, closeModal } from "./modal_controller";
+import ModalLinkController from "./modal_link_controller";
 import ScrimController, { showScrim, hideScrim } from "./scrim_controller";
 
-export { ModalController, openModal, closeModal, ScrimController, showScrim, hideScrim };
+const Definitions = [
+  { identifier: "modal", controllerConstructor: ModalController },
+  { identifier: "modal-link", controllerConstructor: ModalLinkController },
+  { identifier: "scrim", controllerConstructor: ScrimController }
+];
+
+export {
+  Definitions as default,
+  ModalController, openModal, closeModal,
+  ScrimController, showScrim, hideScrim,
+  ModalLinkController
+};

data/app/javascript/turbo_modal/modal_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "stimulus";
 import { hideScrim, showScrim } from "./scrim_controller";
 
 /**
- * Shows a Turbo modal when triggered by a `modal_link` click or a call to `openModal`.
+ * Shows a Turbo modal when triggered by a `modal:open` event (e.g. `openModal`).
  */
 class ModalController extends Controller {
   static targets = ["turboFrame"];
@@ -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) {
@@ -45,18 +45,13 @@ class ModalController extends Controller {
       closeModal();
     }
   }
-
-  onLinkClick(e) {
-    const modal_link = e.target.closest("a[data-modal-type]")
-    openModal(modal_link.href, modal_link.dataset.modalType);
-  }
 }
 
 /**
  * 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/modal_link_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "stimulus";
+import { openModal } from "./modal_controller";
+
+/**
+ * Shows a Turbo modal when clicked.
+ */
+export default class ModalLinkController extends Controller {
+  onClick(e) {
+    e.preventDefault();
+    openModal(this.element.href, this.element.dataset.modalType);
+  }
+}

data/app/javascript/turbo_modal/scrim_controller.js

@@ -15,22 +15,36 @@ class ScrimController extends Controller {
 
   show(event) {
     delete this.scrimTarget.dataset.hidden;
+    document.body.style.height = "100vh";
+    document.body.style.overflow = "hidden";
+
+    if (!event.detail.dismiss) {
+      this.scrimTarget.style.pointerEvents = "none";
+    }
   }
 
   hide(event) {
     this.scrimTarget.dataset.hidden = "";
+    unclipScreen();
   }
 
   onClick(event) {
     window.dispatchEvent(new Event("scrim:hide"));
   }
+
+  disconnect() {
+    this.scrimTarget.dataset.hidden = "";
+    unclipScreen();
+    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: { dismiss: dismiss }}));
 }
 
 /**
@@ -40,4 +54,12 @@ function hideScrim() {
   window.dispatchEvent(new Event("scrim:hide"));
 }
 
+/**
+ * Unclips body to viewport size
+ */
+function unclipScreen() {
+  document.body.style.height = "unset";
+  document.body.style.overflow = "unset";
+}
+
 export { ScrimController as default, showScrim, hideScrim }

data/lib/install/turbo_modal.rb

@@ -20,6 +20,5 @@ say "Install Turbo Modal"
 say "Turbo Modal #{TurboModal::VERSION} requires Stimulus@2.0.0", :yellow
 run "yarn add @katalyst-interactive/turbo-modal"
 
-append_to_file "app/javascript/controllers/index.js", %(\nimport { ScrimController, ModalController } from "@katalyst-interactive/turbo-modal"\n)
-append_to_file "app/javascript/controllers/index.js", %(application.register("scrim", ScrimController)\n)
-append_to_file "app/javascript/controllers/index.js", %(application.register("modal", ModalController)\n)
+append_to_file "app/javascript/controllers/index.js", %(\nimport TurboModal from "@katalyst-interactive/turbo-modal"\n)
+append_to_file "app/javascript/controllers/index.js", %(application.load(TurboModal)\n)

data/lib/turbo_modal/version.rb

@@ -1,3 +1,3 @@
 module TurboModal
-  VERSION = '0.2.2'
+  VERSION = "0.3.3".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbo_modal
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.3.3
 platform: ruby
 authors:
 - Alan Cornthwaite
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-03-16 00:00:00.000000000 Z
+date: 2022-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -60,6 +60,7 @@ files:
 - app/helpers/scrim_helper.rb
 - app/javascript/turbo_modal/index.js
 - app/javascript/turbo_modal/modal_controller.js
+- app/javascript/turbo_modal/modal_link_controller.js
 - app/javascript/turbo_modal/scrim_controller.js
 - config/routes.rb
 - lib/install/turbo_modal.rb