rails_toastify 0.1.6 → 0.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c9016ace17fcc8e2c9752befff1bb4dbe57a9759016fcaf4645fad02f747da2
-  data.tar.gz: d53c5284e34737ba275d1a2938dd281fdfa49157b75820565070fbdbf4c63bf7
+  metadata.gz: 041d336902b6df731f5af562e2277cd7a3553e8a3f1993e6c3b9616b1c356605
+  data.tar.gz: 21e63fa2d7676cb312449e2b9d56eefb5129ecbdff0e04b30b53dd6b9a3658fe
 SHA512:
-  metadata.gz: a56648ac935a1a150cdf1833b520e6666aed710930b174bb81b3ad030de8a617f1bf553061ecc0f7c3600c9b45309c18b143a8a9ac7fb7bb073eecc792b6dbde
-  data.tar.gz: cc9cbaec8bd2eb43bff831ce1922abd37cd5946e12c8f8d20e0309f191db50866eaaac49fa47954adb65b23a569956717d8821102d02e2103319609a946f561d
+  metadata.gz: 689f7d721c8a252f8fd37bd2dbdbcbcf6c3f5d937a11fb1c54394d124ca80f306d0b0a99a2b9e54a3a7f84a5073b62e8a2df4dc5d0e2e07b2578dd088573dd6d
+  data.tar.gz: 9a3167a81c64d577366013c6f3075773f30ad6d747b7dd0fcf5ec7eee5e5e65afc213da6c6c930c896bfefaaf8131f91be3297c1a3ff329be3c0ddfbc8c68840

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 0.1.7
+
+- Fix problem with toast disappear when mouseover
+- Change README
+
 # 0.1.6
 
 - Fix css and js

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(() => {
+
+      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,26 +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

@@ -20,6 +20,7 @@
     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 {
@@ -86,7 +87,7 @@
   }
 
   .toast {
-    @apply flex items-center bg-white rounded-lg shadow-lg p-4 my-2 text-gray-800 relative max-w-sm;
+    @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%);
   }

data/lib/rails_toastify/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsToastify
-  VERSION = "0.1.6"
+  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.6
+  version: 0.1.7
 platform: ruby
 authors:
 - Elton Santos