rails_toastify 0.1.6 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c9016ace17fcc8e2c9752befff1bb4dbe57a9759016fcaf4645fad02f747da2
-  data.tar.gz: d53c5284e34737ba275d1a2938dd281fdfa49157b75820565070fbdbf4c63bf7
+  metadata.gz: c6d828b6b26290af46ef2beb27cbd662e963f2b8b9969e55a782ce34a5a4bf4d
+  data.tar.gz: 768fa851fdcb5d66f8e692346f0d13fa3d99e75bfc69683a6d2f022b09b78139
 SHA512:
-  metadata.gz: a56648ac935a1a150cdf1833b520e6666aed710930b174bb81b3ad030de8a617f1bf553061ecc0f7c3600c9b45309c18b143a8a9ac7fb7bb073eecc792b6dbde
-  data.tar.gz: cc9cbaec8bd2eb43bff831ce1922abd37cd5946e12c8f8d20e0309f191db50866eaaac49fa47954adb65b23a569956717d8821102d02e2103319609a946f561d
+  metadata.gz: 845a520486d658392542d67daf6e70b5b72fb4854c04e05b497f4b2d89f421040bcedf5a08b871c9827745420d2d3ea7e8a1523c09ecf9bf56d429fc04e5ec5a
+  data.tar.gz: '00893d8c3e0237247046bdea15d9a01a418f684037c398a707bac9f91a033012667ccac26620de2cc0123f623681cea0c0e28ae0a3337d3a6e8c1d400fb28107'

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 0.1.8
+
+- Fix progressbar
+
+# 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,29 @@ document.addEventListener('DOMContentLoaded', () => {
       const toastContainer = document.querySelector('.toast-container') || createToastContainer();
       const toast = createToast(message, type, duration);
       toastContainer.appendChild(toast);
-      setTimeout(() => {
+
+      let startTime = Date.now();
+      let remainingTime = duration;
+
+      const hideToast = () => {
         toast.classList.add('hide');
         toast.addEventListener('transitionend', () => toast.remove());
-      }, duration);
+      };
+
+      let timeoutId = setTimeout(hideToast, remainingTime);
+
+      toast.addEventListener('mouseover', () => {
+        clearTimeout(timeoutId);
+        const elapsedTime = Date.now() - startTime;
+        remainingTime -= elapsedTime;
+        toast.querySelector('.toast__progress-bar').style.animationPlayState = 'paused';
+      });
+
+      toast.addEventListener('mouseout', () => {
+        startTime = Date.now();
+        toast.querySelector('.toast__progress-bar').style.animationPlayState = 'running';
+        timeoutId = setTimeout(hideToast, remainingTime);
+      });
     }
   };
 
@@ -22,7 +41,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 +49,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;
   }
 
   .toast.show {
@@ -70,6 +71,7 @@
     width: 100%;
     height: 4px;
     animation: progress-bar 5s linear forwards;
+    animation-play-state: running;
   }
 
   @keyframes progress-bar {
@@ -86,15 +88,15 @@
   }
 
   .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%);
   }
-  
+
   .toast.show {
     transform: translateX(0);
   }
-  
+
   .toast.hide {
     transform: translateX(100%);
     opacity: 0;
@@ -126,6 +128,7 @@
   .toast__progress-bar {
     @apply absolute bottom-0 left-0 w-full h-1;
     animation: progress-bar 5s linear forwards;
+    animation-play-state: running;
   }
 
   @keyframes progress-bar {

data/lib/rails_toastify/version.rb

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