ultimate_turbo_modal 1.3.1 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '079b28d06be34aba1359de1c34042f9f2ef131421f37af1a7f3c8619e156e68b'
-  data.tar.gz: 551d973abd6d0c51f0ad1e01e87ead35697030e4fcce5f62ac591dc09683a284
+  metadata.gz: 8d0ae24b41414e4d9419260f7de74789e488a6e0d0a961749e10c3f6ca70ecaf
+  data.tar.gz: ef606673fe357af79d46760a2c59252da8052fcd6fdbce56fdf264cd015fe460
 SHA512:
-  metadata.gz: 611ce181e6be8833b0b0c094bf2a776edf85dd050ca93fcf866401c1a3e05c0f81c2be519ba2ea8e98efd3ce3b28d7ee0fb2bb6512938a0142149b80fe9ac05e
-  data.tar.gz: 77159bc4ce94a2bf2cc1abddbc068efe4b5bb3c821494d937262411961c2cfdc0df036fb83ed7dd56f8d25c1743d85d585e572a085f7374d8eecc050ec2bd11a
+  metadata.gz: '08ded5bfa9b93dac612301c125c9acd95fae727856154c861971917f3751cd1e11d15f49c9a3b2c00c70ac468c0e19f92a5d69a59158c63d5a826c70322478b2'
+  data.tar.gz: 23641e005618db6c5b09cfe64fbc8dad905930ae38bf04cfefcff722d681fc8423c7d39cb70d1cccb6d11743ff4cc9aa8c94c7b13a96d4e82b488d7e0a8fe240

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.4.0] - 2023-11-23
+
+- Added ability to specify custom `data-action` for the close button.
+- Code cleanup, deduplication
+
+## [1.3.1] - 2023-11-23
+
+- Bug fixes
+
 ## [1.3.0] - 2023-11-14
 
 - Added ability to pass in a `title` block.

data/Gemfile.lock

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

data/lib/phlex/deferred_render_with_main_content.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module Phlex
   module DeferredRenderWithMainContent
     def template(&)

data/lib/ultimate_turbo_modal/base.rb

@@ -1,7 +1,11 @@
+# frozen_string_literal: true
+
 class UltimateTurboModal::Base < Phlex::HTML
   prepend Phlex::DeferredRenderWithMainContent
   # @param padding [Boolean] Whether to add padding around the modal content
-  # @param close_button [Boolean] Whether to show a close button.
+  # @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 footer_divider [Boolean] Whether to show a divider between the main content and the footer
@@ -10,6 +14,8 @@ class UltimateTurboModal::Base < Phlex::HTML
   def initialize(
     padding: UltimateTurboModal.configuration.padding,
     close_button: UltimateTurboModal.configuration.close_button,
+    close_button_sr_label: "Close modal",
+    close_button_data_action: "modal#hideModal",
     advance: UltimateTurboModal.configuration.advance,
     header: UltimateTurboModal.configuration.header,
     header_divider: UltimateTurboModal.configuration.header_divider,
@@ -18,6 +24,8 @@ class UltimateTurboModal::Base < Phlex::HTML
   )
     @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
@@ -93,4 +101,124 @@ class UltimateTurboModal::Base < Phlex::HTML
   def respond_to_missing?(method, include_private = false)
     self.class.included_modules.any? { |mod| mod.instance_methods.include?(method) } || super
   end
+
+  ## HTML components
+
+  def modal(&)
+    outer_divs do
+      div_content do
+        div_header
+        div_main(&)
+        div_footer if footer?
+      end
+    end
+  end
+
+  def outer_divs(&)
+    div_dialog do
+      div_overlay
+      div_outer do
+        div_inner(&)
+      end
+    end
+  end
+
+  def div_dialog(&)
+    div(id: "modal-container",
+      class: self.class::DIV_DIALOG_CLASSES,
+      role: "dialog",
+      aria: {
+        labeled_by: "modal-title-h",
+        modal: true
+      },
+      data: {
+        controller: "modal",
+        modal_target: "container",
+        modal_advance_url_value: advance_url,
+        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",
+        transition_enter_end: "opacity-100",
+        transition_leave: "ease-in duration-50",
+        transition_leave_start: "opacity-100",
+        transition_leave_end: "opacity-0",
+        padding: padding?.to_s,
+        title: title?.to_s,
+        header: header?.to_s,
+        close_button: close_button?.to_s,
+        header_divider: header_divider?.to_s,
+        footer_divider: footer_divider?.to_s
+      }, &)
+  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, &)
+  end
+
+  def div_inner(&)
+    div(id: "modal-inner", class: self.class::DIV_INNER_CLASSES, &)
+  end
+
+  def div_content(&)
+    div(id: "modal-content", class: self.class::DIV_CONTENT_CLASSES, data: {modal_target: "content"}, &)
+  end
+
+  def div_main(&)
+    div(id: "modal-main", class: self.class::DIV_MAIN_CLASSES, &)
+  end
+
+  def div_header(&)
+    div(id: "modal-header", class: self.class::DIV_HEADER_CLASSES) do
+      div_title
+      button_close
+    end
+  end
+
+  def div_title
+    div(id: "modal-title", class: self.class::DIV_TITLE_CLASSES) do
+      if @title_block.present?
+        render @title_block
+      else
+        h3(id: "modal-title-h", class: self.class::DIV_TITLE_H_CLASSES) { @title }
+      end
+    end
+  end
+
+  def div_footer
+    div(id: "modal-footer", class: self.class::DIV_FOOTER_CLASSES) do
+      render @footer
+    end
+  end
+
+  def button_close
+    div(id: "modal-close", class: self.class::BUTTON_CLOSE_CLASSES) do
+      close_button_tag do
+        icon_close
+        span(class: self.class::BUTTON_CLOSE_SR_ONLY_CLASSES) { @close_button_sr_label }
+      end
+    end
+  end
+
+  def close_button_tag(&)
+    button(type: "button",
+      aria: {label: "close"},
+      class: self.class::CLOSE_BUTTON_TAG_CLASSES,
+      data: {
+        action: @close_button_data_action
+      }, &)
+  end
+
+  def icon_close
+    svg(class: self.class::ICON_CLOSE_CLASSES, fill: "currentColor", viewBox: "0 0 20 20") do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
 end

data/lib/ultimate_turbo_modal/configuration.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module UltimateTurboModal
   class << self
     attr_accessor :configuration

data/lib/ultimate_turbo_modal/flavors/tailwind.rb

@@ -1,137 +1,20 @@
+# frozen_string_literal: true
+
 module UltimateTurboModal::Flavors
   class Tailwind < UltimateTurboModal::Base
-
-    private
-
-    def modal(&)
-      outer_divs do
-        div_content do
-          div_header
-          div_main(&)
-          div_footer if footer?
-        end
-      end
-    end
-
-    def outer_divs(&)
-      div_dialog do
-        div_overlay
-        div_outer do
-          div_inner(&)
-        end
-      end
-    end
-
-    def div_dialog(&)
-      div(id: "modal-container",
-        class: "relative group",
-        role: "dialog",
-        aria: {
-          labeled_by: "modal-title-h",
-          modal: true
-        },
-        data: {
-          controller: "modal",
-          modal_target: "container",
-          modal_advance_url_value: advance_url,
-          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",
-          transition_enter_end: "opacity-100",
-          transition_leave: "ease-in duration-50",
-          transition_leave_start: "opacity-100",
-          transition_leave_end: "opacity-0",
-          padding: padding?.to_s,
-          title: title?.to_s,
-          header: header?.to_s,
-          close_button: close_button?.to_s,
-          header_divider: header_divider?.to_s,
-          footer_divider: footer_divider?.to_s
-        }, &)
-    end
-
-    def div_overlay
-      div(id: "modal-overlay",
-        class: "fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity dark:bg-opacity-80 z-40")
-    end
-
-    def div_outer(&)
-      div(id: "modal-outer",
-        class: "fixed inset-0 z-50 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4", &)
-    end
-
-    def div_inner(&)
-      div(id: "modal-inner",
-        class: "flex min-h-full items-center justify-center p-1 sm:p-4", &)
-    end
-
-    def div_content(&)
-      div(id: "modal-content",
-        class: "relative transform overflow-hidden rounded-lg bg-white text-left shadow transition-all
-                sm:my-8 sm:max-w-3xl dark:bg-gray-800 dark:text-white",
-        data: {modal_target: "content"}, &)
-    end
-
-    def div_main(&)
-      div(id: "modal-main", class: "group-data-[padding=true]:p-4 group-data-[padding=true]:pt-2", &)
-    end
-
-    def header_block
-      return if @header_block.blank?
-      render @header_block
-      nil
-    end
-
-    def div_header(&)
-      div(id: "modal-header", class: "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]:border-b group-data-[header=false]:absolute") do
-        div_title
-        button_close
-      end
-    end
-
-    def div_title
-      div(id: "modal-title", class: "pl-4") do
-        if @title_block.present?
-          render @title_block
-        else
-          h3(id: "modal-title-h", class: "group-data-[title=false]:hidden text-lg font-semibold text-gray-900 dark:text-white") { @title }
-        end
-      end
-    end
-
-    def div_footer
-      div(id: "modal-footer", class: "flex p-4 rounded-b dark:border-gray-600 group-data-[footer-divider=true]:border-t") do
-        render @footer
-      end
-    end
-
-    def button_close
-      div(id: "modal-close", class: "mr-4 group-data-[close-button=false]:hidden") do
-        close_button_tag do
-          icon_close
-          span(class: "sr-only") { "Close modal" }
-        end
-      end
-    end
-
-    def close_button_tag(&)
-      button(type: "button",
-        aria: {label: "close"},
-        class: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm
-                p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white",
-        data: {
-          action: "modal#hideModal"
-        }, &)
-    end
-
-    def icon_close
-      svg(class: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20") do |s|
-        s.path(
-          fill_rule: "evenodd",
-          d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-          clip_rule: "evenodd"
-        )
-      end
-    end
+    DIV_DIALOG_CLASSES = "relative group"
+    DIV_OVERLAY_CLASSES = "fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity dark:bg-opacity-80 z-40"
+    DIV_OUTER_CLASSES = "fixed inset-0 z-50 overflow-y-auto sm:max-w-[80%] md:max-w-3xl sm:mx-auto m-4"
+    DIV_INNER_CLASSES = "flex min-h-full items-center justify-center p-1 sm:p-4"
+    DIV_CONTENT_CLASSES = "relative transform overflow-hidden rounded-lg bg-white text-left shadow transition-all sm:my-8 sm:max-w-3xl dark:bg-gray-800 dark:text-white"
+    DIV_MAIN_CLASSES = "group-data-[padding=true]:p-4 group-data-[padding=true]:pt-2"
+    DIV_HEADER_CLASSES = "flex justify-between items-center w-full py-4 rounded-t dark:border-gray-600 group-data-[header-divider=true]:border-b group-data-[header=false]:absolute"
+    DIV_TITLE_CLASSES = "pl-4"
+    DIV_TITLE_H_CLASSES = "group-data-[title=false]:hidden text-lg font-semibold text-gray-900 dark:text-white"
+    DIV_FOOTER_CLASSES = "flex p-4 rounded-b dark:border-gray-600 group-data-[footer-divider=true]:border-t"
+    BUTTON_CLOSE_CLASSES = "mr-4 group-data-[close-button=false]:hidden"
+    BUTTON_CLOSE_SR_ONLY_CLASSES = "sr-only"
+    CLOSE_BUTTON_TAG_CLASSES = "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+    ICON_CLOSE_CLASSES = "w-5 h-5"
   end
 end

data/lib/ultimate_turbo_modal/flavors/vanilla.rb

@@ -1,124 +1,20 @@
+# frozen_string_literal: true
+
 module UltimateTurboModal::Flavors
   class Vanilla < UltimateTurboModal::Base
-
-    private
-
-    def modal(&)
-      outer_divs do
-        div_content do
-          div_header
-          div_main(&)
-          div_footer if footer?
-        end
-      end
-    end
-
-    def outer_divs(&)
-      div_dialog do
-        div_overlay
-        div_outer do
-          div_inner(&)
-        end
-      end
-    end
-
-    def div_dialog(&)
-      div(id: "modal-container",
-        class: "modal-container",
-        role: "dialog",
-        aria: {
-          labeled_by: "modal-title-h",
-          modal: true
-        },
-        data: {
-          controller: "modal",
-          modal_target: "container",
-          modal_advance_url_value: advance_url,
-          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",
-          transition_enter_end: "opacity-100",
-          transition_leave: "ease-in duration-50",
-          transition_leave_start: "opacity-100",
-          transition_leave_end: "opacity-0",
-          padding: padding?.to_s,
-          title: title?.to_s,
-          header: header?.to_s,
-          close_button: close_button?.to_s,
-          header_divider: header_divider?.to_s,
-          footer_divider: footer_divider?.to_s
-        }, &)
-    end
-
-    def div_overlay
-      div(id: "modal-overlay", class: "modal-overlay")
-    end
-
-    def div_outer(&)
-      div(id: "modal-outer", class: "modal-outer", &)
-    end
-
-    def div_inner(&)
-      div(id: "modal-inner", class: "modal-inner", &)
-    end
-
-    def div_content(&)
-      div(id: "modal-content", class: "modal-content", data: {modal_target: "content"}, &)
-    end
-
-    def div_main(&)
-      div(id: "modal-main", class: "modal-main", &)
-    end
-
-    def div_header(&)
-      div(id: "modal-header", class: "modal-header") do
-        div_title
-        button_close
-      end
-    end
-
-    def div_title
-      div(id: "modal-title", class: "modal-title") do
-        if @title_block.present?
-          render @title_block
-        else
-          h3(id: "modal-title-h", class: "modal-title-h") { @title }
-        end
-      end
-    end
-
-    def div_footer
-      div(id: "modal-footer", class: "modal-footer") do
-        render @footer
-      end
-    end
-
-    def button_close
-      div(id: "modal-close", class: "modal-close") do
-        close_button_tag do
-          icon_close
-          span(class: "sr-only") { "Close modal" }
-        end
-      end
-    end
-
-    def close_button_tag(&)
-      button(type: "button",
-        aria: {label: "close"},
-        class: "modal-close-button",
-        data: {
-          action: "modal#hideModal"
-        }, &)
-    end
-
-    def icon_close
-      svg(class: "modal-close-icon", fill: "currentColor", viewBox: "0 0 20 20") do |s|
-        s.path(
-          fill_rule: "evenodd",
-          d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-          clip_rule: "evenodd"
-        )
-      end
-    end
+    DIV_DIALOG_CLASSES = "modal-container"
+    DIV_OVERLAY_CLASSES = "modal-overlay"
+    DIV_OUTER_CLASSES = "modal-outer"
+    DIV_INNER_CLASSES = "modal-inner"
+    DIV_CONTENT_CLASSES = "modal-content"
+    DIV_MAIN_CLASSES =  "modal-main"
+    DIV_HEADER_CLASSES = "modal-header"
+    DIV_TITLE_CLASSES = "modal-title"
+    DIV_TITLE_H_CLASSES = "modal-title-h"
+    DIV_FOOTER_CLASSES = "modal-footer"
+    BUTTON_CLOSE_CLASSES = "modal-close"
+    BUTTON_CLOSE_SR_ONLY_CLASSES = "sr-only"
+    CLOSE_BUTTON_TAG_CLASSES = "modal-close-button"
+    ICON_CLOSE_CLASSES = "modal-close-icon"
   end
 end

data/lib/ultimate_turbo_modal/helpers/controller_helper.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module UltimateTurboModal::Helpers
   module ControllerHelper
     extend ActiveSupport::Concern

data/lib/ultimate_turbo_modal/helpers/stream_helper.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module UltimateTurboModal::Helpers
   module StreamHelper
     def modal(message)

data/lib/ultimate_turbo_modal/helpers/view_helper.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module UltimateTurboModal::Helpers
   module ViewHelper
     def modal(**, &)

data/lib/ultimate_turbo_modal/version.rb

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

metadata

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