turbo_modal 0.2.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c0eb4e00b2e857f8a2c7a27073e9507b29e7ab7430ba8455762fa3d6054933f
-  data.tar.gz: 48349847ff7cc01d3e94d0d991a6d4c956b8810fc9eb31d242a349a1d8839693
+  metadata.gz: '0078dc10ef887436764ed4b1dd676e73ada176603190f8d8eb8eb02bd19837c5'
+  data.tar.gz: 777a55c156dd52f49b66b8eec882a7d093dbd5e3b7f9884bf4999eacbdb00d38
 SHA512:
-  metadata.gz: f0fb28b89fc0e1d2b4a15a07a95dc858a315ac1690828cd5560303d1908088de61eb3fba53b2b06e8e118862a1d458a259e1a4fb43cd309fe0ae2ad7f6afccf4
-  data.tar.gz: e06d8cc1eee309eaa9349d0309a5131d2c162ba09ced2163302c7bfa6d249007d6ade6df293d6b90154beabe2fff0be2dec17569ff1aaddc9b9dbe1a0586b9b8
+  metadata.gz: 3f19861545c075e19cad1f516c05e022ee7fed7b64825e922b4c62fbc4f8a65ef59525db850fe6488cc26a89da3555c39493abc4fee8f78871025a0b503c7a2c
+  data.tar.gz: dd29b5c61a67d68721cc57a4806b0f62cf15c421444598981074d258767a727840774769e0d920655cccd40a4af2d6a474f42f82ebf88b1114aef9b4b15d0a7d

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/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

@@ -1,8 +1,13 @@
 # frozen_string_literal: true
 
 module ModalHelper
-  MODAL_ID        = "modal"
-  LINK_OPTIONS = { data: { turbo_frame: MODAL_ID, action: "modal#onLinkClick", modal_type: "" } }.freeze
+  MODAL_ID     = "modal"
+  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 = DEFAULT_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.1'
+  VERSION = "0.3.2".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbo_modal
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.2
 platform: ruby
 authors:
 - Alan Cornthwaite
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-03-11 00:00:00.000000000 Z
+date: 2022-05-10 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