faw_toast 1.0.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d9054fe80f547f53c0c5bd6609cac4df141296d3ee4fbd28ba01ec3f74fe49b
-  data.tar.gz: 559b7cb87dbaf08f34bf9b6bc9f6a2088b9b148eec850316967b3448eb9c968f
+  metadata.gz: b381797da514941ee2394cd7bcc634016d1af89942057800a7aab6c7a0c02435
+  data.tar.gz: 8d6e392357aea77ba878035fd476efc8f2d0f0db944abeccecc13e7dd2e738a4
 SHA512:
-  metadata.gz: d0a8f13a9addd28afbf43dcb1c689d7a2ef418a9fce531e34bb7177afaad2289eb75b8c591894edb516ea1edbb9d1fec52518912fcb9de13b388597f1165e44c
-  data.tar.gz: ad1c7c85ddfdd1364ba1ded85c704c6427c7198cc0d797b760cd877c929f14dd0a9a36fc837747d010cffb37200dbb864d706c259230fc74865218c558e50a32
+  metadata.gz: 2ad38aa056e63c5c9cc82f13f8958c68cc3afe233793589d324f833124427fb21843ee486d987c72ce9675fc0661c3342b8600123ab3d49d90942b253bc3c9a3
+  data.tar.gz: 340e8bd832e3b8280c2137be0be7def84f918e825e4476e9e3ed4e854a4d735e8c7b62e4e37835ab257fee1c4de388cd2f1c9de030c6474e4a3fd995d05af31c

data/README.md

@@ -1,7 +1,8 @@
 # FawToast
-
 A simple, configurable toast notification system for Rails applications. FawToast provides an easy way to display flash messages as toast notifications with minimal setup.
 
+[![Gem Version](https://badge.fury.io/rb/faw_toast.svg)](https://badge.fury.io/rb/faw_toast)
+
 ## Features
 
 - Easy integration with Rails 7+ applications
@@ -40,11 +41,23 @@ rails generate faw_toast:install
 This will:
 1. Create a configuration initializer at `config/initializers/faw_toast.rb`
 2. Add the toast container to your application layout
-3. Import the required stylesheet and JavaScript controller
+
+Include the css and javascript files in your `application.html.erb` layout file.
+
+For `propshaft`
+```erb
+  <%= stylesheet_link_tag "faw_toast", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "faw_toast", "data-turbo-track": "reload", type: "module" %>
+```
+and if you are using `sprockets` include the following lines in your `config/manifest.js`
+```javascript
+//= link faw_toast.js
+//= link faw_toast.css
+```
 
 ## Usage
 
-FawToast works with Rails flash messages. You can use it like this:
+FawToast works with Rails flash messages. You can use it like this
 
 ```ruby
 # In your controller
@@ -55,6 +68,18 @@ def create
 end
 ```
 
+```ruby
+# In your background job or service object
+flash = {}
+flash[type] = message
+Turbo::StreamsChannel.broadcast_append_to(
+  channel,
+  target: "faw-toast-container",
+  partial: "faw_toast/toast",
+  locals: { flash: flash }
+)
+```
+
 FawToast supports the following flash types out of the box:
 - `:success` - Green border
 - `:alert` - Red border
@@ -94,7 +119,7 @@ FawToast uses CSS animations to show and hide toast notifications automatically.
 2. The flash message content
 3. A progress bar that indicates how much time is left before the toast disappears
 
-The toast appears with a slide-in animation, stays visible for the configured duration, and then slides out automatically. No JavaScript interaction is required for the basic functionality.
+The toast appears with a slide-in animation, stays visible for the configured duration, and then slides out automatically
 
 ## Development
 

data/app/{javascript → assets/javascripts}/faw_toast.js

@@ -1,12 +1,10 @@
-// Self-initializing toast handler
-document.addEventListener('DOMContentLoaded', function() {
-  console.log('DOMContentLoaded');
-  // Function to handle toast animations
+document.addEventListener('DOMContentLoaded', faw_init);
+document.addEventListener('turbo:load', faw_init);
+
+function faw_init() {
   function setupToastListeners() {
-    // Find all toast elements
     const toasts = document.querySelectorAll('.faw-toast');
 
-    // Add animation end listeners to each toast
     toasts.forEach(function(toast) {
       toast.addEventListener('animationend', function(event) {
         // Only remove the toast when the slideOut animation completes
@@ -17,10 +15,8 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   }
 
-  // Initial setup
   setupToastListeners();
 
-  // Also handle dynamically added toasts (for turbo/ajax)
   const observer = new MutationObserver(function(mutations) {
     mutations.forEach(function(mutation) {
       if (mutation.addedNodes.length) {
@@ -29,9 +25,8 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
 
-  // Start observing the document for added nodes
   observer.observe(document.body, {
     childList: true,
     subtree: true
   });
-});
+}

data/app/assets/stylesheets/faw_toast.css

@@ -0,0 +1,88 @@
+.faw-toast-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; }
+  .faw-toast-container.faw-toast-top-right {
+    top: 1rem;
+    right: 1rem; }
+  .faw-toast-container.faw-toast-top-left {
+    top: 1rem;
+    left: 1rem; }
+  .faw-toast-container.faw-toast-bottom-right {
+    bottom: 1rem;
+    right: 1rem; }
+  .faw-toast-container.faw-toast-bottom-left {
+    bottom: 1rem;
+    left: 1rem; }
+  .faw-toast-container.faw-toast-top-center {
+    top: 1rem;
+    left: 50%;
+    transform: translateX(-50%); }
+  .faw-toast-container.faw-toast-bottom-center {
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%); }
+
+.faw-toast {
+  margin-bottom: 10px;
+  padding: 1rem;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  position: relative;
+  overflow: hidden;
+  animation: faw-toast-slideIn 0.3s ease-in-out, faw-toast-slideOut 0.3s ease-in-out var(--faw-toast-duration) forwards;
+  max-width: 24rem;
+  width: 100%;
+  pointer-events: auto;
+  background-color: white; }
+  .faw-toast.faw-toast-border-l-10 {
+    border-left-width: 10px;
+    border-left-style: solid; }
+  .faw-toast.faw-toast-border-green-500 {
+    border-left-color: #10b981; }
+  .faw-toast.faw-toast-border-red-500 {
+    border-left-color: #ef4444; }
+  .faw-toast.faw-toast-border-sky-600 {
+    border-left-color: #0284c7; }
+  .faw-toast.faw-toast-border-indigo-500 {
+    border-left-color: #6366f1; }
+  .faw-toast .faw-toast-content {
+    flex: 1; }
+  .faw-toast .faw-toast-close {
+    cursor: pointer;
+    color: #6b7280; }
+    .faw-toast .faw-toast-close:hover {
+      color: #111827; }
+  .faw-toast .faw-toast-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background-color: rgba(0, 0, 0, 0.2);
+    width: 100%;
+    animation: faw-toast-progress var(--faw-toast-duration) linear; }
+
+@keyframes faw-toast-slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0; }
+  to {
+    transform: translateX(0);
+    opacity: 1; } }
+@keyframes faw-toast-slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1; }
+  to {
+    transform: translateX(100%);
+    opacity: 0; } }
+@keyframes faw-toast-progress {
+  from {
+    width: 100%; }
+  to {
+    width: 0; } }
+
+/*# sourceMappingURL=faw_toast.css.map */

data/app/assets/stylesheets/faw_toast.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAA,oBAAqB;EACnB,QAAQ,EAAE,KAAK;EACf,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,IAAI;EACpB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,GAAG,EAAE,MAAM;EAEX,wCAAsB;IACpB,GAAG,EAAE,IAAI;IACT,KAAK,EAAE,IAAI;EAGb,uCAAqB;IACnB,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;EAGZ,2CAAyB;IACvB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;EAGb,0CAAwB;IACtB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,IAAI;EAGZ,yCAAuB;IACrB,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,gBAAgB;EAG7B,4CAA0B;IACxB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,gBAAgB;;AAI/B,UAAW;EACT,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,4BAAyB;EACrC,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;EAChB,SAAS,EAAE,0GAA0G;EACrH,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,IAAI;EACX,cAAc,EAAE,IAAI;EACpB,gBAAgB,EAAE,KAAK;EAEvB,gCAAwB;IACtB,iBAAiB,EAAE,IAAI;IACvB,iBAAiB,EAAE,KAAK;EAG1B,qCAA6B;IAC3B,iBAAiB,EAAE,OAAO;EAG5B,mCAA2B;IACzB,iBAAiB,EAAE,OAAO;EAG5B,mCAA2B;IACzB,iBAAiB,EAAE,OAAO;EAG5B,sCAA8B;IAC5B,iBAAiB,EAAE,OAAO;EAG5B,6BAAmB;IACjB,IAAI,EAAE,CAAC;EAGT,2BAAiB;IACf,MAAM,EAAE,OAAO;IACf,KAAK,EAAE,OAAO;IAEd,iCAAQ;MACN,KAAK,EAAE,OAAO;EAIlB,8BAAoB;IAClB,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,GAAG;IACX,gBAAgB,EAAE,kBAAkB;IACpC,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,mDAAmD;;AAIlE,4BASC;EARC,IAAK;IACH,SAAS,EAAE,gBAAgB;IAC3B,OAAO,EAAE,CAAC;EAEZ,EAAG;IACD,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;AAId,6BASC;EARC,IAAK;IACH,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,CAAC;EAEZ,EAAG;IACD,SAAS,EAAE,gBAAgB;IAC3B,OAAO,EAAE,CAAC;AAId,6BAOC;EANC,IAAK;IACH,KAAK,EAAE,IAAI;EAEb,EAAG;IACD,KAAK,EAAE,CAAC",
+"sources": ["faw_toast.scss"],
+"names": [],
+"file": "faw_toast.css"
+}

data/lib/faw_toast/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module FawToast
-  VERSION = "1.0.0"
+  VERSION = "1.2.0"
 end

data/lib/generators/faw_toast/install/install_generator.rb

@@ -37,44 +37,6 @@ module FawToast
           say "Please manually import the FawToast stylesheet in your application", :red
         end
       end
-
-      def add_javascript_import
-        if File.exist?("app/javascript/application.js")
-          append_to_file "app/javascript/application.js" do
-            "import \"faw_toast\"\n"
-          end
-        elsif File.exist?("app/assets/javascripts/application.js")
-          append_to_file "app/assets/javascripts/application.js" do
-            "//= require faw_toast\n"
-          end
-        else
-          say "Please manually import the FawToast JavaScript in your application", :red
-        end
-      end
-
-      def update_tsconfig
-        gem_path = `bundle show faw_toast`.chomp
-
-        # Default tsconfig structure if file doesn't exist
-        tsconfig = if File.exist?("tsconfig.json")
-          JSON.parse(File.read("tsconfig.json"))
-        else
-          {
-            "compilerOptions" => {
-              "baseUrl" => ".",
-              "paths" => {}
-            }
-          }
-        end
-
-        tsconfig["compilerOptions"] ||= {}
-        tsconfig["compilerOptions"]["paths"] ||= {}
-        tsconfig["compilerOptions"]["paths"]["faw_toast"] = ["#{gem_path}/app/javascript/faw_toast.js"]
-
-        File.write("tsconfig.json", JSON.pretty_generate(tsconfig))
-
-        say "Updated tsconfig.json with FawToast paths", :green
-      end
     end
   end
 end

metadata

@@ -1,12 +1,12 @@
 --- !ruby/object:Gem::Specification
 name: faw_toast
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.2.0
 platform: ruby
 authors:
 - alexwebgr
 autorequire:
-bindir: exe
+bindir: bin
 cert_chain: []
 date: 2025-04-26 00:00:00.000000000 Z
 dependencies:
@@ -14,16 +14,22 @@ dependencies:
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '7.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '7.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '9.0'
 description: FawToast provides an easy way to display flash messages as toast notifications
   in Rails applications
 email:
@@ -35,8 +41,10 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/assets/javascripts/faw_toast.js
+- app/assets/stylesheets/faw_toast.css
+- app/assets/stylesheets/faw_toast.css.map
 - app/assets/stylesheets/faw_toast.scss
-- app/javascript/faw_toast.js
 - app/views/faw_toast/_toast.html.erb
 - lib/faw_toast.rb
 - lib/faw_toast/configuration.rb