rails_toastify 0.1.5 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dbe4093e4b00ca6aed884608e36832d9b4739c4101147ed6fb4f09725132c7d8
-  data.tar.gz: bdeae6a73e70c205c253d6e428425e18d130df7b0368708a6430225a9e053ea1
+  metadata.gz: 041d336902b6df731f5af562e2277cd7a3553e8a3f1993e6c3b9616b1c356605
+  data.tar.gz: 21e63fa2d7676cb312449e2b9d56eefb5129ecbdff0e04b30b53dd6b9a3658fe
 SHA512:
-  metadata.gz: 65d7805c01a912990470de84c7de94abcfb62d0c62fcaa1cb10669dfff05f84c24f014b69657aa497f95d5eca406cc8f73cdf4ab3f8f9dd9872e8d7e68aac78e
-  data.tar.gz: a16b9a1874d6cb99b7b6cce8caa1bd0d57b77856a5e55ead272184bdfd82397318a5b1852eb05575cd22afbf5a5db7e6dcbacbb71c2304eeb107d39756927ba9
+  metadata.gz: 689f7d721c8a252f8fd37bd2dbdbcbcf6c3f5d937a11fb1c54394d124ca80f306d0b0a99a2b9e54a3a7f84a5073b62e8a2df4dc5d0e2e07b2578dd088573dd6d
+  data.tar.gz: 9a3167a81c64d577366013c6f3075773f30ad6d747b7dd0fcf5ec7eee5e5e65afc213da6c6c930c896bfefaaf8131f91be3297c1a3ff329be3c0ddfbc8c68840

data/CHANGELOG.md

@@ -1,4 +1,15 @@
-# 0.1.4
+# 0.1.7
+
+- Fix problem with toast disappear when mouseover
+- Change README
+
+# 0.1.6
+
+- Fix css and js
+- Close toast on progress bar finish
+- Toast appear on top right
+  
+# 0.1.5
 
 - Adjustments CSS progress bar and shadow
   

data/README.md

@@ -56,6 +56,14 @@ RailsToastify.showToast('This is an info message!', 'info');
 RailsToastify.showToast('This is a warning message!', 'warning');
 ```
 
+To see notice in a toast add:
+
+```ruby 
+<%= javascript_tag do %>
+  RailsToastify.showToast('<%= notice %>', 'success')
+<% end %>
+```
+
 ## Requirements
 
 - Ruby >= 2.6.0 (recommended 2.7+)  

data/app/assets/javascripts/rails_toastify.js

@@ -4,10 +4,24 @@ document.addEventListener('DOMContentLoaded', () => {
       const toastContainer = document.querySelector('.toast-container') || createToastContainer();
       const toast = createToast(message, type, duration);
       toastContainer.appendChild(toast);
-      setTimeout(() => {
-        toast.classList.add('fade-out');
+
+      let timeoutId = setTimeout(() => {
+        toast.classList.add('hide');
         toast.addEventListener('transitionend', () => toast.remove());
       }, duration);
+
+      toast.addEventListener('mouseover', () => {
+        clearTimeout(timeoutId);
+        progressBar.style.animationPlayState = 'paused';
+      });
+
+      toast.addEventListener('mouseout', () => {
+        progressBar.style.animationPlayState = 'running';
+        timeoutId = setTimeout(() => {
+          toast.classList.add('hide');
+          toast.addEventListener('transitionend', () => toast.remove());
+        }, duration - progressBar.getBoundingClientRect().width * (duration / progressBar.offsetWidth));
+      });
     }
   };
 
@@ -22,7 +36,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const toast = document.createElement('div');
     toast.className = `toast toast--${type}`;
     toast.classList.add('show');
-  
+
     const closeButton = document.createElement('button');
     closeButton.className = 'toast__close-button';
     closeButton.innerHTML = '<svg aria-hidden="true" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"></path></svg>';
@@ -30,27 +44,24 @@ document.addEventListener('DOMContentLoaded', () => {
       toast.classList.add('hide');
       toast.addEventListener('transitionend', () => toast.remove());
     });
-  
+
     const progressBar = document.createElement('div');
     progressBar.className = `toast__progress-bar toast__progress-bar--${type}`;
     progressBar.style.animationDuration = `${duration}ms`;
-  
+
     const body = document.createElement('div');
     body.className = 'toast__body';
     body.textContent = message;
-  
+
     toast.appendChild(body);
     toast.appendChild(closeButton);
     toast.appendChild(progressBar);
-  
+
     toast.addEventListener('click', () => {
       toast.classList.add('hide');
       toast.addEventListener('transitionend', () => toast.remove());
     });
-    toast.addEventListener('mouseover', () => progressBar.style.animationPlayState = 'paused');
-    toast.addEventListener('mouseout', () => progressBar.style.animationPlayState = 'running');
-  
+
     return toast;
   }
-  
 });

data/app/assets/stylesheets/rails_toastify.css

@@ -17,9 +17,10 @@
     margin: 8px;
     color: #333;
     position: relative;
-    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     transform: translateX(100%);
     max-width: 300px;
+    pointer-events: auto; /* Para permitir interações do mouse */
   }
 
   .toast.show {
@@ -28,6 +29,7 @@
 
   .toast.hide {
     transform: translateX(100%);
+    opacity: 0;
   }
 
   .toast--success .toast__progress-bar {
@@ -85,8 +87,8 @@
   }
 
   .toast {
-    @apply flex items-center bg-white rounded-lg shadow-lg p-4 my-2 text-gray-800 relative max-w-sm;
-    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+    @apply flex items-center bg-white rounded-lg shadow-lg p-4 my-2 text-gray-800 relative max-w-sm pointer-events-auto;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     transform: translateX(100%);
   }
   
@@ -96,6 +98,7 @@
   
   .toast.hide {
     transform: translateX(100%);
+    opacity: 0;
   }
 
   .toast--success .toast__progress-bar {

data/lib/rails_toastify/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsToastify
-  VERSION = "0.1.5"
+  VERSION = "0.1.7"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_toastify
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.1.7
 platform: ruby
 authors:
 - Elton Santos