ultimate_turbo_modal 1.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9827e4a255b0b49e9ca3454c396e0ca2c043041705058562cd097ee55ded670
-  data.tar.gz: 0df6f286051741524dce4ebaa9602cd7b1e37b082960bc2886495c4a93b2286c
+  metadata.gz: acd3d63c952dd65a1f01d7cba82e4f3d9a86f0ab0873db34a69d9c39f4163798
+  data.tar.gz: dc7cb74c01338495576c5e69dbb583f39119b5a90832338ed4b8ccfb1eac123c
 SHA512:
-  metadata.gz: 0f3f52eb646666e9088b89696f9689ed17b2bf69abe1ea2e7225d0e4e625ecc28d9ae05b391ae640ca096d43b8afd88479278324b84d2515583d303539fb4c89
-  data.tar.gz: be333d50d9e831bf94c60e382fd5b0e7ecad5dcfcc7b73236a103aae8a0356179bd52d38a8400a04ed036a81e195115e091a6bfe448c3214e1331d6f4a11c13f
+  metadata.gz: 2c2f8afbe1c7bd889ec807df58b46bba7db466d65986b86646aa3e66530b8259860f1f2921861548cb3190ad3b4ad7b053f2f61b8a6de9eed995f15d92420f09
+  data.tar.gz: eb43ed0e8628317334ba37c15712aac05924a4b9b9d5dc53d53b181c2f209d149181f768b350495094da614891e39d6ef5e1e06a7c586e8008285eaa7b16afcd

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+## [1.1.0] - 2023-10-31
+
+- Added Vanilla CSS!
+
 ## [1.0.0] - 2023-10-31
 
 - Initial release as a Ruby Gem

data/README.md

@@ -6,7 +6,7 @@ UTMR aims to be the be-all and end-all of Turbo Modals. I believe it is the best
 
 Under the hood, it uses [Stimulus](https://stimulus.hotwired.dev), [Turbo](https://turbo.hotwired.dev/), [el-transition](https://github.com/mmccall10/el-transition), and optionally [Idiomorph](https://github.com/bigskysoftware/idiomorph).
 
-It currently ships in a single flavor: Tailwind CSS. It is easy to create your own to suit your needs such as vanilla CSS or any other CSS framework you may prefer. See `lib/ultimate_turbo_modal/flavors/tailwind.rb` for the Tailwind code.
+It currently ships in a two flavors: Tailwind CSS, and regular, vanilla CSS. It is easy to create your own to suit your needs such as vanilla CSS or any other CSS framework you may prefer. See `lib/ultimate_turbo_modal/flavors/vanilla.rb` for an example code.
 
 
  
@@ -59,14 +59,20 @@ A demo application can be found at https://github.com/cmer/ultimate_turbo_modal-
 <%= turbo_frame_tag "modal" %>
 ``````
 
-4. Register the Stimulus controller in `app/javascript/controllers/index.js` adding the following lines at the end.
+4. Set your desired flavor at `app/config/initializers/modal.rb`. The default is `:tailwind`.
+
+```ruby
+UltimateTurboModal.flavor = :tailwind # or :vanilla
+```
+
+5. Register the Stimulus controller in `app/javascript/controllers/index.js` adding the following lines at the end.
 
 ```js
 import setupUltimateTurboModal from "ultimate_turbo_modal";
 setupUltimateTurboModal(application);
 ```
 
-5. Optionally (but recommended), configure UTMR to use Idiomorph. See below for details.
+6. Optionally (but recommended), configure UTMR to use Idiomorph. See below for details.
 
 &nbsp;
 &nbsp;

data/lib/ultimate_turbo_modal/flavors/vanilla.rb

@@ -0,0 +1,99 @@
+module UltimateTurboModal::Flavors
+  class Vanilla < UltimateTurboModal::Base
+    private
+
+    def modal(&)
+      div_dialog do
+        div_overlay
+        div_outer_container do
+          div_inner_container do
+            div_border do
+              button_close if close_button?
+              yield
+            end
+          end
+        end
+      end
+    end
+
+    def div_dialog(&)
+      div(id: "modal-container",
+        class: "modal-container",
+        role: "dialog",
+        aria: {
+          labeled_by: "modal-title",
+          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-300",
+          transition_enter_start: "opacity-0",
+          transition_enter_end: "opacity-100",
+          transition_leave: "ease-in duration-200",
+          transition_leave_start: "opacity-100",
+          transition_leave_end: "opacity-0"
+        }, &)
+    end
+
+    def div_overlay(&)
+      div(id: "modal-overlay",
+        class: "modal-overlay",
+        data: {
+          modal_target: "overlay",
+          action: "click->modal#outsideModalClicked"
+        })
+    end
+
+    def div_outer_container(&)
+      div(id: "modal-outer",
+        class: "modal-outer",
+        data: {
+          modal_target: "modal"
+        }, &)
+    end
+
+    def div_inner_container(&)
+      div(id: "modal-inner",
+        class: "modal-inner",
+        data: {
+          modal_target: "innerModal"
+        }, &)
+    end
+
+    def div_border(&)
+      klass = "modal-border"
+      klass = "#{klass} modal-padding" if @padding == true
+      klass = "#{klass} #{@padding}" if @padding.is_a?(String)
+      div(id: "modal-border", class: klass, &)
+    end
+
+    def button_close(&)
+      div(class: "modal-close") do
+        button(type: "button",
+          aria: {label: "close"},
+          data: {
+            action: "modal#hideModal"
+          }) { icon_close }
+      end
+    end
+
+    def icon_close
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewbox: "0 0 24 24",
+        stroke_width: "1.5",
+        stroke: "currentColor",
+      ) do |s|
+        s.path(
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          d: "M6 18L18 6M6 6l12 12"
+        )
+      end
+    end
+  end
+end

data/lib/ultimate_turbo_modal/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: ultimate_turbo_modal
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.1.0
 platform: ruby
 authors:
 - Carl Mercier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-31 00:00:00.000000000 Z
+date: 2023-11-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex-rails
@@ -73,7 +73,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 description: An easy-to-use, flexible, and powerful Turbo Modal solution for Rails
-  7+ built with Stimulus.js, Tailwind CSS and Hotwire.
+  7+ built with Stimulus.js, Tailwind CSS (or vanilla CSS) and Hotwire.
 email:
 - foss@carlmercier.com
 executables: []
@@ -93,6 +93,7 @@ files:
 - lib/ultimate_turbo_modal.rb
 - lib/ultimate_turbo_modal/base.rb
 - lib/ultimate_turbo_modal/flavors/tailwind.rb
+- lib/ultimate_turbo_modal/flavors/vanilla.rb
 - lib/ultimate_turbo_modal/helpers/controller_helper.rb
 - lib/ultimate_turbo_modal/helpers/stream_helper.rb
 - lib/ultimate_turbo_modal/helpers/view_helper.rb