46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
|
/**
|
||
|
|
* Muestra un toast de aviso cuando se bloquea la navegación
|
||
|
|
* @param {string} message - Mensaje a mostrar
|
||
|
|
* @param {number} duration - Duración en ms (default: 3000)
|
||
|
|
*/
|
||
|
|
export function showBlockedNavigationToast(message = 'Guarda los cambios antes de salir', duration = 3000) {
|
||
|
|
// Eliminar toast existente si hay uno
|
||
|
|
const existingToast = document.querySelector('.blocked-nav-toast');
|
||
|
|
if (existingToast) {
|
||
|
|
existingToast.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
const toast = document.createElement('div');
|
||
|
|
toast.className = 'blocked-nav-toast';
|
||
|
|
|
||
|
|
toast.innerHTML = /*html*/`
|
||
|
|
<div class="blocked-nav-toast-content">
|
||
|
|
<svg class="blocked-nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="10"/>
|
||
|
|
<line x1="12" y1="8" x2="12" y2="12"/>
|
||
|
|
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
||
|
|
</svg>
|
||
|
|
<span class="blocked-nav-message">${message}</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
|
||
|
|
document.body.appendChild(toast);
|
||
|
|
|
||
|
|
// Animar entrada
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
toast.classList.add('visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Auto-cerrar después del tiempo especificado
|
||
|
|
setTimeout(() => {
|
||
|
|
toast.classList.remove('visible');
|
||
|
|
toast.classList.add('hiding');
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
toast.remove();
|
||
|
|
}, 300);
|
||
|
|
}, duration);
|
||
|
|
|
||
|
|
return toast;
|
||
|
|
}
|