ultimate_turbo_modal 2.1.1 → 2.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '070742966b297c5aec10941f765cba344f5f4a5c4157dfa81f0fbafabcd3b329'
-  data.tar.gz: 2ad6633a34d074276d774b6665ae581561a1b06b96dac8e59660dddc9ded2674
+  metadata.gz: 17d0eab498c9c828467bea1e33c1250763a8361595847a29a421bedc84947f06
+  data.tar.gz: 41ab99f7579857ccd65d7c549d8626d2566fb952cabb5c97b7f8193e7930fa44
 SHA512:
-  metadata.gz: 23e754a2b8b76194129380d520303652025eb763577b592ff0daf95eb0e2800883fccf0772f6ff3159ac03941655b4860c3327ce37a16bdc0a77749d2d56bb2e
-  data.tar.gz: 9d7f91f17a90ec51fb75c84d9ce11fc31a98b02b92bf4aaa7e3221c9496f8c390d198566af23d81996bc28229fb71890791e7aad55a42f3ab3fedeb25c3c184a
+  metadata.gz: e4925980e51ac9f8fc7e08245e8d79e3a73faca356e44ae45bedfd089e3ec3d2de17e2a5ab264f57dcae0c79b91a53e37ee3661dcb57541b422b563f3e2a8ff1
+  data.tar.gz: 93f0bb944adfcc54e844ce3d2d3438bdfdaabb3cd648bb22b87937a6b8267a46e842db622ffc7c04c7b9a2a578da3ea1c4c411742f44821368c4fd299a1c411f

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.1.2] - 2025-08-06
+
+- Fixed scroll lock
+
 ## [2.1.1] - 2025-08-05
 
 - Reduce Rails dependency to only required components (actionpack, activesupport, railties) (#22)

data/CLAUDE.md

@@ -13,7 +13,7 @@ Ultimate Turbo Modal (UTMR) is a full-featured modal implementation for Rails ap
   - `configuration.rb`: Global configuration management
   - `helpers/`: Rails helpers for views and controllers
   - Generators in `/lib/generators/` for installation
-  
+
 - **JavaScript Package**: Located in `/javascript/`
   - `modal_controller.js`: Stimulus controller for modal behavior
   - `index.js`: Main entry point
@@ -79,4 +79,4 @@ When adding a new option:
 ## Testing Approach
 - JavaScript: No test framework currently set up
 - Ruby: Use standard Rails testing practices
-- Manual testing via the demo app: https://github.com/cmer/ultimate_turbo_modal-demo
+- Manual testing via the demo app (located in `./demo-app`)

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ultimate_turbo_modal (2.1.1)
+    ultimate_turbo_modal (2.1.2)
       actionpack
       activesupport
       phlex-rails

data/README.md

@@ -122,9 +122,40 @@ Do not get overwhelmed with all the options. The defaults are sensible.
 - Focus trap for improved accessibility (Tab and Shift+Tab cycle through focusable elements within the modal only)
 
 
-## Demo
+## Demo Video
 
-A demo application can be found at https://github.com/cmer/ultimate_turbo_modal-demo. A video demo can be seen here: [https://youtu.be/BVRDXLN1I78](https://youtu.be/BVRDXLN1I78).
+A video demo can be seen here: [https://youtu.be/BVRDXLN1I78](https://youtu.be/BVRDXLN1I78).
+
+### Running the Demo Application
+
+The repository includes a demo application in the `demo-app` directory that showcases all the features of Ultimate Turbo Modal. To run it locally:
+
+```bash
+# Navigate to the demo app directory
+cd demo-app
+
+# Install Ruby dependencies
+bundle install
+
+# Create and setup the database
+bin/rails db:create db:migrate db:seed
+
+# Install JavaScript dependencies
+yarn install
+
+# Start the development server
+bin/dev
+
+# Open your browser
+open http://localhost:3000
+```
+
+The demo app provides examples of:
+- Basic modal usage
+- Different modal configurations
+- Custom styling options
+- Various trigger methods
+- Advanced features like scrollable content and custom footers
 
 ## Upgrading from 1.x
 

data/VERSION

@@ -1 +1 @@
-2.1.1
+2.1.2

data/demo-app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    ultimate_turbo_modal (2.0.4)
+    ultimate_turbo_modal (2.1.1)
       actionpack
       activesupport
       phlex-rails

data/demo-app/app/controllers/application_controller.rb

@@ -3,7 +3,7 @@ class ApplicationController < ActionController::Base
 
   def set_modal_properties
     %i[padding advance close_button].each do |it|
-      instance_variable_set("@#{it}", params[it] == "1")
+      instance_variable_set("@#{it}", params[it] == "1" || params[it].nil?)
     end
     @override_url = "/custom-advance-history-url" if @advance
   end

data/demo-app/bin/dev

@@ -1,7 +1,18 @@
 #!/usr/bin/env bash
 
+# Build the ultimate_turbo_modal JavaScript package
+echo "Building ultimate_turbo_modal JavaScript package..."
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+DEMO_APP_DIR="$SCRIPT_DIR/.."
+(cd "$DEMO_APP_DIR/../javascript" && yarn build)
+
+# Reinstall to pick up the latest changes
+echo "Installing latest ultimate_turbo_modal in demo app..."
+yarn install --force
+
+# Start the development servers
 if command -v overmind &> /dev/null; then
-  overmind start -f Procfile.dev "$@"
+  overmind start -f $DEMO_APP_DIR/Procfile.dev "$@"
 else
-  foreman start -f Procfile.dev "$@"
+  foreman start -f $DEMO_APP_DIR/Procfile.dev "$@"
 fi

data/demo-app/yarn.lock

@@ -479,6 +479,13 @@ flatpickr@^4.6.13:
   resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94"
   integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==
 
+focus-trap@^7.6.5:
+  version "7.6.5"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.6.5.tgz#56f0814286d43c1a2688e9bc4f31f17ae047fb76"
+  integrity sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==
+  dependencies:
+    tabbable "^6.2.0"
+
 fraction.js@^4.3.6:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
@@ -936,6 +943,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tailwindcss@4.1.3, tailwindcss@^4.1.3:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.1.3.tgz#f5a6b4451295c06e213013697f7193be1630fa46"
@@ -959,11 +971,12 @@ to-regex-range@^5.0.1:
     is-number "^7.0.0"
 
 "ultimate_turbo_modal@file:../javascript":
-  version "2.0.4"
+  version "2.1.1"
   dependencies:
     "@hotwired/stimulus" "^3.2.2"
     "@hotwired/turbo-rails" "^8.0.0"
     el-transition "^0.0.7"
+    focus-trap "^7.6.5"
     idiomorph "^0.7.3"
 
 universalify@^2.0.0:

data/javascript/modal_controller.js

@@ -20,6 +20,10 @@ export default class extends Controller {
     // Initialize focus trap instance variable
     this.focusTrapInstance = null;
 
+    // Store original body styles for scroll lock
+    this.originalBodyOverflow = null;
+    this.scrollPosition = 0;
+
     this.showModal();
 
     this.turboFrame = this.element.closest('turbo-frame');
@@ -41,6 +45,9 @@ export default class extends Controller {
   }
 
   showModal() {
+    // Lock body scroll
+    this.#lockBodyScroll();
+
     enter(this.containerTarget).then(() => {
       // Activate focus trap after the modal transition is complete
       this.#activateFocusTrap();
@@ -112,6 +119,9 @@ export default class extends Controller {
   }
 
   #resetModalElement() {
+    // Unlock body scroll
+    this.#unlockBodyScroll();
+    
     leave(this.containerTarget).then(() => {
       this.turboFrame.removeAttribute("src");
       this.containerTarget.remove();
@@ -187,4 +197,35 @@ export default class extends Controller {
       this.focusTrapInstance = null;
     }
   }
+
+  #lockBodyScroll() {
+    // Store the current scroll position
+    this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+    
+    // Store the original overflow style
+    this.originalBodyOverflow = document.body.style.overflow;
+    
+    // Prevent scrolling on the body
+    document.body.style.overflow = 'hidden';
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${this.scrollPosition}px`;
+    document.body.style.width = '100%';
+  }
+
+  #unlockBodyScroll() {
+    // Restore the original overflow style
+    if (this.originalBodyOverflow !== null) {
+      document.body.style.overflow = this.originalBodyOverflow;
+    } else {
+      document.body.style.removeProperty('overflow');
+    }
+    
+    // Remove position styles
+    document.body.style.removeProperty('position');
+    document.body.style.removeProperty('top');
+    document.body.style.removeProperty('width');
+    
+    // Restore the scroll position
+    window.scrollTo(0, this.scrollPosition);
+  }
 }

data/javascript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate_turbo_modal",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "The ultimate Turbo / Stimulus / Hotwire modal window for Rails",
   "main": "dist/ultimate_turbo_modal.min.js",
   "module": "dist/ultimate_turbo_modal.min.js",

data/lib/ultimate_turbo_modal/base.rb

@@ -123,7 +123,7 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def styles
     style do
-      str = "html:has(dialog[open]) {overflow: hidden;} html {scrollbar-gutter: stable;}".html_safe
+      str = "html:has(dialog[open]),html:has(#modal-container) {overflow: hidden;} html {scrollbar-gutter: stable;}".html_safe
       respond_to?(:unsafe_raw) ? unsafe_raw(str) : raw(str)
     end
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 2.1.1
+  version: 2.1.2
 platform: ruby
 authors:
 - Carl Mercier