73 lines
2.5 KiB
JavaScript
Executable File
73 lines
2.5 KiB
JavaScript
Executable File
// shared/public/js/notifications.js
|
|
|
|
/**
|
|
* Muestra una notificación tipo "toast".
|
|
* @param {string} message El mensaje a mostrar.
|
|
* @param {string} type El tipo de notificación ('success', 'error', 'info').
|
|
* @param {number} duration La duración en milisegundos.
|
|
*/
|
|
function showNotification(message, type = 'info', duration = 3000) {
|
|
// Crear el contenedor de notificaciones si no existe
|
|
let container = document.getElementById('notification-container');
|
|
if (!container) {
|
|
container = document.createElement('div');
|
|
container.id = 'notification-container';
|
|
document.body.appendChild(container);
|
|
|
|
// Añadir estilos al head
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
#notification-container {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.toast-notification {
|
|
padding: 15px 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
color: white;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
font-size: 14px;
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
|
}
|
|
.toast-notification.show {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
.toast-notification.success { background-color: #28a745; }
|
|
.toast-notification.error { background-color: #dc3545; }
|
|
.toast-notification.info { background-color: #17a2b8; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
const notification = document.createElement('div');
|
|
notification.className = `toast-notification ${type}`;
|
|
notification.textContent = message;
|
|
|
|
container.appendChild(notification);
|
|
|
|
// Trigger the animation
|
|
setTimeout(() => {
|
|
notification.classList.add('show');
|
|
}, 10);
|
|
|
|
// Hide and remove the notification after the duration
|
|
setTimeout(() => {
|
|
notification.classList.remove('show');
|
|
setTimeout(() => {
|
|
notification.remove();
|
|
if (container.children.length === 0) {
|
|
container.remove();
|
|
}
|
|
}, 500); // Wait for fade out animation
|
|
}, duration);
|
|
}
|