turbo_modal 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e835c5dd7c4b03134438032640085f017fda7a93143c2db85c0eb5a5a4e5d518
-  data.tar.gz: a2272f1546ca9584244c062df4e62fbdca5e9e72316fb18aaceefda69500afbc
+  metadata.gz: 44e01e6f2393f5d94f8bd717862f49e73e049f550a9916e58ede3b561e5f3f54
+  data.tar.gz: 3abc1568da233389ace10ce3ca9c7b092f07833f9b46e45f588de7b4734a850a
 SHA512:
-  metadata.gz: 98ef6f9ff6f44877811222effdc0858f076ef3ef42b4f28d88dd2d83639e0fa5bfb370b57b27e9db8080ece7e452e16dcb00b16c41458b96fc33671179f0895a
-  data.tar.gz: 45d2e51df5a761c24719fb9e1fd068820738d9a1a4f95540c1ef48fa4569bf6aa0b902a30e9f1623d17c1ac70c048fd7492c1f1ee36315fcd1b80cdee5d657e6
+  metadata.gz: dde473c24794b73d4991021b5a943619ed21c8ee3a5bdc01f61fe06e3fead2ac5de88c33eb509a3fe505f8aed5bbc1c951938eaa514461f6365f5cb4bc6ddacf
+  data.tar.gz: 131c41b10b3eecc05f7a4854d2c478b58d8405f4709d21fd584e9854cf76da690076a5e0ece96ba82466bef2f61bf373f2e0072d5b842ba0615b71c03758cfc4

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

@@ -8,9 +8,8 @@
   padding: 2rem;
   --animation-in: slide-in;
   --animation-out: slide-out;
-  --mobile-breakpoint: 45rem;
 }
-@media screen and (max-width: var(--mobile-breakpoint)) {
+@media screen and (max-width: 45rem) {
   .fullscreen .modal {
     top: 0;
     left: 0;
@@ -28,7 +27,7 @@
   --animation-in: slide-up;
   --animation-out: slide-down;
 }
-@media screen and (max-width: var(--mobile-breakpoint)) {
+@media screen and (max-width: 45rem) {
   .bottom-sheet .modal {
     min-height: 65vh;
   }
@@ -39,7 +38,7 @@
   animation-duration: 0.25s;
   animation-fill-mode: forwards;
 }
-@media screen and (max-width: var(--mobile-breakpoint)) {
+@media screen and (max-width: 45rem) {
   .fullscreen .animate-in {
     --animation-in: slide-in-left;
   }
@@ -50,7 +49,7 @@
   animation-duration: 0.25s;
   animation-fill-mode: forwards;
 }
-@media screen and (max-width: var(--mobile-breakpoint)) {
+@media screen and (max-width: 45rem) {
   .fullscreen .animate-out {
     --animation-out: slide-out-right;
   }

data/app/assets/stylesheets/turbo_modal/_modal.scss

@@ -1,35 +1,63 @@
-.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;
-  --mobile-breakpoint: 45rem;
+  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: var(--mobile-breakpoint)) {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+    @media screen and(max-width: 45rem) {
+      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;
 
-    @media screen and(max-width: var(--mobile-breakpoint)) {
+    @media screen and(max-width: 45rem) {
       min-height: 65vh;
     }
   }
@@ -38,10 +66,9 @@
 .animate-in {
   animation: var(--animation-in);
   animation-duration: 0.25s;
-  animation-fill-mode: forwards;
 
   .fullscreen & {
-    @media screen and(max-width: var(--mobile-breakpoint)) {
+    @media screen and(max-width: 45rem) {
       --animation-in: slide-in-left;
     }
   }
@@ -53,7 +80,7 @@
   animation-fill-mode: forwards;
 
   .fullscreen & {
-    @media screen and(max-width: var(--mobile-breakpoint)) {
+    @media screen and(max-width: 45rem) {
       --animation-out: slide-out-right;
     }
   }
@@ -63,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"];
@@ -45,11 +45,6 @@ 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);
-  }
 }
 
 /**

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,15 +15,25 @@ class ScrimController extends Controller {
 
   show(event) {
     delete this.scrimTarget.dataset.hidden;
+    document.body.style.height = "100vh";
+    document.body.style.overflow = "hidden";
   }
 
   hide(event) {
     this.scrimTarget.dataset.hidden = "";
+    unclipScreen();
   }
 
   onClick(event) {
     window.dispatchEvent(new Event("scrim:hide"));
   }
+
+  disconnect() {
+    this.scrimTarget.dataset.hidden = "";
+    unclipScreen();
+    super.disconnect();
+  }
+
 }
 
 /**
@@ -40,4 +50,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.0'
+  VERSION = "0.3.1".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbo_modal
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Alan Cornthwaite
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-03-10 00:00:00.000000000 Z
+date: 2022-05-09 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
@@ -90,7 +91,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.2.32
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: Modal library that uses Turbo and Stimulus because we are in the future now.