|
1 | | -document.querySelectorAll('.alert .alert-close').forEach(button => { |
2 | | - button.addEventListener('click', event => { |
3 | | - const alert = button.closest('.alert'); |
4 | | - alert.style.maxHeight = alert.scrollHeight + 'px'; // Set max-height to element's height for smooth collapse |
| 1 | +document.addEventListener('DOMContentLoaded', () => { |
| 2 | + initializeAlerts(document); |
| 3 | +}); |
| 4 | + |
| 5 | +/** |
| 6 | + * Initialize all alerts within a container |
| 7 | + * @param {HTMLElement} container - The container with alerts to initialize |
| 8 | + */ |
| 9 | +function initializeAlerts(container) { |
| 10 | + const alerts = container.querySelectorAll('.kroma-alert'); |
| 11 | + alerts.forEach(alert => initializeAlert(alert)); |
| 12 | +} |
| 13 | + |
| 14 | +/** |
| 15 | + * Initialize a single alert |
| 16 | + * @param {HTMLElement} alert - The alert element |
| 17 | + */ |
| 18 | +function initializeAlert(alert) { |
| 19 | + const iconMap = { |
| 20 | + success: '✔', |
| 21 | + error: '❌', |
| 22 | + warning: '⚠', |
| 23 | + info: 'ℹ', |
| 24 | + }; |
| 25 | + |
| 26 | + // Ensure the icon is present |
| 27 | + let iconElement = alert.querySelector('.kroma-alert-icon'); |
| 28 | + if (!iconElement) { |
| 29 | + iconElement = document.createElement('span'); |
| 30 | + iconElement.classList.add('kroma-alert-icon'); |
| 31 | + iconElement.textContent = alert.dataset.icon || iconMap[alert.dataset.variant] || ''; |
| 32 | + alert.prepend(iconElement); // Insert icon at the beginning |
| 33 | + } |
| 34 | + |
| 35 | + // Ensure the content wrapper is present |
| 36 | + let contentElement = alert.querySelector('.kroma-alert-content'); |
| 37 | + if (!contentElement) { |
| 38 | + contentElement = document.createElement('div'); |
| 39 | + contentElement.classList.add('kroma-alert-content'); |
| 40 | + alert.appendChild(contentElement); |
| 41 | + } |
| 42 | + |
| 43 | + // Ensure the title is present |
| 44 | + if (alert.dataset.title) { |
| 45 | + let titleElement = contentElement.querySelector('.kroma-alert-title'); |
| 46 | + if (!titleElement) { |
| 47 | + titleElement = document.createElement('p'); |
| 48 | + titleElement.classList.add('kroma-alert-title'); |
| 49 | + titleElement.textContent = alert.dataset.title; |
| 50 | + contentElement.appendChild(titleElement); |
| 51 | + } |
| 52 | + } |
| 53 | + |
| 54 | + // Ensure the body is present |
| 55 | + if (alert.dataset.body) { |
| 56 | + let bodyElement = contentElement.querySelector('.kroma-alert-body'); |
| 57 | + if (!bodyElement) { |
| 58 | + bodyElement = document.createElement('p'); |
| 59 | + bodyElement.classList.add('kroma-alert-body'); |
| 60 | + bodyElement.textContent = alert.dataset.body; |
| 61 | + contentElement.appendChild(bodyElement); |
| 62 | + } |
| 63 | + } |
| 64 | + |
| 65 | + // Ensure the close button is present |
| 66 | + let closeButton = alert.querySelector('.kroma-alert-close'); |
| 67 | + if (!closeButton) { |
| 68 | + closeButton = document.createElement('button'); |
| 69 | + closeButton.classList.add('kroma-alert-close'); |
| 70 | + closeButton.setAttribute('aria-label', 'Close alert'); |
| 71 | + closeButton.innerHTML = '×'; |
| 72 | + alert.appendChild(closeButton); |
| 73 | + } |
| 74 | + |
| 75 | + // Add close button functionality |
| 76 | + closeButton.addEventListener('click', () => handleAlertClose(alert)); |
| 77 | +} |
| 78 | + |
| 79 | +/** |
| 80 | + * Handle alert close functionality |
| 81 | + * @param {HTMLElement} alert - The alert to close |
| 82 | + */ |
| 83 | +function handleAlertClose(alert) { |
| 84 | + if (!alert) return; |
| 85 | + |
| 86 | + // Set the initial height for smooth transition |
| 87 | + alert.style.maxHeight = `${alert.scrollHeight}px`; |
| 88 | + |
| 89 | + // Trigger the transition |
| 90 | + requestAnimationFrame(() => { |
5 | 91 | alert.classList.add('fade-out'); |
6 | | - alert.addEventListener('transitionend', () => { |
7 | | - if (alert.parentNode) alert.remove(); |
8 | | - }); |
| 92 | + alert.style.maxHeight = '0'; |
9 | 93 | }); |
10 | | -}); |
| 94 | + |
| 95 | + // Remove the alert after the animation ends |
| 96 | + alert.addEventListener('transitionend', () => { |
| 97 | + if (alert.parentNode) alert.remove(); |
| 98 | + }, { once: true }); |
| 99 | +} |
0 commit comments