flicker-alerts 1.0.83 → 1.0.84

package/index.js

@@ -1,100 +1,147 @@
+// Função genérica para obter ou criar containers
+function getOrCreateContainer(containerId, style) {
+  let container = document.getElementById(containerId);
+  if (!container) {
+    container = document.createElement('div');
+    container.id = containerId;
+    Object.assign(container.style, style);
+    document.body.appendChild(container);
+  }
+  return container;
+}
+
+// Função para criar ícones de alertas
+function createAlertIcon(type) {
+  const icon = document.createElement('div');
+  icon.className = 'icon';
+  const iconClass = {
+    success: 'fa-check',
+    info: 'fa-info-circle',
+    warning: 'fa-exclamation-triangle',
+    danger: 'fa-times-circle',
+  }[type];
+  icon.innerHTML = `<i class="fas ${iconClass}" style="font-size: 24px;"></i>`;
+  return icon;
+}
+
+// Função para criar conteúdo do alerta
+function createAlertContent(title, message) {
+  const content = document.createElement('div');
+  content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
+  return content;
+}
+
+// Função para criar a barra de progresso
+function createProgressBar(duration) {
+  const progressBar = document.createElement('div');
+  progressBar.className = 'progress-bar';
+  progressBar.style.animationDuration = `${duration}ms`;
+  return progressBar;
+}
+
+// Função para criar o botão de fechamento
+function createCloseButton(alertBox, timeoutId) {
+  const closeButton = document.createElement('div');
+  closeButton.className = 'close';
+  closeButton.innerHTML = '<i class="fas fa-times"></i>';
+  closeButton.addEventListener('click', () => {
+    clearTimeout(timeoutId);
+    removeElementWithAnimation(alertBox);
+  });
+  return closeButton;
+}
+
+// Função genérica para remover elementos com animação
+function removeElementWithAnimation(element) {
+  element.style.transition = 'transform 0.3s ease-in, opacity 0.3s ease-in';
+  element.style.opacity = '0';
+  element.style.transform = 'translateY(-100%)'; 
+  setTimeout(() => element.remove(), 300);
+}
+
+// Objeto FlickerAlerts para exibir os alertas
 const FlickerAlerts = {
   showAlert: function ({ type, title, message, duration = 3000, position = 'top-right' }) {
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-      let container = document.getElementById('alerts-container');
-      if (!container) {
-        container = document.createElement('div');
-        container.id = 'alerts-container';
-        container.style.position = 'fixed';
-        container.style.pointerEvents = 'none';
-        document.body.appendChild(container);
-
-        // Define posição com base no parâmetro
-        const positionStyles = {
-          'top-right': { top: '0', right: '0', flexDirection: 'column' },
-          'top-left': { top: '0', left: '0', flexDirection: 'column' },
-          'bottom-right': { bottom: '0', right: '0', flexDirection: 'column-reverse' },
-          'bottom-left': { bottom: '0', left: '0', flexDirection: 'column-reverse' },
-          'center': { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', flexDirection: 'column' },
-          'top-center': { top: '1rem', left: '50%', transform: 'translateX(-50%)', flexDirection: 'column' },
-          'bottom-center': { bottom: '1rem', left: '50%', transform: 'translateX(-50%)', flexDirection: 'column-reverse' },
-        };
-        Object.assign(container.style, positionStyles[position] || positionStyles['top-right']);
-      }
+      const container = getOrCreateContainer('alerts-container', {
+        position: 'fixed',
+        pointerEvents: 'none',
+        top: position.includes('top') ? '0' : 'auto',
+        bottom: position.includes('bottom') ? '0' : 'auto',
+        left: position.includes('left') ? '0' : 'auto',
+        right: position.includes('right') ? '0' : 'auto',
+        transform: position.includes('center') ? 'translateX(-50%)' : 'none',
+        zIndex: 9999,
+        flexDirection: ['top-right', 'top-left', 'bottom-right', 'bottom-left'].includes(position) ? 'column' : 'column-reverse',
+      });
 
       const alertBox = document.createElement('div');
       alertBox.className = `notification ${type}`;
+      alertBox.style.opacity = '0';
+      alertBox.style.transform = 'translateY(-100%)';
 
       // Ícone
-      const icon = document.createElement('div');
-      icon.className = 'icon';
-      const iconClass = {
-        success: 'fa-check',
-        info: 'fa-info-circle',
-        warning: 'fa-exclamation-triangle',
-        danger: 'fa-times-circle',
-      }[type];
-      icon.innerHTML = `<i class="fas ${iconClass}" style="font-size: 24px;"></i>`;
-      alertBox.appendChild(icon);
+      alertBox.appendChild(createAlertIcon(type));
+
+      // Divider (linha de separação)
       const divider = document.createElement('div');
       divider.className = 'divider';
       alertBox.appendChild(divider);
-      
+
       // Conteúdo
-      const content = document.createElement('div');
-      content.innerHTML = `<div class="title">${title}</div><div class="message">${message}</div>`;
-      alertBox.appendChild(content);
+      alertBox.appendChild(createAlertContent(title, message));
 
       // Barra de progresso
-      const progressBar = document.createElement('div');
-      progressBar.className = 'progress-bar';
-      progressBar.style.animationDuration = `${duration}ms`; // sincroniza com a duração do alerta
-      alertBox.appendChild(progressBar);
+      alertBox.appendChild(createProgressBar(duration));
 
       // Botão de fechamento
-      const closeButton = document.createElement('div');
-      closeButton.className = 'close';
-      closeButton.innerHTML = '<i class="fas fa-times"></i>';
-      closeButton.addEventListener('click', () => {
-        clearTimeout(timeoutId); // limpa o timeout quando fechado manualmente
-        removeAlert();
-      });
+      alertBox.appendChild(createCloseButton(alertBox));
 
-      alertBox.appendChild(closeButton);
-
-      // Adiciona no contêiner
       container.prepend(alertBox);
 
-      // Timeout para remover automaticamente o alerta
-      const timeoutId = setTimeout(() => {
-        removeAlert();
-      }, duration);
+      setTimeout(() => {
+        alertBox.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out';
+        alertBox.style.opacity = '1';
+        alertBox.style.transform = 'translateY(0)';
+      }, 0);
 
-      function removeAlert() {
-        alertBox.style.opacity = '0';
-        setTimeout(() => alertBox.remove(), 300); // atraso para animação de fade-out
-      }
+      const timeoutId = setTimeout(() => removeElementWithAnimation(alertBox), duration);
     }
   },
 };
 
-
-// Botões de teste - Eles podem ser removidos se não forem necessários
+// Botões de teste
 if (typeof document !== 'undefined') {
   document.getElementById('success-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'success', title: 'Sucesso!', message: 'Essa mensagem é personalizável.' });
+    FlickerAlerts.showAlert({
+      type: 'success',
+      title: 'Sucesso!',
+      message: 'Essa mensagem é personalizável.',
+    });
   });
 
   document.getElementById('info-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'info', title: 'Informação!', message: 'Essa mensagem é personalizável.' });
+    FlickerAlerts.showAlert({
+      type: 'info',
+      title: 'Informação!',
+      message: 'Essa mensagem é personalizável.',
+    });
   });
 
   document.getElementById('warning-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'warning', title: 'Alerta!', message: 'Essa mensagem é personalizável.' });
+    FlickerAlerts.showAlert({
+      type: 'warning',
+      title: 'Alerta!',
+      message: 'Essa mensagem é personalizável.',
+    });
   });
 
   document.getElementById('error-btn')?.addEventListener('click', () => {
-    FlickerAlerts.showAlert({ type: 'danger', title: 'Erro!', message: 'Essa mensagem é personalizável.' });
+    FlickerAlerts.showAlert({
+      type: 'danger',
+      title: 'Erro!',
+      message: 'Essa mensagem é personalizável.',
+    });
   });
 }
 
@@ -104,23 +151,25 @@ if (typeof document !== 'undefined') {
 const FlickerModals = {
   showModal: function ({ type, title, message, onConfirm, onCancel, timer = 5000 }) {
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
-      let container = document.getElementById('modals-container');
-      if (!container) {
-        container = document.createElement('div');
-        container.id = 'modals-container';
-        container.style.position = 'fixed';
-        container.style.top = 0;
-        container.style.left = 0;
-        container.style.width = '100vw';
-        container.style.height = '100vh';
-        container.style.pointerEvents = 'none';
-        document.body.appendChild(container);
-      }
+      const container = getOrCreateContainer('modals-container', {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        pointerEvents: 'none',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 9999,
+      });
 
       const modalContainer = document.createElement('div');
       modalContainer.className = 'modal-container';
+      modalContainer.style.opacity = '0';
+      modalContainer.style.transform = 'scale(0.9)';
+      modalContainer.style.transition = 'transform 0.3s ease-out, opacity 0.3s ease-out';
 
-      // Criar a estrutura para o modal
       const modalDialog = document.createElement('div');
       modalDialog.className = 'modal-dialog';
       modalDialog.setAttribute('role', 'document');
@@ -128,7 +177,6 @@ const FlickerModals = {
       const modalContent = document.createElement('div');
       modalContent.className = 'modal-content';
 
-      // Header
       const modalHeader = document.createElement('div');
       modalHeader.className = 'modal-header';
       const closeButton = document.createElement('button');
@@ -137,12 +185,11 @@ const FlickerModals = {
       closeButton.setAttribute('aria-label', 'Close');
       closeButton.innerHTML = `<div><i class="fas fa-times"></i></div>`;
       closeButton.addEventListener('click', () => {
-        removeModal();
+        removeElementWithAnimation(modalContainer);
         if (onCancel) onCancel();
       });
       modalHeader.appendChild(closeButton);
 
-      // Body
       const modalBody = document.createElement('div');
       modalBody.className = 'modal-body';
       const icon = document.createElement('div');
@@ -161,7 +208,6 @@ const FlickerModals = {
       `;
       modalBody.appendChild(bodyContent);
 
-      // Footer
       const modalFooter = document.createElement('div');
       modalFooter.className = 'modal-footer';
 
@@ -170,7 +216,7 @@ const FlickerModals = {
       cancelButton.className = 'btn btn-cancel';
       cancelButton.innerText = 'Não, cancelar';
       cancelButton.addEventListener('click', () => {
-        removeModal();
+        removeElementWithAnimation(modalContainer);
         if (onCancel) onCancel();
       });
       modalFooter.appendChild(cancelButton);
@@ -180,7 +226,7 @@ const FlickerModals = {
       confirmButton.className = type === 'delete' ? 'btn btn-confirm-delete' : 'btn btn-confirm-warning';
       confirmButton.innerText = type === 'delete' ? 'Sim, deletar' : 'Sim, confirmar';
       confirmButton.addEventListener('click', () => {
-        removeModal();
+        removeElementWithAnimation(modalContainer);
         if (onConfirm) onConfirm();
       });
       modalFooter.appendChild(confirmButton);
@@ -192,22 +238,15 @@ const FlickerModals = {
       modalContainer.appendChild(modalDialog);
       container.appendChild(modalContainer);
 
-      // Timeout para remover o modal após o tempo especificado
-      let timeoutId; // Mover a declaração para o início
-      timeoutId = setTimeout(() => {
-        removeModal();
-      }, timer);
-
-      // Função para remover o modal
-      function removeModal() {
-        modalContainer.style.opacity = '0';
-        setTimeout(() => modalContainer.remove(), 300);
-        clearTimeout(timeoutId); // Limpar timeout após remoção
-      }
+      setTimeout(() => {
+        modalContainer.style.opacity = '1';
+        modalContainer.style.transform = 'scale(1)';
+      }, 0);
+
+      const timeoutId = setTimeout(() => removeElementWithAnimation(modalContainer), timer);
     }
-  }
+  },
 };
-
 // Botões de teste - Eles podem ser removidos se não forem necessários
 if (typeof document !== 'undefined') {
   document.getElementById('modal-warning-btn')?.addEventListener('click', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flicker-alerts",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "repository": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
   "homepage": "https://flickeralerts.netlify.app/",
   "description": "Biblioteca para alertas animados",
@@ -18,6 +18,6 @@
   "author": "https://www.linkedin.com/in/bruno-carneiro-9a53aa190/",
   "license": "MIT",
   "dependencies": {
-    "flicker-alerts": "^1.0.83"
+    "flicker-alerts": "^1.0.84"
   }
 }