ultimate_turbo_modal 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 896c6379f97064006b57fbb612cab3c16560af307d2271da0c488785dfc366db
-  data.tar.gz: aa78d481f27597261e57ca07c0b80f0fc681529e63d92df803347a18c4c1b9da
+  metadata.gz: acd3d63c952dd65a1f01d7cba82e4f3d9a86f0ab0873db34a69d9c39f4163798
+  data.tar.gz: dc7cb74c01338495576c5e69dbb583f39119b5a90832338ed4b8ccfb1eac123c
 SHA512:
-  metadata.gz: 260a1fddf247e51ed411f0ae83d85faa2d581f18c8ef71664129b11ad1e7480c6be9da04f7e86321999c0ad9098643a23cb83480b39f79f847ee59939a47098f
-  data.tar.gz: 102593d43c1b8a94ca85787d53a2f8a8064fd3d17fdec96e382c2f6795baffa599d8478fcd759c85b23d694f091e643e76e6516d1fa8c1d3911487e43f0738f8
+  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.
 
 
  
@@ -51,7 +51,7 @@ A demo application can be found at https://github.com/cmer/ultimate_turbo_modal-
 
     - or -
 
-    $ bin/rails importmaps pin ultimate_turbo_modal
+    $ bin/importmap pin ultimate_turbo_modal
 
 3. Add the following as the first element in the `body` tag of `views/layouts/application.html.erb`:
 
@@ -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;
@@ -110,35 +116,42 @@ Adds padding inside the modal.
 
 Shows or hide a close button (X) at the top right of the modal.
 
-### `advance_history`, default: `true`
+### `advance`, default: `true`
 
 When opening the modal, the URL in the URL bar will change to the URL of the view being shown in the modal. The Back button dismisses the modal and navigates back.
 
-### `advance_history_url`, default: `nil`
-
-Override for the URL being shown in the URL bar when `advance_history` is enabled. Default is the actual URL.
+If a URL is specified as a String, the browser history will advance, and the URL shown in the URL bad will be replaced by the URL specified.
 
 
 ### Example usage with options
 
 ```erb
-<%= modal(padding: true, close_button: false, advance_history_url: "/foo/bar") do %>
+<%= modal(padding: true, close_button: false, advance: false) do %>
+  Hello World!
+<% end %>
+```
+
+```erb
+<%= modal(padding: true, close_button: false, advance: "/foo/bar") do %>
   Hello World!
 <% end %>
 ```
 
 ## Installing & Configuring Idiomorph
 
-// Morph Turbo Frame rendering to allow navigation within Turbo Frames
-// without having to teardown the entire frame. This is needed to prevent
-// the leaving and entering animations from repeating when navigating
-// within the modal. You could optionally not use the code below if you
-// do not intend to allow navigation within the modal.
-//
-// Note that Turbo 8 will include Idiomorph by default.
-//
-// In the meantime, add `<script src="https://unpkg.com/idiomorph"></script>`
-// to your HTML <head>.
+Idiomorph can morph Turbo Frame responses to allow seemless navigation within Turbo Frames
+without having to hide and reopen the modal. This is needed to prevent
+the fade out / fade in animations from repeating when navigating within the modal.
+
+You could optionally not use the code below if you do not intend to allow navigation within the modal.
+
+Note that Turbo 8 will include Idiomorph by default.
+
+In the meantime, add `<script src="https://unpkg.com/idiomorph"></script>` to your HTML <head>.
+
+And the following code to `application.js`:
+
+```js
 addEventListener("turbo:before-frame-render", (event) => {
   event.detail.render = (currentElement, newElement) => {
     Idiomorph.morph(currentElement, newElement, {
@@ -146,6 +159,7 @@ addEventListener("turbo:before-frame-render", (event) => {
     })
   }
 })
+```
 
 
 &nbsp;

data/lib/ultimate_turbo_modal/base.rb

@@ -9,14 +9,14 @@ class UltimateTurboModal::Base < Phlex::HTML
 
   # @param padding [Boolean] Whether to add padding around the modal content
   # @param close_button [Boolean] Whether to show a close button.
-  # @param advance_history [Boolean] Whether to update the browser history when opening and closing the modal
-  # @param advance_history_url [String] Override the URL to use when advancing the history
+  # @param advance [Boolean] Whether to update the browser history when opening and closing the modal
+  # @param advance_url [String] Override the URL to use when advancing the history
   # @param request [ActionDispatch::Request] The current Rails request object
-  def initialize(padding: true, close_button: true, advance_history: true, advance_history_url: nil, request: nil)
+  def initialize(padding: true, close_button: true, advance: true, request: nil)
     @padding = padding
     @close_button = close_button
-    @advance_history = advance_history
-    @advance_history_url = advance_history_url
+    @advance = advance
+    @advance_url = advance if advance && advance.is_a?(String)
     @request = request
 
     self.class.include Turbo::FramesHelper
@@ -46,8 +46,8 @@ class UltimateTurboModal::Base < Phlex::HTML
     !!@padding
   end
 
-  def advance_history?
-    !!@advance_history
+  def advance?
+    !!@advance
   end
 
   def close_button?
@@ -66,9 +66,9 @@ class UltimateTurboModal::Base < Phlex::HTML
     turbo_stream? || turbo_frame?
   end
 
-  def advance_history_url
-    return nil unless advance_history?
-    @advance_history_url || request.original_url
+  def advance_url
+    return nil unless advance?
+    @advance_url || request.original_url
   end
 
   def method_missing(method, *, &block)

data/lib/ultimate_turbo_modal/flavors/tailwind.rb

@@ -27,7 +27,7 @@ module UltimateTurboModal::Flavors
         data: {
           controller: "modal",
           modal_target: "container",
-          modal_advance_history_url_value: advance_history_url,
+          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",

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.0"
+  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.0
+  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