rails_toastify 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4c911f3af15f4890c1444105b9f61e171df86f803c36b673664876fd1b5df78
-  data.tar.gz: 925b7c0a30747f92a1e9f2bf7d1ee306a000a445e7d35722c35b35dcb79bd87a
+  metadata.gz: ad106eeec4a5dc91967781e1012327953d768abee3af5d5868c72fc8c29706be
+  data.tar.gz: afa96d9999758b8c2820073ad06474afabaed7d6403b895d0e7f1284df9b3743
 SHA512:
-  metadata.gz: 928bab3cac6f526bb1b5261a5fbedb31e33412e335344e60a377c6500c17c14496af4fbe85fb8fa4c8ce7856f29678bf386d38689a431a1cff318872dab7b11b
-  data.tar.gz: 4af1c98f67a8b37f05089c8d11060398a7a0046dcfd8c6d5d9361e93eff8a2a6c28eef410eb24247eda7f105c3683501bfc9bb63931c38c8f6ccd724c87313bf
+  metadata.gz: 950fe77e61917edbb1283a7330d76f45fd9a7b952f17eb99548e04080e1c09a5df9c2979ec98afbc71abfec67973b4e1e2009070bbf9139338315f24e597e8a4
+  data.tar.gz: 746f2e26fe44d665ed3f47adabb9e7105aca988b35841621be478619d784308b096ebd5b9009c9bec29f841cb769d317f6cde42635f59d5bf0dd5702f8f0742c

data/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 0.1.4
+
+- Change CSS
+- Change JS
+
 ## 0.1.3
 
 - Change README

data/app/assets/javascripts/rails_toastify.js

@@ -1,8 +1,8 @@
 document.addEventListener('DOMContentLoaded', () => {
   window.RailsToastify = {
-    showToast(message, type = 'info', duration = 3000) {
+    showToast(message, type = 'info', duration = 5000) {
       const toastContainer = document.querySelector('.toast-container') || createToastContainer();
-      const toast = createToast(message, type);
+      const toast = createToast(message, type, duration);
       toastContainer.appendChild(toast);
       setTimeout(() => {
         toast.classList.add('fade-out');
@@ -18,10 +18,39 @@ document.addEventListener('DOMContentLoaded', () => {
     return container;
   }
 
-  function createToast(message, type) {
+  function createToast(message, type, duration) {
     const toast = document.createElement('div');
     toast.className = `toast toast--${type}`;
-    toast.textContent = message;
+    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>';
+    closeButton.addEventListener('click', () => {
+      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

@@ -16,22 +16,68 @@
     padding: 16px;
     margin: 8px;
     color: #333;
+    position: relative;
+    transition: transform 0.5s ease-in-out;
+    transform: translateX(100%);
+  }
+
+  .toast.show {
+    transform: translateX(0);
+  }
+
+  .toast.hide {
+    transform: translateX(100%);
   }
 
   .toast--success {
-    border-left: 5px solid #4caf50;
+    border-bottom: 5px solid #4caf50;
   }
 
   .toast--error {
-    border-left: 5px solid #f44336;
+    border-bottom: 5px solid #f44336;
   }
 
   .toast--info {
-    border-left: 5px solid #2196f3;
+    border-bottom: 5px solid #2196f3;
   }
 
   .toast--warning {
-    border-left: 5px solid #ff9800;
+    border-bottom: 5px solid #ff9800;
+  }
+
+  .toast__close-button {
+    color: #333;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+    align-self: flex-start;
+    margin-left: auto;
+  }
+
+  .toast__close-button:hover {
+    opacity: 1;
+  }
+
+  .toast__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background-color: currentColor;
+    animation: progress-bar 5s linear forwards;
+  }
+
+  @keyframes progress-bar {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0;
+    }
   }
 <% elsif RailsToastify.configuration.framework == :tailwind %>
   .toast-container {
@@ -39,22 +85,57 @@
   }
 
   .toast {
-    @apply flex items-center bg-white rounded shadow p-4 my-2 text-gray-800;
+    @apply flex items-center bg-white rounded shadow p-4 my-2 text-gray-800 relative;
+  }
+
+  .toast {
+    @apply transition-transform duration-500 ease-in-out;
+    transform: translateX(100%);
+  }
+  
+  .toast.show {
+    transform: translateX(0);
+  }
+  
+  .toast.hide {
+    transform: translateX(100%);
   }
 
   .toast--success {
-    @apply border-l-4 border-green-500;
+    @apply border-b-4 border-green-500;
   }
 
   .toast--error {
-    @apply border-l-4 border-red-500;
+    @apply border-b-4 border-red-500;
   }
 
   .toast--info {
-    @apply border-l-4 border-blue-500;
+    @apply border-b-4 border-blue-500;
   }
 
   .toast--warning {
-    @apply border-l-4 border-yellow-500;
+    @apply border-b-4 border-yellow-500;
+  }
+
+  .toast__close-button {
+    @apply text-gray-800 bg-transparent border-none p-0 cursor-pointer opacity-70 transition-opacity duration-300 self-start ml-auto;
+    &:hover {
+      @apply opacity-100;
+    }
+  }
+
+  .toast__progress-bar {
+    @apply absolute bottom-0 left-0 w-full h-1;
+    background-color: currentColor;
+    animation: progress-bar 5s linear forwards;
+  }
+
+  @keyframes progress-bar {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0;
+    }
   }
-<% end %>
+<% end %>

data/lib/rails_toastify/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_toastify
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Elton Santos
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2024-06-25 00:00:00.000000000 Z
+date: 2024-06-27 00:00:00.000000000 Z
 dependencies: []
 description: "\U0001F389 Rails Toastify allows you to add notifications to your app
   with ease. Pay Attention: this gem still is in development. Please CONTRIBUTE"