moderntw_confirms 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 699d66807d16cb4cc6fefb0cc5ce9e0fc9b2cebeb1f4675d0199fac4ce7d63b6
-  data.tar.gz: dc52fe74b4c4af10f0615a559c3b24ccdb03570f14bc5e486f83c02de65924e3
+  metadata.gz: eea06d5f7f409a050c8ab276951527339aff43908982b4877c47a71de28bfaf6
+  data.tar.gz: 588cdb9a1b4e27bc6bb192f17eda678abfc58c0a9538f25c030331682630a377
 SHA512:
-  metadata.gz: ea3e7d14c539f7e6bad0dad77228dc856c5d93ce1174129b3707eb0d7afe2324f6ca122737185345cecaed96f9dcd5599de4452f77eb9efe57d7c83552613f38
-  data.tar.gz: 5726f6f98b8962720b67b13a81a26dc8c04f77b362dbc75768b959c0fa85a9d4f65de960fb468eec45106c9556f3197a3f063ec7c3ec2f60873896edc764dad8
+  metadata.gz: 2599ffd51032afaeea169def98bea6bb72e521433ffa4717d5ce2c8f7bdda94f13679789e47873182ae4383e351fcab5b131cb4e20545cdf6ccbc57700ab8525
+  data.tar.gz: 0ff0eb7dec6ab092c8e512420a49a9be2024e23e5577240d67c769b9bea2770238254ad7d8a3d6b9b61e9e9af2b19df1db56a756f0bde5d91a3c4a7d4e63654f

data/CHANGELOG.md

@@ -1,11 +1,12 @@
 # Changelog
 
-All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.1.0] - 2024-05-xx
+    - Default to native confirms on mobile with optional opt-in via config[:enable_on_mobile]
+
+### Added
+- Default to native browser confirms on mobile devices with the option to re-enable Tailwind modals via `config[:enable_on_mobile]`
 
 ## [0.1.0] - 2025-10-21
 
@@ -21,4 +22,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Optional Stimulus controller for advanced customization
 - Configurable Tailwind classes via initializer
 - Dynamic content support (works with AJAX/Turbo loaded content)
-- Focus management for accessibility
+- Focus management for accessibility

data/README.md

@@ -96,9 +96,14 @@ ModerntwConfirms.configure do |config|
   config[:modal_class] = "rounded-3xl shadow-2xl"
   config[:confirm_button_class] = "bg-indigo-600 hover:bg-indigo-700"
   config[:cancel_button_class] = "bg-gray-200 hover:bg-gray-300"
+  config[:enable_on_mobile] = true # Opt into modals on phones/tablets
 end
 ```
 
+### Mobile Behavior
+
+Native confirmation dialogs feel familiar on mobile, so the gem defaults to using the browser's built-in confirms for touch devices. If you prefer the Tailwind modal experience everywhere, set `config[:enable_on_mobile] = true` in your initializer.
+
 ### Animation Customization
 
 The animations use CSS transitions and can be modified in the modal partial:
@@ -133,16 +138,12 @@ The modal includes automatic fallback to native browser confirms for older brows
 
 ## Development
 
-After checking out the repo, set up the test app:
+After checking out the repo, run:
 
 ```bash
-cd test_confirms_app
 bundle install
-rails server
 ```
 
-Visit http://localhost:3000 to see the examples.
-
 ### Running Tests
 
 ```bash
@@ -170,4 +171,4 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Acknowledgments
 
-Built with Rails and Tailwind CSS. Special thanks to the Rails and Hotwire communities for their excellent frameworks.
+Built with Rails and Tailwind CSS. Special thanks to the Rails and Hotwire communities for their excellent frameworks.

data/lib/generators/moderntw_confirms/install/templates/_moderntw_confirms_modal.html.erb

@@ -1,9 +1,13 @@
+<% config = ModerntwConfirms.config %>
+<% enable_on_mobile = config.fetch(:enable_on_mobile, false) %>
+
 <div id="moderntw-confirm-modal"
      class="hidden fixed inset-0 z-[99999] overflow-y-auto"
      aria-labelledby="moderntw-modal-title"
      aria-modal="true"
      role="dialog"
-     data-turbo-permanent>
+     data-turbo-permanent
+     data-enable-on-mobile="<%= enable_on_mobile %>">
 
   <div class="fixed inset-0" data-modal-backdrop>
     <div class="absolute inset-0 bg-gray-900/40 backdrop-blur-sm"></div>
@@ -62,7 +66,7 @@
 
 <style>
   #moderntw-confirm-modal {
-    transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
     will-change: opacity;
   }
 
@@ -75,7 +79,7 @@
   }
 
   #moderntw-confirm-modal [data-modal-panel] {
-    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease-out;
     will-change: transform, opacity;
   }
 
@@ -85,20 +89,20 @@
   }
 
   #moderntw-confirm-modal:not(.modal-showing) [data-modal-panel] {
-    transform: scale(0.9) translateY(20px);
+    transform: scale(0.95) translateY(10px);
     opacity: 0;
   }
 
   @supports (backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px)) {
     #moderntw-confirm-modal [data-modal-backdrop] > div {
-      -webkit-backdrop-filter: blur(12px);
-      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(10px);
+      backdrop-filter: blur(10px);
     }
   }
 
   @supports not ((backdrop-filter: blur(0px)) or (-webkit-backdrop-filter: blur(0px))) {
     #moderntw-confirm-modal [data-modal-backdrop] > div {
-      background-color: rgba(17, 24, 39, 0.75);
+      background-color: rgba(17, 24, 39, 0.72);
     }
   }
-</style>
+</style>

data/lib/generators/moderntw_confirms/install/templates/moderntw_confirms.rb

@@ -17,4 +17,8 @@ ModerntwConfirms.configure do |config|
   # You can also add custom classes for specific use cases:
   # For delete confirmations, you might want red buttons:
   # config[:delete_confirm_button_class] = "bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded"
-end
+
+  # Use Tailwind modal confirms on mobile devices (defaults to native mobile confirms)
+  # Set to true if you prefer the custom modal experience on phones and tablets
+  # config[:enable_on_mobile] = true
+end

data/lib/moderntw_confirms/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ModerntwConfirms
-  VERSION = "1.0.0"
+  VERSION = "1.1.0"
 end

data/lib/moderntw_confirms.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "active_support/core_ext/module/attribute_accessors"
+
 require_relative "moderntw_confirms/version"
 require_relative "moderntw_confirms/engine" if defined?(Rails)
 
@@ -11,7 +13,8 @@ module ModerntwConfirms
     backdrop_class: "bg-black bg-opacity-50",
     modal_class: "bg-white rounded-lg shadow-xl",
     confirm_button_class: "bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded",
-    cancel_button_class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded"
+    cancel_button_class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded",
+    enable_on_mobile: false
   }
 
   def self.configure

data/vendor/assets/javascripts/moderntw_confirms.js

@@ -9,6 +9,8 @@
       this.initialized = false;
       this.initializationAttempts = 0;
       this.maxInitAttempts = 3;
+      this.useModal = true;
+      this.enableOnMobile = false;
 
       try {
         this.init();
@@ -48,6 +50,13 @@
         }
 
         this.setupModalElements();
+        this.readConfiguration();
+        this.useModal = this.shouldUseModal();
+
+        if (!this.useModal) {
+          console.info('ModerntwConfirms: Using native browser confirms on mobile devices.');
+        }
+
         this.interceptTurboConfirms();
         this.setupModalHandlers();
         this.initialized = true;
@@ -59,6 +68,8 @@
     }
 
     fallbackToNative() {
+      this.useModal = false;
+
       if (window.Turbo && window.Turbo.config && window.Turbo.config.forms) {
         Turbo.config.forms.confirm = (message) => {
           return Promise.resolve(window.confirm(message));
@@ -213,7 +224,7 @@
     }
 
     showModal(message, callback) {
-      if (!this.modal || !this.initialized) {
+      if (!this.modal || !this.initialized || !this.useModal) {
         const result = window.confirm(message);
         if (callback) callback(result);
         return;
@@ -373,6 +384,47 @@
         this.modal.removeEventListener('keydown', this.tabHandler);
       }
     }
+
+    readConfiguration() {
+      try {
+        if (!this.modal || !this.modal.dataset) {
+          this.enableOnMobile = false;
+          return;
+        }
+
+        this.enableOnMobile = this.modal.dataset.enableOnMobile === 'true';
+      } catch (error) {
+        console.error('ModerntwConfirms: Error reading configuration', error);
+        this.enableOnMobile = false;
+      }
+    }
+
+    shouldUseModal() {
+      try {
+        if (this.enableOnMobile) {
+          return true;
+        }
+
+        return !this.isMobileDevice();
+      } catch (error) {
+        console.error('ModerntwConfirms: Error determining modal usage preference', error);
+        return true;
+      }
+    }
+
+    isMobileDevice() {
+      try {
+        const touchCapable = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
+        const narrowViewport = window.matchMedia ? window.matchMedia('(max-width: 768px)').matches : false;
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera || '';
+        const mobileRegex = /Mobi|Android|iP(ad|hone|od)|Silk|Kindle|BlackBerry|IEMobile|Opera Mini/i;
+
+        return touchCapable && (narrowViewport || mobileRegex.test(userAgent));
+      } catch (error) {
+        console.error('ModerntwConfirms: Error detecting device type', error);
+        return false;
+      }
+    }
   }
 
   if (typeof window !== 'undefined') {
@@ -401,4 +453,4 @@
       setTimeout(initializeOnce, 100);
     }
   }
-})();
+})();

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: moderntw_confirms
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Robin Ciubotaru
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-10-21 00:00:00.000000000 Z
+date: 2025-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails