rails_toastify 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfc517981d8a050d33fffb5adb0a1b570991332062839d0f68bc28795c2a36b8
-  data.tar.gz: 291c73972c9f7d278676f95f42153bc2fcddf6bfb78ecb007712abf0c71b49b0
+  metadata.gz: 1426b7aba09cf180dfc97ea0ab32f685c9a3b56f9ca86a8f50b1184cae74c38a
+  data.tar.gz: 67aff9d7c8abe089bb54a1b97e1350e4e28a2d97e36ce600e51a3e826f09226b
 SHA512:
-  metadata.gz: 1e04322f2c8a0c85f4436e3de91ebbe782d23e31965b1ad101cd1ab4c64ebfdfd8a41b05e078ad1cf0e2e0ca68867d538344979b13c88d6f3b6907c41f9d178a
-  data.tar.gz: 23a755965aaa27fb5aa8f33683cbbf701919806310074414faa8831167423237ab0659f30936891c9a7ed079bb24c5f49607b3e033050d16d7fd4cd658b97469
+  metadata.gz: 8cb4bf38f4460fdd488f5a068d37ccb8295bcc67f2a6d99ad008a7dcf8a942941266730170d8c2c466a1e48e389f72c8fe236474eab57149c9fac9f1830b3331
+  data.tar.gz: 04bbc058a1c816233907d8c8160b9c25d77acd0cf36470826df636934fdc7cbd8b4406305582246d2447eff946946710887ef9c1e1dbbb9766874a5eadf912c4

data/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 1.1.0
+
+- Add others configurations (position, animation, duration, theme and type)
+- Change CSS to new configurations
+- Change JS to new configurations
+- Add default configurations
+
 ## 1.0.0
 
 - Version stable tested and approved

data/app/assets/javascripts/rails_toastify.js

@@ -1,72 +1,76 @@
-document.addEventListener('DOMContentLoaded', () => {
-  window.RailsToastify = {
-    showToast(message, type = 'info', duration = 5000) {
-      const toastContainer = document.querySelector('.toast-container') || createToastContainer();
-      const toast = createToast(message, type, duration);
-      toastContainer.appendChild(toast);
+const totalDuration = 3000;
+let toastIdCounter = 0;
 
-      let startTime = Date.now();
-      let remainingTime = duration;
+function showToast(message, options) {
+  const toastContainer = document.getElementById('toast-container');
+  
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${options.theme} show ${options.animation}`;
+  toast.id = `toast-${toastIdCounter}`;
 
-      const hideToast = () => {
-        toast.classList.add('hide');
-        toast.addEventListener('transitionend', () => toast.remove());
-      };
+  /* Adicione a respectiva classe para mudar a cor da progress-bar */
+  toast.innerHTML = `
+    <div>${message}</div>
+    <div class="progress-bar progress-bar-${options.type}" id="progress-bar-${toastIdCounter}"></div>
+    <span class="close-icon" onclick="hideToast(${toastIdCounter})"><i class="fas fa-times"></i></span>
+  `;
 
-      let timeoutId = setTimeout(hideToast, remainingTime);
+  toastContainer.appendChild(toast);
+  toastIdCounter++;
 
-      toast.addEventListener('mouseover', () => {
-        clearTimeout(timeoutId);
-        const elapsedTime = Date.now() - startTime;
-        remainingTime -= elapsedTime;
-        toast.querySelector('.toast__progress-bar').style.animationPlayState = 'paused';
-      });
+  const progressBar = toast.querySelector('.progress-bar');
+  progressBar.style.width = '100%';
 
-      toast.addEventListener('mouseout', () => {
-        startTime = Date.now();
-        toast.querySelector('.toast__progress-bar').style.animationPlayState = 'running';
-        timeoutId = setTimeout(hideToast, remainingTime);
-      });
-    }
-  };
+  let remainingTime = options.duration;
+  let lastUpdateTime = Date.now();
+  let paused = false;
+  let intervalId;
 
-  function createToastContainer() {
-    const container = document.createElement('div');
-    container.className = 'toast-container';
-    document.body.appendChild(container);
-    return container;
-  }
+  function updateProgressBar() {
+    if (!paused) {
+      const currentTime = Date.now();
+      const elapsedTime = currentTime - lastUpdateTime;
+      remainingTime -= elapsedTime;
+      lastUpdateTime = currentTime;
 
-  function createToast(message, type, duration) {
-    const toast = document.createElement('div');
-    toast.className = `toast toast--${type}`;
-    toast.classList.add('show');
+      const progress = (remainingTime / totalDuration) * 100;
+      progressBar.style.width = `${progress}%`;
 
-    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`;
+      if (remainingTime <= 0) {
+        clearInterval(intervalId);
+        toast.classList.remove('show');
+        toast.classList.add('hide');
+        setTimeout(() => {
+          toast.parentElement.removeChild(toast);
+        }, 300);
+        return;
+      }
+    }
+  }
 
-    const body = document.createElement('div');
-    body.className = 'toast__body';
-    body.textContent = message;
+  toast.addEventListener('mouseover', () => {
+    paused = true;
+  });
 
-    toast.appendChild(body);
-    toast.appendChild(closeButton);
-    toast.appendChild(progressBar);
+  toast.addEventListener('mouseout', () => {
+    paused = false;
+    lastUpdateTime = Date.now();
+  });
 
-    toast.addEventListener('click', () => {
-      toast.classList.add('hide');
-      toast.addEventListener('transitionend', () => toast.remove());
-    });
+  intervalId = setInterval(updateProgressBar, 100);
+}
 
-    return toast;
+function hideToast(toastId) {
+  const toast = document.getElementById(`toast-${toastId}`);
+  if (toast) {
+    toast.classList.remove('show');
+    toast.classList.add('hide');
+    setTimeout(() => {
+      toast.parentElement.removeChild(toast);
+    }, 300);
   }
-});
+}
+
+window.hideToast = hideToast;
+
+/* showToast('slide'); */

data/app/assets/stylesheets/rails_toastify.css

@@ -1,142 +1,191 @@
-<% if RailsToastify.configuration.framework == :bootstrap %>
-  .toast-container {
-    position: fixed;
-    z-index: 9999;
-    pointer-events: none;
-    top: 20px;
-    right: 20px;
-  }
-
-  .toast {
-    display: flex;
-    align-items: center;
-    background-color: #fff;
-    border-radius: 4px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
-    padding: 16px;
-    margin: 8px;
-    color: #333;
-    position: relative;
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    transform: translateX(100%);
-    max-width: 300px;
-    pointer-events: auto;
-  }
-
-  .toast.show {
-    transform: translateX(0);
-  }
-
-  .toast.hide {
-    transform: translateX(100%);
+.toast-container {
+  position: fixed;
+  /**POSITION**/
+  top: 20px;
+  right: 20px;
+  /************/
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.toast {
+  /**THEME**/
+  /*  background e color serão adicionados através da classe escolhida colocando a respectiva toast-light ou toast-dark no javascript */
+  background-color: #fff;
+  color: #333;
+  /************/
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+  position: relative;
+}
+
+.toast.show {
+  opacity: 1;
+}
+
+.close-icon {
+  margin-left: 10px;
+  cursor: pointer;
+}
+
+.progress-bar {
+  height: 5px;
+  width: 100%;
+  /**TYPE**/
+  /*  background será adicionado através da classe escolhida colocando a respectiva progress bar no javascript */
+  /* background: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55); */
+  /************/
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transition: width 0.1s linear;
+}
+
+/* THEME */
+.toast-light {
+  background-color: #fff;
+  color: #333;
+}
+.toast-dark {
+  background-color: #333;
+  color: #fff;
+}
+
+/* TYPE */
+.progress-bar-success {
+  background-color: #4caf50;
+}
+.progress-bar-info {
+  background-color: #2196f3;
+}
+.progress-bar-error {
+  background-color: #f44336;
+}
+.progress-bar-warning {
+  background-color: #ff9800;
+}
+.progress-bar-default {
+  background: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
+}
+
+/* POSITION */
+.toast-container-top-left {
+  top: 20px;
+  left: 20px;
+}
+.toast-container-top-right {
+  top: 20px;
+  right: 20px;
+}
+.toast-container-bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+.toast-container-bottom-right {
+  bottom: 20px;
+  right: 20px;  
+}
+
+/* ANIMATION */
+/* BOUNCE */
+/* @keyframes bounce-in {
+  0% {
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.toast.bounce {
+  animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+} */
+
+@keyframes bounce-all {
+  from,
+  60%,
+  75%,
+  90%,
+  to {
+  }
+  from {
     opacity: 0;
+    transform: translate3d(500px, 0, 0);
   }
-
-  .toast--success .toast__progress-bar {
-    background-color: #4caf50;
-  }
-
-  .toast--error .toast__progress-bar {
-    background-color: #f44336;
-  }
-
-  .toast--info .toast__progress-bar {
-    background-color: #2196f3;
-  }
-
-  .toast--warning .toast__progress-bar {
-    background-color: #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 {
+  60% {
     opacity: 1;
+    transform: translate3d(-25px, 0, 0);
   }
-
-  .toast__progress-bar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    animation: progress-bar 5s linear forwards;
-    animation-play-state: running;
-  }
-
-  @keyframes progress-bar {
-    from {
-      width: 100%;
-    }
-    to {
-      width: 0;
-    }
+  75% {
+    transform: translate3d(10px, 0, 0);
   }
-<% elsif RailsToastify.configuration.framework == :tailwind %>
-  .toast-container {
-    @apply fixed z-50 pointer-events-none top-4 right-4;
+  90% {
+    transform: translate3d(-5px, 0, 0);
   }
-
-  .toast {
-    @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%);
+  to {
+    transform: none;
   }
+}
 
-  .toast.show {
-    transform: translateX(0);
-  }
+.toast.bounce {
+  animation: bounce-all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
 
-  .toast.hide {
+/* SLIDE */
+@keyframes slide-in {
+  0% {
     transform: translateX(100%);
     opacity: 0;
   }
-
-  .toast--success .toast__progress-bar {
-    @apply bg-green-500;
+  100% {
+    transform: translateX(0);
+    opacity: 1;
   }
+}
 
-  .toast--error .toast__progress-bar {
-    @apply bg-red-500;
-  }
+.toast.slide {
+  animation: slide-in 0.2s ease-out;
+}
 
-  .toast--info .toast__progress-bar {
-    @apply bg-blue-500;
+/* ZOOM */
+@keyframes zoom-in {
+  0% {
+    transform: scale(0);
+    opacity: 0;
   }
-
-  .toast--warning .toast__progress-bar {
-    @apply bg-yellow-500;
+  100% {
+    transform: scale(1);
+    opacity: 1;
   }
+}
 
-  .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.zoom {
+  animation: zoom-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
 
-  .toast__progress-bar {
-    @apply absolute bottom-0 left-0 w-full h-1;
-    animation: progress-bar 5s linear forwards;
-    animation-play-state: running;
+/* FLIP */
+@keyframes flip-in {
+  0% {
+    transform: rotateY(-90deg);
+    opacity: 0;
   }
-
-  @keyframes progress-bar {
-    from {
-      width: 100%;
-    }
-    to {
-      width: 0;
-    }
+  100% {
+    transform: rotateY(0);
+    opacity: 1;
   }
-<% end %>
+}
+
+.toast.flip {
+  animation: flip-in 0.5s ease-in-out;
+}

data/app/helpers/rails_toastify_helper.rb

@@ -0,0 +1,21 @@
+module RailsToastifyHelper
+  def rails_toastify_container
+    content_tag :div, '', id: 'toast-container', class: "toast-container #{RailsToastify.configuration.position}"
+  end
+
+  def rails_toastify_script
+    javascript_tag do
+      <<-JS.html_safe
+        document.addEventListener('DOMContentLoaded', function() {
+          window.RailsToastify = {
+            show: function(message, options) {
+              var config = #{RailsToastify.configuration.to_json};
+              options = options || {};
+              showToast(message, Object.assign({}, config, options));
+            }
+          };
+        });
+      JS
+    end
+  end
+end

data/lib/generators/rails_toastify/install/templates/rails_toastify.rb

@@ -1,3 +1,7 @@
-RailsToastify.setup do |config|
-  config.framework = :tailwind #or :bootstrap
+RailsToastify.setup do |configuration|
+  configuration.position = 'toast-container-bottom-right'
+  configuration.animation = 'zoom'
+  configuration.duration = 5000
+  configuration.theme = 'dark'
+  configuration.type = 'success'
 end

data/lib/rails_toastify/engine.rb

@@ -1,7 +1,15 @@
 module RailsToastify
   class Engine < ::Rails::Engine
+    isolate_namespace RailsToastify
+
     initializer 'rails_toastify.assets.precompile' do |app|
       app.config.assets.precompile += %w(rails_toastify.js rails_toastify.css)
     end
+
+    initializer 'rails_toastify.helpers' do
+      ActiveSupport.on_load(:action_view) do
+        include RailsToastifyHelper
+      end
+    end
   end
 end

data/lib/rails_toastify/version.rb

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

data/lib/rails_toastify.rb

@@ -14,10 +14,24 @@ module RailsToastify
   end
 
   class Configuration
-    attr_accessor :framework
+    attr_accessor :position, :animation, :duration, :theme, :type
 
     def initialize
-      @framework = :tailwind
+      @position = 'toast-container-bottom-right'
+      @animation = 'bounce'
+      @duration = 5000
+      @theme = 'light'
+      @type = 'default'
+    end
+
+    def to_json
+      {
+        position: @position,
+        animation: @animation,
+        duration: @duration,
+        theme: @theme,
+        type: @type
+      }.to_json
     end
   end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_toastify
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Elton Santos
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2024-07-03 00:00:00.000000000 Z
+date: 2024-10-18 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"
@@ -24,6 +24,7 @@ files:
 - Rakefile
 - app/assets/javascripts/rails_toastify.js
 - app/assets/stylesheets/rails_toastify.css
+- app/helpers/rails_toastify_helper.rb
 - lib/generators/rails_toastify/install/install_generator.rb
 - lib/generators/rails_toastify/install/templates/rails_toastify.rb
 - lib/rails_toastify.rb