92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
/**
|
|
* Simple Notification System - Clean and functional
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Notification container
|
|
let notificationContainer = null;
|
|
|
|
// Initialize notification system
|
|
function initNotifications() {
|
|
if (!notificationContainer) {
|
|
notificationContainer = document.createElement('div');
|
|
notificationContainer.id = 'simple-notifications';
|
|
notificationContainer.className = 'fixed top-4 right-4 z-50 space-y-2 max-w-sm';
|
|
document.body.appendChild(notificationContainer);
|
|
}
|
|
}
|
|
|
|
// Show notification
|
|
window.showNotification = function(message, type = 'info', duration = 5000) {
|
|
initNotifications();
|
|
|
|
// Create notification element
|
|
const notification = document.createElement('div');
|
|
notification.className = 'notification-simple notification-enter fade-in';
|
|
|
|
// Icon mapping
|
|
const icons = {
|
|
success: 'fa-check-circle',
|
|
error: 'fa-exclamation-circle',
|
|
warning: 'fa-exclamation-triangle',
|
|
info: 'fa-info-circle'
|
|
};
|
|
|
|
// Build notification HTML
|
|
notification.innerHTML = `
|
|
<div class="notification-content">
|
|
<i class="fas ${icons[type]} notification-icon ${type}"></i>
|
|
<span class="notification-message">${message}</span>
|
|
</div>
|
|
<button class="notification-close" aria-label="Schließen">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
`;
|
|
|
|
// Add to container
|
|
notificationContainer.appendChild(notification);
|
|
|
|
// Animate in
|
|
setTimeout(() => {
|
|
notification.classList.remove('notification-enter');
|
|
notification.classList.add('notification-enter-active');
|
|
}, 10);
|
|
|
|
// Close button handler
|
|
const closeBtn = notification.querySelector('.notification-close');
|
|
closeBtn.addEventListener('click', () => removeNotification(notification));
|
|
|
|
// Auto remove after duration
|
|
if (duration > 0) {
|
|
setTimeout(() => removeNotification(notification), duration);
|
|
}
|
|
|
|
return notification;
|
|
};
|
|
|
|
// Remove notification
|
|
function removeNotification(notification) {
|
|
notification.classList.add('notification-exit');
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.parentNode.removeChild(notification);
|
|
}
|
|
}, 200);
|
|
}
|
|
|
|
// Convenience methods
|
|
window.notifySuccess = (message, duration) => showNotification(message, 'success', duration);
|
|
window.notifyError = (message, duration) => showNotification(message, 'error', duration);
|
|
window.notifyWarning = (message, duration) => showNotification(message, 'warning', duration);
|
|
window.notifyInfo = (message, duration) => showNotification(message, 'info', duration);
|
|
|
|
// Replace existing toast system if present
|
|
if (typeof window.showToast === 'function') {
|
|
window.showToast = function(message, type, duration) {
|
|
showNotification(message, type, duration);
|
|
};
|
|
}
|
|
|
|
})(); |