moderntw_confirms 1.0.0 → 1.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 699d66807d16cb4cc6fefb0cc5ce9e0fc9b2cebeb1f4675d0199fac4ce7d63b6
-  data.tar.gz: dc52fe74b4c4af10f0615a559c3b24ccdb03570f14bc5e486f83c02de65924e3
+  metadata.gz: d648dcd53d5b73daa45fcd1762e4fcbbff04f23f4a1bba3ac12dddf8afc307fe
+  data.tar.gz: cad308cde28cf3bb0768f10b55e22f4d12ae6f5fa688b624515ddef5950e7df2
 SHA512:
-  metadata.gz: ea3e7d14c539f7e6bad0dad77228dc856c5d93ce1174129b3707eb0d7afe2324f6ca122737185345cecaed96f9dcd5599de4452f77eb9efe57d7c83552613f38
-  data.tar.gz: 5726f6f98b8962720b67b13a81a26dc8c04f77b362dbc75768b959c0fa85a9d4f65de960fb468eec45106c9556f3197a3f063ec7c3ec2f60873896edc764dad8
+  metadata.gz: dc13da07aa0c8f4730d6e1c84f961fb01cabccce571ed7d283942d9ad563c46fcbfda9f7f31a00fe73a206cdd12033dedfe5d81a4163f1a6844f8930aa8d507b
+  data.tar.gz: 9013a015eb6f1a740dc603dba016f4e2431f0d8eaf0678692ae4760eab8108716814578faf1729bbe0bfed1129f1f1e7c0176132c9c05f9ebdd8b0f5a32ae7f4

data/CHANGELOG.md

@@ -1,11 +1,19 @@
 # Changelog
 
-All notable changes to this project will be documented in this file.
+## [1.1.1] - 2025-01-04
 
-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).
+### Changed
+- **BREAKING (but backwards compatible)**: Refactored configuration to use accessor methods instead of hash keys
+  - Old syntax: `config[:backdrop_class] = "..."`
+  - New syntax: `config.backdrop_class = "..."`
+  - The old hash-based syntax is still supported via the `config` alias for backwards compatibility
+- Removed dependency on ActiveSupport's `mattr_accessor`
 
-## [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 +29,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

@@ -5,6 +5,8 @@ Beautiful Tailwind CSS confirmation modals for Rails applications. Drop-in repla
 [![Gem Version](https://badge.fury.io/rb/moderntw_confirms.svg)](https://badge.fury.io/rb/moderntw_confirms)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+![ModerntwConfirms demo](demo.gif)
+
 ## Features
 
 - **Zero Configuration** - Works with your existing Rails code immediately
@@ -96,9 +98,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 +140,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 +173,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.enable_on_mobile %>
+
 <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

@@ -3,18 +3,22 @@ ModerntwConfirms.configure do |config|
   # These are the default values - modify them to match your design system
 
   # Background overlay classes
-  config[:backdrop_class] = "bg-black bg-opacity-50"
+  config.backdrop_class = "bg-black bg-opacity-50"
 
   # Modal container classes
-  config[:modal_class] = "bg-white rounded-lg shadow-xl"
+  config.modal_class = "bg-white rounded-lg shadow-xl"
 
   # Confirm button classes
-  config[:confirm_button_class] = "bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
+  config.confirm_button_class = "bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded"
 
   # Cancel button classes
-  config[:cancel_button_class] = "bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded"
+  config.cancel_button_class = "bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded"
 
   # 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
+  # config.delete_confirm_button_class = "bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded"
+
+  # 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.1"
 end

data/lib/moderntw_confirms.rb

@@ -6,15 +6,31 @@ require_relative "moderntw_confirms/engine" if defined?(Rails)
 module ModerntwConfirms
   class Error < StandardError; end
 
-  mattr_accessor :config
-  self.config = {
-    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"
-  }
-
-  def self.configure
-    yield config
+  class Configuration
+    attr_accessor :backdrop_class, :modal_class, :confirm_button_class,
+                  :cancel_button_class, :enable_on_mobile
+
+    def initialize
+      @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"
+      @enable_on_mobile = false
+    end
+  end
+
+  class << self
+    attr_writer :configuration
+
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield configuration
+    end
+
+    # Alias for backwards compatibility
+    alias_method :config, :configuration
   end
 end

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.1
 platform: ruby
 authors:
 - Robin Ciubotaru
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-10-21 00:00:00.000000000 Z
+date: 2025-11-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails