ultimate_turbo_modal 1.4.1 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 979f1d2dadd3743aee45d26edc2057af3f859c26d58117726c1c1b1919f07fda
-  data.tar.gz: 24160dc417e83b5ad8ee7bf055a71ef4e62f4ce18882c14b8e114cb6f1e292f9
+  metadata.gz: 19886fb7dd818b59f8aad64fa2c917783e690d63797761b63dd2ef4422ef119a
+  data.tar.gz: a1c5449b028638a5b7d39b2ea7707accf037d402fc1361ffc8d075b28181bde4
 SHA512:
-  metadata.gz: e27b7b9068f0c1c514746344aa68be336c799f7e1deea6d2d82ad124a0b6818b7fdded1e1a0070d628f936e28d764e10669d5b50d24b4297b9e11d4f3d0daa15
-  data.tar.gz: ebec1a181719537ab872b45d60896f18b7b586d12466cbae8dec1c04fa3f6a481351fdc563ba91051f41068e21bad65b8bc962758475423dd183946a7112cba4
+  metadata.gz: 8395f4d9a00f83fffcdb0293a967867b52a00e74ad3716bab49b5923f8c541e9a953246f3196abc434ddccc0daa3c8868caf78c6d915154b978ead3900628bc2
+  data.tar.gz: 17f6c1e20e67e8447fc41f3cbe708d4a2899acf9fcdfbd8ea753960c8daeb2789c572acbc9ee107b6524472ac2e78c1cb77d4b3b18cafa7911028c9336b801e4

data/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.6.0] - 2023-12-25
+
+- Support for Ruby 3.3
+
+## [1.5.0] - 2023-11-28
+
+- Allow whitelisting out-of-modal CSS selectors to not dismiss modal when clicked
+
 ## [1.4.1] - 2023-11-26
 
 - Make Tailwind transition smoother on pages with multiple z-index

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ultimate_turbo_modal (1.4.1)
+    ultimate_turbo_modal (1.6.0)
       phlex-rails (>= 1.0, < 2.0)
       rails (>= 7)
       stimulus-rails

data/README.md

@@ -26,6 +26,7 @@ It currently ships in a two flavors: Tailwind CSS, and regular, vanilla CSS. It
 - Support for long, scrollable modals
 - Properly locks the background page when scrolling a long modal
 - Click outside the modal to dismiss
+- Option to whitelist CSS selectors that won't dismiss the modal when clicked outside the modal (ie: datepicker)
 - Keyboard control; ESC to dismiss
 - Automatic (or not) close button
 
@@ -70,6 +71,7 @@ UltimateTurboModal.configure do |config|
   config.header = true
   config.header_divider = true
   config.footer_divider = true
+  config.allowed_click_outside_selector = nil
 end
 ```
 
@@ -173,6 +175,11 @@ Whether to display a divider below the header.
 
 Whether to display a divider above the footer. The divider will not appear if no footer was specified.
 
+### `allowed_click_outside_selector`, default: `nil`
+
+A string of CSS selectors that can be clicked outside of the modal without dismissing the modal. Useful for elements
+such as datepickers.
+
 ### Example usage with options
 
 ```erb

data/lib/phlex/deferred_render_with_main_content.rb

@@ -2,8 +2,8 @@
 
 module Phlex
   module DeferredRenderWithMainContent
-    def template(&)
-      output = capture(&)
+    def template(&block)
+      output = capture(&block)
       super { unsafe_raw(output) }
     end
   end

data/lib/ultimate_turbo_modal/base.rb

@@ -2,37 +2,40 @@
 
 class UltimateTurboModal::Base < Phlex::HTML
   prepend Phlex::DeferredRenderWithMainContent
-  # @param padding [Boolean] Whether to add padding around the modal content
+  # @param advance [Boolean] Whether to update the browser history when opening and closing the modal
+  # @param allowed_click_outside_selector [String] CSS selectors for elements that are allowed to be clicked outside of the modal without dismissing the modal
   # @param close_button [Boolean] Whether to show a close button
-  # @param close_button_sr_label [String] Close button label for screen readers
   # @param close_button_data_action [String] `data-action` attribute for the close button
-  # @param advance [Boolean] Whether to update the browser history when opening and closing the modal
-  # @param header_divider [Boolean] Whether to show a divider between the header and the main content
+  # @param close_button_sr_label [String] Close button label for screen readers
   # @param footer_divider [Boolean] Whether to show a divider between the main content and the footer
-  # @param title [String] The title of the modal
+  # @param header_divider [Boolean] Whether to show a divider between the header and the main content
+  # @param padding [Boolean] Whether to add padding around the modal content
   # @param request [ActionDispatch::Request] The current Rails request object
+  # @param title [String] The title of the modal
   def initialize(
-    padding: UltimateTurboModal.configuration.padding,
+    advance: UltimateTurboModal.configuration.advance,
+    allowed_click_outside_selector: UltimateTurboModal.configuration.allowed_click_outside_selector,
     close_button: UltimateTurboModal.configuration.close_button,
-    close_button_sr_label: "Close modal",
     close_button_data_action: "modal#hideModal",
-    advance: UltimateTurboModal.configuration.advance,
+    close_button_sr_label: "Close modal",
+    footer_divider: UltimateTurboModal.configuration.footer_divider,
     header: UltimateTurboModal.configuration.header,
     header_divider: UltimateTurboModal.configuration.header_divider,
-    footer_divider: UltimateTurboModal.configuration.footer_divider,
-    title: nil, request: nil
+    padding: UltimateTurboModal.configuration.padding,
+    request: nil, title: nil
   )
-    @padding = padding
-    @close_button = close_button
-    @close_button_sr_label = close_button_sr_label
-    @close_button_data_action = close_button_data_action
     @advance = !!advance
     @advance_url = advance if advance.present? && advance.is_a?(String)
-    @title = title
+    @allowed_click_outside_selector = allowed_click_outside_selector
+    @close_button = close_button
+    @close_button_data_action = close_button_data_action
+    @close_button_sr_label = close_button_sr_label
+    @footer_divider = footer_divider
     @header = header
     @header_divider = header_divider
-    @footer_divider = footer_divider
+    @padding = padding
     @request = request
+    @title = title
 
     unless self.class.include?(Turbo::FramesHelper)
       self.class.include Turbo::FramesHelper
@@ -67,7 +70,7 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   private
 
-  attr_accessor :request
+  attr_accessor :request, :allowed_click_outside_selector
 
   def padding? = !!@padding
 
@@ -81,7 +84,7 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   def footer? = @footer.present?
 
-  def header_divider? = !!@header_divider && (@title_block || title?)
+  def header_divider? = !!@header_divider && (@title_block.present? || title?)
 
   def footer_divider? = !!@footer_divider && footer?
 
@@ -104,26 +107,26 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   ## HTML components
 
-  def modal(&)
+  def modal(&block)
     outer_divs do
       div_content do
         div_header
-        div_main(&)
+        div_main(&block)
         div_footer if footer?
       end
     end
   end
 
-  def outer_divs(&)
+  def outer_divs(&block)
     div_dialog do
       div_overlay
       div_outer do
-        div_inner(&)
+        div_inner(&block)
       end
     end
   end
 
-  def div_dialog(&)
+  def div_dialog(&block)
     div(id: "modal-container",
       class: self.class::DIV_DIALOG_CLASSES,
       role: "dialog",
@@ -135,6 +138,7 @@ class UltimateTurboModal::Base < Phlex::HTML
         controller: "modal",
         modal_target: "container",
         modal_advance_url_value: advance_url,
+        modal_allowed_click_outside_selector_value: allowed_click_outside_selector,
         action: "turbo:submit-end->modal#submitEnd keyup@window->modal#closeWithKeyboard click@window->modal#outsideModalClicked click->modal#outsideModalClicked",
         transition_enter: "ease-out duration-100",
         transition_enter_start: "opacity-0",
@@ -148,30 +152,30 @@ class UltimateTurboModal::Base < Phlex::HTML
         close_button: close_button?.to_s,
         header_divider: header_divider?.to_s,
         footer_divider: footer_divider?.to_s
-      }, &)
+      }, &block)
   end
 
   def div_overlay
     div(id: "modal-overlay", class: self.class::DIV_OVERLAY_CLASSES)
   end
 
-  def div_outer(&)
-    div(id: "modal-outer", class: self.class::DIV_OUTER_CLASSES, &)
+  def div_outer(&block)
+    div(id: "modal-outer", class: self.class::DIV_OUTER_CLASSES, &block)
   end
 
-  def div_inner(&)
-    div(id: "modal-inner", class: self.class::DIV_INNER_CLASSES, &)
+  def div_inner(&block)
+    div(id: "modal-inner", class: self.class::DIV_INNER_CLASSES, &block)
   end
 
-  def div_content(&)
-    div(id: "modal-content", class: self.class::DIV_CONTENT_CLASSES, data: {modal_target: "content"}, &)
+  def div_content(&block)
+    div(id: "modal-content", class: self.class::DIV_CONTENT_CLASSES, data: {modal_target: "content"}, &block)
   end
 
-  def div_main(&)
-    div(id: "modal-main", class: self.class::DIV_MAIN_CLASSES, &)
+  def div_main(&block)
+    div(id: "modal-main", class: self.class::DIV_MAIN_CLASSES, &block)
   end
 
-  def div_header(&)
+  def div_header(&block)
     div(id: "modal-header", class: self.class::DIV_HEADER_CLASSES) do
       div_title
       button_close
@@ -203,13 +207,13 @@ class UltimateTurboModal::Base < Phlex::HTML
     end
   end
 
-  def close_button_tag(&)
+  def close_button_tag(&block)
     button(type: "button",
       aria: {label: "close"},
       class: self.class::CLOSE_BUTTON_TAG_CLASSES,
       data: {
         action: @close_button_data_action
-      }, &)
+      }, &block)
   end
 
   def icon_close

data/lib/ultimate_turbo_modal/configuration.rb

@@ -11,10 +11,12 @@ module UltimateTurboModal
   end
 
   delegate :flavor, :flavor=, :close_button, :close_button=,
-    :advance, :advance=, :padding, :padding=, to: :configuration
+    :advance, :advance=, :padding, :padding=,
+    :allowed_click_outside_selector, :allowed_click_outside_selector=, to: :configuration
 
   class Configuration
     attr_reader :flavor, :close_button, :advance, :padding, :header, :header_divider, :footer_divider
+    attr_accessor :allowed_click_outside_selector
 
     def initialize
       @flavor = :tailwind
@@ -24,6 +26,7 @@ module UltimateTurboModal
       @header = true
       @header_divider = true
       @footer_divider = true
+      @allowed_click_outside_selector = []
     end
 
     def flavor=(flavor)

data/lib/ultimate_turbo_modal/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module UltimateTurboModal
-  VERSION = "1.4.1"
+  VERSION = "1.6.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 1.4.1
+  version: 1.6.0
 platform: ruby
 authors:
 - Carl Mercier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-26 00:00:00.000000000 Z
+date: 2023-12-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex-rails